/* ============================================================
   BIOLUZ CHILE — hoja de estilos principal

   Paleta: cielo nocturno del Valle de Elqui.
   · Espacio — azul casi negro, el fondo de todo
   · Panel   — azul profundo translúcido, donde va el contenido
   · Azul    — el azul eléctrico, solo donde importa
   · Ámbar   — para los avisos, para que no se confundan
   · Letras  — blancas

   Las estrellas del fondo las dibuja assets/js/main.js y las
   entrega en la variable --estrellas. Si el navegador no ejecuta
   ese archivo, queda el azul liso y todo se sigue leyendo igual.
   ============================================================ */

:root{
  /* Fondos */
  --espacio:    #04081C;
  --espacio-2:  #070F2A;
  --panel:      rgba(12,25,64,.62);
  --panel-solido:#0B1638;
  --superficie: rgba(13,27,70,.66);

  /* Texto */
  --tinta:      #FFFFFF;
  --texto:      #C6D3EF;
  --texto-tenue:#93A3C9;

  /* Azul eléctrico: el acento */
  --azul:       #2F6BFF;
  --azul-hover: #1D53DC;
  --azul-claro: #92B6FF;
  --azul-tenue: rgba(47,107,255,.16);

  /* Ámbar: avisos */
  --ambar:      #D9A441;
  --ambar-tenue:rgba(217,164,65,.12);

  --borde:      rgba(146,182,255,.16);
  --borde-vivo: rgba(146,182,255,.36);

  --sombra:      0 1px 3px rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.32);
  --sombra-alta: 0 2px 8px rgba(0,0,0,.4), 0 24px 54px rgba(6,20,70,.55);

  --radio:      18px;
  --radio-sm:   11px;
  --ancho:      1140px;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

/* Lo que se marca como oculto se oculta, aunque la clase diga otra cosa */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; background:var(--espacio); color-scheme:dark; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  color:var(--texto);
  background-color:var(--espacio);
  background-image:var(--estrellas, none);
  background-repeat:repeat;
  background-size:420px 420px;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.008em;
  margin:0 0 .55em;
  color:var(--tinta);
  text-wrap:balance;
}
h1{ font-size:clamp(2.1rem, 5.2vw, 3.4rem); }
h2{ font-size:clamp(1.6rem, 3.4vw, 2.3rem); }
h3{ font-size:1.2rem; font-weight:500; color:var(--tinta); }
p{ margin:0 0 1.15em; }
a{ color:var(--azul-claro); }
:focus-visible{ outline:2.5px solid var(--azul-claro); outline-offset:3px; border-radius:5px; }

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

.seccion{ padding:84px 0; position:relative; }
.seccion-compacta{ padding:56px 0; position:relative; }

/* Banda con panel: el cielo se atenúa para que el texto descanse */
.seccion-crema{
  background:var(--panel);
  border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde);
}

/* Banda destacada: aquí sí aparece el azul eléctrico */
.seccion-noche{
  background:
    radial-gradient(72% 110% at 14% 0%, rgba(47,107,255,.26) 0%, rgba(47,107,255,0) 62%),
    radial-gradient(60% 95% at 92% 100%, rgba(47,107,255,.16) 0%, rgba(47,107,255,0) 60%),
    rgba(6,14,44,.72);
  border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde);
}

.intro{ font-size:1.1rem; color:var(--texto); max-width:62ch; }

/* Bajada de un título: el nombre técnico o el detalle que va debajo del h2 */
.subtitulo{
  font-family:var(--sans); font-size:1rem; font-weight:600;
  color:var(--azul-claro); max-width:48ch;
  margin:-.35em 0 1.15em;
}

.etiqueta{
  display:inline-block; font-family:var(--sans); font-size:.73rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--azul-claro);
  margin-bottom:16px;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 28px; border-radius:100px; border:1.5px solid transparent;
  font-family:var(--sans); font-size:.97rem; font-weight:700; text-decoration:none;
  cursor:pointer; transition:transform .16s ease, box-shadow .22s ease, background .2s ease, border-color .2s ease;
  line-height:1;
}
.btn:hover{ transform:translateY(-2px); }
.btn-principal{ background:var(--azul); color:#fff; box-shadow:0 3px 16px rgba(47,107,255,.45); }
.btn-principal:hover{ background:var(--azul-hover); box-shadow:0 8px 26px rgba(47,107,255,.55); }
.btn-secundario{ background:rgba(255,255,255,.06); color:var(--tinta); border-color:var(--borde-vivo); }
.btn-secundario:hover{ border-color:var(--azul-claro); background:var(--azul-tenue); }
.btn-claro{ background:#fff; color:var(--espacio); }
.btn-borde-claro{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-borde-claro:hover{ background:rgba(255,255,255,.12); }
.btn-wsp{ background:#25A768; color:#fff; box-shadow:0 3px 14px rgba(37,167,104,.4); }
.btn-wsp:hover{ background:#1E8C57; }
.btn-ancho{ width:100%; }
.grupo-botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:60;
  background:rgba(4,8,28,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borde);
}
.cabecera-interior{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; height:78px;
}
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; line-height:1.1; }
.logo-marca{
  width:auto; height:48px; display:block; flex:none;
  filter:drop-shadow(0 0 14px rgba(47,107,255,.35));
  transition:transform .2s ease;
}
.logo:hover .logo-marca{ transform:scale(1.06); }
.logo-texto{ display:flex; flex-direction:column; }
.logo-pie{ margin-bottom:16px; }
.logo-nombre{
  font-family:var(--serif); font-size:1.55rem; font-weight:500;
  letter-spacing:.01em; color:var(--tinta);
}
.logo-bajada{
  font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--azul-claro); margin-top:3px; font-weight:600;
}
.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  padding:9px 14px; border-radius:100px; text-decoration:none;
  color:var(--texto); font-size:.94rem; font-weight:500;
  transition:background .18s ease, color .18s ease;
}
.nav a:hover{ background:var(--azul-tenue); color:var(--tinta); }
.nav a.activo{ color:var(--azul-claro); font-weight:700; }
.nav a.btn{ color:#fff; }
.cabecera .btn{ padding:12px 22px; font-size:.9rem; }
.boton-menu{
  display:none; background:none; border:0; padding:10px; cursor:pointer;
  color:var(--tinta);
}
.boton-menu svg{ width:26px; height:26px; }

/* ---------- Portada ---------- */
.portada{
  position:relative;
  padding:78px 0 92px;
  background:
    radial-gradient(58% 78% at 82% 6%, rgba(47,107,255,.30) 0%, rgba(47,107,255,0) 62%),
    radial-gradient(52% 70% at 6% 96%, rgba(29,83,220,.22) 0%, rgba(29,83,220,0) 60%);
}
.portada-rejilla{
  display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:center;
}
.portada h1{ max-width:15ch; }
.portada .bajada{
  font-size:1.13rem; color:var(--texto); max-width:46ch; margin-bottom:4px;
}
.portada .ubicacion{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--azul-claro); margin-bottom:18px;
}
.portada .ubicacion::before{
  content:''; width:26px; height:1.5px; background:var(--azul-claro); display:block;
}

/* ---------- Rejillas ---------- */
.rejilla{ display:grid; gap:26px; }
.rejilla-2{ grid-template-columns:repeat(2,1fr); }
.rejilla-3{ grid-template-columns:repeat(3,1fr); }
.rejilla-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Tarjetas ---------- */
.tarjeta{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  padding:30px; box-shadow:var(--sombra);
  backdrop-filter:blur(6px);
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .24s ease, border-color .24s ease;
}
.tarjeta:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); border-color:var(--borde-vivo); }
.tarjeta h3{ margin-bottom:.4em; }
.tarjeta p{ color:var(--texto); font-size:.97rem; }
.tarjeta .precio{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--borde);
  font-family:var(--serif); font-size:1.32rem; font-weight:500; color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.tarjeta .precio span{
  display:block; font-family:var(--sans); font-size:.8rem; font-weight:500;
  color:var(--texto-tenue); letter-spacing:0; margin-top:4px;
}
.tarjeta-destacada{
  border-color:rgba(47,107,255,.55); border-width:1.5px;
  background:linear-gradient(168deg, rgba(28,58,140,.72) 0%, rgba(13,27,70,.68) 72%);
  box-shadow:0 2px 8px rgba(0,0,0,.35), 0 22px 50px rgba(20,52,150,.42);
}
/* Tarjeta para usar dentro de la banda destacada */
.tarjeta-oscura{ background:rgba(255,255,255,.06); box-shadow:none; }
.cinta{
  align-self:flex-start; background:var(--azul-tenue); color:var(--azul-claro);
  border:1px solid rgba(146,182,255,.28);
  font-size:.69rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px; margin-bottom:16px;
}

/* ---------- Fotos (marcadores mientras no hay imagen real) ---------- */
.foto{
  position:relative; border-radius:var(--radio); overflow:hidden;
  background-color:var(--panel-solido);
  background-size:cover; background-position:center;
  min-height:290px;
  border:1px solid var(--borde);
}
.foto-alta{ min-height:430px; }
.foto-baja{ min-height:200px; }
.foto::after{
  content:attr(data-foto);
  position:absolute; left:16px; bottom:16px; right:16px;
  font-size:.74rem; line-height:1.45; color:var(--azul-claro);
  background:rgba(4,8,28,.86); border:1px dashed var(--borde-vivo);
  padding:9px 12px; border-radius:9px;
  display:none;
}
body.borrador .foto::after{ display:block; }
body.borrador .foto{
  background-image:
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
}
/* La portada sí tiene nombre fijo: aparece sola apenas exista el archivo */
body.borrador .foto-portada,
.foto-portada{
  min-height:490px;
  background-image:
    url('../img/portada.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  /* Encuadre: el domo está a la derecha y arriba, así que corremos
     el centro del recorte hacia allá para que no se pierda. */
  background-position:60% 42%;
}
/* Como ya hay foto de verdad, esta no lleva el cartelito del borrador */
body.borrador .foto-portada::after{ display:none; }

/* Retrato de Guillermo, en la sección "El fundador" de centro.html.
   La foto ya viene recortada (assets/img/guillermo.png) desde donde
   empieza el gorro hasta el cierre del chaleco, así que la proporción
   queda fija sin importar el ancho de pantalla. */
.foto-guillermo,
body.borrador .foto-guillermo{
  min-height:0;
  aspect-ratio: 1086 / 1230;
  background-image:
    url('../img/guillermo.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center;
}
body.borrador .foto-guillermo::after{ display:none; }

/* Foto de una sesión de Biofrecuencias, en terapias.html */
body.borrador .foto-biofrecuencias,
.foto-biofrecuencias{
  background-image:
    url('../img/biofrecuencias.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center 30%;
}
body.borrador .foto-biofrecuencias::after{ display:none; }

/* Franja con 4 fotos del centro, portada de centro.html */
body.borrador .foto-centro-fotos,
.foto-centro-fotos{
  background-image:
    url('../img/centro-fotos.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center;
}
body.borrador .foto-centro-fotos::after{ display:none; }

/* Foto de la aplicación de Apiterapia, en terapias.html */
body.borrador .foto-apiterapia,
.foto-apiterapia{
  aspect-ratio: 1024 / 1536;
  width:80%;
  margin:0 auto;
  background-image:
    url('../img/apiterapia.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center;
}
body.borrador .foto-apiterapia::after{ display:none; }

/* Foto de la camilla, en Sesión individual de terapias.html */
body.borrador .foto-camilla,
.foto-camilla{
  aspect-ratio: 1084 / 1451;
  background-image:
    url('../img/camilla.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center;
}
body.borrador .foto-camilla::after{ display:none; }

/* Foto de los cuencos y el Gong Atlantic (una sola imagen con las dos
   fotos juntas), en Meditaciones Guiadas de terapias.html */
body.borrador .foto-cuencos-y-gong,
.foto-cuencos-y-gong{
  aspect-ratio: 1024 / 1536;
  background-image:
    url('../img/cuencos-y-gong.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center;
}
body.borrador .foto-cuencos-y-gong::after{ display:none; }

/* Cuadrícula de 4 fotos del domo, en El Templo de las Meditaciones (centro.html) */
body.borrador .foto-domo-fotos,
.foto-domo-fotos{
  background-image:
    url('../img/domo-fotos.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center;
}
body.borrador .foto-domo-fotos::after{ display:none; }

/* Foto del valle con cielo limpio, en El entorno (centro.html) */
body.borrador .foto-cielo-limpio,
.foto-cielo-limpio{
  background-image:
    url('../img/cielo-limpio.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center;
}
body.borrador .foto-cielo-limpio::after{ display:none; }

/* Fotos del valle, en Dónde estamos (index.html) */
body.borrador .foto-ultimo-pueblo-1,
.foto-ultimo-pueblo-1{
  background-image:
    url('../img/ultimo-pueblo-1.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center;
}
body.borrador .foto-ultimo-pueblo-1::after{ display:none; }

body.borrador .foto-ultimo-pueblo-2,
.foto-ultimo-pueblo-2{
  background-image:
    url('../img/ultimo-pueblo-2.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center;
}
body.borrador .foto-ultimo-pueblo-2::after{ display:none; }

/* Foto de un seminario en curso, en seminarios.html */
body.borrador .foto-curso,
.foto-curso{
  aspect-ratio: 1254 / 1254;
  background-image:
    url('../img/curso.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center;
}
body.borrador .foto-curso::after{ display:none; }

/* Foto principal de cabanas.html: la torre del Cohete Poético de noche */
body.borrador .foto-cabana-principal,
.foto-cabana-principal{
  background-image:
    url('../img/cabana-cohete-2.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center 30%;
}
body.borrador .foto-cabana-principal::after{ display:none; }

/* Foto de "La casa · para grupos" (con el Cohete Poético), en cabanas.html */
body.borrador .foto-cabana-cohete,
.foto-cabana-cohete{
  background-image:
    url('../img/cabana-cohete-1.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center 65%;
}
body.borrador .foto-cabana-cohete::after{ display:none; }

/* Fotos de "Casa-cabaña grande", en cabanas.html: una principal y tres
   chicas en la mini-galería debajo de la descripción */
body.borrador .foto-cabana-grande-1,
.foto-cabana-grande-1{
  background-image:
    url('../img/cabana-grande-1.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
  background-position:center;
}
body.borrador .foto-cabana-grande-1::after{ display:none; }

body.borrador .foto-cabana-grande-2,
.foto-cabana-grande-2{ background-image:url('../img/cabana-grande-2.jpg'); background-position:center; }
body.borrador .foto-cabana-grande-3,
.foto-cabana-grande-3{ background-image:url('../img/cabana-grande-3.jpg'); background-position:center; }
body.borrador .foto-cabana-grande-4,
.foto-cabana-grande-4{ background-image:url('../img/cabana-grande-4.jpg'); background-position:center; }

/* ---------- Mini-galería de fotos chicas dentro de una tarjeta ---------- */
.mini-galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; }
.mini-galeria .foto{ min-height:0; aspect-ratio:1; border-radius:10px; }
.mini-galeria .foto::after,
body.borrador .mini-galeria .foto::after{ display:none; }

/* ---------- Ver una foto completa (lightbox) ----------
   Se agrega solo a las fotos reales (main.js revisa cuáles tienen
   imagen de verdad); las que todavía son solo cartelito no se abren. */
.foto-clicable{ cursor:zoom-in; }
.lightbox-fondo{
  position:fixed; inset:0; z-index:200;
  background:rgba(2,5,16,.92);
  display:flex; align-items:center; justify-content:center;
  padding:26px;
}
.lightbox-fondo[hidden]{ display:none; }
.lightbox-imagen{
  max-width:100%; max-height:100%;
  border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.lightbox-cerrar{
  position:fixed; top:18px; right:18px;
  width:42px; height:42px; border-radius:100px;
  background:rgba(4,8,28,.86); border:1px solid var(--borde-vivo);
  color:var(--texto); font-size:1.4rem; line-height:1;
  cursor:pointer;
}
.lightbox-cerrar:hover{ color:var(--azul-claro); }

/* ---------- Galería de dos fotos (Ceremonias de cuencos) ---------- */
.galeria-dos{ display:grid; gap:16px; }
/* Las dos se recortan arriba a propósito: la del domo hasta donde
   empiezan las ventanas (con un poco menos de piso al final), y la
   de las personas hasta antes de la camilla roja del fondo. */
.galeria-dos .foto{ min-height:0; }
.foto-meditacion-1,
body.borrador .foto-meditacion-1{
  aspect-ratio: 1.6;
  background-position:center 82%;
  background-image:
    url('../img/meditacion-1.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
}
.foto-meditacion-2,
body.borrador .foto-meditacion-2{
  aspect-ratio: 1.87;
  background-position:center bottom;
  background-image:
    url('../img/meditacion-2.jpg'),
    repeating-linear-gradient(45deg, rgba(146,182,255,.05) 0 13px, transparent 13px 26px),
    linear-gradient(145deg, #12224F 0%, #0A1130 100%);
}
body.borrador .foto-meditacion-1::after,
body.borrador .foto-meditacion-2::after{ display:none; }

/* ---------- Bloque partido (foto + texto) ---------- */
.partido{
  display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center;
}
.partido-invertido .partido-texto{ order:2; }

/* ---------- Pasos ---------- */
.pasos{ counter-reset:paso; display:grid; gap:26px; grid-template-columns:repeat(3,1fr); }
.paso{ position:relative; padding-top:56px; }
.paso::before{
  counter-increment:paso; content:counter(paso);
  position:absolute; top:0; left:0;
  width:40px; height:40px; border-radius:50%;
  background:rgba(47,107,255,.14); color:var(--azul-claro);
  border:1.5px solid rgba(146,182,255,.42);
  font-family:var(--serif); font-size:1.05rem; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}
.paso h3{ font-size:1.08rem; }
.paso p{ color:var(--texto); font-size:.95rem; margin:0; }

/* ---------- Formulario ---------- */
.formulario{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  padding:34px; box-shadow:var(--sombra); backdrop-filter:blur(6px);
}
.campo{ margin-bottom:18px; }
.campo label{
  display:block; font-size:.87rem; font-weight:700; color:var(--tinta);
  margin-bottom:7px;
}
.campo input, .campo select, .campo textarea{
  width:100%; padding:13px 15px; font-family:var(--sans); font-size:1rem;
  color:var(--tinta); background:rgba(2,5,18,.55);
  border:1.5px solid var(--borde); border-radius:var(--radio-sm);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.campo input::placeholder, .campo textarea::placeholder{ color:var(--texto-tenue); }
.campo select option{ background:var(--panel-solido); color:#fff; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(47,107,255,.28); background:rgba(2,5,18,.75);
}
.campo textarea{ min-height:112px; resize:vertical; }
.campo .ayuda{ font-size:.82rem; color:var(--texto-tenue); margin-top:6px; }
.fila-campos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.aviso-formulario{
  font-size:.85rem; color:var(--texto-tenue); text-align:center; margin:14px 0 0;
}
/* El calendario del navegador se ve negro sobre negro sin esto */
.campo input[type="date"]{ color-scheme:dark; }

/* ---------- Preguntas frecuentes ---------- */
.pregunta{ border-bottom:1px solid var(--borde); padding:4px 0; }
.pregunta summary{
  cursor:pointer; list-style:none; padding:19px 36px 19px 0; position:relative;
  font-family:var(--serif); font-size:1.1rem; font-weight:500; color:var(--tinta);
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{
  content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:1.45rem; font-weight:300; color:var(--azul-claro);
}
.pregunta[open] summary::after{ content:'\2013'; }
.pregunta p{ color:var(--texto); font-size:.97rem; padding-bottom:6px; margin-bottom:12px; }

/* ---------- Cita ---------- */
.cita{
  font-family:var(--serif); font-size:clamp(1.35rem,2.6vw,1.9rem); line-height:1.45;
  font-weight:400; color:var(--tinta); max-width:30ch; margin:0 auto;
}
.cita-autor{
  font-family:var(--sans); font-size:.85rem; font-weight:600;
  color:var(--azul-claro); letter-spacing:.05em; margin-top:18px;
}

/* ---------- Listas con visto ---------- */
.lista-visto{ list-style:none; padding:0; margin:0 0 1.2em; }
.lista-visto li{
  position:relative; padding-left:32px; margin-bottom:12px;
  color:var(--texto); font-size:.98rem;
}
.lista-visto li::before{
  content:''; position:absolute; left:0; top:9px;
  width:16px; height:9px; border-left:2.2px solid var(--azul-claro);
  border-bottom:2.2px solid var(--azul-claro); transform:rotate(-45deg);
}

/* ---------- Franja de datos ---------- */
.franja-datos{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; text-align:center; }
.dato .numero{
  font-family:var(--serif); font-size:1.95rem; font-weight:400; color:var(--azul-claro);
  line-height:1.2; display:block; margin-bottom:8px;
}
.dato p{ font-size:.93rem; color:var(--texto); margin:0; }

/* ---------- Aviso de salud ---------- */
.aviso-salud{
  background:rgba(47,107,255,.10); border:1px solid var(--borde);
  border-left:3px solid var(--azul);
  border-radius:var(--radio-sm); padding:19px 22px;
  font-size:.9rem; color:var(--texto); margin:0;
}
.aviso-salud strong{ color:var(--tinta); }

/* ---------- Aviso operativo (cierres, cupos, fechas) ---------- */
.aviso-atencion{
  background:var(--ambar-tenue); border:1px solid rgba(217,164,65,.3);
  border-left:3px solid var(--ambar);
  border-radius:var(--radio-sm); padding:22px 26px;
  font-size:.98rem; color:var(--texto); margin:0;
}
.aviso-atencion strong{ color:#F0D9A8; }
.aviso-atencion p:last-child{ margin-bottom:0; }

/* Tarjeta de algo que hoy no se puede tomar */
.cinta-apagada{
  background:rgba(255,255,255,.07); color:var(--texto-tenue);
  border-color:rgba(255,255,255,.14);
}
.tarjeta-apagada .precio{ color:var(--texto-tenue); }

/* ---------- Maqueta de calendario (vista previa, todavía no funciona) ---------- */
.calendario-maqueta{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); padding:26px; max-width:420px;
}
.calendario-grilla{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.calendario-dia{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; border-radius:8px; font-size:.82rem; color:var(--texto);
  background:rgba(255,255,255,.04);
}
.calendario-nombre{
  background:none; color:var(--texto-tenue); font-weight:700; font-size:.7rem;
  text-transform:uppercase;
}
.calendario-dia-vacio{ background:none; }
.calendario-dia-ocupado{
  background:rgba(255,255,255,.07); color:var(--texto-tenue);
  text-decoration:line-through; text-decoration-color:rgba(146,182,255,.3);
}
.calendario-dia-libre{ background:var(--azul-tenue); color:var(--azul-claro); }
.calendario-leyenda{
  display:flex; gap:22px; margin-top:18px; font-size:.82rem; color:var(--texto-tenue);
}
.calendario-leyenda span{ display:inline-flex; align-items:center; gap:7px; }
.calendario-punto{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.calendario-punto-libre{ background:var(--azul-claro); }
.calendario-punto-ocupado{ background:rgba(255,255,255,.2); }

/* ============================================================
   Tienda
   ============================================================ */

/* Foto del producto, arriba de la tarjeta */
.producto-foto{
  margin:-30px -30px 22px;
  border-radius:18px 18px 0 0;
  background:#fff;
  height:230px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.producto-foto img{
  width:100%; height:100%;
  object-fit:contain;
  padding:18px;
}

/* Caja donde se arma el pedido */
.caja-pedido{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); padding:30px; box-shadow:var(--sombra);
  backdrop-filter:blur(6px);
}
.pedido-vacio{ color:var(--texto-tenue); margin:0; text-align:center; padding:14px 0; }

.linea-pedido{
  display:grid; grid-template-columns:1fr auto auto;
  gap:16px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--borde);
}
.linea-pedido:first-child{ padding-top:0; }
.linea-nombre{ color:var(--tinta); font-weight:600; font-size:.98rem; line-height:1.35; }
.linea-nombre span{
  display:block; font-weight:400; font-size:.83rem; color:var(--texto-tenue); margin-top:3px;
}
.linea-cantidad{ display:flex; align-items:center; gap:4px; }
.linea-cantidad button{
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid var(--borde);
  color:var(--tinta); font-size:1.1rem; line-height:1; cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}
.linea-cantidad button:hover{ background:var(--azul-tenue); border-color:var(--azul-claro); }
.linea-cantidad span{
  min-width:30px; text-align:center; font-weight:700; color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.linea-subtotal{
  font-family:var(--serif); font-size:1.1rem; color:var(--tinta);
  min-width:88px; text-align:right; font-variant-numeric:tabular-nums;
}

.nota-digital{
  margin:20px 0 0; font-size:.9rem; color:var(--texto-tenue);
  background:var(--azul-tenue); border-radius:var(--radio-sm); padding:14px 16px;
}

.sumas{ margin-top:24px; border-top:1px solid var(--borde); padding-top:18px; }
.fila-suma{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:7px 0; font-size:.97rem;
}
.fila-suma strong{ color:var(--tinta); font-variant-numeric:tabular-nums; }
.fila-total{
  border-top:1px solid var(--borde); margin-top:10px; padding-top:16px;
  font-size:1.05rem;
}
.fila-total strong{ font-family:var(--serif); font-size:1.55rem; font-weight:500; }

.btn[disabled]{
  opacity:.45; cursor:not-allowed; box-shadow:none;
}
.btn[disabled]:hover{ transform:none; background:var(--azul); }

.enlace-suave{
  background:none; border:0; padding:4px; cursor:pointer;
  color:var(--texto-tenue); font-family:var(--sans); font-size:.88rem;
  text-decoration:underline;
}
.enlace-suave:hover{ color:var(--azul-claro); }

/* Barra flotante con el total del pedido */
.barra-pedido{
  position:fixed; left:20px; bottom:20px; z-index:70;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--azul); color:#fff; text-decoration:none;
  padding:14px 20px; border-radius:100px; font-weight:700; font-size:.94rem;
  box-shadow:0 6px 24px rgba(47,107,255,.5);
  transition:transform .16s ease;
}
.barra-pedido:hover{ transform:scale(1.04); }
.barra-pedido svg{ width:19px; height:19px; }

/* ---------- Pie ---------- */
.pie{
  background:rgba(2,5,16,.86); color:var(--texto);
  border-top:1px solid var(--borde);
  padding:64px 0 30px; font-size:.94rem;
}
.pie a{ color:var(--texto); text-decoration:none; }
.pie a:hover{ color:var(--azul-claro); text-decoration:underline; }
.pie-rejilla{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:44px; margin-bottom:46px; }
.pie h4{ color:var(--tinta); font-family:var(--sans); font-size:.75rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; margin:0 0 16px; }
.pie ul{ list-style:none; padding:0; margin:0; }
.pie li{ margin-bottom:10px; }
.pie li a.enlace-icono{ display:inline-flex; align-items:center; gap:8px; }
.pie li a.enlace-icono svg{ width:16px; height:16px; flex:none; }
.pie-abajo{
  border-top:1px solid var(--borde); padding-top:26px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.85rem; color:var(--texto-tenue);
}

/* ---------- Botón flotante de WhatsApp ---------- */
.wsp-flotante{
  position:fixed; right:20px; bottom:20px; z-index:70;
  display:inline-flex; align-items:center; gap:10px;
  background:#25A768; color:#fff; text-decoration:none;
  padding:14px 20px; border-radius:100px; font-weight:700; font-size:.94rem;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  transition:transform .16s ease;
}
.wsp-flotante:hover{ transform:scale(1.04); }
.wsp-flotante svg{ width:21px; height:21px; fill:currentColor; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .btn:hover, .tarjeta:hover, .wsp-flotante:hover{ transform:none; }
}

/* ============================================================
   Celular y tablet
   ============================================================ */
@media (max-width: 940px){
  .rejilla-4{ grid-template-columns:repeat(2,1fr); }
  .rejilla-3{ grid-template-columns:repeat(2,1fr); }
  .pasos{ grid-template-columns:1fr; gap:20px; }
  .partido{ grid-template-columns:1fr; gap:34px; }
  .partido-invertido .partido-texto{ order:0; }
  .portada-rejilla{ grid-template-columns:1fr; gap:38px; }
  /* Misma especificidad que la regla de arriba, si no, no la pisa */
  body.borrador .foto-portada,
  .foto-portada{ min-height:340px; }
  .pie-rejilla{ grid-template-columns:1fr 1fr; gap:32px; }
}

/* El menú pasa a hamburguesa antes de que deje de caber en una línea */
@media (max-width: 900px){
  .nav{
    position:fixed; inset:78px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(6,12,36,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--borde);
    padding:12px 18px 22px; box-shadow:var(--sombra);
    display:none;
  }
  .nav.abierto{ display:flex; }
  .nav a{ padding:14px 6px; border-radius:0; border-bottom:1px solid var(--borde); font-size:1rem; }
  .nav a:last-child{ border-bottom:0; }
  .nav .btn{ margin-top:14px; justify-content:center; }
  .boton-menu{ display:block; }
  .cabecera .nav .btn-cabecera{ display:inline-flex; }
}

@media (max-width: 720px){
  body{ font-size:16px; }
  .logo{ gap:9px; }
  .logo-marca{ height:40px; }
  .seccion{ padding:58px 0; }
  .portada{ padding:48px 0 66px; }
  .rejilla-2,.rejilla-3,.rejilla-4{ grid-template-columns:1fr; }
  .fila-campos{ grid-template-columns:1fr; }
  .franja-datos{ grid-template-columns:1fr; gap:28px; }
  .pie-rejilla{ grid-template-columns:1fr; }
  .formulario{ padding:26px 20px; }
  .wsp-flotante{ right:14px; bottom:14px; padding:13px 17px; font-size:.9rem; }
  .grupo-botones .btn{ flex:1 1 100%; }

  /* Tienda */
  .caja-pedido{ padding:22px 18px; }
  .producto-foto{ margin:-30px -30px 20px; height:200px; }
  .linea-pedido{ grid-template-columns:1fr auto; row-gap:10px; }
  .linea-nombre{ grid-column:1 / -1; }
  .linea-subtotal{ text-align:right; }
  /* La barra del pedido y la de WhatsApp comparten el borde de abajo */
  .barra-pedido{ left:14px; bottom:14px; padding:13px 16px; font-size:.88rem; }
  .barra-pedido svg{ width:17px; height:17px; }
}