/* =========================================================================
   Páginas públicas de Doña Lupita — hoja de estilo común
   -------------------------------------------------------------------------
   Escrita desde cero para este proyecto. Reutiliza los mismos tokens de
   marca que la área de miembros (area-de-miembros/css/estilos.css): vino,
   caramelo, crema, café espresso, Playfair Display + Nunito.

   Estas páginas son PÚBLICAS: no hay contenido pagado dentro, no hacen
   ninguna llamada al backend y no guardan nada del visitante.
   ========================================================================= */

:root {
  --vino:        #7B2233;
  --vino-oscuro: #5A1626;
  --vino-claro:  #9C3448;
  --caramelo:    #C98A3F;
  --miel:        #E8B673;
  --crema:       #F7F1E7;
  --crema-2:     #EFE5D6;
  --espresso:    #2E2320;
  --tinta:       #3D302B;
  --tinta-suave: #6B5A53;
  --oliva:       #6B8F4E;
  --blanco:      #FFFDFA;
  --borde:       #E2D6C4;

  --sombra:        0 2px 14px rgba(46, 35, 32, .09);
  --sombra-fuerte: 0 12px 38px rgba(46, 35, 32, .18);
  --radio:   14px;
  --radio-g: 22px;

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

  /* Contenedor. 1200 px es la medida en la que están pensadas las rejillas de
     tres fichas de estas páginas: da columnas de ~380 px, que es donde una
     ficha con título, cuatro líneas de texto y un botón deja de apretarse. */
  --ancho: 1200px;
  --ancho-texto: 720px;

  /* Ritmo vertical de las bandas. Arriba menos que abajo, para que el título
     de cada bloque quede más cerca del corte de color de arriba que del
     siguiente bloque: así se lee «título + su contenido» y no «contenido
     suelto entre dos títulos». */
  --ritmo-arriba: clamp(52px, 7vw, 80px);
  --ritmo-abajo:  clamp(60px, 8vw, 100px);
}

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

html { scroll-behavior: smooth; -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-wrap: break-word;
}

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

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

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

h1 { font-size: clamp(2rem, 5.2vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.8vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

p { margin: 0 0 1.1em; }

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

/* ------------------------------------------------------------ estructura */

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 22px;
}

.envoltura.angosta { max-width: var(--ancho-texto); }

.bloque      { padding: var(--ritmo-arriba) 0 var(--ritmo-abajo); }
.bloque.apretado { padding: clamp(34px, 5vw, 56px) 0; }

.bloque.crema  { background: var(--crema-2); }
.bloque.blanco { background: var(--blanco); }

.bloque.vino {
  background: linear-gradient(165deg, var(--vino) 0%, var(--vino-oscuro) 100%);
  color: #F4E4D6;
}
.bloque.vino h1, .bloque.vino h2, .bloque.vino h3 { color: #FFF6EC; }
.bloque.vino a { color: var(--miel); }

.centrado { text-align: center; }

/* ------------------------------------------------- título de sección

   Patrón de apertura de banda: el título va SOLO en su propia fila, centrado,
   con un filete corto debajo y una entradilla de ancho limitado. El contenido
   de la banda empieza en la fila siguiente, separado por el margen de abajo.
   Antes cada bloque abría con un `.centrado` suelto y el aire entre título y
   contenido lo ponía cada página a mano. */

.titulo-seccion {
  text-align: center;
  margin-bottom: clamp(30px, 4.5vw, 52px);
}

.titulo-seccion > *:last-child { margin-bottom: 0; }

.titulo-seccion h1,
.titulo-seccion h2 { margin-bottom: 0; }

.titulo-seccion h1::after,
.titulo-seccion h2::after {
  content: "";
  display: block;
  width: 220px;
  max-width: 55%;
  height: 2px;
  margin: .62em auto .7em;
  background: var(--caramelo);
}

.bloque.vino .titulo-seccion h2::after { background: var(--miel); }

/* Caja de introducción a todo el ancho del contenedor: sirve de puente entre
   el título de la banda y la rejilla de fichas de abajo. */

.caja-intro {
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  font-size: 1.03rem;
}
.bloque.crema .caja-intro { background: var(--blanco); }
.bloque.vino  .caja-intro {
  background: rgba(255, 253, 250, .07);
  border-color: rgba(232, 182, 115, .28);
}
.caja-intro > *:last-child { margin-bottom: 0; }

/* Banda de anuncio: bloque corto, de un solo color plano y sin fichas, que
   nombra la oferta antes de entrar en el detalle. Rompe el ritmo de bandas
   claras y marca «aquí empieza la parte del producto». */

.banda-anuncio {
  background: var(--vino);
  color: #FFF3E6;
  padding: clamp(38px, 5.5vw, 66px) 0;
  text-align: center;
}
.banda-anuncio h2 { color: #FFF6EC; }
.banda-anuncio .antetitulo { color: var(--miel); }
.banda-anuncio .entradilla {
  color: rgba(255, 243, 230, .9);
  margin-left: auto;
  margin-right: auto;
}
.banda-anuncio a { color: var(--miel); }

.antetitulo {
  font-family: var(--sans);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--caramelo);
  margin: 0 0 .8em;
}

.bloque.vino .antetitulo { color: var(--miel); }

.entradilla {
  font-size: clamp(1.02rem, 2.1vw, 1.18rem);
  color: var(--tinta-suave);
  max-width: 62ch;
}
.centrado .entradilla { margin-left: auto; margin-right: auto; }
.bloque.vino .entradilla { color: rgba(244, 228, 214, .88); }

/* ------------------------------------------------- aviso de vista previa */
/* Se muestra sólo mientras el enlace de pago siga siendo el marcador de
   posición. Lo enciende _comun/js/oferta.js. Cuando se configure el enlace
   real del proveedor de pago, desaparece solo. */

.aviso-previa {
  display: none;
  background: repeating-linear-gradient(135deg,
              #3A2C27, #3A2C27 14px, #45352F 14px, #45352F 28px);
  color: #FFE9CC;
  font-size: .84rem;
  line-height: 1.5;
  text-align: center;
  padding: 9px 16px;
  letter-spacing: .01em;
}
.aviso-previa.visible { display: block; }
.aviso-previa strong { color: var(--miel); }

/* -------------------------------------------------------------- cabecera */

.cabecera {
  background: var(--vino-oscuro);
  color: #F6E8DC;
  padding: 12px 0;
}

.cabecera .envoltura {
  display: flex;
  align-items: center;
  gap: 13px;
  justify-content: center;
}

.cabecera img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(232, 182, 115, .75);
  flex: none;
}

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

.cabecera .marca span {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(232, 182, 115, .9);
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  background:
    radial-gradient(1100px 560px at 10% -12%, rgba(201, 138, 63, .26), transparent 62%),
    radial-gradient(900px 520px at 94% 112%, rgba(123, 34, 51, .16), transparent 60%),
    var(--crema);
  padding: clamp(44px, 7vw, 78px) 0 clamp(40px, 6vw, 68px);
}

/* --------------------------------------------------- hero como BANDA de color

   Variante `<section class="hero banda">`. El hero deja de ser un fondo crema
   con una foto enmarcada flotando y pasa a ser una banda de color a sangre,
   con el retrato ocupando su columna entera y apoyado en el corte de color de
   abajo. Es el arranque habitual de una página de venta larga: la primera
   pantalla es una unidad de color y las siguientes son claras.

   El relleno inferior se anula porque la figura llega hasta el canto. */

.hero.banda {
  padding: 0;
  color: #F4E4D6;
  background:
    radial-gradient(1000px 620px at 82% 8%, rgba(201, 138, 63, .30), transparent 62%),
    linear-gradient(158deg, var(--vino) 0%, var(--vino-oscuro) 58%, #431019 100%);
  overflow: hidden;
}

.hero.banda h1,
.hero.banda h2 { color: #FFF6EC; }
.hero.banda .antetitulo  { color: var(--miel); }
.hero.banda .entradilla  { color: rgba(244, 228, 214, .9); }
.hero.banda .bajo-boton  { color: rgba(244, 228, 214, .78); }
.hero.banda a            { color: var(--miel); }
.hero.banda .lista-marca li::before { background: var(--miel); }
.hero.banda .lista-marca li::after  { border-color: var(--vino-oscuro); }

/* La fila del hero-banda es la ÚNICA del sitio que no se detiene en el ancho
   del contenedor: se estira hasta el canto derecho de la ventana para que el
   retrato llegue al borde de la pantalla. La columna de texto se sigue
   alineando con el resto de la página gracias al relleno izquierdo calculado,
   que usa porcentajes (no `vw`) para no contar la barra de desplazamiento y
   quedar desalineada con las secciones de abajo por unos píxeles. */
.hero.banda .hero-rejilla {
  align-items: stretch;
  gap: clamp(24px, 3vw, 44px);
  max-width: none;
  padding-left: max(22px, calc((100% - var(--ancho)) / 2 + 22px));
  padding-right: 0;
}

/* La variante de una sola columna no sangra: su texto va centrado y necesita
   los dos márgenes iguales. */
.hero.banda .hero-rejilla.sola {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-left: 22px;
  padding-right: 22px;
}

.hero.banda .hero-rejilla > div:first-child {
  align-self: center;
  padding: clamp(44px, 6vw, 74px) 0;
}

.hero.banda .hero-rejilla.sola > div:first-child {
  padding: clamp(52px, 7vw, 88px) 0;
}

/* Retrato del hero-banda: sin marco blanco ni sombra, ocupando su columna
   entera y apoyado en el corte de color de abajo. */
.hero.banda .hero-retrato {
  align-self: end;
  justify-self: stretch;
  max-width: none;
  margin: clamp(28px, 4vw, 48px) 0 0;
}

.hero.banda .hero-retrato img {
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: cover;
  object-position: 56% 10%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(100deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 14%, rgba(0, 0, 0, .88) 32%, #000 48%);
  mask-image: linear-gradient(100deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 14%, rgba(0, 0, 0, .88) 32%, #000 48%);
}

.hero.banda .hero-retrato .sello {
  bottom: 18px;
  left: auto;
  right: clamp(18px, 4vw, 60px);
  transform: none;
  background: rgba(67, 16, 25, .72);
  border: 1px solid rgba(232, 182, 115, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}

.hero-rejilla.sola { grid-template-columns: 1fr; text-align: center; }
.hero-rejilla.sola .entradilla { margin-left: auto; margin-right: auto; }
.hero-rejilla.sola .lista-marca { max-width: 34rem; margin-inline: auto; text-align: left; }

.hero-retrato {
  position: relative;
  justify-self: center;
  max-width: 380px;
  width: 100%;
}

.hero-retrato img {
  width: 100%;
  border-radius: var(--radio-g);
  border: 5px solid var(--blanco);
  box-shadow: var(--sombra-fuerte);
}

.hero-retrato .sello {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vino);
  color: #FFF6EC;
  font-family: var(--serif);
  font-size: .95rem;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: var(--sombra);
  white-space: nowrap;
}

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: clamp(1rem, 2.1vw, 1.12rem);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  padding: 17px 34px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}

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

.boton-vino {
  background: var(--vino);
  color: #FFF6EC;
  box-shadow: 0 8px 24px rgba(123, 34, 51, .32);
}
.boton-vino:hover { background: var(--vino-claro); transform: translateY(-2px); }

.boton-borde {
  background: transparent;
  color: var(--vino);
  border: 2px solid var(--vino);
  padding: 15px 32px;
}
.boton-borde:hover { background: var(--vino); color: #FFF6EC; }

.boton.ancho { width: 100%; }

.zona-cta {
  margin: 26px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}
.centrado .zona-cta, .hero-rejilla.sola .zona-cta { align-items: center; }

.bajo-boton {
  font-size: .87rem;
  color: var(--tinta-suave);
  margin: 0;
}
.bloque.vino .bajo-boton { color: rgba(244, 228, 214, .78); }

.rechazo {
  display: inline-block;
  margin-top: 6px;
  font-size: .92rem;
  color: var(--tinta-suave);
  text-decoration: underline;
}
.rechazo:hover { color: var(--vino); }

/* --------------------------------------------------------------- listas */

.lista-marca {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 11px;
}

.lista-marca li {
  position: relative;
  padding-left: 34px;
  line-height: 1.6;
}

.lista-marca li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--oliva);
  /* palomita dibujada con un degradado cónico: sin imágenes externas */
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}

.lista-marca li::after {
  content: "";
  position: absolute;
  left: 6px; top: calc(.42em + 5px);
  width: 5px; height: 9px;
  border: solid #FFF;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(42deg);
}

.bloque.vino .lista-marca li::before { background: var(--miel); }
.bloque.vino .lista-marca li::after  { border-color: var(--vino-oscuro); }

.lista-cruz li::before { background: var(--vino-claro); }
.lista-cruz li::after {
  left: 6.5px; top: calc(.42em + 5.5px);
  width: 8px; height: 0;
  border-width: 0 0 2.2px 0;
  transform: rotate(0deg);
}

/* -------------------------------------------------------------- tarjetas */

.rejilla {
  display: grid;
  gap: 20px;
  margin-top: 34px;
}
.rejilla.dos  { grid-template-columns: repeat(2, 1fr); }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
.rejilla.cuatro { grid-template-columns: repeat(4, 1fr); }

.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px 24px;
  box-shadow: var(--sombra);
}

.tarjeta h3 { margin-bottom: .35em; }
.tarjeta p:last-child { margin-bottom: 0; }

/* Ficha con cabecera propia: un panel de marca arriba, dentro de la ficha y
   con su propio redondeo, y debajo título, texto y —si la ficha lleva— su
   botón, empujado al pie para que todos los botones de la fila queden
   alineados aunque los textos midan distinto.

   No hay fotografía de producto para cada ficha y no se inventa ninguna: el
   hueco lo ocupa el panel con una inicial en serif. Si algún día hay fotos
   propias, sustituyen al panel con la misma proporción y el mismo redondeo. */

.tarjeta .medio {
  height: 132px;
  margin: -4px 0 18px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  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%);
}

.tarjeta .medio span {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--miel);
}

.bloque.vino .tarjeta .medio {
  background: rgba(232, 182, 115, .14);
  border: 1px solid rgba(232, 182, 115, .28);
}

/* Botón al pie de la ficha. `margin-top:auto` es lo que alinea la fila: todos
   los botones quedan a la misma altura aunque los textos midan distinto. */
.tarjeta .boton {
  margin-top: auto;
  align-self: stretch;
  padding: 13px 24px;
  font-size: 1rem;
}
/* El texto que va justo encima del botón conserva su margen inferior aunque
   sea el último párrafo de la ficha, para que no se peguen. */
.tarjeta p:has(+ .boton) { margin-bottom: 22px; }

.tarjeta .numero {
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--caramelo);
  display: block;
  margin-bottom: 10px;
}

.bloque.vino .tarjeta {
  background: rgba(255, 253, 250, .07);
  border-color: rgba(232, 182, 115, .28);
  color: rgba(244, 228, 214, .92);
  box-shadow: none;
}

/* --------------------------------------------------------- prueba social

   Banda de testimonios. Ocupa el hueco que una página de venta larga reserva
   para las voces de quien ya compró, y que aquí está VACÍO A PROPÓSITO: no hay
   alumnas todavía, así que cada ficha lleva un marco rotulado («Imagen 1»,
   «Imagen 2»…) y un texto entre corchetes que se ve a la legua que es un
   hueco por rellenar. Nada de nombres, caras ni frases inventadas: cuando
   haya testimonios reales se sustituye el marco por la foto y el corchete por
   la cita, sin tocar la maquetación. */

.testimonios { margin-top: 34px; }

.testimonio { gap: 0; }

/* Marco del retrato pendiente. Mismo degradado de marca que `.tarjeta .medio`,
   pero con borde discontinuo y rótulo en versalitas: se lee como una casilla
   vacía, no como una ilustración terminada. */
.hueco-foto {
  height: 168px;
  margin: -4px 0 18px;
  border-radius: 12px;
  border: 2px dashed rgba(232, 182, 115, .55);
  display: grid;
  place-content: center;
  background:
    radial-gradient(120% 120% at 22% 10%, rgba(232, 182, 115, .40), rgba(232, 182, 115, 0) 62%),
    linear-gradient(150deg, var(--vino) 0%, var(--vino-oscuro) 100%);
}

.hueco-foto span {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--miel);
}

.testimonio blockquote {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--espresso);
}

.testimonio .quien {
  margin: auto 0 0;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.bloque.vino .testimonio blockquote { color: #FFF6EC; }
.bloque.vino .testimonio .quien     { color: rgba(244, 228, 214, .75); }

/* Sobre banda de vino, el marco vacío no puede seguir siendo un degradado de
   vino: se comería contra el fondo y la casilla dejaría de leerse. Se aclara
   el relleno y se sube el contraste del borde discontinuo para que siga
   viéndose como un hueco por rellenar. */
.bloque.vino .hueco-foto {
  border-color: rgba(232, 182, 115, .75);
  background:
    radial-gradient(120% 120% at 22% 10%, rgba(232, 182, 115, .30), rgba(232, 182, 115, 0) 62%),
    rgba(255, 253, 250, .10);
}

/* ------------------------------------------- capturas de testimonio reales

   Lo de arriba es el hueco por rellenar, que siguen usando las páginas que
   todavía no tienen alumnas. La página del curso ya las tiene, y sus mensajes
   se enseñan como lo que son: capturas del chat, sin transcribir y sin
   retocar. Una transcripción se puede escribir de cero; un pantallazo con su
   hora, su foto y sus emojis, no, y por eso convence más.

   La ficha conserva el borde, el redondeo y la sombra del resto de tarjetas,
   pero baja el relleno a 10 px: aquí el contenido es la imagen, así que el
   marco tiene que leerse como un portarretratos y no como una ficha de texto
   con aire de sobra. */

.capturas { align-items: start; }

.capturas .tarjeta { padding: 10px; }

.capturas img {
  width: 100%;
  height: auto;
  border-radius: 9px;
}

/* Aviso al pie de la rejilla: explica en una línea por qué está vacía. */
.aviso-hueco {
  margin: 22px 0 0;
  text-align: center;
  font-size: .87rem;
  color: var(--tinta-suave);
}

/* El gris de `--tinta-suave` es ilegible sobre vino: sobre banda oscura el
   aviso usa el crema translúcido del resto de la banda. */
.bloque.vino .aviso-hueco { color: rgba(244, 228, 214, .78); }

/* --------------------------------------------------- ingreso extra (cifra)

   Bloque de proyección: la cifra grande a la izquierda y de qué sale a la
   derecha. La cifra que aparece aquí es un objetivo de cálculo real —el mismo
   ejemplo con el que abre el Manual de Costos y Precios del módulo 14—, no un
   resultado garantizado, y el propio texto lo dice. */

.cuenta-extra {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--caramelo);
  border-radius: var(--radio);
  padding: 28px 32px;
  max-width: 880px;
  margin: 0 auto;
}

.cuenta-extra .cifra { margin: 0; text-align: center; }

.cuenta-extra .monto {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 3.5rem);
  line-height: 1;
  color: var(--vino);
}

.cuenta-extra .periodo {
  display: block;
  margin-top: 8px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.cuenta-extra > div:last-child > *:last-child { margin-bottom: 0; }

.bloque.vino .cuenta-extra {
  background: rgba(255, 253, 250, .07);
  border-color: rgba(232, 182, 115, .28);
  border-left-color: var(--miel);
  color: rgba(244, 228, 214, .92);
}
.bloque.vino .cuenta-extra .monto   { color: var(--miel); }
.bloque.vino .cuenta-extra .periodo { color: rgba(244, 228, 214, .75); }

/* -------------------------------------------------- las 4 P (método) */

.cuatro-p {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 34px;
}

.p-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--caramelo);
  border-radius: var(--radio);
  padding: 24px 20px;
  text-align: center;
}

.p-tarjeta .inicial {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--vino);
  display: block;
}

.p-tarjeta h3 { font-size: 1.1rem; margin: 10px 0 6px; }
.p-tarjeta p  { font-size: .93rem; color: var(--tinta-suave); margin: 0; }

/* ------------------------------------------------------ temario / módulos */

.temario {
  margin-top: 34px;
  display: grid;
  gap: 14px;
}

.temario details {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.temario summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 22px;
  position: relative;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--espresso);
  font-weight: 700;
}

.temario summary::-webkit-details-marker { display: none; }

.temario summary::after {
  content: "+";
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--caramelo);
  line-height: 1;
}

.temario details[open] summary::after { content: "\2212"; }
.temario summary:hover { background: var(--crema); }

.temario .cuerpo {
  padding: 0 22px 20px;
  border-top: 1px solid var(--borde);
  padding-top: 16px;
}

.temario .cuerpo ul { margin: 0; padding-left: 20px; }
.temario .cuerpo li { margin-bottom: 6px; }

.temario .bloque-nombre {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--caramelo);
  margin: 22px 0 -2px;
}
.temario .bloque-nombre:first-child { margin-top: 0; }

/* ------------------------------------------------------ caja de la oferta */

.caja-oferta {
  background: var(--blanco);
  border: 2px solid var(--caramelo);
  border-radius: var(--radio-g);
  padding: clamp(28px, 4vw, 44px);
  max-width: 620px;
  margin: 34px auto 0;
  box-shadow: var(--sombra-fuerte);
  text-align: center;
}

.caja-oferta h3 { font-size: 1.5rem; margin-bottom: .4em; }

.caja-oferta .incluye {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  text-align: left;
  display: grid;
  gap: 9px;
  font-size: .98rem;
}

.caja-oferta .incluye li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px dashed var(--borde);
  padding-bottom: 9px;
}
.caja-oferta .incluye li:last-child { border-bottom: none; padding-bottom: 0; }
.caja-oferta .incluye .valor { color: var(--tinta-suave); white-space: nowrap; }

.precio { margin: 6px 0 22px; }

.precio .antes {
  display: block;
  font-size: 1rem;
  color: var(--tinta-suave);
  text-decoration: line-through;
}

.precio .ahora {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  line-height: 1.05;
  color: var(--vino);
  font-weight: 700;
  display: block;
}

.precio .nota {
  display: block;
  font-size: .9rem;
  color: var(--tinta-suave);
  margin-top: 4px;
}

/* --------------------------------------------------------------- garantía */

.garantia {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: center;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--oliva);
  border-radius: var(--radio);
  padding: 26px 28px;
  max-width: 760px;
  margin: 34px auto 0;
}

.medalla {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--miel), var(--caramelo));
  color: var(--vino-oscuro);
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.05;
  border: 3px solid var(--blanco);
  box-shadow: var(--sombra);
}
.medalla .dias { font-size: 2rem; display: block; }
.medalla .texto { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }

.garantia h3 { margin-bottom: .3em; }
.garantia p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- FAQ */

.faq { margin-top: 30px; display: grid; gap: 12px; }

.faq details {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 4px 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 48px 15px 20px;
  position: relative;
  font-weight: 700;
  color: var(--espresso);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "▾";
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--caramelo);
}
.faq details[open] summary::after { content: "▴"; }
.faq .cuerpo { padding: 0 20px 16px; color: var(--tinta-suave); }
.faq .cuerpo p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- nota / receta */

.nota-lupita {
  background: var(--crema);
  border-left: 5px solid var(--caramelo);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 20px 24px;
  margin: 28px 0;
  font-size: 1.02rem;
}
.nota-lupita p:last-child { margin-bottom: 0; }
.nota-lupita .quien {
  display: block;
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--vino);
}

.ficha-receta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.ficha-receta li {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: .86rem;
  color: var(--tinta-suave);
}
.ficha-receta strong { color: var(--espresso); }

.receta-rejilla {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.ingredientes {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px 26px;
  position: sticky;
  top: 20px;
}
.ingredientes h3 { margin-bottom: .5em; }
.ingredientes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ingredientes li { border-bottom: 1px dashed var(--borde); padding-bottom: 8px; font-size: .96rem; }
.ingredientes li:last-child { border-bottom: none; }
.ingredientes .cant { font-weight: 800; color: var(--vino); }

.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }

.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 52px;
}

.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: -2px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--vino);
  color: #FFF6EC;
  font-family: var(--serif);
  font-size: 1.15rem;
  display: grid;
  place-content: center;
}

.pasos h3 { font-size: 1.08rem; margin-bottom: .25em; }
.pasos p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ formulario suave */

.caja-form {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  padding: clamp(26px, 4vw, 38px);
  max-width: 560px;
  margin: 30px auto 0;
  box-shadow: var(--sombra);
}

.caja-form .fila { display: flex; gap: 10px; flex-wrap: wrap; }
.caja-form input[type="email"] {
  flex: 1 1 240px;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 14px 16px;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  background: var(--crema);
  color: var(--tinta);
}
.caja-form input[type="email"]:focus {
  outline: none;
  border-color: var(--caramelo);
  box-shadow: 0 0 0 3px rgba(201, 138, 63, .2);
  background: var(--blanco);
}

.respuesta-form {
  margin: 14px 0 0;
  font-size: .93rem;
  padding: 11px 14px;
  border-radius: 10px;
  border-left: 4px solid var(--caramelo);
  background: #FDF4E4;
  color: #7A5320;
  display: none;
}
.respuesta-form.visible { display: block; }

.letra-chica {
  font-size: .82rem;
  color: var(--tinta-suave);
  margin: 12px 0 0;
}

/* ----------------------------------------------------- resumen de pedido */

.resumen {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}

.resumen-caja {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  padding: clamp(24px, 3.5vw, 34px);
  box-shadow: var(--sombra);
}

.resumen-caja.destacada { border: 2px solid var(--caramelo); position: sticky; top: 20px; }

.linea-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 2px solid var(--borde);
  margin-top: 16px;
  padding-top: 16px;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--espresso);
}
.linea-total .monto { color: var(--vino); font-size: 1.8rem; font-weight: 700; }

.sellos {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px;
  font-size: .89rem;
  color: var(--tinta-suave);
}
.sellos li { display: flex; gap: 10px; align-items: flex-start; }
.sellos svg { flex: none; width: 19px; height: 19px; color: var(--oliva); margin-top: 2px; }

/* ------------------------------------------------------------------- pie */

.pie {
  background: var(--espresso);
  color: rgba(247, 241, 231, .72);
  padding: 42px 0 34px;
  font-size: .88rem;
  line-height: 1.65;
}

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

.pie .marca-pie {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: #FFF6EC;
  margin-bottom: .4em;
}

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

/* Pie en fila: marca a la izquierda, enlaces en medio y el aviso legal a la
   derecha. Se apila en móvil. */
.pie-fila {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.6fr);
  gap: 18px 24px;
  align-items: start;
}
.pie-fila > * { margin: 0; }
.pie-fila .legal { margin-top: 0; text-align: right; }

/* ------------------------------------------------------------ contacto

   Banda corta antes del pie: una sola pregunta y una sola salida. */

.contacto { text-align: center; }
.contacto h2 { margin-bottom: .35em; }
.contacto .entradilla { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------- utilería */

.sr-solo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/* ------------------------------------------------------------------ móvil */

@media (max-width: 940px) {
  .rejilla.cuatro { grid-template-columns: repeat(2, 1fr); }
  .cuatro-p       { grid-template-columns: repeat(2, 1fr); }
  .receta-rejilla { grid-template-columns: 1fr; }
  .ingredientes   { position: static; }
  .resumen        { grid-template-columns: 1fr; }
  .resumen-caja.destacada { position: static; }
}

@media (max-width: 900px) {
  .pie-fila { grid-template-columns: 1fr; text-align: center; }
  .pie-fila .legal { text-align: center; }
}

@media (max-width: 780px) {
  body { font-size: 16px; }
  .hero-rejilla { grid-template-columns: 1fr; text-align: center; }
  .hero-rejilla .entradilla { margin-left: auto; margin-right: auto; }
  .hero-rejilla .lista-marca { text-align: left; max-width: 30rem; margin-inline: auto; }
  .hero-rejilla .zona-cta { align-items: center; }
  .hero-retrato { order: -1; max-width: 280px; }
  .rejilla.dos, .rejilla.tres { grid-template-columns: 1fr; }
  .garantia { grid-template-columns: 1fr; justify-items: center; text-align: center; }

  /* Una captura vertical a todo el ancho de un móvil es una pared de casi
     una pantalla y media. Se le pone tope y se centra: el texto del chat se
     sigue leyendo y la sección no se vuelve un scroll infinito. */
  .capturas .tarjeta { width: 100%; max-width: 340px; margin-inline: auto; }
  .cuenta-extra {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 26px 22px;
  }
  .cuenta-extra .lista-marca { text-align: left; }

  /* El hero-banda apilado: el retrato vuelve a ser una foto centrada arriba,
     sin sangrado ni difuminado lateral (en una columna estrecha el degradado
     se comería media cara). */
  .hero.banda .hero-rejilla > div:first-child { padding: 0 0 clamp(38px, 7vw, 56px); }
  .hero.banda .hero-retrato {
    order: -1;
    justify-self: center;
    max-width: 300px;
    margin: clamp(34px, 7vw, 52px) auto clamp(26px, 5vw, 36px);
  }
  .hero.banda .hero-retrato img {
    max-height: 340px;
    border-radius: var(--radio-g);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero.banda .hero-retrato .sello {
    left: 50%;
    right: auto;
    bottom: -16px;
    transform: translateX(-50%);
  }
}

@media (max-width: 460px) {
  .cuatro-p { grid-template-columns: 1fr; }
  .boton { width: 100%; padding: 16px 22px; }
  .caja-oferta .incluye li { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .aviso-previa, .zona-cta, .cabecera { display: none; }
}