/* =========================================================================
   Portada pública de donalupita.com  (se publica como /inicio.css)
   -------------------------------------------------------------------------
   Hoja de estilo de UNA sola página: la raíz del sitio. Está aparte de
   `area-de-miembros/css/estilos.css` a propósito —el portal y la portada no
   comparten ni un componente— y aparte de `paginas-de-venta/_comun/css/`
   porque aquella hoja está pensada para páginas largas de venta.

   Se publica en la RAÍZ (`/inicio.css`) y no en `/css/`, que es el espacio de
   la cáscara del portal: ese prefijo está en `Disallow` dentro de robots.txt,
   y un buscador que no puede leer la hoja de estilo de la portada la juzga
   como si no tuviera diseño. La portada sí se indexa.

   Arquitectura (agosto 2026)
   --------------------------
   Cuatro bandas a sangre, apiladas, con el contenido de cada una centrado en
   un contenedor de 1200 px. Los cortes entre bandas son secos (cambio de color
   de canto a canto), no degradados de una a otra. El hero mide una pantalla
   completa; las demás bandas se miden por su relleno vertical.

   Tokens de marca: curso/guia-de-marca.md.
   ========================================================================= */

:root {
  --vino:        #7B2233;   /* el delantal */
  --vino-oscuro: #5A1626;
  --vino-hondo:  #431019;
  --caramelo:    #C98A3F;   /* el dulce de leche */
  --miel:        #E8B673;
  --crema:       #F7F1E7;
  --crema-2:     #EFE5D6;
  --blanco:      #FFFDFA;
  --espresso:    #2E2320;
  --tinta:       #3D302B;
  --tinta-suave: #6B5A53;
  --borde:       #E2D6C4;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Contenedor y ritmo vertical de las bandas. */
  --ancho: 1200px;
  --lado:  clamp(1.25rem, 4vw, 2.5rem);
  --ritmo: clamp(3.4rem, 7vw, 5.5rem);

  /* Alto de la barra de marca. El hero lo descuenta con un margen negativo
     para que su banda de color empiece arriba del todo, y el retrato lo vuelve
     a descontar para sangrar por detrás de la barra. */
  --barra-pad: clamp(1.1rem, 2.4vw, 1.9rem);
  --barra-alto: calc(var(--barra-pad) + 44px);
  --hero-aire: clamp(2rem, 5vh, 3.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--espresso);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }

a { color: var(--vino); }

:focus-visible {
  outline: 3px solid var(--caramelo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Contenedor único: todas las bandas centran su contenido aquí dentro. */
.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--lado);
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--vino);
  color: #FFF6EC;
  padding: 10px 16px;
}
.saltar:focus { left: 8px; top: 8px; }

/* ================================================================ 1/4 barra

   No tiene fondo propio: se apoya sobre el degradado del hero, dentro del
   mismo contenedor, para que la marca quede alineada con el titular de abajo.
   Por eso el hero descuenta su altura con un margen negativo. */

.barra {
  position: relative;
  z-index: 5;
  padding: var(--barra-pad) 0 0;
  background: transparent;
}

.barra-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  min-width: 0;
}

.marca img {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 56% 14%;
  border: 2px solid rgba(232, 182, 115, .7);
}

.marca span {
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.15;
  color: #FFF6EC;
}

.marca b {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(232, 182, 115, .92);
}

/* ------------------------------------------------------------------ el botón

   Único elemento interactivo de la página, y sigue siendo un enlace normal a
   `/acceso`: sin JavaScript, sin estado y sin nada que pueda fallar. Antes iba
   fijo en la esquina; ahora vive en la barra, enfrentado a la marca, que es
   donde se busca una puerta de entrada. */

.acceso-esquina {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .58rem;
  padding: .68rem 1.25rem .7rem 1.1rem;

  font: 700 .95rem/1 var(--sans);
  letter-spacing: .02em;
  color: var(--crema);
  text-decoration: none;

  border: 1px solid rgba(232, 182, 115, .55);
  border-radius: 999px;
  background: rgba(67, 16, 25, .46);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
  backdrop-filter: blur(9px) saturate(1.15);
  box-shadow: 0 8px 26px rgba(30, 8, 14, .28);

  transition: background .22s ease, border-color .22s ease,
              color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.acceso-esquina svg { width: 18px; height: 18px; flex: none; }

.acceso-esquina:hover,
.acceso-esquina:focus-visible {
  background: var(--miel);
  border-color: var(--miel);
  color: var(--espresso);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(30, 8, 14, .42);
}

.acceso-esquina:focus-visible {
  outline: 3px solid var(--crema);
  outline-offset: 3px;
}

.acceso-esquina:active { transform: translateY(0); }

/* ================================================================= 2/4 hero

   Banda de color a sangre que ocupa una pantalla completa (descontando la
   barra, que va encima). En pantalla ancha son dos columnas de la misma
   anchura; el retrato se ancla al borde INFERIOR de la banda en vez de
   centrarse en su celda, para que la figura se apoye en el corte de color.

   En móvil hay una sola columna y el retrato pasa a ser fondo de pantalla
   completa con un velo de vino que asegura la lectura del texto. */

.escena {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(-1 * var(--barra-alto));
  padding-top: var(--barra-alto);
  display: flex;
  overflow: hidden;
  color: var(--crema);
  background-color: var(--vino-oscuro);
  background-image:
    radial-gradient(115% 85% at 76% 12%, rgba(201, 138, 63, .34), rgba(201, 138, 63, 0) 60%),
    linear-gradient(158deg, var(--vino) 0%, var(--vino-oscuro) 55%, var(--vino-hondo) 100%);
  background-repeat: no-repeat;
}

.escena-fila {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding-top: var(--hero-aire);
  padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
}

.palabra {
  position: relative;
  z-index: 2;
  max-width: 34rem;
}

.antetitulo {
  margin: 0 0 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--miel);
}

.antetitulo::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: rgba(232, 182, 115, .7);
}

.escena h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(3.1rem, 8.2vw, 5.6rem);
  line-height: .96;
  letter-spacing: -.015em;
  color: var(--crema);
  text-shadow: 0 2px 18px rgba(40, 10, 18, .45);
}

.escena h1 span {
  display: block;
  margin-top: 1.05rem;
  font-family: var(--sans);
  font-size: clamp(.72rem, 1.5vw, .88rem);
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--miel);
  text-shadow: none;
}

.lema {
  margin: 0 0 1.9rem;
  max-width: 30ch;
  font-size: clamp(1.04rem, 1.35vw, 1.24rem);
  line-height: 1.62;
  color: rgba(247, 241, 231, .93);
  text-shadow: 0 1px 12px rgba(40, 10, 18, .45);
}

/* Las 4 P: el método propio de la marca, en cuatro fichas sobrias. */
.cuatro-p {
  margin: 0 0 2.1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.cuatro-p li {
  padding: .42rem .95rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 241, 231, .92);
  border: 1px solid rgba(232, 182, 115, .38);
  border-radius: 999px;
  background: rgba(67, 16, 25, .3);
}

.firma {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--miel);
}

/* ----------------------------------------------------------------- retrato

   Móvil primero: la foto ocupa la banda entera por detrás del texto, y un velo
   de vino de abajo hacia arriba garantiza el contraste de lectura. */

.retrato {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 8%;
}

.retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      var(--vino-hondo) 0%,
      rgba(67, 16, 25, .96) 30%,
      rgba(90, 22, 38, .74) 50%,
      rgba(123, 34, 51, .30) 74%,
      rgba(123, 34, 51, .10) 100%);
}

/* ============================================================ 3/4 y 4/4 bandas

   Bandas de contenido: color de canto a canto, contenido en el contenedor. */

.franja        { padding: var(--ritmo) 0; background: var(--crema); }
.franja.blanca { background: var(--blanco); }

/* Título de sección: centrado, con un filete corto debajo y una entradilla de
   ancho limitado. Es el patrón que abre cada banda. */

.titulo-seccion { text-align: center; }

.titulo-seccion h2 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  margin-bottom: 0;
}

.titulo-seccion h2::after {
  content: "";
  display: block;
  width: 200px;
  max-width: 60%;
  height: 2px;
  margin: .7em auto .8em;
  background: var(--caramelo);
}

.entradilla {
  font-size: clamp(1.02rem, 2.1vw, 1.16rem);
  color: var(--tinta-suave);
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* Caja de introducción: ocupa el ancho del contenedor, fondo cálido y esquinas
   redondeadas. Separa el título de la rejilla de fichas. */

.caja-intro {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.6rem);
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: 18px;
  font-size: 1.04rem;
}

.franja .caja-intro { background: var(--crema-2); }
.caja-intro p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ fichas */

.rejilla {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 2rem);
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
}
.rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ficha {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 1.6rem 1.5rem 1.7rem;
  box-shadow: 0 2px 14px rgba(46, 35, 32, .08);
}

/* Imagen de la ficha: el retrato de Doña Lupita con el producto de la página a
   la que lleva la tarjeta. Las tres vienen recortadas a 3:2, la misma
   proporción que se le pide aquí a la caja, así que se ven enteras y no hay que
   decidir qué parte de la escena se pierde. La caja manda por proporción y no
   por una altura fija: en una sola columna la ficha es mucho más ancha que en
   tres, y con altura fija la imagen quedaría reducida a una franja. El fondo
   vino se queda debajo para que el hueco no parpadee en blanco mientras la
   imagen carga. */
.ficha-medio {
  aspect-ratio: 3 / 2;
  margin-bottom: 1.3rem;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 22% 10%, rgba(232, 182, 115, .45), rgba(232, 182, 115, 0) 62%),
    linear-gradient(150deg, var(--vino) 0%, var(--vino-oscuro) 100%);
}

.ficha-medio img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ficha h3 { font-size: 1.28rem; margin-bottom: .45em; }
.ficha p  { color: var(--tinta-suave); }
.ficha p:last-of-type { flex: 1; }

/* ------------------------------------------------------------------ botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  padding: 15px 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  transition: transform .12s ease, box-shadow .18s ease,
              background .18s ease, color .18s ease;
}

.boton-cta {
  background: linear-gradient(160deg, var(--caramelo), #B0742E);
  color: #23180F;
  box-shadow: 0 8px 24px rgba(176, 116, 46, .34);
}
.boton-cta:hover  { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(176, 116, 46, .44); }

.boton-borde {
  background: transparent;
  color: var(--vino);
  border-color: var(--vino);
}
.boton-borde:hover { background: var(--vino); color: #FFF6EC; transform: translateY(-2px); }

.boton:active { transform: translateY(0); }

/* --------------------------------------------------------- 4/4 sobre + pie */

.sobre-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: center;
}

.sobre-fila h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

.datos {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: grid;
  gap: .55rem;
  font-size: .99rem;
  color: var(--tinta-suave);
}

.datos strong { color: var(--espresso); }

.firma-larga {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--vino);
  font-size: 1.1rem;
}

.sobre-imagen { margin: 0; }

/* El retrato de esta banda es vertical (440 × 589), así que el marco es
   vertical también: con el 4/3 de antes había que recortar media fotografía
   para que cupiera, y se perdía o la cara o la tabla de brownies. */
.sobre-imagen img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: 18px;
  border: 5px solid var(--blanco);
  box-shadow: 0 12px 38px rgba(46, 35, 32, .16);
}

.pie {
  background: var(--espresso);
  color: rgba(247, 241, 231, .72);
  padding: clamp(1.8rem, 3.5vw, 2.6rem) 0;
  font-size: .88rem;
  line-height: 1.6;
}

.pie a { color: var(--miel); }

.pie-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  text-align: center;
}

.pie-fila p { margin: 0; }

.pie-marca {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: #FFF6EC;
}
.pie-marca span {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(232, 182, 115, .85);
}

.pie-legal { font-size: .8rem; color: rgba(247, 241, 231, .5); }

/* Segunda fila del pie: los tres documentos legales. Va debajo de `.pie-fila`
   y no dentro, porque esa rejilla son cuatro columnas de igual ancho y una
   quinta celda con tres enlaces las apretaría todas. Centrada en móvil y
   alineada a la izquierda en pantalla ancha, igual que el resto del pie. */
.pie-legales {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(247, 241, 231, .14);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.4rem;
  font-size: .8rem;
}

/* =============================================================== respuestas */

/* En un móvil estrecho el antetítulo no cabe en una línea con el interletraje
   ancho: se aprieta un poco antes que partirlo en dos y dejar la rayita
   colgando junto a la primera mitad. */
@media (max-width: 480px) {
  .antetitulo {
    font-size: .62rem;
    letter-spacing: .11em;
    gap: .6rem;
  }
  .antetitulo::before { width: 1.7rem; }

  .marca b { display: none; }
  .acceso-esquina { padding: .6rem 1rem .62rem .85rem; font-size: .88rem; }
}

@media (max-width: 899px) {
  /* El texto del hero se apoya en la parte baja de la banda, encima de la zona
     más oscura del velo del retrato. */
  .escena-fila { align-content: end; }
  .lema { max-width: 34ch; }
  /* Una sola columna, pero la ficha no se estira hasta el borde: se queda en un
     ancho de lectura y centrada. Estirada, la imagen de arriba se convertiría
     en una franja larguísima y el texto en renglones de lado a lado. */
  .rejilla.tres { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rejilla.tres .ficha { width: 100%; max-width: 30rem; }
}

/* ------------------------------------------------- pantalla ancha (dos lados) */

@media (min-width: 900px) {
  .escena-fila {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: stretch;
    align-items: center;
    padding-bottom: 0;
  }

  .palabra { max-width: 32rem; align-self: center; }

  /* El retrato deja de ser fondo y pasa a ser la segunda columna: llega al
     borde inferior de la banda y sangra hacia la derecha hasta el canto de la
     ventana, no hasta el borde del contenedor. */
  .retrato {
    position: relative;
    inset: auto;
    align-self: stretch;
    /* Sube por detrás de la barra y del aire superior del hero, y sangra hacia
       la derecha hasta el canto de la ventana (no hasta el del contenedor). */
    margin-top: calc(-1 * (var(--barra-alto) + var(--hero-aire)));
    margin-right: calc(-1 * (var(--lado) + max(0px, (100vw - var(--ancho)) / 2)));
  }

  .retrato img { height: 100%; object-position: 56% 12%; }

  /* La foto se desvanece hacia la izquierda para fundirse con el fondo vino en
     vez de terminar en un borde recto: así la banda se lee como una sola
     escena y no como «texto | foto». */
  .retrato {
    -webkit-mask-image: linear-gradient(100deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .28) 14%, rgba(0, 0, 0, .85) 30%, #000 46%);
    mask-image: linear-gradient(100deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .28) 14%, rgba(0, 0, 0, .85) 30%, #000 46%);
  }

  /* En pantalla ancha el texto no se apoya sobre la foto, así que el velo sólo
     tiene que asentar la base de la imagen en el fondo vino: mucho más suave
     que en móvil, para que la cara de Doña Lupita se vea como es. */
  .retrato::after {
    background:
      linear-gradient(to top,
        rgba(67, 16, 25, .82) 0%,
        rgba(90, 22, 38, .28) 24%,
        rgba(123, 34, 51, .06) 56%,
        rgba(123, 34, 51, 0) 100%);
  }

  .sobre-fila { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }

  .pie-fila {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    text-align: left;
  }
  .pie-legal { text-align: right; }
  .pie-legales { justify-content: flex-start; }
}

/* --------------------------------------------------------------- entrada

   Un fundido corto, sin movimiento brusco. Sólo en el hero: el resto de la
   página aparece ya colocado, porque animar al hacer scroll pediría
   JavaScript y esta página no lleva ninguno. Quien pide menos animación no ve
   nada de esto. */

@media (prefers-reduced-motion: no-preference) {
  .palabra > * {
    animation: asomar .7s cubic-bezier(.22, .7, .3, 1) both;
  }
  .antetitulo { animation-delay: .04s; }
  .escena h1  { animation-delay: .10s; }
  .lema       { animation-delay: .18s; }
  .cuatro-p   { animation-delay: .26s; }
  .firma      { animation-delay: .34s; }
  .barra-fila { animation: asomar .7s .42s cubic-bezier(.22, .7, .3, 1) both; }

  @keyframes asomar {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Pantallas muy bajas (móvil en horizontal): que nada quede cortado. */
@media (max-height: 520px) {
  .escena { min-height: 0; }
  .escena-fila { padding-top: 1.5rem; }
  .escena h1 { font-size: clamp(2.2rem, 6vw, 3rem); }
  .lema { margin-bottom: 1.2rem; }
  .cuatro-p { margin-bottom: 1.2rem; }
}