/* =====================================================================
   landings.css · Piezas comunes a TODAS las landings de cursos
   ---------------------------------------------------------------------
   Qué es: los bloques que se repiten en cualquier landing de curso:
   portada (hero), tarjetas, testimonios, "lo que te llevas", selector
   de versión (petit / completo), temario y preguntas desplegables,
   bloque "sobre mí" y llamada final.
   Necesita: comun.css cargado antes (colores, letras y botones).
   Para una landing nueva no hace falta tocar este archivo: basta con
   reutilizar las mismas clases en su HTML.
   Creado: 27/10/2026 (primera landing: SinSueño).
   Modificado: 28/10/2026 (temario distinto para cada versión; nota a
   mano alineada a la izquierda también en los bloques centrados; formas
   orgánicas de las imágenes como en el boceto, con 2 o 3 capas de color;
   dos tipos de landing, "web" y "newsletter", ver apartado 0).
   Modificado: 04/11/2026 (piezas de la "Estructura CRO" al final del
   archivo y arreglo de un pequeño desbordamiento lateral en el móvil).
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. TIPOS DE LANDING (decisión de Fati, 28/10/2026)
   Hay dos tipos y se pregunta SIEMPRE a Fati cuál quiere en cada landing:
   - "web": con cabecera y pie de página. Es el tipo normal: el HTML lleva
     <header class="cabecera"> y <footer class="pie">, y no hace falta
     nada más.
   - "newsletter": sin cabecera ni pie, para quien llega desde un correo.
     En su HTML se pone <body class="landing--newsletter"> y NO se escriben
     la cabecera ni el pie. Todo lo demás (secciones, botones, selector...)
     es igual en los dos tipos, así no se repite código.
   --------------------------------------------------------------------- */
/* Sin cabecera, la portada necesita algo más de aire arriba */
.landing--newsletter .hero { padding-top: 72px; }
/* Red de seguridad: si por error se deja la cabecera o el pie en una
   landing de newsletter, no se muestran */
.landing--newsletter .cabecera,
.landing--newsletter .pie { display: none; }
@media (max-width: 767px) {
  .landing--newsletter .hero { padding-top: 44px; }
}


/* ---------------------------------------------------------------------
   1. SECCIONES: espacio arriba y abajo, y colores de fondo
   Brandbook: 80–100 px en escritorio, 48–60 px en móvil. Una sección de
   color por cada dos o tres secciones crema.
   --------------------------------------------------------------------- */
.seccion {
  padding: 92px 0;
}
.seccion--blanca { background: var(--hm-blanco); }
.seccion--mostaza { background: var(--hm-mostaza-pastel); }
.seccion--descanso { background: var(--hm-des-bg); }   /* pastel del pilar Descanso */
.seccion--con-linea { border-top: 1px solid var(--hm-linea-2); }

@media (max-width: 767px) {
  .seccion { padding: 56px 0; }
}

/* Cabecera de sección: nota a mano + titular + entradilla */
.encabezado {
  margin-bottom: 48px;
  max-width: 720px;
}
.encabezado--centrado {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Grupo "nota a mano + titular" en bloques centrados.
   El grupo ocupa solo lo que mide el titular y se centra en la página;
   dentro, la nota a mano se alinea a la izquierda, justo donde empieza
   el titular (como en el boceto), y el titular sigue centrado.
   Se usa en las cabeceras centradas y en la llamada final. */
.encabezado__grupo {
  display: inline-block;
  vertical-align: top;     /* evita un hueco extra debajo del grupo */
  text-align: center;
  max-width: 100%;         /* 04/11/2026: en el móvil, nunca más ancho que la pantalla */
}
.encabezado__grupo .nota-mano {
  display: block;          /* ocupa su propia línea... */
  width: max-content;      /* ...pero solo lo que mide el texto, para que el giro no la desplace */
  max-width: 100%;
  text-align: left;
}

.encabezado h2 {
  font-size: 47px;
  margin-bottom: 14px;
}
.entradilla {
  font-size: 18px;
  color: var(--hm-gris);
  margin: 0;
}
@media (max-width: 767px) {
  .encabezado { margin-bottom: 32px; }
  .encabezado h2 { font-size: 32px; }
  .entradilla { font-size: 16px; }
}


/* ---------------------------------------------------------------------
   2. PORTADA (HERO)
   Dos columnas: texto a la izquierda, ilustración a la derecha.
   En móvil, una sola columna con la imagen debajo del texto.
   --------------------------------------------------------------------- */
.hero {
  padding: 28px 0 80px;
  border-bottom: 1px solid var(--hm-linea-2);
}
.hero__rejilla {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}

/* Línea pequeña de arriba: etiqueta del pilar (y, si se quiere, estrellas) */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--hm-gris);
}

/* Etiqueta del pilar (chip) */
.chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--hm-r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.chip--descanso { background: var(--hm-des-bg); color: var(--hm-des-tx); }

/* COMPONENTE OPCIONAL: estrellas de valoración (en mostaza).
   Ahora no lo usa ninguna landing (en sinsueno2 se quitó el 28/10/2026).
   Se deja por si otra landing tiene valoraciones reales. Uso en el HTML:
   <span class="estrellas" aria-hidden="true">★★★★★</span> [nota] · [nº] reseñas (solo con datos reales) */
.estrellas {
  color: var(--hm-mostaza);
  letter-spacing: 2px;
  font-size: 15px;
  margin-right: 6px;
}

.hero__titulo {
  font-size: 84px;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 18px;
}
.hero__subtitulo {
  font-family: var(--hm-display);
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 20px;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
.hero__texto {
  font-size: 18px;
  color: var(--hm-tinta-2);
  max-width: 600px;
}

/* Botón + precio "Desde..." */
.hero__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 28px 0 16px;
}
.precio-desde {
  color: var(--hm-gris);
  font-size: 15px;
}
.precio-desde strong {
  font-family: var(--hm-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--hm-tinta);
}

/* Ventajas cortas bajo el botón, en dos columnas */
.hero__ventajas {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 4px 28px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--hm-tinta-2);
}

/* Ilustración con recorte orgánico (nunca un círculo perfecto) y UNA
   "mancha" salvia detrás que asoma por la derecha y por abajo, como en
   el boceto. Dos capas en total: mancha + ilustración.
   Las formas irregulares se consiguen con "border-radius" de 8 valores
   distintos (cada esquina se curva de forma diferente). La mancha tiene
   una forma distinta a la de la imagen para que se note que es otra pieza. */
.hero__figura {
  position: relative;
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 420px;
}
.hero__figura::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hm-mancha-salvia);
  opacity: .7;
  border-radius: 38% 62% 57% 43% / 55% 40% 60% 45%;
  transform: translate(14px, 12px) rotate(-10deg);   /* Brandbook: desplazada 8–14 px */
}
.hero__figura img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 56% 44% 49% 51% / 47% 55% 45% 53%;
}
/* Pie de foto escrito a mano */
.pie-mano {
  font-family: var(--hm-mano);
  font-weight: 500;
  font-size: 28px;
  color: var(--hm-tinta-2);
  transform: rotate(-4deg);
  text-align: right;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .hero__rejilla { grid-template-columns: 1fr; gap: 36px; }
  .hero__titulo { font-size: 46px; }
  .hero__subtitulo { font-size: 26px; }
  .hero__texto { font-size: 16px; }
  .hero__ventajas { grid-template-columns: 1fr; }
  .hero__figura { max-width: 300px; }
  .hero { padding-bottom: 56px; }
}


/* ---------------------------------------------------------------------
   3. TARJETAS CON ILUSTRACIÓN (por ejemplo, los factores que quitan el sueño)
   Escritorio: rejilla de 3 columnas.
   Móvil: se convierten en un carrusel que se desliza con el dedo, con la
   siguiente tarjeta asomando, para no alargar la página (Brandbook).
   --------------------------------------------------------------------- */
.tarjetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tarjeta {
  background: var(--hm-blanco);
  border: 1px solid var(--hm-linea-2);
  border-radius: var(--hm-r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tarjeta__imagen {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--hm-mov-bg);
}
.tarjeta__cuerpo {
  padding: 22px 26px 28px;
}
.tarjeta h3 {
  font-size: 26px;
  margin-bottom: 10px;
}
.tarjeta p {
  font-size: 15px;
  color: var(--hm-tinta-2);
  margin: 0;
}

/* Aviso "desliza para ver más": solo visible en móvil */
.pista-deslizar {
  display: none;
  font-family: var(--hm-mano);
  font-size: 24px;
  color: var(--hm-ocre);
  margin: 0 0 10px;
}
.pista-deslizar::after { content: " →"; }

@media (max-width: 767px) {
  .pista-deslizar { display: block; }
  .tarjetas {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 12px;
    margin-right: calc(-1 * var(--hm-gutter));
    padding-right: var(--hm-gutter);
  }
  .tarjetas > li {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .tarjeta h3 { font-size: 23px; }
}

/* Frase de cierre bajo las tarjetas */
.cierre {
  text-align: center;
  margin: 44px auto 0;
  max-width: 820px;
  color: var(--hm-tinta-2);
}
.cierre strong { color: var(--hm-ocre); }


/* ---------------------------------------------------------------------
   4. TESTIMONIOS DE ALUMNAS
   Tres columnas separadas por una línea fina; comillas en un círculo.
   --------------------------------------------------------------------- */
.encabezado__titular-cursiva {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.testimonios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.testimonio {
  text-align: center;
  padding: 0 30px;
  margin: 0;
}
.testimonio + .testimonio { border-left: 1px solid rgba(138, 98, 0, .25); }
.testimonio::before {
  content: "\201C";             /* comillas de apertura */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--hm-blanco);
  color: var(--hm-mostaza);
  font-family: var(--hm-display);
  font-size: 48px;
  line-height: 1;
  padding-top: 18px;
}
.testimonio blockquote {
  margin: 0 0 16px;
  font-family: var(--hm-display);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.5;
}
.testimonio figcaption {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hm-tinta-2);
}
@media (max-width: 767px) {
  .testimonios { grid-template-columns: 1fr; gap: 36px; }
  .testimonio { padding: 0; }
  .testimonio + .testimonio { border-left: 0; }
}


/* ---------------------------------------------------------------------
   5. "LO QUE TE LLEVAS": lista a la izquierda y nota adhesiva a la derecha
   --------------------------------------------------------------------- */
.llevas {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
.llevas .encabezado { margin-bottom: 32px; }
.llevas .lista-ticks li { color: var(--hm-tinta-2); margin-bottom: 18px; }
.llevas .lista-ticks strong { color: var(--hm-tinta); }

/* Nota adhesiva: fondo amarillo claro, cinta salvia, un poco girada.
   Máximo una por página (Brandbook). */
.nota-adhesiva {
  position: relative;
  background: var(--hm-nota);
  padding: 40px 30px 30px;
  border-radius: 6px;
  box-shadow: var(--hm-sombra);
  transform: rotate(-1.5deg);
  margin-top: 56px;
  font-size: 15px;
}
.nota-adhesiva::before {
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  width: 120px; height: 26px;
  background: rgba(214, 226, 196, .85);
  transform: translateX(-50%) rotate(-3deg);
}
.nota-adhesiva__titulo {
  font-family: var(--hm-mano);
  font-weight: 500;
  font-size: 30px;
  color: var(--hm-ocre);
  margin: 0 0 10px;
}
@media (max-width: 900px) {
  .llevas { grid-template-columns: 1fr; gap: 20px; }
  .nota-adhesiva { margin-top: 10px; }
}


/* ---------------------------------------------------------------------
   6. SELECTOR DE VERSIÓN (petit / completo)
   Cada opción es una tarjeta que se puede elegir. La elegida se marca con
   fondo y borde cálidos, y su botón pasa a ser el principal (mostaza).
   Funciona con CSS (:has) y landings.js lo refuerza en navegadores
   antiguos añadiendo la clase "esta-elegida".
   --------------------------------------------------------------------- */
.versiones__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.versiones__cabecera .encabezado { margin-bottom: 0; }
/* Sobre fondo pastel de Descanso, la nota a mano va en su tinta (Brandbook) */
.nota-mano--descanso { color: var(--hm-des-tx); }
/* Sobre fondo salvia, la nota a mano va en verde oscuro (Brandbook) */
.nota-mano--salvia { color: var(--hm-salvia-osc); }

.versiones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border: 0;
  padding: 0;
  margin: 0;
}
.opcion {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hm-blanco);
  border: 1.5px solid var(--hm-linea-2);
  border-radius: var(--hm-r-card);
  padding: 28px 30px 30px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.opcion:has(input:checked),
.opcion.esta-elegida {
  background: var(--hm-sel-bg);
  border-color: var(--hm-sel-bd);
}

.opcion__cabecera {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 14px;
  align-items: start;
}
/* Círculo de selección: se dibuja a mano para que siga la marca */
.opcion input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px; height: 24px;
  margin: 6px 0 0;
  border: 2px solid var(--hm-tinta);
  border-radius: 50%;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.opcion input[type="radio"]::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--hm-tinta);
  transform: scale(0);
  transition: transform .15s ease;
}
.opcion input[type="radio"]:checked::before { transform: scale(1); }

.opcion__nombre {
  font-family: var(--hm-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  display: block;
}
.opcion__detalle {
  display: block;
  font-size: 14px;
  color: var(--hm-gris);
}
/* Mismo tamaño de precio en ambas opciones (Brandbook) */
.opcion__precio {
  font-family: var(--hm-display);
  font-weight: 500;
  font-size: 28px;
  white-space: nowrap;
}
.opcion .garantia {
  background: rgba(227, 235, 213, .45);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 18px 0 20px;
}
.opcion .lista-ticks { display: block; font-size: 15px; color: var(--hm-tinta-2); flex: 1; }
/* Puntos de la lista dentro de la tarjeta. Son <span> y no <li> porque
   dentro de un <label> HTML no permite listas; se ven igual que los ticks. */
.opcion__punto {
  display: block;
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.opcion__punto::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23658153' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Botón de compra: secundario por defecto, principal en la opción elegida */
.opcion .boton {
  width: 100%;
  margin-top: 18px;
  background: transparent;
  border: 1.5px solid var(--hm-tinta);
  color: var(--hm-tinta);
}
.opcion:has(input:checked) .boton,
.opcion.esta-elegida .boton {
  background: var(--hm-boton);
  border-color: var(--hm-boton);
}

.versiones__extras {
  text-align: center;
  font-size: 14px;
  color: var(--hm-tinta-2);
  margin: 26px 0 0;
}
@media (max-width: 900px) {
  .versiones { grid-template-columns: 1fr; }
  .opcion { padding: 22px 20px 24px; }
  .opcion__nombre { font-size: 23px; }
  .opcion__precio { font-size: 24px; }
}
/* 10/11/2026: en móviles muy estrechos (320 px) un nombre largo como "desemPANate PETIT"
   no cabía al lado del precio y la página se movía hacia los lados. Ahí el precio baja
   debajo del nombre, sin achicar la letra ni cortar el nombre. */
@media (max-width: 360px) {
  .opcion__cabecera { grid-template-columns: auto 1fr; }
  .opcion__precio { grid-column: 2; }
}


/* ---------------------------------------------------------------------
   7. DESPLEGABLES (temario y preguntas frecuentes)
   Se usa la etiqueta <details> de HTML: se abren y cierran sin necesidad
   de programación y funcionan con teclado y lectores de pantalla.
   --------------------------------------------------------------------- */
.acordeon {
  border-top: 1px solid var(--hm-linea);
}
.acordeon details {
  border-bottom: 1px solid var(--hm-linea);
}
.acordeon summary {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
/* Flecha que gira al abrir */
.acordeon summary::after {
  content: "";
  flex: 0 0 12px;
  height: 12px;
  margin-left: auto;
  border-right: 2px solid var(--hm-tinta);
  border-bottom: 2px solid var(--hm-tinta);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s ease;
}
.acordeon details[open] summary::after { transform: rotate(-135deg); }

.acordeon__contenido {
  padding: 0 4px 24px;
  color: var(--hm-tinta-2);
  max-width: 760px;
}
.acordeon__contenido p:last-child { margin-bottom: 0; }

/* Temario: número del módulo, título y resumen de lecciones */
.modulo__numero {
  font-family: var(--hm-display);
  font-size: 24px;
  color: var(--hm-boton);
  width: 28px;
  flex: 0 0 28px;
}
.modulo__titulo {
  font-family: var(--hm-display);
  font-weight: 500;
  font-size: 23px;
}
.modulo__meta {
  margin-left: auto;
  font-size: 14px;
  color: var(--hm-gris);
  text-align: right;
}
/* En el temario el resumen ya empuja a la derecha: la flecha va justo detrás */
.acordeon--temario summary::after { margin-left: 0; }
.acordeon .modulo__versiones {
  font-size: 14px;
  color: var(--hm-gris);
}
.acordeon--temario .acordeon__contenido { padding-left: 50px; }

/* Preguntas frecuentes */
.pregunta {
  font-weight: 700;
  font-size: 17px;
}
.mas-dudas {
  margin-top: 28px;
  font-size: 15px;
  color: var(--hm-gris);
}
.mas-dudas a { font-weight: 700; }

@media (max-width: 767px) {
  .modulo__titulo { font-size: 19px; }
  /* En móvil el resumen de lecciones baja a una segunda línea, bajo el
     título del módulo, y la flecha se queda arriba a la derecha */
  .acordeon--temario summary { flex-wrap: wrap; row-gap: 2px; }
  .acordeon--temario summary::after { margin-left: auto; order: 1; }
  .modulo__meta { order: 2; flex-basis: 100%; margin-left: 0; padding-left: 46px; text-align: left; }
  .acordeon--temario .acordeon__contenido { padding-left: 4px; }
}


/* Temarios por versión (petit / completo)
   Cada temario lleva su título. landings.js deja visible solo el de la
   versión elegida y muestra los botones para cambiar de temario.
   Sin JavaScript se ven los dos, uno debajo del otro. */
.temario + .temario { margin-top: 48px; }
.temario[hidden],
.temario-selector[hidden] { display: none; }   /* que "hidden" gane siempre */
.temario__titulo {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 16px;
}
.temario__total {
  font-family: var(--hm-texto);
  font-size: 15px;
  font-weight: 400;
  color: var(--hm-gris);
}
/* Botones "Sin Sueño PETIT / Sin Sueño": píldoras; la activa en mostaza */
.temario-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}
.temario-selector__boton {
  min-height: 44px;                    /* área táctil mínima */
  padding: 0 20px;
  border-radius: var(--hm-r-pill);
  border: 1.5px solid var(--hm-tinta);
  background: transparent;
  color: var(--hm-tinta);
  font-family: var(--hm-texto);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.temario-selector__boton[aria-pressed="true"] {
  background: var(--hm-boton);
  border-color: var(--hm-boton);
}
@media (max-width: 767px) {
  .temario__titulo { font-size: 21px; }
}


/* ---------------------------------------------------------------------
   8. "SOBRE MÍ" (por qué te lo cuento yo)
   Retrato en círculo sobre dos manchas orgánicas, como en el boceto:
   salvia detrás (asoma por la izquierda y arriba) y mostaza encima
   (asoma por la derecha y abajo). Tres capas en total: salvia, mostaza
   y foto. Las manchas son opacas y sin mezclar, para que no aparezca un
   tercer color donde se cruzan.
   --------------------------------------------------------------------- */
.sobre-mi {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 64px;
  align-items: center;
}
.retrato {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.retrato::before,
.retrato::after {
  content: "";
  position: absolute;
}
/* Mancha 1: salvia, un poco más grande, hacia arriba a la izquierda */
.retrato::before {
  inset: 0 8% 6% 0;
  background: var(--hm-mancha-salvia);
  border-radius: 61% 39% 52% 48% / 44% 58% 42% 56%;
  transform: rotate(-14deg);
}
/* Mancha 2: mostaza, hacia abajo a la derecha, por encima de la salvia */
.retrato::after {
  inset: 12% 0 0 14%;
  background: var(--hm-mancha-mostaza);
  border-radius: 42% 58% 63% 37% / 57% 41% 59% 43%;
  transform: rotate(18deg);
}
.retrato img {
  position: absolute;
  z-index: 1;
  width: 78.75%;
  left: 18.75%;
  top: 9.5%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 50%;
}
.sobre-mi h2 { font-size: 47px; margin-bottom: 20px; }
.sobre-mi__texto { color: var(--hm-tinta-2); }
.frase-mano {
  font-family: var(--hm-mano);
  font-weight: 500;
  font-size: 28px;
  margin: 8px 0 0;
}
@media (max-width: 900px) {
  .sobre-mi { grid-template-columns: 1fr; gap: 28px; }
  .retrato { max-width: 260px; }
  .sobre-mi h2 { font-size: 32px; }
}


/* ---------------------------------------------------------------------
   9. LLAMADA FINAL (último empujón antes del pie)
   --------------------------------------------------------------------- */
.cta-final {
  text-align: center;
}
.cta-final .encabezado__grupo { margin-bottom: 18px; }
.cta-final h2 {
  font-size: 54px;
}
.cta-final__texto {
  max-width: 600px;
  margin: 0 auto 28px;
  color: var(--hm-tinta-2);
}
.cta-final__precios {
  margin: 20px 0 12px;
  font-size: 17px;
  color: var(--hm-tinta);
}
/* Precios en negrita y más grandes (petición de Fati, 04/11/2026) */
.cta-final__precios strong {
  font-family: var(--hm-display);
  font-weight: 700;
  font-size: 24px;
}
/* La garantía de la llamada final, algo más grande para que se vea bien */
.cta-final .garantia { font-size: 15px; }
.cta-final .garantia { justify-content: center; }
@media (max-width: 767px) {
  .cta-final h2 { font-size: 36px; }
  .cta-final .boton { width: 100%; }
}


/* ---------------------------------------------------------------------
   PIEZAS AÑADIDAS PARA S.O.S NAVIDAD (01/11/2026)
   Sirven para cualquier landing, no solo para esta:
   - Chips de los cuatro pilares (antes solo existía el de Descanso),
     para cursos que tocan varios pilares a la vez.
   - Rejilla de 4 tarjetas: en escritorio van de 2 en 2 (con 3 por fila
     quedaría una sola tarjeta suelta abajo). En móvil siguen siendo el
     carrusel de siempre.
   - Zona de compra con UNA sola versión (cursos sin petit/completo):
     una tarjeta centrada, ya resaltada y con el botón principal, sin
     círculo de selección.
   - Fondo salvia para una sección (pastel de la marca).
   --------------------------------------------------------------------- */
.chip--alimentacion { background: var(--hm-ali-bg); color: var(--hm-ali-tx); }
.chip--emociones { background: var(--hm-emo-bg); color: var(--hm-emo-tx); }
.chip--movimiento { background: var(--hm-mov-bg); color: var(--hm-mov-tx); }

.seccion--salvia { background: var(--hm-salvia-pastel); }

@media (min-width: 768px) {
  .tarjetas--cuatro { grid-template-columns: repeat(2, 1fr); }
}

/* Una sola versión: tarjeta centrada y con un ancho cómodo de leer */
.versiones--una {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}
.opcion--unica {
  cursor: default;
  background: var(--hm-sel-bg);
  border-color: var(--hm-sel-bd);
}
/* Sin círculo de selección, el nombre y el precio ocupan toda la fila */
.opcion--unica .opcion__cabecera { grid-template-columns: 1fr auto; }
.opcion--unica .lista-ticks { margin: 0; }
.opcion--unica .boton {
  background: var(--hm-boton);
  border-color: var(--hm-boton);
}
/* En la tarjeta única los puntos son una lista de verdad (<ul>), sin viñetas */
.opcion--unica ul.lista-ticks { list-style: none; padding: 0; }


/* ---------------------------------------------------------------------
   PIEZAS AÑADIDAS PARA BYE SUGAR (01/11/2026)
   - Fondo y nota a mano en los colores del pilar Alimentación, para la
     zona de compra de los cursos de ese pilar (igual que SinSueño usa
     los de Descanso).
   - Tarjetas solo de texto (sin imagen), por ejemplo para "lo que vas
     a notar": la tarjeta de siempre, con una línea de color arriba.
   - Fuente de un dato: letra pequeña al pie de la nota adhesiva.
   --------------------------------------------------------------------- */
.seccion--alimentacion { background: var(--hm-ali-bg); }
.nota-mano--alimentacion { color: var(--hm-ali-tx); }

.tarjeta--texto { border-top: 6px solid var(--hm-ali-bg); }
/* Segunda línea de la tarjeta, más discreta (por ejemplo, "lo que puede costar") */
.tarjeta .tarjeta__aviso {
  margin-top: 12px;
  font-size: 14px;
  color: var(--hm-gris);
}

.nota-adhesiva__fuente {
  font-size: 12px;
  opacity: .8;
  margin-bottom: 0;
}

/* Tarjetas en fila (petición de Fati, 01/11/2026, en Bye Sugar): las 4
   tarjetas van en UNA fila en pantallas grandes, así las imágenes salen
   más pequeñas y no se comen al texto, que además es un poco más grande.
   En tablet van de 2 en 2 y en móvil siguen siendo el carrusel.
   Se usa junto con "tarjetas--cuatro". */
@media (min-width: 1024px) {
  .tarjetas--fila { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .tarjetas--fila .tarjeta__cuerpo { padding: 20px 22px 24px; }
  .tarjetas--fila .tarjeta h3 { font-size: 23px; }
}
.tarjetas--fila .tarjeta p { font-size: 16px; }

/* ---------------------------------------------------------------------
   PIEZAS AÑADIDAS PARA CUCU MUÉVETE (01/11/2026)
   Fondo y nota a mano en los colores del pilar Movimiento, para la zona
   de compra de los cursos de ese pilar (como Alimentación y Descanso).
   --------------------------------------------------------------------- */
.seccion--movimiento { background: var(--hm-mov-bg); }
.nota-mano--movimiento { color: var(--hm-mov-tx); }

/* ---------------------------------------------------------------------
   LANDINGS DE INSTAGRAM (01/11/2026, primera: Disfruta la naVIDAd)
   Tercer tipo de landing, además de "web" y "newsletter": página corta,
   con solo el logo arriba y un pie legal propio de Instagram (como el de
   las landings IG de WordPress): enlaces legales, el aviso de que la
   página no pertenece a Meta y el copyright. Sin menú.
   - Precio tachado (el normal) junto al precio especial.
   - Aviso de Meta en letra pequeña.
   --------------------------------------------------------------------- */
.precio-antes {
  margin-left: 8px;
  color: var(--hm-gris);
  font-weight: 400;
}
.pie__aviso-meta {
  font-size: 12px;
  line-height: 1.5;
  opacity: .8;
  max-width: 820px;
  margin: 0 0 18px;
}

/* NORMA de Fati (01/11/2026): el nombre de un producto NUNCA se corta en
   dos líneas en un titular. En el HTML, el nombre va dentro de un
   <span class="sin-cortes"> (o con espacios &nbsp;).
   Si el nombre es largo (por ejemplo "Disfruta la naVIDAd"), el titular
   lleva además "hero__titulo--largo": su tamaño se ajusta al ancho de la
   pantalla para que el nombre quepa entero en una línea, también en móvil. */
.sin-cortes { white-space: nowrap; }
.hero__titulo--largo { font-size: clamp(30px, 8.4vw, 60px); }

/* Vista previa de páginas de un eBook (02/11/2026, Disfruta la naVIDAd):
   la imagen es una página del PDF, en vertical (3:4), y se enseña la parte
   de arriba (título y foto de la receta). Lleva sombra para que parezca
   una hoja de papel. */
.tarjeta__imagen--pagina {
  aspect-ratio: 3 / 4;
  object-position: top;
  box-shadow: inset 0 0 0 1px var(--hm-linea-2);
}
/* Cifras grandes de un vistazo (por ejemplo: 69 páginas · 17 recetas) */
.cifras {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.cifras li { font-size: 15px; color: var(--hm-tinta-2); }
.cifras strong {
  display: block;
  font-family: var(--hm-display);
  font-size: 34px;
  line-height: 1.1;
  color: var(--hm-tinta);
}

/* ---------------------------------------------------------------------
   PIEZAS AÑADIDAS PARA HAZTE SITIO (02/11/2026)
   Fondo y nota a mano en los colores del pilar Emociones, para la zona
   de compra de los cursos de ese pilar.
   --------------------------------------------------------------------- */
.seccion--emociones { background: var(--hm-emo-bg); }
.nota-mano--emociones { color: var(--hm-emo-tx); }

/* REVISIÓN DEL DIRECTOR DE MARKETING (03/11/2026)
   En móvil los párrafos van alineados a la izquierda (se leen mejor).
   Los titulares pueden seguir centrados y los testimonios, como están. */
@media (max-width: 767px) {
  .encabezado--centrado p:not(.nota-mano),
  .cierre,
  .cta-final p,
  .versiones__extras { text-align: left; }
  .cta-final .garantia { justify-content: flex-start; }
}

/* Tarjetas de una misma fila con la misma altura (por ejemplo, las de
   "Lo que vas a notar" de Bye Sugar): la tarjeta ocupa todo el alto. */
.tarjetas > li { display: flex; }
.tarjetas > li > .tarjeta { flex: 1; }

/* Tarjeta horizontal con ilustración pequeña (03/11/2026, ARDE "Empieza por
   donde quieras"): en escritorio la imagen va a la izquierda y pequeña
   (160 px) para que no se coma el texto ni rompa la armonía; en móvil,
   imagen arriba como en el resto de tarjetas. */
@media (min-width: 768px) {
  .tarjeta--horizontal {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
  }
  .tarjeta--horizontal .tarjeta__imagen {
    height: 100%;
    aspect-ratio: auto;
    min-height: 160px;
  }
}


/* =====================================================================
   ESTRUCTURA CRO (04/11/2026, primeras pruebas: sinsueno3 y bye-sugar3)
   Piezas nuevas de las instrucciones de marketing "Estructura CRO de
   landings". Solo estilos, sin programación. Sirven para todas las
   landings de curso. La estética de marca no cambia.
   ===================================================================== */

/* ---------------------------------------------------------------------
   A. TITULAR DE DOLOR CON SELLO
   El H1 lleva dos partes:
   - el "sello", pequeño: "Curso + nombre · para + resultado";
   - el "dolor", grande: el problema tal como lo vive ella.
   Así Google lee el nombre y para qué sirve, y la persona ve primero su
   problema. El nombre del curso nunca se corta (norma de Fati).
   Uso en el HTML:
   <h1 class="hero__titulo hero__titulo--dolor">
     <span class="hero__sello">Curso <span class="hero__sello-nombre sin-cortes">Nombre</span> · para…</span>
     <span class="hero__dolor">El problema…</span>
   </h1>
   --------------------------------------------------------------------- */
.hero__titulo--dolor {
  font-size: 60px;
  line-height: 1.08;
  margin-bottom: 20px;
}
.hero__sello {
  display: block;
  margin-bottom: 14px;
  font-family: var(--hm-texto);
  font-size: 21px; /* Antes 15 px: Fati quiere que el descriptivo se vea (09/11/2026) */
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--hm-tinta-2);
}
.hero__sello-nombre {
  font-family: var(--hm-display);
  font-style: italic;
  font-weight: 600;
  font-size: 23px;
  color: var(--hm-ocre);
}
.hero__dolor { display: block; }

/* Los 3 resultados con check, justo debajo del texto de la portada */
.hero__resultados {
  margin-top: 22px;
  font-size: 16px;
  color: var(--hm-tinta);
}
.hero__resultados li { margin-bottom: 10px; }

/* Las 3 ventajas de formato, en una sola línea pequeña bajo la garantía */
.hero__formato {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--hm-gris);
}

@media (max-width: 900px) {
  .hero__titulo--dolor { font-size: clamp(32px, 8.6vw, 46px); }
  .hero__sello { font-size: 19px; }
  .hero__sello-nombre { font-size: 21px; }
}
/* Botones de resultado largos ("Quiero hacer las paces con el azúcar"):
   en el móvil pueden ocupar dos líneas; así quedan centrados y con aire. */
@media (max-width: 767px) {
  /* El pie escrito a mano de la ilustración va girado y asomaba 4 px por la
     derecha, lo que dejaba mover la página de lado. Se recorta lo que sobra. */
  .hero { overflow-x: clip; }
  .hero__accion .boton,
  .cta-final .boton {
    text-align: center;
    line-height: 1.25;
    padding: 12px 26px;
  }
}


/* ---------------------------------------------------------------------
   B. TESTIMONIOS: UNO PROTAGONISTA Y LOS DEMÁS EN CAJAS
   El protagonista es una frase corta con un resultado concreto, en
   grande. Debajo, en cajas con borde de puntos, los demás (si los hay).
   Solo testimonios reales del curso: si no hay más, no se ponen cajas.
   --------------------------------------------------------------------- */
.testimonio-estrella {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.testimonio-estrella blockquote {
  margin: 0 0 14px;
  font-family: var(--hm-display);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  color: var(--hm-tinta);
}
.testimonio-estrella figcaption,
.testimonios--cajas figcaption {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hm-tinta-2);
}
.testimonios--cajas {
  max-width: 760px;
  margin: 36px auto 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.testimonios--cajas .testimonio {
  text-align: left;
  padding: 20px 22px;
  border: 1.5px dashed var(--hm-ocre);
  border-radius: var(--hm-r-resena);
  background: var(--hm-crema);
}
.testimonios--cajas .testimonio + .testimonio { border-left: 1.5px dashed var(--hm-ocre); }
.testimonios--cajas .testimonio::before { display: none; }   /* sin el círculo de comillas */
.testimonios--cajas blockquote { font-size: 17px; margin-bottom: 10px; }
@media (max-width: 767px) {
  .testimonio-estrella blockquote { font-size: 24px; }
  .testimonios--cajas { gap: 14px; }
}


/* ---------------------------------------------------------------------
   C. ¿ES PARA TI? (bloque nuevo)
   Dos cajas: "Sí, si…" en verde salvia y "No, si…" en melocotón
   (colores del Brandbook). En móvil, una debajo de otra.
   --------------------------------------------------------------------- */
.para-ti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.para-ti__caja {
  padding: 26px 28px;
  border-radius: var(--hm-r-card);
}
.para-ti__caja h3 {
  font-size: 26px;
  margin: 0 0 12px;
}
.para-ti__caja ul {
  margin: 0;
  padding-left: 20px;
  font-size: 16px;
  color: var(--hm-tinta-2);
}
.para-ti__caja li { margin-bottom: 8px; }
.para-ti__caja li:last-child { margin-bottom: 0; }
.para-ti__caja--si { background: var(--hm-mov-bg); }
.para-ti__caja--si h3 { color: var(--hm-salvia-osc); }
.para-ti__caja--no { background: var(--hm-emo-bg); }
.para-ti__caja--no h3 { color: var(--hm-emo-tx); }
@media (max-width: 767px) {
  .para-ti { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------
   D. BARRA DE COMPRA EN EL MÓVIL (nueva)
   Franja fija abajo con "Desde X €" y el botón. Solo en móvil.
   Va como último elemento de <main> y con "position: sticky": se queda
   pegada abajo mientras se lee la página y, al llegar al final, se para
   antes del pie, así nunca tapa los enlaces legales. Sin programación.
   --------------------------------------------------------------------- */
.barra-compra { display: none; }
@media (max-width: 767px) {
  .barra-compra {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--hm-crema);
    border-top: 1px solid var(--hm-linea);
    box-shadow: 0 -8px 20px -14px rgba(59, 50, 32, .45);
  }
  .barra-compra__precio {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
    color: var(--hm-gris);
    white-space: nowrap;
  }
  .barra-compra__precio strong {
    display: block;
    font-family: var(--hm-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--hm-tinta);
  }
  .barra-compra .boton {
    min-height: 48px;
    padding: 0 18px;
    font-size: 15px;
    text-align: center;
    line-height: 1.2;
  }
}


/* ---------------------------------------------------------------------
   OPCIÓN "MUY PRONTO" (05/11/2026, Hazte Sitio)
   Para una versión que todavía no está a la venta: se ve más apagada,
   sin botón, y en el sitio del precio pone "Muy pronto". La casilla va
   desactivada en el HTML, así que no se puede elegir.
   --------------------------------------------------------------------- */
.opcion--pronto { opacity: .7; cursor: default; }
.opcion--pronto input[type="radio"] { cursor: not-allowed; }
.opcion__precio--pronto {
  font-family: var(--hm-mano);
  font-size: 24px;
  color: var(--hm-ocre);
}


/* =====================================================================
   PÁGINAS DE TEXTO (07/11/2026): textos legales, contacto y confirmar
   suscripción. Son páginas de la web, no landings: llevan la cabecera
   completa (cabecera--web) y el pie común.
   Piezas:
   A. Portada corta: nota a mano + titular, sin imagen.
   B. Índice: lista de apartados con enlaces para saltar a cada uno.
   C. Texto legal: titulares, párrafos y listas cómodos de leer.
   D. Ficha de datos: caja blanca con los datos de la titular.
   E. Formulario en papel: caja con líneas para rellenar a mano.
   F. Letra pequeña: la información de privacidad bajo un botón.
   Uso en el HTML: ver aviso-legal2, condiciones-generales-...2,
   contacto2 y confirmar-suscripcion2.
   ===================================================================== */

/* ---------------------------------------------------------------------
   A. PORTADA CORTA
   El titular puede ser muy largo (el de las condiciones tiene 63 letras):
   se parte en varias líneas y nunca se corta.
   --------------------------------------------------------------------- */
.portada-corta {
  padding: 40px 0 56px;
  border-bottom: 1px solid var(--hm-linea-2);
}
.portada-corta h1 {
  font-size: 60px;
  letter-spacing: -0.015em;
  line-height: 1.05;
  max-width: 900px;
  overflow-wrap: break-word;     /* una palabra muy larga baja de línea, no se sale */
  hyphens: manual;
}
.portada-corta__texto {
  font-size: 18px;
  color: var(--hm-tinta-2);
  max-width: 680px;
  margin: 20px 0 0;
}
@media (max-width: 767px) {
  .portada-corta { padding: 28px 0 40px; }
  .portada-corta h1 { font-size: 36px; }
  .portada-corta__texto { font-size: 16px; }
}

/* ---------------------------------------------------------------------
   B. ÍNDICE (caja con los apartados del texto)
   --------------------------------------------------------------------- */
.indice {
  background: var(--hm-pie);
  border: 1px solid var(--hm-linea);
  border-radius: var(--hm-r-card);
  padding: 28px 32px;
  margin: 0 0 56px;
}
.indice__titulo {
  font-family: var(--hm-mano);
  font-size: 26px;
  color: var(--hm-ocre);
  margin: 0 0 10px;
}
.indice ul {
  margin: 0;
  padding-left: 22px;
  columns: 2;                    /* dos columnas en escritorio */
  column-gap: 40px;
}
.indice li { margin-bottom: 8px; break-inside: avoid; }
.indice li::marker { color: var(--hm-mostaza); }
.indice a { color: var(--hm-tinta); text-decoration-color: var(--hm-boton); text-underline-offset: 3px; }
.indice a:hover { color: var(--hm-ocre); }
@media (max-width: 767px) {
  .indice { padding: 22px 20px; margin-bottom: 40px; }
  .indice ul { columns: 1; }
}

/* ---------------------------------------------------------------------
   C. TEXTO LEGAL (bloque de lectura)
   Ancho de unas 70 letras por línea para leer sin cansarse.
   "scroll-margin-top" deja aire arriba al saltar desde el índice.
   --------------------------------------------------------------------- */
.texto-legal {
  max-width: 760px;
  color: var(--hm-tinta-2);
}
.texto-legal h2 {
  font-size: 36px;
  color: var(--hm-tinta);
  margin: 64px 0 18px;
  padding-top: 28px;
  border-top: 1px solid var(--hm-linea);
  scroll-margin-top: 24px;
}
.texto-legal > h2:first-child,
.texto-legal > .indice + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.texto-legal h3 {
  font-size: 23px;
  color: var(--hm-tinta);
  margin: 36px 0 10px;
  scroll-margin-top: 24px;
}
.texto-legal p { margin: 0 0 1.1em; }
.texto-legal ul {
  margin: 0 0 1.2em;
  padding-left: 22px;
}
.texto-legal li { margin-bottom: 6px; }
.texto-legal li::marker { color: var(--hm-mostaza); }
.texto-legal a { overflow-wrap: anywhere; }   /* las direcciones largas no se salen en el móvil */
@media (max-width: 767px) {
  .texto-legal { font-size: 16px; }
  .texto-legal h2 { font-size: 28px; margin-top: 48px; }
  .texto-legal h3 { font-size: 20px; }
}

/* ---------------------------------------------------------------------
   D. FICHA DE DATOS (titular de la web)
   --------------------------------------------------------------------- */
.ficha-datos {
  background: var(--hm-blanco);
  border: 1px solid var(--hm-linea);
  border-radius: var(--hm-r-card);
  box-shadow: var(--hm-sombra);
  padding: 26px 30px;
  margin: 8px 0 28px;
}
.ficha-datos dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 24px;
  margin: 0;
}
.ficha-datos dt { font-weight: 700; color: var(--hm-tinta); }
.ficha-datos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .ficha-datos { padding: 20px; }
  .ficha-datos dl { grid-template-columns: 1fr; gap: 2px; }
  .ficha-datos dd { margin-bottom: 10px; }
}

/* ---------------------------------------------------------------------
   E. FORMULARIO EN PAPEL (desistimiento)
   Cada dato lleva una línea punteada para rellenarlo a mano o copiarlo
   en un correo. No es un formulario que se envíe: es texto.
   --------------------------------------------------------------------- */
.formulario-papel {
  background: var(--hm-nota);
  border: 1.5px dashed var(--hm-input);
  border-radius: var(--hm-r-card);
  padding: 28px 32px;
  margin: 12px 0 28px;
}
.formulario-papel h4 {
  font-family: var(--hm-texto);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hm-tinta);
  margin: 26px 0 10px;
}
.formulario-papel h4:first-child { margin-top: 0; }
.formulario-papel ul { list-style: none; padding: 0; margin: 0; }
.formulario-papel li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 12px;
}
/* Línea para rellenar, solo en los datos que están vacíos */
.formulario-papel .rellenar::after {
  content: "";
  flex: 1;
  min-width: 60px;
  border-bottom: 1.5px dotted var(--hm-gris);
  transform: translateY(-4px);
}
.formulario-papel__nota { font-size: 14px; color: var(--hm-gris); margin: 18px 0 0; }
@media (max-width: 767px) {
  .formulario-papel { padding: 22px 18px; }
}

/* ---------------------------------------------------------------------
   F. LETRA PEQUEÑA (información de privacidad)
   --------------------------------------------------------------------- */
.letra-pequena {
  font-size: 14px;
  line-height: 1.55;
  color: var(--hm-gris);
  max-width: 680px;
  margin: 0;
}
.letra-pequena strong { color: var(--hm-tinta-2); }

/* Correo escrito en grande, para quien prefiera copiarlo */
.correo-grande {
  display: inline-block;
  font-family: var(--hm-display);
  font-size: 30px;
  color: var(--hm-tinta);
  text-decoration-color: var(--hm-boton);
  text-underline-offset: 6px;
  overflow-wrap: anywhere;
  margin: 6px 0 0;
}
@media (max-width: 767px) {
  .correo-grande { font-size: 22px; }
}

/* Separador dentro de un texto legal (la línea "———" de WordPress) */
.texto-legal hr {
  border: 0;
  border-top: 1px dashed var(--hm-input);
  margin: 36px 0;
}

/* Foto vertical en la mancha de la portada: se encuadra por arriba
   para que no se corte la cabeza (la foto es más alta que ancha). */
.hero__figura--arriba img { object-position: center top; }


/* =====================================================================
   PÁGINAS DE PAGO DE SAN VIERNES (07/11/2026)
   san-viernes-rockroll-mensual2 y san-viernes-rockroll-anual2: una
   tarjeta de compra con dos formas de pago (tarjeta en la tienda y
   PayPal). Los botones de PayPal los dibuja Assets/js/paypal-suscripcion.js.
   ===================================================================== */
.pago-unico {
  max-width: 560px;
  margin: 0 auto;
}
.pago-unico .opcion__precio small {
  font-family: var(--hm-texto);
  font-size: 15px;
  color: var(--hm-gris);
}
.pago-unico__iva { font-size: 14px; color: var(--hm-gris); margin: 14px 0 0; }
.pago-unico .boton { width: 100%; }

/* Separador "o con PayPal" con una línea a cada lado */
.pago-separador {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--hm-gris);
  margin: 22px 0 16px;
}
.pago-separador::before,
.pago-separador::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--hm-linea);
}

/* Caja donde PayPal pone sus botones (alto reservado para que la página no salte) */
.pago-paypal { min-height: 104px; }
.pago-paypal--aviso { min-height: 0; font-size: 14px; color: var(--hm-tinta-2); }
.pago-paypal__gracias {
  font-family: var(--hm-display);
  font-size: 26px;
  color: var(--hm-tinta);
  margin-bottom: 6px;
}

/* Enlace a la otra forma de suscribirse, debajo de la tarjeta */
.pago-otra { margin: 22px auto 0; font-size: 15px; }


/* ---------------------------------------------------------------------
   G. TABLA DE COOKIES (Política de Cookies, 07/11/2026)
   En el móvil la tabla se puede deslizar de lado dentro de su caja,
   sin que se mueva la página entera.
   --------------------------------------------------------------------- */
.tabla-scroll {
  overflow-x: auto;
  margin: 12px 0 28px;
  border: 1px solid var(--hm-linea);
  border-radius: 16px;
  background: var(--hm-blanco);
}
.tabla-cookies {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}
.tabla-cookies caption {
  text-align: left;
  font-weight: 700;
  color: var(--hm-tinta);
  padding: 14px 16px 6px;
}
.tabla-cookies th,
.tabla-cookies td {
  text-align: left;
  vertical-align: top;
  padding: 10px 16px;
  border-top: 1px solid var(--hm-linea-2);
}
.tabla-cookies th { background: var(--hm-pie); font-weight: 700; color: var(--hm-tinta); }
.tabla-cookies code { font-size: 14px; overflow-wrap: anywhere; }


/* ---------------------------------------------------------------------
   H. COMPRA DIRECTA EN LA LANDING DE SAN VIERNES (07/11/2026)
   Las dos tarjetas (mensual y anual) llevan ya sus botones de pago:
   tarjeta (tienda de la web) y PayPal. No hay que elegir antes: cada
   tarjeta tiene los suyos. La anual va destacada porque sale más a cuenta.
   --------------------------------------------------------------------- */
.opcion--compra { cursor: default; }
/* Sin círculo de selección, el nombre y el precio ocupan toda la fila */
.opcion--compra .opcion__cabecera { grid-template-columns: 1fr auto; }
.opcion--compra .lista-ticks { list-style: none; padding: 0; margin: 0 0 18px; }
.opcion--compra .boton { width: 100%; }
.opcion--compra .pago-paypal { margin-top: 2px; }
/* La destacada (anual): fondo y borde cálidos y botón principal mostaza */
.opcion--destacada {
  background: var(--hm-sel-bg);
  border-color: var(--hm-sel-bd);
}
.opcion--destacada .boton {
  background: var(--hm-boton);
  border-color: var(--hm-boton);
}