/* ============================================================
   ROSITA BIOHIPNOSIS — el vestido del sitio

   La paleta sale del branding. Lo que cambió respecto de la primera
   versión, y por qué:

   · MENOS ROSA. El rosa nube estaba en el fondo de la portada y teñía
     todo. El branding lo guarda para «piezas emocionales», no para
     bañar una página. Ahora el peso lo llevan turquesa aurora y
     ciruela, y el rosa aparece como acento y nada más.

   · UNA FRANJA OSCURA. Todo el sitio en marfil se lee plano y largo.
     La franja ciruela profunda parte la página al medio y es donde los
     símbolos perlados brillan de verdad. No es negro —el branding lo
     prohíbe—: es su propio ciruela oscurecido.

   · BRILLO EN VEZ DE NEÓN. Un neón de verdad rompería la marca. Lo que
     sí es suyo es el brillo perlado que ya tienen los símbolos: al
     pasar el mouse se encienden, y eso hace el mismo trabajo sin
     traicionar nada.
   ============================================================ */
:root{
  /* los siete del branding */
  --marfil:#F8EFE7; --rosa:#F4D6DE; --lila:#C9B6E4;
  --turquesa:#8FD9D2; --lavanda:#A88BC2; --dorado:#D9B36C; --ciruela:#6F587E;

  /* versiones legibles sobre claro: los del branding son decorativos y
     no llegan al contraste que necesita un texto */
  --turquesa-t:#0E7C72; --dorado-t:#8F6718; --ciruela-t:#4E3A5C;

  --fondo:#F7F6F4; --papel:#FFFFFF; --tenue:#E4F2F0;
  --oscuro:#1E1728; --oscuro-2:#2A2036;
  --tinta:#332742; --titulo:#2B1E39; --suave:#645770;
  --linea:#E6E5E1; --hilo:rgba(217,179,108,.55);

  --wa:#15938A; --wa-oscuro:#0E7C72;

  --sombra:0 1px 2px rgba(59,46,71,.04), 0 10px 30px -20px rgba(59,46,71,.4);
  --sombra-alta:0 2px 6px rgba(59,46,71,.06), 0 22px 48px -28px rgba(111,88,126,.55);
  --brillo:0 0 0 1px var(--hilo), 0 12px 34px -14px rgba(143,217,210,.6), 0 6px 18px -10px rgba(201,182,228,.55);
  --r:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}
body{
  margin:0; color:var(--tinta); background:var(--fondo);
  font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased;
  /* El fondo trabajado: dos auroras muy suaves y un grano finísimo. El
     grano es lo que evita que los degradés se vean en bandas. */
  background-image:
    radial-gradient(900px 520px at 8% -6%, rgba(94,205,193,.30), transparent 60%),
    radial-gradient(760px 460px at 96% 2%, rgba(201,182,228,.06), transparent 62%),
    radial-gradient(620px 380px at 50% 100%, rgba(217,179,108,.09), transparent 66%);
  background-repeat:no-repeat;
}

h1,h2,h3,h4{font-family:'Montserrat', ui-sans-serif, system-ui, sans-serif; color:var(--titulo); text-wrap:balance; margin:0}
h1{font-size:clamp(2rem,5.4vw,3.05rem); font-weight:700; letter-spacing:-.024em; line-height:1.1}
h2{font-size:clamp(1.35rem,3.3vw,1.9rem); font-weight:600; letter-spacing:-.015em; line-height:1.22}
h3{font-size:1.06rem; font-weight:600; letter-spacing:-.004em}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
strong,b{font-weight:600; color:var(--titulo)}
a{color:var(--ciruela-t)}
img{max-width:100%; height:auto}
:focus-visible{outline:2px solid var(--lavanda); outline-offset:3px; border-radius:6px}
code{font-family:'Manrope',ui-monospace,monospace; font-weight:600; font-size:.9em; color:var(--titulo);
  background:var(--tenue); padding:2px 7px; border-radius:7px; border:1px solid var(--hilo); white-space:nowrap}

.saltar{position:absolute; left:-9999px; top:0; background:var(--papel); padding:12px 18px; border-radius:0 0 12px 0; z-index:99}
.saltar:focus{left:0}
.ancho{max-width:800px; margin:0 auto; padding:0 22px}
.angosta{max-width:680px}
.amplio{max-width:1060px}
.eyebrow{font-family:'Montserrat',sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--turquesa-t); margin:0 0 14px}

/* ── cabecera ───────────────────────────────────────────── */
.cab{position:sticky; top:0; z-index:40; background:rgba(250,247,243,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea)}
.cab__in{max-width:1100px; margin:0 auto; padding:10px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.logo img{width:44px; height:auto; display:block; transition:transform .3s ease, filter .3s ease}
.logo:hover img{transform:scale(1.08) rotate(-3deg); filter:drop-shadow(0 0 12px rgba(217,179,108,.75))}
.logo__txt{display:flex; flex-direction:column; line-height:1}
.logo__nombre{font-family:'Great Vibes',cursive; font-size:1.75rem; color:var(--ciruela); line-height:1}
.logo__bajada{font-family:'Montserrat',sans-serif; font-size:.72rem; letter-spacing:.1em; color:var(--turquesa-t); font-weight:500; margin-top:1px}
.nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.nav a{position:relative; font-family:'Montserrat',sans-serif; font-size:.82rem; font-weight:500;
  color:var(--tinta); text-decoration:none; padding:8px 11px; border-radius:9px; transition:color .2s}
.nav a::after{content:''; position:absolute; left:11px; right:11px; bottom:4px; height:2.5px; border-radius:2px;
  background:linear-gradient(90deg,#3FC3B4,var(--dorado)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.nav a:hover{color:var(--titulo)} .nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ciruela-t)} .nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav__wa{background:linear-gradient(135deg,#127F76,#0E6B63); color:#fff !important;
  border-radius:999px !important; padding:9px 18px !important;
  box-shadow:0 6px 16px -8px rgba(14,124,114,.9)}
.nav__wa::after{display:none}
.nav__wa:hover{background:linear-gradient(135deg,#159085,#127F76);
  box-shadow:0 10px 24px -8px rgba(14,124,114,1), 0 0 0 3px rgba(63,195,180,.22)}
.nav__btn{display:none; flex-direction:column; gap:4px; padding:10px; cursor:pointer; border-radius:9px}
.nav__btn span{display:block; width:20px; height:2px; background:var(--ciruela); border-radius:2px}
@media(max-width:900px){
  .nav__btn{display:flex}
  .nav{display:none; width:100%; flex-direction:column; align-items:stretch; gap:2px; padding-bottom:8px}
  .nav a{padding:12px}
  .nav__check:checked ~ .nav{display:flex}
}

/* ── portada ────────────────────────────────────────────── */
.hero{position:relative; padding:56px 0 60px; overflow:hidden}
.hero::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(660px 340px at 76% 14%, rgba(94,205,193,.42), transparent 62%),
    radial-gradient(520px 280px at 12% 82%, rgba(201,182,228,.10), transparent 64%),
    radial-gradient(420px 240px at 96% 92%, rgba(217,179,108,.14), transparent 66%)}
.hero__in{position:relative; max-width:1060px; margin:0 auto; padding:0 22px}
/* el contenedor es el que manda: la mariposa se ubica respecto del texto */
.hero__grid{display:grid; gap:34px; align-items:center}
@media(min-width:980px){.hero__grid:has(.retrato){grid-template-columns:1.2fr .8fr; gap:52px}}
.hero h1{margin-bottom:20px}
.hero__cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:26px}
.retrato img{width:100%; border-radius:22px; display:block; box-shadow:var(--sombra-alta)}

/* La foto de Rosita, chica y redonda, al lado de su nombre en «Sobre Rosita».
   Va acá y no en la portada: la portada es de la marca, esta página es de
   ella. En el celular se apila y queda arriba del nombre. */
.presenta{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:6px}
.presenta h1{margin:0}
.presenta__foto{width:136px; height:136px; flex:none; border-radius:50%;
  box-shadow:0 14px 30px -14px rgba(111,88,126,.55)}
@media(max-width:560px){.presenta__foto{width:104px; height:104px}}

/* Las alas de la marca, detrás del encabezado. Es la imagen que más la
   identifica y estaba sin usar. */
.retrato--mariposa{display:grid; place-items:center}
.retrato--mariposa img{
  width:100%; max-width:470px; height:auto; border-radius:0; box-shadow:none;
  filter:drop-shadow(0 26px 46px rgba(111,88,126,.34)) drop-shadow(0 0 44px rgba(94,205,193,.4));
  animation:flotar 9s ease-in-out infinite;
}
@keyframes flotar{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
@media(max-width:980px){.retrato--mariposa img{max-width:300px}}

.credencial{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; padding:0; list-style:none}
.credencial li{font-family:'Montserrat',sans-serif; font-size:.76rem; font-weight:600;
  background:var(--papel); border:0; color:var(--ciruela-t); padding:9px 16px; border-radius:999px;
  box-shadow:0 1px 3px rgba(59,46,71,.06), 0 8px 20px -14px rgba(111,88,126,.5),
             inset 0 0 0 1px rgba(217,179,108,.3)}

/* ── la respuesta corta ─────────────────────────────────── */
.tldr{position:relative; background:var(--papel); border:0;
  border-radius:20px; padding:24px 28px 24px 30px; font-size:1.05rem;
  box-shadow:0 2px 6px rgba(59,46,71,.05), 0 22px 46px -26px rgba(111,88,126,.5)}
.tldr::before{content:''; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:4px;
  background:linear-gradient(180deg,#3FC3B4,#8FD9D2 45%,var(--dorado))}
main .ancho > .tldr{margin:22px 0 30px}

/* ── botones ────────────────────────────────────────────── */
.wa{display:inline-flex; align-items:center; gap:9px; color:#fff;
  background:linear-gradient(135deg,#1FA79C,#0E7C72);
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:.95rem; text-decoration:none;
  padding:14px 24px; border-radius:999px; box-shadow:0 10px 26px -12px rgba(14,124,114,.95);
  transition:transform .18s ease, box-shadow .25s ease, background .2s}
.wa:hover{background:linear-gradient(135deg,#25B8AC,#12897F); color:#fff; transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(14,124,114,1), 0 0 0 4px rgba(63,195,180,.24)}
/* El segundo nivel: para quien todavía no quiere escribir. Si los dos
   botones gritan igual, ninguno gana. */
.wa--fantasma{background:rgba(255,255,255,.75); color:var(--ciruela-t); border:1.5px solid var(--lavanda); box-shadow:none}
.wa--fantasma:hover{background:#fff; color:#3D2B4B; border-color:var(--ciruela);
  box-shadow:0 10px 26px -12px rgba(111,88,126,.8), 0 0 0 3px rgba(168,139,194,.22)}
.link{position:relative; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.9rem;
  text-decoration:none; color:var(--ciruela-t)}
.link::after{content:''; position:absolute; left:0; right:0; bottom:-3px; height:1.5px; border-radius:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.link:hover::after{transform:scaleX(1)}

/* ── franjas ────────────────────────────────────────────── */
.franja{position:relative; padding:58px 0}
.franja--claro{background:linear-gradient(180deg, #E4F2F0, #EFF7F5);
  box-shadow:inset 0 1px 0 rgba(63,195,180,.28), inset 0 -1px 0 rgba(63,195,180,.28)}
.franja--oscuro{background:var(--oscuro); color:#E6DDEC}
.franja--oscuro h2,.franja--oscuro h3{color:#F6F0F8}
.franja--oscuro .entrada,.franja--oscuro p{color:#C4B7CE}
.franja--oscuro strong{color:#fff}
.franja--oscuro .eyebrow{color:var(--turquesa)}
.franja--oscuro .nota{border-left-color:var(--dorado); color:#C4B7CE}
.franja h2{margin-bottom:10px}
.entrada{color:var(--suave); margin-bottom:26px; max-width:62ch}

/* la línea curva que separa: el branding pide «líneas curvas finas» */
.onda{display:block; width:100%; height:26px; color:var(--lila); opacity:.65}

.dos{display:grid; gap:38px}
@media(min-width:820px){.dos{grid-template-columns:1fr 1fr; gap:46px; max-width:960px}}
.tres{display:grid; gap:16px; margin:24px 0}
@media(min-width:660px){.tres{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.tres{grid-template-columns:repeat(3,1fr)}}

/* ── tarjetas ───────────────────────────────────────────── */
.caso{position:relative; background:var(--papel); border:0; border-radius:20px;
  padding:28px 24px; overflow:hidden; text-align:center;
  box-shadow:0 2px 4px rgba(59,46,71,.04), 0 14px 34px -20px rgba(59,46,71,.35);
  transition:transform .22s ease, box-shadow .3s ease, border-color .25s ease}
.caso::after{content:''; position:absolute; inset:0; border-radius:var(--r); pointer-events:none;
  background:radial-gradient(220px 120px at 100% 0%, rgba(143,217,210,.16), transparent 70%); opacity:0; transition:opacity .3s}
.caso:hover{transform:translateY(-6px);
  box-shadow:0 4px 10px rgba(59,46,71,.06), 0 26px 50px -22px rgba(46,33,57,.45),
             0 0 0 1.5px rgba(63,195,180,.55), 0 0 40px -4px rgba(63,195,180,.5)}
.caso:hover::after{opacity:1}
.caso h3{margin-bottom:7px}
.caso p{font-size:.96rem; color:var(--suave); margin:0 auto; max-width:34ch}
.caso--liso{background:rgba(255,255,255,.6); box-shadow:0 10px 26px -20px rgba(59,46,71,.4)}
a.caso{text-decoration:none; display:block}
a.caso h3{color:var(--titulo)}
.franja--oscuro .caso{background:var(--oscuro-2); border:0;
  box-shadow:0 2px 6px rgba(0,0,0,.35), 0 20px 44px -24px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.05)}
.franja--oscuro .caso p{color:#B7A9C2}
.franja--oscuro .caso:hover{box-shadow:0 4px 12px rgba(0,0,0,.4), 0 28px 56px -24px rgba(0,0,0,1),
  inset 0 0 0 1px rgba(217,179,108,.55), 0 0 40px -8px rgba(143,217,210,.35)}
/* Hacen falta por la especificidad: un selector como a.caso h3 pesa más
   que .franja--oscuro h3, así que sin estas reglas los títulos y los
   enlaces quedan en ciruela oscuro sobre fondo oscuro: ilegibles. */
.franja--oscuro a.caso h3{color:#F6F0F8}
.franja--oscuro a.caso:hover h3{color:#fff}
.franja--oscuro .link{color:var(--turquesa)}
.franja--oscuro a:not(.caso):not(.problema):not(.wa){color:var(--turquesa)}
.franja--oscuro .caso::after{background:radial-gradient(220px 120px at 100% 0%, rgba(217,179,108,.14), transparent 70%)}

/* el símbolo de la tarjeta */
.simbolo{width:78px; height:auto; display:block; margin:0 auto 16px;
  filter:drop-shadow(0 8px 16px rgba(111,88,126,.28));
  transition:transform .3s ease, filter .3s ease}
.caso:hover .simbolo{transform:scale(1.13) translateY(-3px);
  filter:drop-shadow(0 12px 24px rgba(217,179,108,.85)) drop-shadow(0 0 20px rgba(63,195,180,.75))}
.simbolo--grande{width:120px; margin:0 auto 20px}

.nota{font-size:.95rem; color:var(--suave); border-left:3px solid #3FC3B4; padding-left:14px; margin-top:22px}

/* ── listas y bloques de texto ──────────────────────────── */
.pasos{margin:16px 0 18px; padding-left:20px; display:flex; flex-direction:column; gap:9px}
.pasos li::marker{color:#0E7C72; font-weight:700}
.lista,.no{margin:14px 0 16px; padding-left:20px; display:flex; flex-direction:column; gap:8px}
.lista li::marker{color:var(--turquesa-t)}
.no li::marker{color:var(--lavanda)}
.bloque{margin:36px 0}
.bloque h2{margin-bottom:10px}

/* ── el bloque del método, con las tres herramientas ────── */
.metodo{margin-top:8px}
.metodo .tres{margin:22px 0}

/* ── qué te frena ───────────────────────────────────────── */
.frenos{display:grid; gap:12px; margin:24px 0}
@media(min-width:780px){.frenos{grid-template-columns:1fr 1fr}}
.freno{background:var(--papel); border:0; border-left:3px solid #3FC3B4;
  border-radius:15px; padding:18px 20px;
  box-shadow:0 2px 4px rgba(59,46,71,.04), 0 12px 28px -22px rgba(59,46,71,.35);
  transition:transform .2s ease, box-shadow .28s ease}
.freno:hover{transform:translateX(4px);
  box-shadow:0 4px 10px rgba(59,46,71,.05), 0 20px 38px -24px rgba(38,131,123,.55), 0 0 26px -10px rgba(143,217,210,.65)}
.freno h3{font-size:.99rem; margin-bottom:5px}
.freno p{font-size:.94rem; color:var(--suave); margin:0}

/* ── preguntas ──────────────────────────────────────────── */
.faq{max-width:800px; margin:54px auto; padding:0 22px}
.faq--sola{margin:36px 0; padding:0; max-width:none}
.faq h2{margin-bottom:16px}
details{background:var(--papel); border:0; border-radius:15px; margin-bottom:10px;
  box-shadow:0 2px 4px rgba(59,46,71,.04), 0 10px 24px -20px rgba(59,46,71,.35);
  overflow:hidden; transition:box-shadow .25s}
details:hover{box-shadow:0 3px 8px rgba(59,46,71,.05), 0 18px 34px -22px rgba(111,88,126,.5)}
details[open]{box-shadow:0 3px 8px rgba(59,46,71,.05), 0 20px 40px -22px rgba(111,88,126,.55), 0 0 0 1px var(--hilo)}
summary{cursor:pointer; padding:16px 19px; font-family:'Montserrat',sans-serif; font-weight:600;
  font-size:.97rem; color:var(--titulo); list-style:none; display:flex; justify-content:space-between; gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; color:var(--turquesa-t); font-weight:600; flex:none; transition:transform .25s}
details[open] summary::after{content:'–'; transform:rotate(180deg)}
details > div{padding:0 19px 17px; font-size:.98rem}
details > div p{margin-bottom:.7em}

/* ── las preguntas sobre fondo oscuro ───────────────────── */
.faq-oscura{padding:56px 0}
.faq-oscura .faq{margin:0 auto; max-width:800px}
.faq-oscura details{background:var(--oscuro-2); border:0;
  box-shadow:0 2px 6px rgba(0,0,0,.35), 0 16px 34px -24px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.05)}
.faq-oscura details:hover{box-shadow:0 4px 12px rgba(0,0,0,.4), 0 22px 44px -24px rgba(0,0,0,1), inset 0 0 0 1px rgba(63,195,180,.35)}
.faq-oscura details[open]{box-shadow:0 4px 12px rgba(0,0,0,.4), 0 24px 48px -24px rgba(0,0,0,1), inset 0 0 0 1px rgba(217,179,108,.5)}
.faq-oscura summary{color:#F6F0F8}
.faq-oscura summary::after{color:#3FC3B4}
.faq-oscura details > div{color:#C4B7CE}
.faq-oscura details > div a{color:#3FC3B4}
.faq-oscura details > div strong{color:#fff}

/* ── cierres ────────────────────────────────────────────── */
.cierre{position:relative; max-width:820px; margin:58px auto; padding:44px 28px; text-align:center;
  border-radius:24px; overflow:hidden; border:1px solid var(--hilo);
  background:linear-gradient(140deg, rgba(94,205,193,.34), rgba(201,182,228,.10) 52%, rgba(217,179,108,.20))}
.cierre::before{content:''; position:absolute; inset:-40% -10% auto auto; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(217,179,108,.22), transparent 65%); pointer-events:none}
.cierre h2{margin-bottom:10px}
.cierre p{max-width:54ch; margin:0 auto 20px; color:var(--tinta)}
.cierre__botones{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.cierre__chico{font-size:.88rem; color:var(--suave); margin:16px auto 0}

/* el empujón corto del medio de página */
.empujon{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between;
  background:var(--papel); border:0; border-radius:20px; padding:22px 26px; margin:38px 0;
  box-shadow:0 2px 6px rgba(59,46,71,.05), 0 22px 46px -26px rgba(111,88,126,.5),
             inset 0 0 0 1px rgba(217,179,108,.32)}
.empujon p{margin:0; font-size:.98rem; max-width:46ch}
.empujon img{width:58px; flex:none; filter:drop-shadow(0 6px 14px rgba(111,88,126,.3))}

.contacto{background:var(--papel); border:0; border-radius:20px;
  padding:32px; text-align:center; margin:26px 0;
  box-shadow:0 2px 6px rgba(59,46,71,.05), 0 24px 50px -26px rgba(111,88,126,.5),
             inset 0 0 0 1px rgba(217,179,108,.32)}
.contacto__chico{font-size:.92rem; color:var(--suave); margin:14px 0 0}

/* ── autora ─────────────────────────────────────────────── */
.autora{display:flex; gap:16px; align-items:flex-start; background:var(--papel); border:0;
  border-radius:20px; padding:24px; margin:42px 0 0;
  box-shadow:0 2px 6px rgba(59,46,71,.04), 0 16px 36px -24px rgba(59,46,71,.4)}
.autora img{width:56px; flex:none}
.autora p{font-size:.94rem; color:var(--suave); margin:0}
.autora__nombre{font-family:'Montserrat',sans-serif; font-weight:600; color:var(--titulo); font-size:1rem; margin-bottom:4px !important}

/* ── formación ──────────────────────────────────────────── */
.titulos{margin:22px 0 26px; padding-left:16px; border-left:3px solid #3FC3B4}
.titulos h3{margin-bottom:3px}
.titulos__bajada{font-size:.92rem; color:var(--suave); margin-bottom:10px}
.titulos ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.titulos li{font-size:.96rem; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.grado{font-family:'Montserrat',sans-serif; font-size:.66rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ciruela-t); background:var(--tenue); border:1px solid var(--hilo);
  border-radius:999px; padding:3px 9px; flex:none}
/* El año de una formación, cuando se sabe. Discreto: acompaña, no compite
   con el nombre. Hoy sólo lo lleva Biohipnosis Sistémica (2025). */
.anio{font-size:.8rem; color:var(--suave)}

/* ── hub de páginas ─────────────────────────────────────── */
.problemas{display:grid; gap:12px; margin:24px 0}
@media(min-width:640px){.problemas{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.problemas{grid-template-columns:repeat(3,1fr)}}
.problema{display:flex; align-items:center; gap:15px; text-decoration:none; background:var(--papel);
  border:0; border-radius:16px; padding:16px 18px;
  box-shadow:0 2px 4px rgba(59,46,71,.04), 0 12px 28px -20px rgba(59,46,71,.35);
  transition:transform .2s ease, box-shadow .28s ease, border-color .25s}
.problema:hover{transform:translateY(-4px);
  box-shadow:0 4px 10px rgba(59,46,71,.06), 0 22px 42px -22px rgba(46,33,57,.45),
             0 0 0 1.5px rgba(63,195,180,.5), 0 0 32px -6px rgba(63,195,180,.45)}
.problema img{width:48px; flex:none; filter:drop-shadow(0 5px 12px rgba(111,88,126,.25));
  transition:transform .3s ease, filter .3s ease}
.problema:hover img{transform:scale(1.14);
  filter:drop-shadow(0 8px 18px rgba(217,179,108,.8)) drop-shadow(0 0 16px rgba(63,195,180,.7))}
.problema div{display:flex; flex-direction:column; gap:3px}
.problema strong{font-family:'Montserrat',sans-serif; font-size:.95rem; color:var(--titulo)}
.problema span{font-size:.88rem; color:var(--suave)}
.franja--oscuro .problema{background:var(--oscuro-2); border:0;
  box-shadow:0 2px 6px rgba(0,0,0,.35), 0 18px 38px -24px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.05)}
.franja--oscuro .problema strong{color:#F6F0F8}
.franja--oscuro .problema span{color:#B7A9C2}
.franja--oscuro .problema:hover{box-shadow:0 4px 12px rgba(0,0,0,.4), 0 26px 50px -24px rgba(0,0,0,1),
  inset 0 0 0 1px rgba(217,179,108,.55), 0 0 34px -8px rgba(143,217,210,.35)}

/* ── varios ─────────────────────────────────────────────── */
.pendiente{background:#FFF7E4; border:1px dashed var(--dorado); border-radius:var(--r);
  padding:18px 20px; margin:24px 0; font-size:.95rem; color:#7A5A17}
/* ── la agenda ──────────────────────────────────────────────
   Los horarios son botones grandes: en el celular se toca con el dedo,
   y ahí es donde se reserva. Un desplegable de horas en un teléfono es
   la forma más rápida de perder a alguien que ya había decidido. */
.ag-dia{margin:0 0 20px}
.ag-dia h3{font-size:1rem; margin:0 0 9px; color:var(--ciruela)}
.ag-horas{display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:9px}
.ag-hora{font:inherit; font-weight:600; cursor:pointer; padding:13px 0; border-radius:12px;
  border:1.5px solid var(--hilo); background:var(--papel); color:var(--ciruela-t);
  transition:transform .12s ease, border-color .12s ease}
.ag-hora:hover{border-color:var(--lavanda); transform:translateY(-2px)}
.campo{margin:0 0 15px}
.campo label{display:block; font-size:.88rem; color:var(--suave); margin-bottom:6px}
.campo input,.campo textarea{width:100%; font:inherit; color:var(--texto); background:var(--papel);
  border:1.5px solid var(--hilo); border-radius:12px; padding:12px 14px}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--turquesa); outline-offset:1px; border-color:transparent}
.campo textarea{resize:vertical; min-height:96px}
.ag-msg{min-height:1.4em; font-size:.92rem; color:var(--suave); margin:6px 0 0}
.ag-msg.mal{color:#8c2f2f}
button.wa{border:0; cursor:pointer; font:inherit; font-weight:700}

.miga{font-size:.84rem; color:var(--suave); padding:26px 0 14px}
.miga a{text-decoration:none} .miga a:hover{text-decoration:underline}
.bloglist{margin:26px 0 40px}
.vacio{background:var(--tenue); border-radius:var(--r); padding:24px; color:var(--suave)}
.frase{font-family:'Great Vibes',cursive; font-size:clamp(1.9rem,4.8vw,2.9rem); color:var(--ciruela);
  text-align:center; margin:14px 0 10px; line-height:1.25}

/* ── pie ────────────────────────────────────────────────── */
.pie{background:var(--oscuro); color:#DCD2E4; margin-top:72px; padding:52px 0 26px}
.pie__in{max-width:1100px; margin:0 auto; padding:0 22px; display:grid; gap:30px}
@media(min-width:760px){.pie__in{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.pie__col{display:flex; flex-direction:column; gap:9px; align-items:flex-start}
.pie__col h2{font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--turquesa); font-weight:600; margin-bottom:3px}
.pie__col a{color:#DCD2E4; text-decoration:none; font-size:.93rem; transition:color .2s}
.pie__col a:hover{color:var(--turquesa)}
.pie__marca img{width:56px; margin-bottom:4px}
.pie__frase{font-family:'Great Vibes',cursive; font-size:1.55rem; color:var(--dorado); margin:0; line-height:1.2}
.pie__chico{font-size:.9rem; color:#B3A5BC; margin:0}
.pie__aviso{max-width:1100px; margin:34px auto 0; padding:20px 22px 0; border-top:1px solid rgba(255,255,255,.14);
  font-size:.86rem; color:#B3A5BC}
.pie__aviso strong{color:#fff} .pie__aviso a{color:var(--turquesa)}
.pie__firma{max-width:1100px; margin:14px auto 0; padding:0 22px; font-size:.82rem; color:#8F8299}

/* ── el botón que flota ─────────────────────────────────── */
.flota{position:fixed; right:18px; bottom:18px; z-index:50; width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,#1FA79C,#0E7C72); color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 28px -8px rgba(14,124,114,.85); transition:transform .2s, box-shadow .25s}
.flota::before{content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(63,195,180,.45);
  animation:latido 2.8s ease-out infinite}
@keyframes latido{0%{transform:scale(.9); opacity:.9}70%{transform:scale(1.25); opacity:0}100%{opacity:0}}
.flota:hover{transform:scale(1.07); color:#fff; box-shadow:0 16px 34px -8px rgba(14,124,114,1)}
@media(min-width:901px){.flota{right:26px; bottom:26px}}