/* ==========================================================================
   Generado por Retícula. No editar a mano: se reescribe al publicar.
   Para CSS propio usa assets/css/custom.css del tema, que nunca se toca.
   ========================================================================== */

@layer reset, tokens, base, layout, componentes, utilidades, custom;

@layer tokens {

  :root {
    /* Fuentes */
    --fuente-display: "Fraunces", Georgia, "Times New Roman", serif;
    --fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fuente-dato: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

    /* Color */
    --color-noche: #16100d;
    --color-sombra: #1f1712;
    --color-marfil: #f3ede2;
    --color-ladrillo: #b5432c;
    --color-piedra: #c9b294;
    --color-tenue: rgba(243, 237, 226, 0.58);
    --color-linea: rgba(243, 237, 226, 0.13);
    --color-linea-clara: rgba(22, 16, 13, 0.12);
    --color-texto-claro: rgba(22, 16, 13, 0.74);

    /* Tipografía */
    --paso-peq: clamp(0.833rem, 0.819rem + 0.059vw, 0.872rem);
    --paso-base: clamp(1rem, 0.954rem + 0.19vw, 1.125rem);
    --paso-h3: clamp(1.2rem, 1.107rem + 0.383vw, 1.451rem);
    --paso-h2: clamp(1.44rem, 1.28rem + 0.658vw, 1.872rem);
    --paso-h1: clamp(1.728rem, 1.473rem + 1.047vw, 2.415rem);
    --paso-d1: clamp(2.074rem, 1.687rem + 1.587vw, 3.115rem);
    --paso-d2: clamp(2.488rem, 1.92rem + 2.332vw, 4.019rem);

    /* Ritmo */
    --interlinea-apretada: 1.06;
    --interlinea-normal: 1.62;
    --interlinea-holgada: 1.75;

    /* Espaciado */
    --espacio-2xs: 6px;
    --espacio-xs: 10px;
    --espacio-s: 15px;
    --espacio-m: 24px;
    --espacio-l: 40px;
    --espacio-xl: 62px;
    --espacio-2xl: 100px;

    /* Radios */
    --radio-nulo: 0;
    --radio-xs: 2px;
    --radio-s: 6px;
    --radio-m: 12px;
    --radio-pildora: 999px;

    /* Sombras */
    --sombra-s: 0 1px 2px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.12);
    --sombra-m: 0 2px 6px rgba(0, 0, 0, 0.18), 0 12px 28px rgba(0, 0, 0, 0.22);
    --sombra-l: 0 4px 10px rgba(0, 0, 0, 0.2), 0 30px 60px rgba(0, 0, 0, 0.42);

    /* Retícula y composición */
    --tracking-display: -0.032em;
    --tracking-titulo: -0.02em;
    --tracking-etiqueta: 0.16em;
    --medida: 66ch;
    --columnas: 12;
    --canal: var(--espacio-m);
    --ancho-maximo: 1200px;
    --margen-lateral: clamp(20px, 5vw, 48px);
  }
}

@layer base {

  /* overflow-x: clip y no hidden: hidden crearía un contenedor de scroll
     y rompería position: sticky en toda la página, que es la causa del
     90 % de los «el sticky no me funciona». */
  body {
    overflow-x: clip;
    max-inline-size: 100vw;
  }

  /* Los hijos de una rejilla o de un flex tienen min-width auto por
     defecto, y un texto largo o una imagen los ensancha más allá de su
     celda. Es la causa más común de desbordamiento en CSS moderno. */
  :where([class*="reticula"], [class*="tres"], [class*="cuatro"], [class*="fila"]) > * {
    min-inline-size: 0;
  }

  /* Nada más ancho que su contenedor. */
  :where(img, video, iframe, canvas, svg, table, pre) {
    max-inline-size: 100%;
  }

  /* Una palabra o una URL sin espacios no puede estirar su caja. */
  :where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption, blockquote) {
    overflow-wrap: break-word;
  }
}

@layer componentes {

  @media (prefers-reduced-motion: no-preference) {

    [data-anim].ret-armado {
      opacity: 0;
      will-change: opacity, transform;
    }

    [data-anim].ret-entra {
      animation: ret-anim var(--anim-dur, 600ms) var(--anim-curva, cubic-bezier(.22,.61,.36,1))
        var(--anim-retardo, 0ms) both;
    }

    [data-anim="subir"].ret-armado   { translate: 0 20px; }
    [data-anim="bajar"].ret-armado   { translate: 0 -20px; }
    [data-anim="izquierda"].ret-armado { translate: 24px 0; }
    [data-anim="derecha"].ret-armado { translate: -24px 0; }
    [data-anim="escala"].ret-armado  { scale: .94; }
    [data-anim="fundido"].ret-armado { translate: 0 0; }

    @keyframes ret-anim {
      to { opacity: 1; translate: 0 0; scale: 1; }
    }
  }
}

/* --- Responsive automático (tablet y móvil) ------------------------------- */

/* Tablet: nada de desbordes, y las secciones a media pantalla pasan a entera. */
@media (max-width: 1023px) {
  :where([class*="ret-i-"]) { max-inline-size: 100% !important; }
  .seccion { inline-size: 100% !important; max-inline-size: 100% !important; }
}

/* Móvil: se apila todo, se sueltan los anchos y desplazamientos de escritorio,
   el texto vuelve a una columna y se recortan los márgenes grandes. */
@media (max-width: 767px) {

  /* Los hijos de una rejilla ocupan el ancho entero. */
  :where(.reticula, [class*="tres"], [class*="cuatro"], [class*="fila"]) > * {
    grid-column: 1 / -1 !important;
  }

  /* Las personalizaciones por elemento dejan de imponer medidas de escritorio. */
  :where([class*="ret-i-"]) {
    inline-size: auto !important;
    max-inline-size: 100% !important;
    translate: none !important;
    column-count: 1 !important;
    float: none !important;
  }

  /* Secciones y bandas, a lo ancho y con menos aire vertical. */
  .seccion { inline-size: 100% !important; padding-block: var(--espacio-l, 2rem) !important; }
  .reticula { padding-inline: var(--espacio-m, 1rem) !important; }
}
@layer base {

  .pagina {
    font-family: var(--fuente-texto);
    font-size: var(--paso-base);
    line-height: var(--interlinea-normal);
    color: var(--color-marfil);
    background: var(--color-noche);
    -webkit-font-smoothing: antialiased;
  }

  .pagina a {
    color: var(--color-piedra);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

}

@layer layout {

  .franja {
    padding-inline: var(--margen-lateral);
  }

  .reticula {
    display: grid;
    grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
    gap: var(--canal);
    max-inline-size: var(--ancho-maximo);
    margin-inline: auto;
  }

  .seccion {
    padding-block: var(--espacio-xl);
  }

@media (min-width: 1024px) {
    .seccion {
      padding-block: var(--espacio-2xl);
    }
  }
}

@layer componentes {

  .entradilla {
    font-size: var(--paso-h3);
    line-height: var(--interlinea-holgada);
    color: var(--color-tenue);
    max-inline-size: var(--medida);
    margin-block-start: var(--espacio-m);
  }

  .tarjeta {
    background: var(--color-sombra);
    border: 1px solid var(--color-linea);
    border-radius: var(--radio-s);
    padding: var(--espacio-m);
  }

}

@layer utilidades {

  .saltar {
    position: absolute;
    inset-inline-start: -9999px;
    z-index: 9;
    padding: var(--espacio-s) var(--espacio-m);
    background: var(--color-marfil);
    color: var(--color-noche);
  }

  .saltar:focus-visible {
    inset-inline-start: var(--espacio-s);
    inset-block-start: var(--espacio-s);
  }

  .oculto-visual {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

}

@layer utilidades {

  .ret-i-principal_1 {
    translate: 0px 0px;
  }

  .ret-i-parrafo_tzfl1 {
    align-self: start;
    justify-self: start;
    flex: none;
    max-inline-size: none;
    inline-size: 262px;
    color: #16100d;
    box-sizing: border-box;
    min-block-size: 140px;
    translate: -2.9593353271484375px -28px;
  }

  .ret-i-seccion_tzfl1 {
    background-color: rgba(22, 16, 13, 0.12);
    translate: 0px 0px;
    min-block-size: 588px;
    box-sizing: border-box;
  }

  .ret-i-articulo_8kc61 {
    grid-column: 1 / -1;
    background-color: #b5432c;
    min-block-size: 112px;
    align-self: start;
    justify-self: start;
    flex: none;
    max-inline-size: none;
    inline-size: 353px;
    translate: 188.0102px -7.581939697265625px;
  }

  .ret-i-parrafo_iyzc1 {
    translate: 20.54302978515625px 0px;
  }

  .ret-i-articulo_qmz11 {
    grid-column: 1 / -1;
    background-color: #b5432c;
  }

  .ret-i-articulo_qmz11 { position: relative; }
  .ret-i-articulo_qmz11::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
  }
  .ret-i-articulo_qmz11 > * { position: relative; z-index: 1; }
}

@layer utilidades {

  body.ret-p3127.pagina {
    background-color: rgba(243, 237, 226, 0.13);
  }
}