/* =====================================================================
   Nutrition Side — partes con estructura propia
   Cabecera, pie, portada, reproductor y rejilla del área de miembros.
   Depende de las variables de ns.css: cárgalo después.
   ===================================================================== */

/* =====================================================================
   Cabecera
   El menú móvil funciona solo con CSS y una casilla oculta.
   Sin JavaScript: si htmx no carga, el menú sigue abriendo.
   ===================================================================== */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.oscuro .cabecera {
  background: rgba(0,0,0,.92);
  border-bottom-color: var(--navy-60);
}

/* Quien pide menos transparencia en el sistema suele hacerlo porque el texto
   sobre material translúcido le resulta ilegible, no por estética. La cabecera
   pasa a opaca: es la única superficie del sitio que muestrea lo que hay
   debajo. */
@media (prefers-reduced-transparency: reduce) {
  .cabecera         { background: var(--blanco); backdrop-filter: none; }
  .oscuro .cabecera { background: var(--negro); }
}

.cabecera .barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r5); min-height: 68px;
}

.marca-sitio {
  display: inline-flex; align-items: center; flex-shrink: 0;
}
.logo-sitio img {
  width: 168px; height: auto; max-height: 58px; object-fit: contain;
}

/* --- navegación ---
   margin-right:auto pega el menú a la marca y empuja las acciones
   hasta el extremo derecho, como en la maqueta. */
/* El hueco se aprieta solo. Con `gap` fijo de 32 px la barra medía más que
   los 1128 px útiles de `.envoltura` y el navegador resolvía el exceso
   partiendo las etiquetas: «Mis / consultas» en dos renglones, que es lo que
   hacía que la cabecera se viera rota en un portátil y bien en un monitor. */
.menu {
  display: flex; align-items: center;
  gap: clamp(var(--r4), 1.6vw, var(--r6));
  margin-right: auto;
}
.menu a {
  font-size: .93rem; color: var(--tinta-suave);
  padding-block: 4px; border-bottom: 2px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
  /* Una etiqueta de navegación no se parte NUNCA. Antes que dos renglones,
     que se active el menú de hamburguesa. */
  white-space: nowrap;
}
.menu a:hover { color: var(--tinta); }
.menu a.activo { color: var(--tinta); border-bottom-color: var(--verde); font-weight: 500; }
.menu .menu-cuenta { display: none; }
.oscuro .menu a { color: var(--hielo-tenue); }
.oscuro .menu a:hover { color: var(--blanco); }
.oscuro .menu a.activo { color: var(--blanco); border-bottom-color: var(--verde); }

.acciones { display: flex; align-items: center; gap: var(--r3); }
.menu-solo-movil { display: none; }
.selector-idioma { position: relative; margin: 0; }
.selector-idioma summary {
  min-width: 86px; height: 40px; padding: 0 11px;
  border: 1px solid rgba(0,0,0,.14); border-radius: var(--pildora);
  background-color: var(--blanco); color: var(--tinta);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  list-style: none; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.selector-idioma summary::-webkit-details-marker { display: none; }
.selector-idioma[open] summary { border-color: rgba(141,139,85,.62); }
.selector-flecha {
  width: 10px; height: 7px; flex: 0 0 auto;
  overflow: visible; color: currentColor;
  transition: transform var(--transicion);
}
.selector-flecha path {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.selector-idioma[open] .selector-flecha { transform: rotate(180deg); }
.bandera {
  position: relative; flex: 0 0 auto; display: inline-block;
  width: 22px; height: 14px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.13); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.bandera-mx { background: linear-gradient(90deg, #006847 0 33.33%, #fff 33.33% 66.66%, #CE1126 66.66%); }
.bandera-mx::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; border-radius: 50%; background: #9C7B35;
  transform: translate(-50%, -50%);
}
.bandera-us {
  background: repeating-linear-gradient(180deg, #B22234 0 2px, #fff 2px 4px);
}
.bandera-us::after {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 10px; height: 8px; background: #3C3B6E;
}
.idioma-menu {
  position: absolute; z-index: 50; top: calc(100% + 8px); right: 0;
  width: 158px; padding: 6px; border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px; background: var(--blanco); box-shadow: var(--sombra);
}
.idioma-menu a {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border-radius: 9px; color: var(--tinta-suave); font-size: .82rem; font-weight: 500;
}
.idioma-menu a:hover, .idioma-menu a.activo { background: var(--crema); color: var(--tinta); }
.idioma-menu a.activo::after {
  content: "✓"; margin-left: auto; color: var(--verde-hondo); font-weight: 700;
}

/* Estado de membresía en la cabecera */
.pastilla-estado {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 var(--r4);
  background: var(--crema); border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--pildora);
  font-size: .78rem; color: var(--tinta-suave);
}
.oscuro .pastilla-estado {
  background: var(--negro-80); border-color: var(--negro-60); color: var(--hielo-suave);
}
.pastilla-estado strong { color: var(--tinta); font-weight: 600; }
.oscuro .pastilla-estado strong { color: var(--blanco); }

/* Iniciales en blanco. Sobre el oliva de marca el blanco da 3.53:1 y estas
   letras son de 13 px, así que no llega al 4.5:1 que pide el texto pequeño;
   sobre `--oliva-boton` —el mismo tono, seis puntos más oscuro— da 4.56:1.
   De paso el avatar queda en la misma familia que los botones. */
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--oliva-boton); color: var(--blanco);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 600; flex-shrink: 0;
}

/* --- interruptor del menú móvil --- */
.interruptor { display: none; }
.hamburguesa {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,.14); border-radius: var(--curva);
  background: transparent; cursor: pointer;
}
.oscuro .hamburguesa { border-color: var(--navy-60); }
.hamburguesa span {
  display: block; width: 18px; height: 1.5px; background: currentColor;
  position: relative;
}
.hamburguesa span::before,
.hamburguesa span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 1.5px; background: currentColor;
  transition: transform var(--transicion), top var(--transicion);
}
.hamburguesa span::before { top: -6px; }
.hamburguesa span::after  { top:  6px; }

/* 1024 y no 900. Entre esos dos anchos la barra ya no cabía —logo, seis
   enlaces, idioma, avatar y dos botones— y el resultado era peor que el menú
   de hamburguesa: etiquetas partidas y todo apretado. Más vale plegar antes
   que enseñar una cabecera rota. */
@media (max-width: 1024px) {
  .hamburguesa { display: inline-flex; }
  .cabecera-solo-escritorio { display: none !important; }

  /* La marca a la izquierda; acciones y hamburguesa a la derecha.
     El menú sale del flujo, así que su posición en el DOM no estorba. */
  .marca-sitio { order: 1; margin-right: auto; }
  .acciones    { order: 2; }
  .hamburguesa { order: 3; }

  .menu {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanco);
    border-bottom: 1px solid rgba(0,0,0,.10);
    padding: var(--r3) var(--margen) var(--r5);
    max-height: calc(100dvh - 68px); overflow-y: auto;
    /* oculto por omisión, sin desmontarlo del DOM */
    display: none;
  }
  .oscuro .menu { background: var(--navy); border-bottom-color: var(--navy-60); }

  .interruptor:checked ~ .menu { display: flex; }
  .interruptor:checked ~ .hamburguesa span { background: transparent; }
  .interruptor:checked ~ .hamburguesa span::before { top: 0; transform: rotate(45deg); }
  .interruptor:checked ~ .hamburguesa span::after  { top: 0; transform: rotate(-45deg); }

  .menu a {
    padding: var(--r3) 0; font-size: 1.05rem;
    border-bottom: 1px solid rgba(0,0,0,.07);
  }
  .menu .menu-solo-movil { display: block; }
  .menu-formulario { margin: 0; }
  .menu-boton {
    width: 100%; padding: var(--r3) 0;
    border: 0; border-bottom: 1px solid rgba(0,0,0,.07);
    background: transparent; color: var(--tinta-suave);
    font: inherit; font-size: 1.05rem; text-align: left; cursor: pointer;
  }
  .menu-boton:hover { color: var(--tinta); }
  .oscuro .menu a { border-bottom-color: var(--navy-60); }
  .oscuro .menu-boton { color: var(--hielo-tenue); border-bottom-color: var(--navy-60); }
  .oscuro .menu-boton:hover { color: var(--blanco); }
  .menu a.activo { border-bottom-color: rgba(0,0,0,.07); }
  .menu .menu-cuenta {
    display: flex; justify-content: center; margin-top: var(--r3);
    border: 0; border-radius: var(--radio-btn); background: var(--oliva-boton);
    color: var(--blanco); font-weight: 600;
  }
  .menu .menu-cuenta:hover { color: var(--blanco); background: var(--oliva-boton-hover); }

}

/* La cabecera se reordena para que el logo quede a la izquierda
   y la hamburguesa a la derecha, con el menú desplegando debajo.
   El ancho tiene que ser el MISMO que activa la hamburguesa: con 900 aquí y
   1024 allá quedaba una franja donde el menú ya era desplegable pero la barra
   todavía no se dejaba envolver. */
.cabecera .barra { position: relative; }
@media (max-width: 1024px) {
  .cabecera .barra { flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .cabecera .barra {
    min-height: 60px; flex-wrap: nowrap; gap: 6px;
    padding-inline: max(10px, env(safe-area-inset-left));
  }
  .cabecera .acciones { gap: 6px; }
  .logo-sitio img { width: 112px; max-height: 44px; }
  .acciones .acceso-cabecera { display: none; }
  .hamburguesa { width: 40px; height: 40px; border-radius: 14px; }
  .menu { inset-block-start: 60px; max-height: calc(100dvh - 60px); }
}

/* =====================================================================
   Carrusel e introducción de la portada
   ===================================================================== */
.carrusel-inicio {
  position: relative; overflow: hidden; background: var(--crema);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.carrusel-pista {
  width: 100%; aspect-ratio: 1920 / 900;
  position: relative; display: flex;
  transition: transform .65s cubic-bezier(.22,.61,.36,1);
  will-change: transform; touch-action: pan-y;
}
.carrusel-pista.sin-transicion { transition: none; }
.diapositiva {
  display: block; flex: 0 0 100%; width: 100%; height: 100%;
  user-select: none; -webkit-user-drag: none;
}
.diapositiva picture, .diapositiva img { width: 100%; height: 100%; }
.diapositiva img { object-fit: contain; }

.carrusel-flecha {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 46px; height: 46px; padding: 0; border: 1px solid rgba(0,0,0,.12);
  border-radius: 50%; background: rgba(255,255,255,.88); color: var(--tinta);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--sombra); transition: background var(--transicion), transform var(--transicion);
}
.carrusel-flecha:hover { background: var(--blanco); transform: translateY(-50%) scale(1.04); }
.carrusel-flecha svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.carrusel-flecha.anterior { left: var(--r5); }
.carrusel-flecha.siguiente { right: var(--r5); }

.carrusel-indicadores {
  position: absolute; z-index: 2; left: 50%; bottom: var(--r4);
  transform: translateX(-50%); display: flex; gap: 9px;
  padding: 8px 12px; border-radius: var(--pildora); background: rgba(255,255,255,.88);
  box-shadow: var(--sombra);
}
.carrusel-indicadores button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.26); cursor: pointer;
}
.carrusel-indicadores button.activo { background: var(--verde-hondo); }

.presentacion-inicio { background: var(--blanco); }
.presentacion-rejilla { display: grid; gap: var(--r7); align-items: start; }
.datos-inicio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--r5); padding-top: var(--r4); border-top: 1px solid rgba(0,0,0,.10);
}
.datos-inicio strong { font-family: var(--tit); font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem); }
.cierre-inicio { border-block: 1px solid rgba(0,0,0,.07); }

.cifras-inicio { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); background: var(--rosa); }
.cifras-rejilla {
  display: grid; grid-template-columns: minmax(330px, .9fr) minmax(0, 2.1fr);
  gap: clamp(var(--r6), 5vw, var(--r8)); align-items: center;
}
.cifras-rejilla h2 {
  max-width: 16ch; color: var(--oliva-oscuro);
  font-size: clamp(1.75rem, 1.3rem + 1.25vw, 2.25rem); line-height: 1.15;
}
.cifras-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r5); }
.cifra-inicio { text-align: center; padding-inline: var(--r3); }
.cifra-inicio strong {
  display: block; color: var(--oliva-oscuro); font-family: var(--tit);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 4rem); line-height: 1;
  letter-spacing: -.035em; white-space: nowrap;
}
.cifra-inicio span {
  display: block; margin-top: var(--r3); color: var(--tinta-suave);
  font-size: clamp(.8rem, .75rem + .2vw, .95rem); font-weight: 600;
}

.testimonios-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r5); }
.testimonio {
  position: relative; padding: clamp(var(--r6), 4vw, var(--r7));
  border-radius: 28px; background: var(--blanco);
  border: 1px solid rgba(0,0,0,.09); box-shadow: var(--sombra);
}
.testimonio::before {
  content: "“"; display: block; height: .65em; color: var(--verde);
  font-family: Georgia, serif; font-size: 4.5rem; line-height: .85;
}
.testimonio blockquote { margin: var(--r4) 0 var(--r5); color: var(--tinta-suave); font-size: 1.05rem; }
.testimonio cite { color: var(--tinta); font-style: normal; font-weight: 600; }

@media (min-width: 900px) {
  .presentacion-rejilla { grid-template-columns: .9fr 1.1fr; }
}
@media (max-width: 700px) {
  .carrusel-pista {
    aspect-ratio: 428 / 760;
  }
  .diapositiva img { object-fit: cover; object-position: center top; }
  .carrusel-flecha { width: 40px; height: 40px; }
  .carrusel-flecha.anterior { left: var(--r3); }
  .carrusel-flecha.siguiente { right: var(--r3); }
  .datos-inicio { grid-template-columns: 1fr; gap: var(--r4); }
  .cifras-rejilla { grid-template-columns: 1fr; text-align: center; gap: var(--r6); }
  .cifras-rejilla h2 { max-width: 18ch; margin-inline: auto; }
  .testimonios-rejilla { grid-template-columns: 1fr; }
}

.dos-columnas {
  display: grid; gap: clamp(var(--r6), 4vw, var(--r8));
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: 1.05fr .95fr; }
  .dos-columnas.estrecha-derecha { grid-template-columns: 1.4fr .6fr; }
}

/* =====================================================================
   Pie
   ===================================================================== */
.pie {
  background: var(--crema); color: var(--tinta-suave);
  padding-block: var(--r8) var(--r6);
  font-size: var(--t-menor); border-top: 1px solid rgba(0,0,0,.10);
}
.pie.patron-pie {
  background-color: var(--crema);
  background-image: radial-gradient(rgba(141,139,85,.14) .8px, transparent .8px);
  background-size: 26px 26px;
}
.pie h4 {
  font-family: var(--ui); font-size: var(--t-micro);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 600; margin-bottom: var(--r4);
}
.pie a { color: var(--tinta-suave); display: block; padding-block: 5px; }
.pie a:hover { color: var(--verde-hondo); }
.logo-pie { display: inline-block !important; padding: 0 !important; margin-bottom: var(--r4); }
.logo-pie img { width: 210px; height: auto; }
.descripcion-pie { max-width: 34ch; color: var(--tinta-tenue); }
.pie .legal {
  margin-top: var(--r7); padding-top: var(--r5);
  border-top: 1px solid rgba(0,0,0,.12);
  display: flex; flex-wrap: wrap; gap: var(--r4);
  justify-content: space-between; align-items: center;
  color: var(--tinta-tenue); font-size: var(--t-micro);
}
.pie .legal a { display: inline; }
.pie .credito a { color: var(--verde-hondo); font-weight: 600; }
.pie .credito a:hover { text-decoration: underline; text-underline-offset: 3px; }

.rejilla.cuatro.pie-rejilla {
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  align-items: start;
}

@media (max-width: 700px) {
  .pie { padding-block: var(--r7) var(--r5); }
  .rejilla.cuatro.pie-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--r6) var(--r5);
  }
  .pie-marca, .pie-contacto { grid-column: 1 / -1; }
  .pie-marca {
    text-align: center; padding-bottom: var(--r5);
    border-bottom: 1px solid rgba(0,0,0,.10);
  }
  .logo-pie img { width: min(190px, 70vw); margin-inline: auto; }
  .descripcion-pie { margin-inline: auto; }
  .pie-contacto {
    padding-top: var(--r5); border-top: 1px solid rgba(0,0,0,.10);
    text-align: center;
  }
  .pie-contacto .redes { justify-content: center; }
  .pie-contacto .pila { align-items: center; }
  .pie .legal {
    margin-top: var(--r6); flex-direction: column; justify-content: center;
    text-align: center; line-height: 1.7;
  }
  .pie .legal .fila { justify-content: center; }
}

@media (max-width: 520px) {
  .cabecera .acciones { gap: 6px; }
  .selector-idioma summary { min-width: 70px; padding-inline: 8px; }
  .carrito-cabecera { width: 58px; min-height: 40px; padding-inline: 8px; gap: 6px; }
  .carrito-cabecera svg { width: 20px; height: 20px; }
  .carrito-cabecera #carrito-cuenta { min-width: 8px; line-height: 1; }
  .carrusel-flecha { width: 36px; height: 36px; }
  .carrusel-flecha.anterior { left: 10px; }
  .carrusel-flecha.siguiente { right: 10px; }
  .carrusel-indicadores { bottom: 10px; padding: 6px 9px; gap: 7px; }
  .carrusel-indicadores button { width: 8px; height: 8px; }
  .cifras-lista { gap: var(--r2); }
  .cifra-inicio { padding-inline: 2px; }
  .cifra-inicio strong { font-size: clamp(1.75rem, 8vw, 2.35rem); }
  .cifra-inicio span { font-size: .72rem; line-height: 1.25; }
}

@media (prefers-reduced-motion: reduce) {
  .carrusel-pista { transition: none; }
}

/* =====================================================================
   Área de miembros
   ===================================================================== */
.oscuro { background: var(--navy); color: var(--hielo); min-height: 100dvh; }
.oscuro h1, .oscuro h2, .oscuro h3 { color: var(--blanco); }

/* Tarjeta de rutina */
.rutina { display: flex; flex-direction: column; gap: var(--r3); }
.rutina .titulo { font-family: var(--tit); font-weight: 600; font-size: 1.02rem; line-height: 1.25; }
.rutina .meta { font-size: var(--t-micro); color: var(--tinta-tenue); }
.oscuro .rutina .meta { color: var(--hielo-apaga); }

/* Continuar viendo: horizontal en escritorio, vertical en móvil */
.continuar { display: grid; gap: var(--r5); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 720px) {
  .continuar { grid-template-columns: 280px 1fr; }
}

/* =====================================================================
   Reproductor
   ===================================================================== */
.reproductor {
  background: #000; border-radius: var(--curva); overflow: hidden;
  aspect-ratio: 16 / 9; width: 100%;
}
.reproductor video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.video-seguimiento {
  display: grid;
  gap: var(--r2);
  margin-top: calc(var(--r5) * -1 + var(--r3));
}
.video-progreso {
  width: 100%; height: 5px; overflow: hidden;
  border-radius: 999px; background: rgba(143, 143, 86, .18);
}
.video-progreso span {
  display: block; width: var(--avance-video, 0%); height: 100%;
  border-radius: inherit; background: var(--oliva);
  transition: width .25s ease;
}
.video-meta { color: var(--tinta-tenue); font-size: var(--t-micro); flex-wrap: wrap; }
.video-completada { min-height: 48px; padding-inline: var(--r5); }

.lista-episodios { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.episodio {
  display: grid; grid-template-columns: 28px 1fr auto; gap: var(--r3);
  align-items: center; padding: var(--r3); border-radius: var(--curva);
  transition: background var(--transicion);
}
.episodio:hover { background: rgba(0,0,0,.05); }
.episodio.actual { background: var(--perla); }
.episodio .indice { font-size: var(--t-micro); color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
.episodio .nombre { font-size: .9rem; line-height: 1.3; }
.episodio .dura   { font-size: var(--t-micro); color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
.oscuro .episodio:hover { background: rgba(255,255,255,.07); }
.oscuro .episodio .indice, .oscuro .episodio .dura { color: var(--hielo-apaga); }

@media (min-width: 1000px) {
  .con-lista { display: grid; grid-template-columns: 1fr 340px; gap: var(--r6); align-items: start; }
}

/* =====================================================================
   Acceso, registro: columna estrecha centrada
   ===================================================================== */
.columna-estrecha { width: 100%; max-width: 440px; margin-inline: auto; }
.columna-media    { width: 100%; max-width: 720px; margin-inline: auto; }

/* Separador con texto al centro */
.separador {
  display: flex; align-items: center; gap: var(--r4);
  color: var(--tinta-tenue); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .14em;
  margin-block: var(--r5);
}
.separador::before, .separador::after {
  content: ""; flex: 1; height: 1px; background: rgba(0,0,0,.12);
}
.oscuro .separador { color: var(--hielo-apaga); }
.oscuro .separador::before, .oscuro .separador::after { background: var(--navy-60); }

/* =====================================================================
   Carrito y checkout
   ===================================================================== */
.resumen {
  position: sticky; top: 88px;
  padding: var(--r2) 0 var(--r2) var(--r6);
  border-left: 1px solid rgba(0,0,0,.14);
}
.resumen .linea {
  display: flex; justify-content: space-between; gap: var(--r4);
  padding-block: var(--r2); font-size: var(--t-menor);
}
.resumen .total {
  margin-top: var(--r3); padding-top: var(--r4);
  border-top: 1px solid rgba(0,0,0,.14);
  font-size: 1.05rem; font-weight: 600;
}
.resumen .total .cifra { font-family: var(--tit); font-size: 1.5rem; letter-spacing: -.02em; }

.lista-carrito { border-top: 1px solid rgba(0,0,0,.12); }
.linea-carrito {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(112px, auto) minmax(155px, auto) minmax(125px, auto);
  gap: var(--r5);
  align-items: center;
  padding: var(--r5) var(--r2);
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.producto-carrito-nombre {
  width: fit-content;
  color: var(--tinta);
  font-size: 1.02rem;
  font-weight: 600;
}
.producto-carrito-nombre:hover { color: var(--oliva-boton-hover); }
.cuestionario-confirmado { color: var(--ok); align-items: center; }
.cuestionario-confirmado svg { flex: 0 0 auto; }
.quitar-carrito { margin-top: var(--r1); }
.dato-carrito,
.cantidad-carrito { display: flex; flex-direction: column; gap: var(--r2); }
.dato-carrito-etiqueta {
  color: var(--tinta-tenue);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cantidad-carrito-control { display: flex; align-items: center; gap: var(--r3); }
.cantidad-carrito input {
  width: 58px;
  min-height: 40px;
  padding-inline: var(--r2);
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.3);
  border-radius: 0;
  background: transparent;
  text-align: center;
}
.cantidad-carrito input:focus {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}
.total-carrito { align-items: flex-end; text-align: right; }
.total-carrito strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.boton-enlace {
  appearance: none;
  width: fit-content;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-micro);
  font-weight: 600;
  cursor: pointer;
}
.boton-enlace:hover { color: var(--oliva-boton-hover); }
.boton-enlace.accion-peligro { color: var(--tinta-tenue); }
.boton-enlace.accion-peligro:hover { color: var(--error); }
.estado-checkout {
  margin-top: var(--r5);
  padding: var(--r3) 0;
  border-block: 1px solid rgba(0,0,0,.12);
  color: var(--tinta-tenue);
  font-size: var(--t-menor);
  font-weight: 600;
  text-align: center;
}
.checkout-paypal { margin-top: var(--r5); padding-top: var(--r4); border-top: 1px solid rgba(0,0,0,.14); }

/* IMPRESCINDIBLE el `>`. Es la misma trampa que `.campo input`, en su tercera
   variante: sin el hijo directo, estas reglas alcanzaban también a los
   `label.opcion` y a los radios del selector de forma de cobro, que viven en
   `fieldset > .opciones` dentro de este mismo formulario. El radio heredaba
   `flex-direction: column`, así que el círculo salía ENCIMA del texto en vez
   de a su lado y las tres opciones se leían como tres cajas apiladas sin
   control visible: parecía que no se podía elegir. Los campos de nombre y
   correo sí son hijos directos, así que siguen recibiéndolas. */
.checkout-paypal > label { display: flex; flex-direction: column; gap: var(--r2); font-size: var(--t-menor); font-weight: 600; }
.checkout-paypal > label input {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.22); border-radius: 8px; background: var(--blanco);
  color: var(--tinta); font: inherit;
}
.checkout-paypal > label input:focus { outline: 2px solid var(--verde); outline-offset: 2px; }
.checkout-paypal > label input[readonly] { background: var(--perla); color: var(--tinta-tenue); }

/* El selector va a lo ancho de la columna del resumen: son 330 px y las
   opciones llevan dos renglones de texto, así que la rejilla automática de
   `.grupo-opciones .opciones` dejaría media palabra por fila. */
.checkout-paypal .opciones { grid-template-columns: 1fr; }
.checkout-paypal .opcion { align-items: flex-start; }
.checkout-paypal .opcion input[type="radio"] { margin-top: 2px; }
.paypal-boton { width: 100%; }
.resultado-pago { display: flex; flex-direction: column; gap: var(--r4); }
.resumen-resultado { margin: var(--r4) 0 0; border-block: 1px solid rgba(0,0,0,.14); }
.resumen-resultado > div { display: flex; justify-content: space-between; gap: var(--r4); padding: var(--r3) 0; }
.resumen-resultado dt { color: var(--tinta-tenue); }
.resumen-resultado dd { margin: 0; font-weight: 700; text-align: right; }
.resultado-pago.pago-pagado .rotulo { color: var(--ok); }
.resultado-pago.pago-fallido .rotulo,
.resultado-pago.pago-cancelado .rotulo { color: var(--error); }

/* Siguiente paso después de pagar como invitada. Una sola superficie clara,
   con tres pasos breves: no parece otro formulario ni compite con el recibo. */
.activacion-compra {
  margin-top: var(--r4); padding: clamp(22px, 4vw, 34px);
  border-radius: var(--curva);
  background: linear-gradient(140deg, var(--perla), #fff 72%);
  box-shadow: inset 0 0 0 1px rgba(122,120,73,.24);
}
.activacion-compra-cabecera {
  display: grid; grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--r3); align-items: start;
}
.activacion-compra-cabecera h2 { margin: 0; font-size: var(--t-h3); }
.activacion-compra-cabecera p { margin: 0; color: var(--tinta-suave); }
.activacion-compra-icono {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; background: var(--oliva-boton); color: var(--blanco);
  font-weight: 800; font-size: 20px;
}
.activacion-pasos {
  list-style: none; padding: 0; margin: var(--r5) 0 var(--r4);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r3);
}
.activacion-pasos li { display: flex; gap: 9px; align-items: center; font-size: var(--t-menor); }
.activacion-pasos li > span {
  flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(122,120,73,.14); color: var(--oliva-boton);
  font-weight: 800;
}
.activacion-vigencia { margin: 0 0 var(--r4); color: var(--tinta-tenue); }
.activacion-correo { display: grid; gap: var(--r2); }

@media (max-width: 620px) {
  .activacion-pasos { grid-template-columns: 1fr; }
  .activacion-compra .btn { width: 100%; }
}

@media (min-width: 900px) {
  .con-resumen { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--r7); align-items: start; }
}

@media (max-width: 1050px) {
  .linea-carrito {
    grid-template-columns: minmax(190px, 1fr) minmax(100px, auto) minmax(145px, auto);
  }
  .total-carrito { grid-column: 2; grid-row: 2; align-items: flex-start; text-align: left; }
  .cantidad-carrito { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 899px) {
  .resumen {
    position: static;
    margin-top: var(--r7);
    padding: var(--r5) 0 0;
    border-left: 0;
    border-top: 1px solid rgba(0,0,0,.14);
  }
}

@media (max-width: 620px) {
  .linea-carrito {
    grid-template-columns: 1fr 1fr;
    gap: var(--r4);
    padding-inline: 0;
  }
  .producto-carrito { grid-column: 1 / -1; }
  .dato-carrito { align-items: flex-start; text-align: left; }
  .cantidad-carrito { grid-column: 1 / -1; grid-row: auto; }
  .total-carrito { grid-column: auto; grid-row: auto; }
}

/* Selector de moneda */
.monedas { display: inline-flex; border: 1px solid rgba(0,0,0,.16); border-radius: var(--pildora); padding: 3px; }
.oscuro .monedas { border-color: var(--navy-60); }
.monedas button {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px var(--r4); border-radius: var(--pildora);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .04em;
  color: var(--tinta-tenue); transition: background var(--transicion), color var(--transicion);
}
/* El seleccionado era NEGRO mientras la acción principal de la misma pantalla
   era oliva: dos sistemas de color compitiendo a diez centímetros uno de otro.
   Lo elegido y lo accionable son la misma idea y llevan el mismo color. */
.monedas button[aria-pressed="true"] { background: var(--oliva-boton); color: var(--blanco); }
.oscuro .monedas button[aria-pressed="true"] { background: var(--verde); color: var(--navy); }

/* =====================================================================
   Pasos del checkout
   ===================================================================== */
.pasos { display: flex; flex-wrap: wrap; gap: var(--r4); margin-bottom: var(--r6); }
.pasos li {
  display: flex; align-items: center; gap: var(--r2);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-tenue); list-style: none;
}
.pasos li .n {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid currentColor; display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
}
.pasos li.hecho  { color: var(--verde-hondo); }
.pasos li.actual { color: var(--tinta); font-weight: 600; }
.pasos li.actual .n { background: var(--oliva-boton); color: var(--blanco); border-color: var(--oliva-boton); }

/* =====================================================================
   Avance en la lista de rutinas
   Sobre superficie oscura: la palomita y la barra tienen que leerse encima
   de una miniatura cualquiera, así que llevan su propio fondo.
   ===================================================================== */

.rutina .portada { position: relative; }

.rutina-vista {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--verde); color: var(--navy);
  box-shadow: 0 1px 6px rgba(0,0,0,.45);
}

.rutina-avance {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; background: rgba(0,0,0,.55);
  border-radius: 0 0 var(--r2) var(--r2);
  overflow: hidden;
}

.rutina-avance i {
  display: block; height: 100%;
  background: var(--verde);
  transition: width var(--transicion);
}

.rutina-reanudar { color: var(--verde); font-weight: 600; }
.rutina-lista    { color: var(--hielo-apaga); }

/* =====================================================================
   Banda de cifras de «Sobre Lizbeth»

   Dos cifras, no tres. Con `rejilla tres` y solo dos elementos quedaba una
   columna vacía a la derecha y el bloque se leía descuadrado; aquí van
   centradas, que es como se lee una banda de cifras con titular encima.

   El color NO es `--verde`. El oliva de marca sobre este fondo rosa da
   2.87:1: no alcanza ni el umbral de 3:1 que se le pide al texto grande.
   `--oliva-boton` es el mismo tono seis puntos más oscuro y llega a 3.70:1.
   ===================================================================== */
.cifras-titulo {
  text-align: center;
  margin-bottom: var(--r7);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cifras-banda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--r6) clamp(var(--r7), 10vw, var(--r9));
  text-align: center;
}
.cifras-banda > * { align-items: center; }

.cifra-grande {
  font-family: var(--tit);
  font-size: clamp(2.75rem, 2rem + 3.4vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;      /* a este tamaño el tracking normal abre de más */
  color: var(--oliva-boton);
  font-variant-numeric: tabular-nums;
}
.cifras-banda h3 {
  font-size: var(--t-cuerpo);
  font-weight: 600;
  letter-spacing: 0;
}

/* =====================================================================
   Kit de herramientas — /miembros/menus

   Misma rejilla y misma tarjeta que las rutinas, con dos diferencias que
   nacen del contenido, no del gusto:

   1. Las portadas reales miden 1200 × 675 (16:9). La caja conserva esa misma
      proporción y `contain` garantiza que nunca se recorten letras. Sin el
      antiguo relleno interior, la imagen ocupa todo el ancho sin un segundo
      marco artificial.

   2. La acción se ancla abajo. Los resúmenes miden de una a tres líneas y
      sin anclarla los botones quedaban a distinta altura en cada tarjeta de
      la misma fila, que es lo que hace que una rejilla se vea desalineada.

   Los selectores llevan `.herramienta` delante para ganarle en
   especificidad a `.portada` / `.portada img` de ns.css, y no por orden de
   archivo: el orden se rompe al mover una regla, la especificidad no.
   ===================================================================== */

.herramienta .portada {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--perla), var(--crema));
}

.herramienta .portada img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}

/* Marcador cuando falta la portada: la inicial del material. Es
   decorativo —el nombre está escrito debajo— así que va aria-hidden. */
.herramienta-inicial {
  font-family: var(--tit);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--oliva-boton);
}

.herramienta .titulo {
  font-family: var(--tit);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Tres líneas de resumen. El campo admite 400 caracteres y con uno largo la
   tarjeta crecía al doble que sus vecinas; el texto completo vive en la
   ficha del material, no en la rejilla. */
.herramienta-resumen {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0;
}

.herramienta-accion {
  margin-top: auto;      /* pega la acción al pie de la tarjeta */
  padding-top: var(--r1);
}

/* El peso del archivo, alineado con el botón. Cifras tabulares para que
   «2.4 MB» y «11.8 MB» no bailen de una tarjeta a otra. */
.herramienta-peso {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =====================================================================
   Visor de documento — /miembros/herramienta/{id}

   Desde el 10 de septiembre de 2026 no hay PDF en el navegador: cada página
   llega como imagen pintada en el servidor, y eso es lo que retira descargar
   e imprimir. Dos presentaciones:

     · SIN JavaScript: la tira de páginas, una debajo de otra.
     · CON ns-visor.js: `.visor--hojas`, una hoja a la vez, como un recetario
       en papel, con animación al pasar y pantalla completa.

   Las hojas se APILAN en la misma celda de una rejilla en vez de ir unas
   debajo de otras. Así la que sale y la que entra ocupan el mismo sitio
   durante la animación y se cruzan sin que nada salte ni cambie de alto.
   ===================================================================== */

.visor-titulo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--r4); flex-wrap: wrap;
  margin-bottom: var(--r4);
}

.visor-paginas-cuenta { flex-shrink: 0; }

/* El alto útil para una hoja completa: la ventana menos la cabecera del sitio
   (68 px), la barra del visor y un respiro. `dvh` descuenta la barra de
   direcciones del móvil, que con `vh` taparía el pie de la hoja. */
.visor { --alto-util: calc(100vh - 68px - 96px - 56px); }
@supports (height: 100dvh) {
  .visor { --alto-util: calc(100dvh - 68px - 96px - 56px); }
}

/* ---- La tira: lo que se ve sin JavaScript ---- */
.visor-paginas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--r4);
  padding: var(--r4);
  border-radius: var(--curva);
  /* El fondo es el de la mesa, no el del papel: separa la hoja del resto de
     la página sin dibujarle un borde. */
  background: var(--perla);
}

.visor-pagina {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;              /* el alto del atributo solo reserva el hueco */
  background: #fff;          /* papel mientras llega la imagen */
  border-radius: 4px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 6px 24px rgb(0 0 0 / .08);
  /* Fricción, no candado: sin arrastrar, sin seleccionar y sin el menú de
     «guardar imagen» de la pulsación larga en iPhone. */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---- La barra ---- */
/* Pegada bajo la cabecera del sitio: con una hoja alta ajustada al ancho,
   las flechas siguen a mano mientras se lee hasta abajo. */
.visor-barra {
  position: sticky; top: 68px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--r3);
  padding: 10px var(--r3) 12px;
  margin-bottom: var(--r3);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--curva);
}

.visor-nav,
.visor-herramientas { display: flex; align-items: center; gap: 6px; }

.visor-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 42px; height: 42px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--radio-btn);
  background: transparent; color: var(--tinta);
  cursor: pointer; line-height: 1;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.visor-boton:hover:not(:disabled) { background: var(--perla); }
.visor-boton:focus-visible { outline: 2px solid var(--oliva-boton); outline-offset: 2px; }
.visor-boton:disabled { opacity: .3; cursor: default; }
.visor-boton svg {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.visor-boton-texto { border-color: rgba(0,0,0,.14); font-size: .92rem; font-weight: 500; }

.visor-indicador {
  display: flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.visor-ir {
  height: 36px; min-width: 58px; padding: 0 8px;
  border: 1px solid rgba(0,0,0,.18); border-radius: 8px;
  background: #fff; font-weight: 600; cursor: pointer;
}
.visor-total { opacity: .7; white-space: nowrap; }

.visor-retoma {
  display: flex; align-items: center; gap: 10px;
  font-size: .92rem;
  animation: visor-aparece .3s ease both;
}
/* Es un <button> —hace algo, no lleva a otra URL— con aspecto de enlace. Sin
   esto sale con el recuadro y el fondo de fábrica del navegador, que es como
   se vio en la primera prueba. */
.visor-retoma button.enlace {
  padding: 0; border: 0; background: none;
  font: inherit; cursor: pointer;
}

/* Barra de avance: la hoja en la que se va, de un vistazo. */
.visor-progreso {
  order: 10; flex-basis: 100%;
  height: 3px; border-radius: 3px; overflow: hidden;
  background: rgba(0,0,0,.08);
}
.visor-progreso span {
  display: block; width: 0; height: 100%;
  background: var(--oliva-boton);
  transition: width .35s cubic-bezier(.22,.7,.2,1);
}

/* Qué icono enseña cada botón: el de lo que HARÁ al pulsarlo. */
.visor[data-ajuste="ancho"] .icono-a-ancho,
.visor[data-ajuste="hoja"]  .icono-a-hoja,
.visor:not(.en-pantalla) .icono-salir,
.visor.en-pantalla .icono-entrar { display: none; }

/* ---- El escenario, en modo hojas ---- */
.visor-escenario { position: relative; }

.visor--hojas .visor-paginas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  perspective: 1800px;       /* la profundidad del giro al pasar de hoja */
}
.visor--hojas .visor-pagina { grid-area: 1 / 1; display: none; }
.visor--hojas .visor-pagina.es-actual { display: block; z-index: 2; }
/* Las vecinas están cargadas y en su sitio, pero sin verse: pasar de hoja es
   instantáneo. Las demás, `display: none`, ni se piden. */
.visor--hojas .visor-pagina.es-vecina { display: block; visibility: hidden; }
/* La que sale sigue a la vista mientras dura su animación, aunque ya no sea
   la actual —y aunque se haya saltado lejos con el selector—. */
.visor--hojas .visor-pagina.sale-adelante,
.visor--hojas .visor-pagina.sale-atras {
  display: block; visibility: visible; z-index: 1; pointer-events: none;
}

/* Ajustes */
.visor--hojas[data-ajuste="ancho"] .visor-pagina { width: 100%; max-width: 900px; height: auto; }
.visor--hojas[data-ajuste="hoja"]  .visor-pagina {
  width: auto; height: auto; max-width: 100%; max-height: var(--alto-util);
}

/* ---- Pasar de hoja ----
   Se desliza y gira un poco sobre su eje, como una hoja que se levanta, en
   la dirección en que se pasa. Corto a propósito: por debajo de medio
   segundo se siente como pasar la página; por encima, como esperar. */
@keyframes hoja-entra-adelante {
  from { opacity: 0; transform: translateX(7%) rotateY(-10deg) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes hoja-sale-adelante {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(-7%) rotateY(10deg) scale(.98); }
}
@keyframes hoja-entra-atras {
  from { opacity: 0; transform: translateX(-7%) rotateY(10deg) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes hoja-sale-atras {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(7%) rotateY(-10deg) scale(.98); }
}
@keyframes visor-aparece { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.visor-pagina.entra-adelante { animation: hoja-entra-adelante .42s cubic-bezier(.22,.7,.2,1) both; }
.visor-pagina.entra-atras    { animation: hoja-entra-atras    .42s cubic-bezier(.22,.7,.2,1) both; }
.visor-pagina.sale-adelante  { animation: hoja-sale-adelante  .32s cubic-bezier(.4,0,.6,1) both; }
.visor-pagina.sale-atras     { animation: hoja-sale-atras     .32s cubic-bezier(.4,0,.6,1) both; }

/* ---- Flechas a los lados ----
   Solo con la hoja completa a la vista: con la hoja al ancho, una página
   alta dejaría una flecha centrada fuera de la pantalla. Y solo con ratón:
   en pantallas táctiles se desliza, y dos flechas sobre la receta estorban. */
.visor-lado { display: none; }
.visor--hojas[data-ajuste="hoja"] .visor-lado {
  position: absolute; top: 50%; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-top: -26px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 2px 12px rgb(0 0 0 / .18);
  color: var(--tinta); cursor: pointer;
  transition: opacity .2s ease, transform .15s ease;
}
.visor--hojas[data-ajuste="hoja"] .visor-lado:hover:not(:disabled) { transform: scale(1.06); }
.visor-lado-izq { left: var(--r3); }
.visor-lado-der { right: var(--r3); }
.visor-lado:disabled { opacity: 0; pointer-events: none; }
.visor-lado svg {
  width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: none) { .visor--hojas[data-ajuste="hoja"] .visor-lado { display: none; } }

/* ---- Pantalla completa ----
   Una sola clase para las dos vías: la API del navegador y la capa que la
   imita en iPhone. Fondo oscuro: una hoja clara sobre la mesa oscura es lo
   que hace que la receta sea lo único que se ve. */
.visor.en-pantalla {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  margin: 0;
  background: #1b1a17; color: #f1eee6;
  --alto-util: calc(100vh - 80px - 24px);
}
@supports (height: 100dvh) {
  .visor.en-pantalla { --alto-util: calc(100dvh - 80px - 24px); }
}
.visor.en-pantalla .visor-barra {
  position: static; margin: 0;
  border: 0; border-radius: 0;
  background: rgba(27,26,23,.96); backdrop-filter: none;
}
.visor.en-pantalla .visor-boton { color: #f1eee6; }
.visor.en-pantalla .visor-boton:hover:not(:disabled) { background: rgba(255,255,255,.10); }
.visor.en-pantalla .visor-boton-texto { border-color: rgba(255,255,255,.25); }
.visor.en-pantalla .visor-ir { background: #2a2925; color: #f1eee6; border-color: rgba(255,255,255,.25); }
.visor.en-pantalla .visor-progreso { background: rgba(255,255,255,.12); }
.visor.en-pantalla .visor-escenario { flex: 1; min-height: 0; overflow: auto; }
.visor.en-pantalla .visor-paginas {
  min-height: 100%; padding: 12px;
  align-items: center;
  background: transparent; border-radius: 0;
}
.visor.en-pantalla[data-ajuste="ancho"] .visor-pagina { max-width: 1100px; }
.visor.en-pantalla .visor-pagina { box-shadow: 0 10px 40px rgb(0 0 0 / .45); }
/* La capa simulada tapa la página, pero la de debajo seguiría moviéndose con
   el dedo: mientras está abierta, no se desplaza. */
html.visor-abierto,
html.visor-abierto body { overflow: hidden; }

.visor-pie {
  margin-top: var(--r4);
  flex-wrap: wrap;
  align-items: center;
}

/* La nota de impresión no se ve en pantalla; solo al imprimir. */
.visor-sin-impresion { display: none; }

/* ---- Teléfono ----
   La hoja ocupa el ancho entero: cada píxel cuenta y el margen de mesa se
   come la letra pequeña de un recetario. La barra se queda con los iconos. */
@media (max-width: 640px) {
  .visor-paginas { padding: 0; gap: var(--r3); background: transparent; }
  .visor-pagina { border-radius: 0; box-shadow: none; }
  .visor-barra { padding: 8px 8px 10px; gap: 8px; }
  .visor-etiqueta { display: none; }
  .visor-boton-texto { padding: 0 10px; }
  .visor.en-pantalla .visor-paginas { padding: 0; }
}

/* ---- Lo que salió al probar en nueve tamaños de pantalla ----
   Medido con Chrome sin cabeza el 10 de septiembre de 2026, de 320 px a
   2560 px. Tres cosas se veían mal y las tres son de pantallas CHICAS: */

/* 1. Teléfono estrecho (320 px): la barra se partía en dos filas y ocupaba
      123 px. Compacta, cabe en una. */
@media (max-width: 380px) {
  .visor-barra { gap: 6px; padding: 6px 6px 8px; }
  .visor-nav, .visor-herramientas { gap: 2px; }
  .visor-boton { min-width: 36px; height: 38px; padding: 0 6px; }
  .visor-boton-texto { padding: 0 8px; }
  .visor-ir { min-width: 48px; height: 34px; padding: 0 4px; }
  .visor-total { font-size: .88rem; }
}

/* 2. Pantalla BAJA —un teléfono en horizontal, 390 px de alto—: entre la
      cabecera y la barra se comían el 40 % del alto, y la «hoja completa»
      salía de 113×170 px, ilegible. Aquí la barra es mínima y deja de ir
      pegada, y no se ofrece la hoja completa: ns-visor.js la cambia por el
      ajuste al ancho, también al entrar en pantalla completa. */
@media (max-height: 519px) {
  .visor-barra { position: static; padding: 4px 8px 6px; gap: 6px; }
  .visor-boton { height: 34px; min-width: 34px; }
  .visor-ir { height: 32px; }
  .visor [data-accion="ajuste"] { display: none; }
}

/* El aviso de «te quedaste en la página N» iba en medio de la barra y, en
   una tableta vertical, empujaba los botones a una segunda fila (135 px de
   barra). Por debajo de 900 px va en su propia línea, bajo las flechas. */
@media (max-width: 900px) {
  .visor-retoma { flex-basis: 100%; order: 5; justify-content: center; }
}

/* 3. Ventana estrecha: las flechas laterales quedaban ENCIMA de la receta. Ahí
      se pasa de hoja con la barra o deslizando. */
@media (max-width: 700px) {
  .visor--hojas[data-ajuste="hoja"] .visor-lado { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .visor-pagina[class*="entra-"],
  .visor-pagina[class*="sale-"],
  .visor-retoma { animation: none !important; }
  .visor-progreso span { transition: none; }
}

/* Imprimir desde el menú del navegador no saca el material: se esconden las
   páginas y la barra, y queda la nota. Los atajos Ctrl+P y Cmd+P ya se
   anulan en ns-visor.js; esto cubre el menú, que no se puede interceptar. */
@media print {
  .visor-paginas, .visor-barra, .visor-lado { display: none !important; }
  .visor-sin-impresion { display: block !important; }
}

/* Título de tarjeta que enlaza sin parecer un enlace suelto: hereda el
   color del texto y solo se subraya al apuntarlo o al recibir el foco. */
.enlace-limpio {
  color: inherit;
  text-decoration: none;
}

.enlace-limpio:hover,
.enlace-limpio:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La portada es un enlace, pero su contenido es decorativo y va
   aria-hidden: el nombre de al lado ya lleva al mismo sitio. Se le quita
   del recorrido de tabulación en el HTML; aquí solo se asegura que no
   herede subrayado ni color de enlace. */
.herramienta a.portada {
  text-decoration: none;
  color: inherit;
}

/* Estado del acceso dentro de Mi cuenta.

   La pastilla es `inline-flex`, pero aquí vive dentro de una `.pila`, que es
   un flex en columna: sin esto se estira de lado a lado y deja de parecer una
   etiqueta para parecer una barra. */
.acceso-estado .pastilla-estado { align-self: flex-start; }