/* ==========================================================================
   Espacio Lúdico PSM — sistema visual basado en el logo real.
   Paleta exacta del logo: cyan · verde · rojo · amarillo · negro.
   CSS a mano, sin frameworks.
   ========================================================================== */

:root{
  /* Paleta del logo */
  /* Paleta EXACTA del logo — solo estos 5 colores cromáticos */
  --cyan:#00BAF1; --green:#49B748; --red:#EE1D23; --yellow:#FCB814; --ink:#231F20;
  /* Tintes muy claros (misma familia, para fondos suaves) y neutros estructurales */
  --cyan-050:#E3F6FD; --green-050:#EAF6E7; --red-050:#FDEAEA; --yellow-050:#FEF4D7;
  --white:#FFFFFF; --bone:#F4FAFD; --bone-200:#E6F2F8;
  --ink-700:#4C5560; --ink-500:#79828B; --line:#E4E9EE; --line-300:#D2D9E0;
  /* Tipografía fluida */
  --fs-display:clamp(2.6rem,1.9rem + 3.4vw,4.25rem);
  --fs-h1:clamp(2.1rem,1.6rem + 2vw,3rem);
  --fs-h2:clamp(1.7rem,1.4rem + 1.3vw,2.4rem);
  --fs-h3:clamp(1.25rem,1.15rem + 0.5vw,1.55rem);
  --fs-lead:clamp(1.15rem,1.05rem + 0.5vw,1.45rem);
  --fs-body:clamp(1rem,0.97rem + 0.15vw,1.125rem);
  --fs-sm:.9rem; --fs-xs:.75rem;
  /* Espaciado */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --container:1180px; --narrow:760px;
  /* Radios grandes (lúdico premium) */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-2xl:40px; --r-pill:999px;
  /* Curvas de easing (Emil): fuerte ease-out + spring lúdico + in-out */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  /* Sombras difusas tintadas al azul */
  --sh-sm:0 2px 8px -2px rgba(14,62,99,.08);
  --sh-md:0 12px 28px -12px rgba(14,62,99,.14);
  --sh-lg:0 24px 48px -18px rgba(14,62,99,.18);
  --sh-cta:0 12px 26px -8px rgba(238,29,35,.40);
  --sh-wa:0 12px 26px -8px rgba(73,183,72,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;color:var(--ink);letter-spacing:-.02em;margin:0 0 .4em;line-height:1.05;text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:700}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:var(--fs-h3);font-weight:600}
p{margin:0 0 1em;max-width:65ch}
.overline{font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:var(--s3)}
.overline.coral{color:var(--red)}

/* Layout */
.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
.narrow{max-width:var(--narrow);margin-inline:auto}
section{padding-block:clamp(56px,9vw,104px)}
.sec-white{background:var(--white)} .sec-bone2{background:var(--bone-200)} .sec-cyan{background:var(--cyan-050)}
.center{text-align:center} .center p{margin-inline:auto}
/* Encabezado de sección asimétrico (izquierda), reemplaza el overline repetido */
.sec-head{max-width:60ch;margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2{margin-bottom:var(--s3)}
.sec-head p{color:var(--ink-700);font-size:var(--fs-lead);margin:0}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center p{margin-inline:auto}
/* Eyebrow branded: forma del logo + etiqueta (un kicker por página, no gramática repetida) */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;font-size:var(--fs-sm);color:var(--ink);margin-bottom:var(--s4)}
.eyebrow svg{width:24px;height:24px;flex:none;color:var(--cyan)}
.page-head .eyebrow{justify-content:center}
.grid{display:grid;gap:var(--s6)}
@media(min-width:720px){.g-2{grid-template-columns:1fr 1fr}.g-3{grid-template-columns:repeat(3,1fr)}}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  border-radius:var(--r-pill);min-height:50px;padding:13px 30px;border:2px solid transparent;cursor:pointer;
  transition:transform .22s var(--ease-spring),box-shadow .15s,background .15s;font-size:1.05rem;line-height:1}
.btn:active{transform:translateY(1px) scale(.97)}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-cta)}
.btn--secondary{background:var(--cyan);color:#fff}
.btn--secondary:hover{background:var(--cyan);filter:brightness(.93);color:#fff;transform:translateY(-2px)}
.btn--outline{border-color:var(--cyan);color:var(--ink);background:transparent}
.btn--outline:hover{background:var(--cyan);color:#fff}
.btn--lg{padding:16px 36px;font-size:1.2rem;min-height:56px}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:3px solid rgba(0,186,241,.6);outline-offset:2px}

/* Header */
.site-header{position:sticky;top:0;z-index:100;height:76px;display:flex;align-items:center;
  background:rgba(247,250,252,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:box-shadow .2s,border-color .2s;border-bottom:1px solid transparent}
.site-header.is-scrolled{box-shadow:var(--sh-sm);border-bottom-color:var(--line)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);width:100%}
.brand{display:inline-flex;align-items:center}
.brand img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:var(--ink-700);font-weight:700;position:relative;padding:6px 0;font-size:1rem}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--ink)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);border-radius:3px}
.nav > .btn{display:none}
.nav a.btn--primary{color:#fff} /* CTA del menú móvil: texto blanco sobre rojo */
.header-cta{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)}
.nav-toggle svg{width:28px;height:28px}
@media(max-width:960px){
  .nav,.header-cta .btn{display:none}
  .nav-toggle{display:block}
  .nav.open{display:flex;position:fixed;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--white);padding:8px 24px 28px;box-shadow:var(--sh-lg);border-top:1px solid var(--line)}
  .nav.open a{padding:16px 4px;border-bottom:1px solid var(--line)}
  .nav.open a.active::after{display:none}
  .nav.open .btn{display:inline-flex;margin-top:16px;justify-content:center}
}

/* Hero — asimétrico con formas del logo */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(60% 80% at 92% 0%,var(--cyan-050) 0%,transparent 60%),var(--bone);
  padding-block:clamp(48px,8vw,96px)}
.hero .grid{align-items:center;gap:var(--s7)}
@media(min-width:880px){.hero .grid{grid-template-columns:1.08fr .92fr}}
.hero h1{font-size:var(--fs-display);font-weight:800}
.hero h1 .mark{color:var(--ink);
  background-image:linear-gradient(rgba(0,186,241,.30),rgba(0,186,241,.30));
  background-repeat:no-repeat;background-position:0 92%;background-size:100% .30em}
.hero .lead{font-size:var(--fs-lead);color:var(--ink-700);max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s6) 0 var(--s5)}
.hero-cred{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:8px 15px;font-size:var(--fs-sm);font-weight:700;color:var(--ink-700);box-shadow:var(--sh-sm)}
/* Foto del hero dentro de un blob orgánico que respira (estilo xap) */
.hero-media{position:relative;isolation:isolate}
.hero-photo{position:relative;z-index:1}
.hero-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;box-shadow:var(--sh-lg);
  border-radius:63% 37% 54% 46%/55% 48% 52% 45%;
  animation:blobmorph 14s ease-in-out infinite, floaty 7s ease-in-out infinite}
/* acentos: formas del logo que "llegan" con pop y luego flotan */
.hero-shape{position:absolute;z-index:0;pointer-events:none;animation:pop-in .55s var(--ease-spring) both}
.hero-shape svg{display:block;width:100%;height:100%}
.hero-shape.s1{width:78px;height:78px;color:var(--yellow);left:-18px;top:8%;animation-delay:.15s}
.hero-shape.s2{width:60px;height:60px;color:var(--red);right:2%;top:-14px;animation-delay:.28s}
.hero-shape.s3{width:66px;height:66px;color:var(--green);right:6%;bottom:-10px;animation-delay:.4s}
.hero-shape.s1 svg{animation:floaty 5s ease-in-out infinite}
.hero-shape.s2 svg{animation:floaty 4s ease-in-out infinite .4s}
.hero-shape.s3 svg{animation:floaty 6s ease-in-out infinite .2s}
@keyframes pop-in{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes blobmorph{0%,100%{border-radius:63% 37% 54% 46%/55% 48% 52% 45%}
  50%{border-radius:44% 56% 47% 53%/48% 55% 42% 55%}}

/* Palabra-acento en titulares (estilo xap) */

/* Fotos de split dentro de blob orgánico */
.split-media.blob img{aspect-ratio:1/1;border-radius:63% 37% 54% 46%/55% 48% 52% 45%;
  animation:blobmorph 16s ease-in-out infinite}
.split-media.blob.alt img{border-radius:38% 62% 45% 55%/52% 40% 60% 48%;animation-duration:18s}

/* ===== Sección DOODLES: banda con gradiente de marca + dibujos infantiles a mano ===== */
.doodles{position:relative;overflow:hidden;color:#fff;
  background:var(--cyan);
  border-radius:var(--r-2xl);margin:0 clamp(10px,3vw,28px);padding-block:clamp(64px,10vw,120px)}
.doodles .container{position:relative;z-index:2}
.doodles h2{color:#fff} .doodles p{color:rgba(255,255,255,.92)}
.doodles .btn--primary{background:var(--red);color:#fff}
.doodles .btn--primary:hover{background:var(--red);filter:brightness(1.06);color:#fff}
.doodle-field{position:absolute;inset:0;z-index:1;pointer-events:none;transition:transform .3s var(--ease-out)}
.doodle-field svg{position:absolute;stroke:rgba(255,255,255,.8);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.doodle-field .d1{width:70px;height:70px;left:5%;top:16%;animation:floaty 6s ease-in-out infinite}
.doodle-field .d2{width:60px;height:60px;left:12%;bottom:14%;animation:floaty 5s ease-in-out infinite .5s}
.doodle-field .d3{width:54px;height:54px;left:22%;top:60%;animation:spin 26s linear infinite}
.doodle-field .d4{width:76px;height:76px;right:7%;top:18%;animation:floaty 7s ease-in-out infinite}
.doodle-field .d5{width:64px;height:64px;right:14%;bottom:16%;animation:floaty 5.5s ease-in-out infinite .3s}
.doodle-field .d6{width:58px;height:58px;right:24%;top:62%;animation:floaty 6.5s ease-in-out infinite .6s}
.doodle-field .d7{width:50px;height:50px;left:44%;top:8%;animation:floaty 5s ease-in-out infinite .2s}
.doodle-field .d8{width:52px;height:52px;left:52%;bottom:9%;animation:floaty 6s ease-in-out infinite .4s}
@media(max-width:640px){.doodle-field .d3,.doodle-field .d6,.doodle-field .d7,.doodle-field .d8{display:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Tarjetas de servicio — la FORMA del logo es el ícono (marca propia, no genérico) */
.card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:32px 30px;box-shadow:var(--sh-sm);transition:transform .28s var(--ease-spring),box-shadow .2s;
  overflow:hidden}
.card .ico{color:var(--accent,var(--cyan))}
.card .ico svg{width:54px;height:54px;display:block;margin-bottom:var(--s4);animation:floaty 4s ease-in-out infinite;transform-origin:center bottom}
.card:nth-child(2) .ico svg{animation-duration:4.6s;animation-delay:.3s}
.card:nth-child(3) .ico svg{animation-duration:5.2s;animation-delay:.6s}
.card:nth-child(4) .ico svg{animation-duration:4.3s;animation-delay:.15s}
.card:nth-child(5) .ico svg{animation-duration:5s;animation-delay:.45s}
.card:nth-child(6) .ico svg{animation-duration:4.8s;animation-delay:.2s}
.card:hover{transform:translateY(-8px) rotate(-.7deg);box-shadow:var(--sh-lg)}
.card:hover .ico svg{animation:wiggle .55s ease}
.card h3{margin-bottom:var(--s2)}
.card p{color:var(--ink-700);margin-bottom:0}
.acc-cyan{--accent:var(--cyan)} .acc-green{--accent:var(--green)}
.acc-red{--accent:var(--red)} .acc-gold{--accent:var(--yellow)}

/* Grid de servicios — filas parejas: 1 col móvil, 2 tablet, 3 desktop (6 tarjetas) */
.services-grid{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media(min-width:600px){.services-grid{grid-template-columns:1fr 1fr}}
@media(min-width:920px){.services-grid{grid-template-columns:repeat(3,1fr)}}

/* Split texto+imagen */
.split{display:grid;gap:var(--s7);align-items:center}
@media(min-width:820px){.split{grid-template-columns:1fr 1fr}.split.rev .split-media{order:2}}
.split-media{position:relative}
.split-media img{border-radius:var(--r-2xl);box-shadow:var(--sh-md);width:100%;aspect-ratio:4/3;object-fit:cover}
.split-media.dot::after{content:"";position:absolute;width:70px;height:70px;background:var(--cyan);left:-18px;bottom:-18px;
  clip-path:polygon(0 100%,100% 100%,0 0)}

/* Banda highlight */
.highlight{background:var(--cyan-050);border-radius:var(--r-2xl);padding:clamp(30px,5vw,56px);border:1px solid var(--line)}
.highlight ul{margin:var(--s4) 0 0;padding:0;list-style:none;display:grid;gap:var(--s3)}
.highlight li{position:relative;padding-left:34px;color:var(--ink-700)}
.highlight li::before{content:"";position:absolute;left:0;top:.45em;width:20px;height:20px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px var(--green-050)}
.highlight li::after{content:"✓";position:absolute;left:5px;top:0;color:#fff;font-size:.8rem;font-weight:900}

/* Pasos numerados */
.steps{display:grid;gap:var(--s6);counter-reset:step}
@media(min-width:720px){.steps{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.step .n{width:60px;height:60px;margin-bottom:var(--s4)}
.step .n svg{width:60px;height:60px;display:block;animation:floaty 4.5s ease-in-out infinite;transform-origin:center bottom}
.step:nth-child(2) .n svg{animation-delay:.35s;animation-duration:5s}
.step:nth-child(3) .n svg{animation-delay:.7s;animation-duration:4.2s}
.step:nth-child(4) .n svg{animation-delay:.5s;animation-duration:5.4s}
.step:nth-child(4n+1) .n{color:var(--cyan)} .step:nth-child(4n+2) .n{color:var(--green)}
.step:nth-child(4n+3) .n{color:var(--red)} .step:nth-child(4n+4) .n{color:var(--yellow)}
.step h3{font-size:var(--fs-h3)} .step p{color:var(--ink-700)}

/* Señales */
.signal-grid{display:grid;gap:var(--s5)}
@media(min-width:720px){.signal-grid{grid-template-columns:1fr 1fr}}
.signal{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;border-left:6px solid var(--accent,var(--cyan))}
.signal:nth-child(4n+1){--accent:var(--cyan)} .signal:nth-child(4n+2){--accent:var(--green)}
.signal:nth-child(4n+3){--accent:var(--red)} .signal:nth-child(4n+4){--accent:var(--yellow)}
.signal h3{font-size:1.2rem;margin-bottom:var(--s2)}
.signal p{color:var(--ink-700);margin:0}

/* Stats */
.stats{display:flex;flex-wrap:wrap;gap:var(--s7);justify-content:center;text-align:center}
.stat .num{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:2.8rem;line-height:1}
.stat:nth-child(1) .num{color:var(--cyan)} .stat:nth-child(2) .num{color:var(--red)} .stat:nth-child(3) .num{color:var(--green)}
.stat .lbl{color:var(--ink-700);font-weight:700;font-size:var(--fs-sm)}

/* Testimonios */
.quote{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;box-shadow:var(--sh-sm)}
.quote p{font-size:1.05rem;color:var(--ink);margin-bottom:var(--s4)}
.quote .who{font-weight:800;color:var(--ink-500);font-size:var(--fs-sm)}
.quote::before{content:"“";font-family:"Bricolage Grotesque",sans-serif;font-size:3.4rem;color:var(--yellow);line-height:.5;display:block}

/* CTA final */
.cta-band{position:relative;overflow:hidden;background:var(--cyan);border-radius:var(--r-2xl);
  padding:clamp(40px,7vw,72px);text-align:center;color:#fff}
/* formas geométricas del logo (rampa + rampa invertida) sobre la banda cyan */
.cta-band::before{content:"";position:absolute;width:230px;height:230px;left:0;top:0;
  clip-path:polygon(0 0,100% 0,0 100%);background:#fff;opacity:.5}
.cta-band::after{content:"";position:absolute;width:210px;height:210px;right:0;bottom:0;
  clip-path:polygon(100% 100%,100% 0,0 100%);background:#fff;opacity:.38}
.cta-band h2,.cta-band p{position:relative;z-index:1}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.92);margin-inline:auto}
.cta-band .btn{position:relative;z-index:1;margin-top:var(--s4)}

/* Sobre — perfil */
.profile{display:grid;gap:var(--s7);align-items:start}
@media(min-width:820px){.profile{grid-template-columns:.85fr 1.15fr}}
.profile .split-media img{aspect-ratio:1/1}
.creds{list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;gap:var(--s3)}
.creds li{background:var(--white);border:1px solid var(--line);border-left:5px solid var(--accent,var(--cyan));
  border-radius:var(--r-md);padding:15px 18px;color:var(--ink-700)}
.creds li:nth-child(5n+1){--accent:var(--cyan)} .creds li:nth-child(5n+2){--accent:var(--green)}
.creds li:nth-child(5n+3){--accent:var(--red)} .creds li:nth-child(5n+4){--accent:var(--yellow)} .creds li:nth-child(5n+5){--accent:var(--cyan)}

/* Formulario */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,5vw,40px);box-shadow:var(--sh-md)}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:var(--fs-sm);font-weight:800;color:var(--ink-700);margin-bottom:6px}
.field input,.field textarea{width:100%;border:1px solid var(--line-300);border-radius:var(--r-md);
  padding:13px 15px;min-height:50px;background:var(--white);font:inherit;color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,186,241,.18)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-700)}
.consent input{margin-top:5px;min-height:0;width:auto}
.contact-cols{display:grid;gap:var(--s6);align-items:start}
@media(min-width:820px){.contact-cols{grid-template-columns:1fr 1fr}}
.contact-cols aside{background:var(--cyan-050);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,4vw,36px)}
/* Info de contacto — filas con badge de ícono */
.cinfo{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;gap:var(--s2)}
.cinfo li{margin:0}
.ci{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--r-md);
  color:var(--ink);transition:background .15s,transform .18s var(--ease-out)}
a.ci:hover{background:#fff;transform:translateX(3px)}
.ci-ic{flex:none;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--accent,var(--cyan));color:#fff}
.ci-ic.acc-gold{color:var(--ink)}
.ci-ic svg{width:24px;height:24px}
.ci-tx{display:flex;flex-direction:column;min-width:0}
.ci-k{font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500)}
.ci-v{font-weight:700;color:var(--ink);overflow-wrap:anywhere;line-height:1.3}
.map-wide{border:0;width:100%;height:clamp(340px,42vw,520px);display:block}
.hp{position:absolute;left:-9999px}
/* Skip link (accesibilidad) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--r-md) 0;font-weight:700}
.skip-link:focus{left:0}

/* WhatsApp flotante */
.wa-float{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:90;
  width:60px;height:60px;border-radius:50%;background:var(--green);color:#fff;display:flex;
  align-items:center;justify-content:center;box-shadow:var(--sh-wa);border:3px solid var(--bone);
  transition:transform .15s,background .15s}
.wa-float:hover{background:var(--green);color:#fff;transform:scale(1.08)}
.wa-float svg{width:32px;height:32px}

/* Footer (claro, sin negro) */
.site-footer{background:var(--bone-200);color:var(--ink-700);padding-block:var(--s8) var(--s5);border-top:1px solid var(--line)}
.site-footer a{color:var(--ink-700)} .site-footer a:hover{color:var(--cyan)}
.footer-grid{display:grid;gap:var(--s6)}
@media(min-width:720px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1.2fr}}
.site-footer img.flogo{height:52px;width:auto;margin-bottom:var(--s3)}
.site-footer h4{color:var(--ink);font-size:1.05rem;margin-bottom:var(--s3)}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.site-footer .muted{color:var(--ink-500);font-size:var(--fs-sm)}
.footer-map{border:0;width:100%;height:150px;border-radius:var(--r-md)}
.footer-bottom{border-top:1px solid var(--line);margin-top:var(--s7);padding-top:var(--s5);
  display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;font-size:var(--fs-sm);color:var(--ink-500)}

/* Galería masonry */
.gallery{columns:2;column-gap:var(--s4)}
@media(min-width:640px){.gallery{columns:3}}
@media(min-width:1000px){.gallery{columns:4}}
.gallery img{width:100%;margin-bottom:var(--s4);border-radius:var(--r-lg);break-inside:avoid;
  box-shadow:var(--sh-sm);transition:transform .2s var(--ease-out),box-shadow .2s}
.gallery img:hover{transform:scale(1.02);box-shadow:var(--sh-md)}
/* revelado con clip-path al scroll (JS añade .shown) */
.gallery img.clip{clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path .6s var(--ease-out),opacity .6s ease,transform .2s var(--ease-out)}
.gallery img.clip.shown{clip-path:inset(0 0 0 0);opacity:1}

/* Encabezado de página interior */
.page-head{background:
  radial-gradient(50% 120% at 85% 0%,var(--cyan-050) 0%,transparent 60%),var(--bone-200);
  padding-block:clamp(48px,7vw,80px);text-align:center}
.page-head p{color:var(--ink-700);margin-inline:auto}

/* Reveal con pop (rebote) */
.reveal{opacity:0;transform:translateY(20px) scale(.97);transition:opacity .45s ease,transform .5s var(--ease-spring)}
.reveal.in{opacity:1;transform:none}
/* stagger dentro de grids */
.services-grid > .card:nth-child(2),.grid > .quote:nth-child(2),.signal-grid > .signal:nth-child(2){transition-delay:.08s}
.services-grid > .card:nth-child(3),.grid > .quote:nth-child(3),.signal-grid > .signal:nth-child(3){transition-delay:.16s}
.services-grid > .card:nth-child(4),.signal-grid > .signal:nth-child(4){transition-delay:.24s}
.services-grid > .card:nth-child(5){transition-delay:.32s}
.services-grid > .card:nth-child(6){transition-delay:.40s}

/* Animaciones lúdicas (formas del logo) */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}28%{transform:rotate(-9deg)}62%{transform:rotate(7deg)}}
@keyframes wapulse{0%,100%{box-shadow:var(--sh-wa)}50%{box-shadow:0 14px 34px -6px rgba(73,183,72,.6)}}
.wa-float{animation:wapulse 2.8s ease-in-out infinite}
.wa-float:hover{animation:none}

/* Touch: sin lift "pegado" al tocar (el hover se dispara en tap) */
@media(hover:none){
  .btn:hover,.card:hover,.gallery img:hover{transform:none}
  .card:hover .ico svg{animation:floaty 4s ease-in-out infinite}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}