/* =====================================================================
   Psicóloga Xochitl Carmona — landing
   ---------------------------------------------------------------------
   Referencia: MAQUETA PSICÓLOGA XÓCHITL PÉREZ .pdf (mesa 1440 × 6403 px)
   Todas las medidas "maqueta:" están tomadas del PDF (cajas vectoriales,
   líneas base de texto vía PyMuPDF) y de la correlación de píxeles de cada
   PNG entregado contra el render. Coordenadas = px de la mesa de 1440.

   Escala: en escritorio (≥1024 px) todo usa --u = 1 px a 1440 de ancho y
   se reduce proporcionalmente hasta 1024. Debajo de 1024 el layout se
   apila; los componentes (tarjetas) se escalan con --k.
   ===================================================================== */

@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/BricolageGrotesque-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/Poppins-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/Poppins-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}

:root{
  /* Colores tomados de los valores del PDF (sin gestión de color) y confirmados contra los PNG */
  --ink:#1a1414;      /* títulos — maqueta: #1a1414 */
  --body:#3e3e3f;     /* cuerpo — maqueta: #3e3e3f */
  --purple:#7a6499;   /* palabra destacada / card morada — maqueta: rgb(.478,.392,.600) */
  --teal:#14c5b5;     /* maqueta: rgb(.078,.773,.710) — PNG card verde agua #19c6b6 */
  --sky:#3ebadb;      /* card azul — maqueta: rgb(.243,.729,.859) */
  --blue:#1e9cce;     /* iconos footer / tulipán azul — maqueta: rgb(.118,.612,.808) */
  --yellow:#f9b418;   /* maqueta: rgb(.976,.706,.094) */
  --green:#2ab540;    /* botón WhatsApp — maqueta: rgb(.165,.710,.251) */
  --beige:#ece7e3;    /* fondos — maqueta: rgb(.925,.906,.890) */
  --cream:#f8f4e8;    /* tarjeta "Mi objetivo" — maqueta: rgb(.973,.957,.910) */
  --grad:linear-gradient(90deg,#14c5b5 0%,#1e9cce 100%); /* botones degradados — render: #14c4b5 → #1d9ccd */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--body);font-family:"Poppins",system-ui,sans-serif;font-weight:500;
  container-type:inline-size;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
.c-purple{color:var(--purple)}
[hidden]{display:none!important}

/* escala global: 1px a 1440 de ancho útil (100cqw excluye la barra de scroll) */
body>*{--u:min(1px, calc(100cqw / 1440))}

.sec{position:relative;overflow-x:clip}
.decos{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.d{position:absolute;height:auto}
.wrap{position:relative;margin:0 auto}

.t50,.t55{font-family:"Bricolage Grotesque","Poppins",sans-serif;font-weight:700;color:var(--ink);letter-spacing:0}
.p25{color:var(--body)}

/* ---------- botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;color:#fff;font-weight:600;border-radius:10px;white-space:nowrap;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
.btn-grad{background:var(--grad)}
.btn-green{background:var(--green)}
.btn img{height:auto}

/* =====================================================================
   MÓVIL / TABLETA (< 1024 px) — no hay maqueta móvil: layout apilado
   ===================================================================== */
.site-header{position:relative;z-index:10;background:var(--beige);box-shadow:0 6px 14px rgba(0,0,0,.12)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;min-height:64px}
.hdr-ubi{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.25}
.hdr-ubi img{width:36px}
.hdr-ubi span{display:none}
.hdr-logo img{width:170px;margin:-22px 0 -24px}
.hdr-social{display:flex;gap:8px}
.hdr-social img{width:36px}

.hero{background:var(--beige);z-index:3}
.hero .wrap{padding:36px 20px 28px;text-align:center}
.hero-title{font-size:clamp(28px,6.4vw,44px);line-height:1.2}
.hl{white-space:nowrap}
.hero-sub{font-size:clamp(16px,3.4vw,21px);line-height:1.3;margin-top:14px}
.hero-people{width:100%;height:auto;margin:-7% auto -1%} /* el PNG trae ~17 % de alto transparente arriba */
.hero-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.hero-btns .btn,.cta-btns .btn{font-size:16px;height:48px;padding:0 18px;gap:12px}
.hero-btns .btn img,.cta-btns .btn img{width:32px}
.br-d{display:none}

.d-hero-l{left:-1px;top:0;width:220px}
.d-hero-r{right:-1px;top:40px;width:340px}

.about{z-index:1}
.about .wrap{padding:48px 20px 70px;display:flex;flex-direction:column;align-items:center;gap:24px}
.about-photo{width:min(78vw,380px);height:auto;position:relative}
.d-about-blob{left:0;top:48px;width:min(135vw,660px)}
.d-about-r{right:-15px;top:-6px;width:260px}
.about-text{position:relative}
.about-title{font-size:clamp(30px,7vw,46px);line-height:1.2}
.about-p{font-size:18px;line-height:1.35;margin-top:10px}
.about-card{margin-top:22px;display:flex;gap:18px;align-items:center;background:var(--cream);border-radius:12px;padding:22px 20px;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.about-flor{width:44px;height:auto;flex:none}
.about-card p{font-size:17px;line-height:1.35}

/* festón superior (círculos r=30.6, periodo 61.2, centros en x = 15 + 61.2n) */
.scallop-top::before{content:"";position:absolute;left:0;right:0;top:calc(-30.6 * var(--u));height:calc(30.6 * var(--u));
  background:radial-gradient(circle calc(30.6 * var(--u)) at 50% 100%,var(--sc) 97%,transparent 100%) repeat-x;
  background-size:calc(61.2 * var(--u)) 100%;background-position:calc(-15.6 * var(--u)) 0;z-index:1}

.sol{background:var(--beige);--sc:var(--beige);z-index:2}
.sol .wrap{padding:44px 20px 56px}
.sol-title{font-size:clamp(30px,7vw,46px);line-height:1.2;text-align:center}
.d-sol-l{left:-1px;top:0;width:180px}
.d-sol-r{right:-1px;top:40%;width:320px}

.svc-grid{display:grid;grid-template-columns:1fr;justify-items:center;gap:14px;margin-top:28px}
.svc{--k:min(1px, calc((100cqw - 40px) / 585));position:relative;width:calc(585 * var(--k));height:calc(394 * var(--k))}
.svc-bg{position:absolute;left:0;top:0;width:100%;height:100%}
.svc-ico{position:absolute;width:calc(70 * var(--k));height:auto}
.svc-t,.svc-p,.svc-btn{position:absolute;white-space:nowrap}
.svc-t{font-weight:600;font-size:calc(25 * var(--k));line-height:calc(30 * var(--k));color:var(--ink)}
.svc-p{font-size:calc(25 * var(--k));line-height:calc(30 * var(--k));color:var(--body)}
.svc.is-light .svc-t,.svc.is-light .svc-p{color:#fff}
.svc-btn{width:calc(266 * var(--k));height:calc(53 * var(--k));background:#fff;border-radius:calc(10 * var(--k));font-weight:600;
  font-size:calc(20 * var(--k));line-height:calc(50.2 * var(--k));padding-left:calc(26.9 * var(--k));transition:transform .2s ease,box-shadow .2s ease}
/* maqueta (px relativos a la esquina del PNG de cada tarjeta) */
.svc-1 .svc-ico{left:calc(70 * var(--k));top:calc(26 * var(--k))}       /* icono 212,1876 */
.svc-1 .svc-t{left:calc(168.8 * var(--k));top:calc(48.25 * var(--k))}   /* base 1922.0 */
.svc-1 .svc-p{left:calc(70.1 * var(--k));top:calc(113.75 * var(--k))}   /* base 1987.5 */
.svc-1 .svc-btn{left:calc(71 * var(--k));top:calc(289 * var(--k));color:var(--purple)} /* 213,2139 266×53 */
.svc-2 .svc-ico{left:calc(84 * var(--k));top:calc(29 * var(--k))}
.svc-2 .svc-t{left:calc(180.2 * var(--k));top:calc(55.25 * var(--k))}
.svc-2 .svc-p{left:calc(83.8 * var(--k));top:calc(116.75 * var(--k))}
.svc-2 .svc-btn{left:calc(79 * var(--k));top:calc(292 * var(--k));color:var(--teal);padding-left:calc(27.6 * var(--k))}
.svc-3 .svc-ico{left:calc(68 * var(--k));top:calc(35 * var(--k))}
.svc-3 .svc-t{left:calc(169.8 * var(--k));top:calc(48.05 * var(--k))}
.svc-3 .svc-p{left:calc(77.7 * var(--k));top:calc(130.05 * var(--k))}
.svc-3 .svc-btn{left:calc(72 * var(--k));top:calc(277 * var(--k));color:var(--sky);line-height:calc(50.6 * var(--k))}
.svc-4 .svc-ico{left:calc(83 * var(--k));top:calc(36 * var(--k))}
.svc-4 .svc-t{left:calc(182.1 * var(--k));top:calc(45.25 * var(--k))}
.svc-4 .svc-p{left:calc(85.8 * var(--k));top:calc(131.05 * var(--k))}
.svc-4 .svc-btn{left:calc(81 * var(--k));top:calc(278 * var(--k));color:var(--yellow);padding-left:calc(27.6 * var(--k));line-height:calc(50.6 * var(--k))}

.help{z-index:1}
.help .wrap{padding:52px 20px 60px}
.help-title{font-size:clamp(30px,7vw,46px);line-height:1.2;text-align:center}
.d-help-r{right:0;top:0;width:260px}
.d-help-l{left:-1px;top:280px;width:190px}
.help-grid{display:grid;grid-template-columns:1fr;justify-items:center;gap:10px;margin-top:28px}
.hc{--k:min(1px, calc((100cqw - 40px) / 330));position:relative;width:calc(330 * var(--k));height:calc(285 * var(--k))}
.hc img{width:100%;height:100%;transition:transform .35s ease,filter .35s ease}
/* franja: PNG entregado 277×68 en (5,190) de cada tarjeta — maqueta: 55,3111 */
.hc-l{position:absolute;left:calc(5 * var(--k));top:calc(190 * var(--k));width:calc(277 * var(--k));height:calc(68 * var(--k));
  background:url(../img/franja-imagenes.webp) 0 0/100% 100% no-repeat;display:flex;align-items:center;
  padding-left:calc(36 * var(--k));color:#fff;font-weight:600;font-size:calc(17.57 * var(--k));line-height:calc(21.1 * var(--k));white-space:nowrap;
  transition:transform .35s ease}

/* sección con curva superior: parábola de 42 px (y=3898 en bordes, 3940 al centro) */
.why{background:var(--beige);z-index:1}
.why::before{content:"";position:absolute;left:0;right:0;top:-1px;height:calc(43 * var(--u));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 42' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440Q720 84 0 0Z' fill='%23fff'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.why .wrap{padding:60px 20px 70px}
.why-title{font-size:clamp(30px,7vw,46px);line-height:1.2;text-align:center}
.why-grid{display:grid;grid-template-columns:1fr;justify-items:center;gap:6px;margin-top:26px}
.wc{--k:min(1px, calc((100cqw - 40px) / 382));position:relative;width:calc(382 * var(--k));height:calc(462 * var(--k))}
.wc img{width:100%;height:100%}
.wc-txt{position:absolute;width:calc(320 * var(--k));text-align:center;color:#fff;white-space:nowrap}
.wc h3{font-weight:600;font-size:calc(25 * var(--k));line-height:calc(30 * var(--k))}
.wc p{font-size:calc(20 * var(--k));line-height:calc(24 * var(--k));margin-top:calc(11.95 * var(--k))}
/* centro del texto (maqueta) relativo al PNG: 186 / 182.5 / 187 / 187 ; top del título */
.wc-1 .wc-txt{left:calc(26 * var(--k));top:calc(187.95 * var(--k))}
.wc-2 .wc-txt{left:calc(22.5 * var(--k));top:calc(196.75 * var(--k))}
.wc-2 p{margin-top:calc(14.25 * var(--k))}
.wc-3 .wc-txt{left:calc(27 * var(--k));top:calc(187.95 * var(--k))}
.wc-4 .wc-txt{left:calc(27 * var(--k));top:calc(196.75 * var(--k))}
/* la maqueta no centra igual título y cuerpo: centros de glifo medidos (px de página) */
.wc-1 h3{transform:translateX(calc(-3.9 * var(--k)))} .wc-1 p{transform:translateX(calc(1.4 * var(--k)))}   /* 183.1 / 188.4 vs eje 187 */
.wc-2 h3{transform:translateX(calc(-.15 * var(--k)))} .wc-2 p{transform:translateX(calc(-.1 * var(--k)))}  /* 537.35 / 537.4 */
.wc-3 h3{transform:translateX(calc(-2.9 * var(--k)))} .wc-3 p{transform:translateX(calc(.6 * var(--k)))}   /* 892.1 / 895.6 vs 895 */
.wc-4 h3{transform:translateX(calc(-3.6 * var(--k)))} .wc-4 p{transform:translateX(calc(1.2 * var(--k)))}   /* 1245.4 / 1250.2 vs 1249 */

.cta{background:#fff;--sc:#fff;z-index:2}
.cta .wrap{padding:48px 20px 60px;display:flex;flex-direction:column;align-items:center;gap:36px}
.cta-title{font-size:clamp(30px,7vw,46px);line-height:1.2}
.cta-p{font-size:18px;line-height:1.35;margin-top:16px}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.d-cta-l{left:0;top:-80px;width:300px}
.d-cta-r{right:0;bottom:0;width:340px}
.pin{--k:min(1px, calc((100cqw - 40px) / 576));position:relative;width:calc(576 * var(--k));height:calc(450 * var(--k))}
.pin-bg{position:absolute;inset:0;width:100%;height:100%}
.pi{position:absolute;left:calc(66 * var(--k));display:block;font-size:calc(25 * var(--k));line-height:calc(30 * var(--k));white-space:nowrap;color:var(--body)}
.pi img{position:absolute;left:0;top:0;width:calc(49 * var(--k));height:auto}
.pi span{position:absolute;left:calc(72.9 * var(--k))}
.pi:hover span{color:var(--purple)}
/* maqueta (relativo al PNG de la tarjeta en 812,4796): icono top / texto top */
.pi-ubi{top:calc(114 * var(--k))}  .pi-ubi span{top:calc(-.05 * var(--k))}   /* base 4933.7 */
.pi-wa{top:calc(185 * var(--k))}   .pi-wa span{top:calc(7.65 * var(--k))}    /* base 5012.4 */
.pi-mail{top:calc(256 * var(--k))} .pi-mail span{top:calc(7.95 * var(--k))}  /* base 5083.7 */
.pi-fb{top:calc(328 * var(--k))}   .pi-fb span{top:calc(6.85 * var(--k))}    /* base 5154.6 */
.ph{padding-left:.27em} /* la maqueta trae un espacio antes del teléfono */

.final{background:var(--beige);z-index:1}
.final .wrap{padding:52px 20px 60px;display:flex;flex-direction:column;gap:24px}
.fin-title{font-size:clamp(30px,7vw,46px);line-height:1.2}
.fin-p{font-size:18px;line-height:1.35;margin-top:16px}
.fin-media{position:relative;align-self:center;width:min(86vw,440px);aspect-ratio:572/592;max-width:100%}
.fin-blob{position:absolute;left:-28%;top:6.4%;width:161.5%;height:auto}
.fin-photo{position:relative;width:100%;height:auto}
.d-fin-l{left:0;top:0;width:240px}
.d-fin-r{right:-6px;top:0;width:300px}

.site-footer{position:relative;z-index:3;margin-top:-18px;background:url(../img/forma-footer.webp) 50% 0/calc(100% + 4px) auto no-repeat}
.site-footer .wrap{padding:60px 20px 40px;display:flex;flex-direction:column;gap:30px}
.ft-logo{width:260px;height:auto;margin:-30px 0 -20px -12px}
.ft-p{font-size:16px;line-height:1.4;margin-top:6px}
.btn-ft{margin-top:18px;height:48px;padding:0 44px;font-size:17px}
.ft-r{display:flex;flex-direction:column;gap:16px}
.fi{display:flex;align-items:center;gap:16px;font-size:16px;line-height:1.35}
.fi img{width:42px;height:auto;flex:none}
.fi:hover span{color:var(--blue)}
.fi .ph{padding-left:0}

@media (min-width:520px){
  .help-grid{grid-template-columns:repeat(2,auto);gap:12px}
  .hc{--k:calc((100cqw - 52px) / 2 / 330)}
  .hdr-ubi span{display:block}
}
@media (min-width:640px){
  .why-grid{grid-template-columns:repeat(2,auto);gap:10px 16px}
  .wc{--k:min(1px, calc((100cqw - 56px) / 2 / 382))}
}
@media (min-width:760px){
  .svc-grid{grid-template-columns:repeat(2,auto);gap:16px}
  .svc{--k:calc((100cqw - 56px) / 2 / 585)}
  .help-grid{grid-template-columns:repeat(3,auto)}
  .hc{--k:calc((100cqw - 64px) / 3 / 330)}
  .site-footer .wrap{flex-direction:row;justify-content:space-between;align-items:flex-start}
}

/* =====================================================================
   ESCRITORIO (≥ 1024 px) — réplica de la maqueta de 1440
   ===================================================================== */
@media (min-width:1024px){
  .wrap{width:calc(1440 * var(--u));padding:0!important;margin:0 auto}
  .br-d{display:inline}
  .t50,.t55,.p25{white-space:nowrap}

  /* ---------- HEADER — maqueta: 0–115, fondo beige, sombra 116→134 ---------- */
  .site-header{position:absolute;left:0;right:0;top:0;height:calc(115 * var(--u));box-shadow:none}
  .site-header::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(20 * var(--u));pointer-events:none;
    /* render: 116 #b7b4b0 (22 %) · 120 16 % · 124 8.5 % · 128 2.6 % · 134 0 */
    background:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.16) 25%,rgba(0,0,0,.085) 45%,rgba(0,0,0,.026) 65%,rgba(0,0,0,.004) 85%,transparent)}
  .site-header .wrap{display:block;height:100%;min-height:0}
  .hdr-ubi{position:absolute;left:calc(76 * var(--u));top:calc(41 * var(--u));display:block;
    font-size:calc(18 * var(--u));line-height:calc(21.6 * var(--u))}
  .hdr-ubi img{width:calc(50 * var(--u))}                                        /* 76,41 50×49 */
  .hdr-ubi span{display:block;position:absolute;left:calc(67.8 * var(--u));top:calc(-1.4 * var(--u));white-space:nowrap} /* x 143.8, base 56.7 */
  .hdr-logo{position:absolute;left:calc(634 * var(--u));top:calc(-39 * var(--u))}
  .hdr-logo img{width:calc(306 * var(--u));margin:0}                           /* PNG 634,-39 306×172 */
  .hdr-social{position:absolute;left:calc(1199 * var(--u));top:calc(31 * var(--u));gap:0}
  .hdr-social a{margin-right:calc(9 * var(--u))}                               /* 1199 · 1257 · 1316 */
  .hdr-social a:nth-child(2){margin-right:calc(10 * var(--u))}
  .hdr-social img{width:calc(49 * var(--u))}

  /* ---------- HERO — maqueta: 0–807 ---------- */
  .hero{height:calc(807 * var(--u))}
  .hero .wrap{height:100%;text-align:left}
  .d-hero-l{left:calc(-1 * var(--u));top:0;width:calc(376 * var(--u))}      /* LINEAS IZQ FONDO -1,0 */
  .d-hero-r{right:calc(-1 * var(--u));top:calc(65 * var(--u));width:calc(666 * var(--u))} /* FLOR DER FONDO 775,65 */
  .hero-title{position:absolute;left:0;right:0;top:calc(160.4 * var(--u));text-align:center;
    font-size:calc(50 * var(--u));line-height:calc(60 * var(--u))}             /* 50 px, bases 206.9 / 266.9 */
  .hl{position:relative}
  .hl::after{content:"";position:absolute;left:var(--hl-x,0);top:-.128em;width:8.44em;height:1.4em;pointer-events:none;
    background:url(../img/linea-palabra-en-morado-hero.webp) 0 0/100% 100% no-repeat} /* PNG 842,214 422×70 */
  .hero-sub{position:absolute;left:0;right:0;top:calc(304.95 * var(--u));text-align:center;margin:0;
    font-size:calc(25 * var(--u));line-height:calc(30 * var(--u))}             /* 25 px, bases 328.7 / 358.7 */
  .hero-people{position:absolute;left:calc(131 * var(--u));top:calc(255 * var(--u));width:calc(1185 * var(--u));margin:0} /* 131,255 1185×626 */
  .hero-btns{display:block;margin:0}
  .hero-btns .btn,.cta-btns .btn{position:absolute;font-size:calc(20 * var(--u));padding:0}
  .hero .btn-hero1{left:calc(364 * var(--u));top:calc(643 * var(--u));width:calc(309 * var(--u));height:calc(54 * var(--u));
    justify-content:center;line-height:calc(51.6 * var(--u));align-items:flex-start}   /* 364,643 309×54, base 675.8 */
  .hero .btn-hero2{left:calc(690 * var(--u));top:calc(644 * var(--u));width:calc(385 * var(--u));height:calc(53 * var(--u));
    padding-left:calc(20.5 * var(--u));line-height:calc(49.6 * var(--u));align-items:flex-start} /* 690,644 385×53 */
  .hero .btn-hero2 img,.cta .btn-cta1 img{position:absolute;left:calc(335 * var(--u));top:calc(5 * var(--u));width:calc(42 * var(--u))}
  .btn{border-radius:calc(10 * var(--u))}

  /* ---------- SOBRE MÍ — maqueta: 807–1586.6 (el festón de la sección siguiente monta encima) ---------- */
  .about{height:calc(779.6 * var(--u))}
  .about .wrap{display:block;height:100%}
  .d-about-blob{left:calc((100% - 1440 * var(--u)) / 2);top:calc(35 * var(--u));width:calc(864 * var(--u))}  /* TEXTURA MORADA 0,842 — anclada a la foto */
  /* >1440 px: la mancha toca el borde izquierdo en la maqueta; se prolonga hasta el viewport en sus dos tramos opacos */
  .about .decos::before,.about .decos::after{content:"";position:absolute;left:0;width:calc((100% - 1440 * var(--u)) / 2 + 2 * var(--u));background:var(--purple)}
  .about .decos::before{top:calc(467.5 * var(--u));height:calc(144 * var(--u))}
  .about .decos::after{top:calc(724 * var(--u));bottom:0}
  .d-about-r{right:calc(-15 * var(--u));top:calc(-6 * var(--u));width:calc(404 * var(--u))} /* LINEA CURVA 1051,801 */
  .about-photo{position:absolute;left:calc(99 * var(--u));top:calc(33 * var(--u));width:calc(496 * var(--u))} /* 99,840 496×744 */
  .about-text{position:static}
  .about-title{position:absolute;left:calc(631.7 * var(--u));top:calc(182.65 * var(--u));
    font-size:calc(55 * var(--u));line-height:calc(66 * var(--u))}              /* 55 px, base 1040.8 */
  .about-p{position:absolute;left:calc(631.7 * var(--u));top:calc(266.35 * var(--u));margin:0;
    font-size:calc(25 * var(--u));line-height:calc(30 * var(--u))}              /* base 1097.1 */
  .about-card{position:absolute;left:calc(623 * var(--u));top:calc(346 * var(--u));width:calc(764 * var(--u));height:calc(236 * var(--u));
    margin:0;padding:0;border-radius:0;box-shadow:none;display:block;background:url(../img/fondo-card-seccion-1.webp) 0 0/100% 100% no-repeat} /* PNG 623,1153 764×236 */
  .about-flor{position:absolute;left:calc(32 * var(--u));top:calc(54 * var(--u));width:calc(63 * var(--u))}  /* 655,1207 */
  .about-card p{position:absolute;left:calc(128 * var(--u));top:calc(54.05 * var(--u));
    font-size:calc(25 * var(--u));line-height:calc(30 * var(--u))}              /* x 751, base 1230.8 */

  /* ---------- SOLUCIONES — maqueta: 1586.6–2703 (festón desde 1556) ---------- */
  .sol{height:calc(1116.4 * var(--u))}
  .sol .wrap{height:100%}
  .d-sol-l{left:0;top:calc(1.4 * var(--u));width:calc(289 * var(--u))}        /* TEXTURA IZQ 2: 0,1588 */
  .d-sol-r{right:calc(-1 * var(--u));top:calc(321.4 * var(--u));width:calc(528 * var(--u))} /* TEXTURA DER 2: 913,1908 */
  .sol-title{position:absolute;left:0;width:calc(1381 * var(--u));top:calc(80.55 * var(--u));
    font-size:calc(55 * var(--u));line-height:calc(66 * var(--u))}             /* centrado en x=690.5 (no 720) — bases 1718.3/1784.3 */
  .svc-grid{display:block;margin:0}
  .svc{--k:var(--u);position:absolute}
  .svc-1{left:calc(142 * var(--u));top:calc(263.4 * var(--u))}                 /* PNG 142,1850 585×394 */
  .svc-2{left:calc(729 * var(--u));top:calc(260.4 * var(--u));width:calc(584 * var(--u));height:calc(397 * var(--u))} /* 729,1847 */
  .svc-3{left:calc(141 * var(--u));top:calc(661.4 * var(--u));width:calc(584 * var(--u))}  /* 141,2248 */
  .svc-4{left:calc(727 * var(--u));top:calc(660.4 * var(--u));width:calc(584 * var(--u));height:calc(395 * var(--u))} /* 727,2247 */

  /* ---------- AYUDA — maqueta: 2703–3898, fondo blanco (el render de sips lo aplana a negro) ---------- */
  .help{height:calc(1195 * var(--u))}
  .help .wrap{height:100%}
  .d-help-r{right:0;top:0;width:calc(404 * var(--u))}                         /* TEXTURA DER 3: 1036,2703 */
  .d-help-l{left:calc(-1 * var(--u));top:calc(336 * var(--u));width:calc(289 * var(--u))} /* TEXTURA IZQ 3: -1,3039 */
  .help-title{position:absolute;left:0;right:0;top:calc(93.55 * var(--u));
    font-size:calc(55 * var(--u));line-height:calc(66 * var(--u))}             /* base 2847.7 */
  .help-grid{display:block;margin:0}
  .hc{--k:var(--u);position:absolute}
  /* columnas x: 50 · 391 · 731 · 1068 — filas y: 2921 · 3232 · 3544 */
  .hc:nth-child(4n+1){left:calc(50 * var(--u))}
  .hc:nth-child(4n+2){left:calc(391 * var(--u))}
  .hc:nth-child(4n+3){left:calc(731 * var(--u))}
  .hc:nth-child(4n+4){left:calc(1068 * var(--u))}
  .hc:nth-child(-n+4){top:calc(218 * var(--u))}
  .hc:nth-child(n+5):nth-child(-n+8){top:calc(529 * var(--u))}
  .hc:nth-child(n+9){top:calc(841 * var(--u))}

  /* ---------- POR QUÉ — maqueta: 3898–4730.6 ---------- */
  .why{height:calc(832.6 * var(--u))}
  .why .wrap{height:100%}
  .why-title{position:absolute;left:0;right:0;top:calc(103.95 * var(--u));
    font-size:calc(55 * var(--u));line-height:calc(66 * var(--u))}             /* base 4053.1 */
  .why-grid{display:block;margin:0}
  .wc{--k:var(--u);position:absolute}
  .wc-1{left:calc(1 * var(--u));top:calc(213 * var(--u))}                      /* PNG 1,4111 382×462 */
  .wc-2{left:calc(355 * var(--u));top:calc(254 * var(--u))}                    /* 355,4152 */
  .wc-3{left:calc(708 * var(--u));top:calc(213 * var(--u))}                    /* 708,4111 */
  .wc-4{left:calc(1062 * var(--u));top:calc(254 * var(--u))}                   /* 1062,4152 */

  /* ---------- CONTACTO — maqueta: 4730.6–5349 (festón desde 4700) ---------- */
  .cta{height:calc(618.4 * var(--u))}
  .cta .wrap{display:block;height:100%}
  .d-cta-l{left:0;top:calc(-275.6 * var(--u));width:calc(458 * var(--u))}     /* FLOR SECCION CONTACTO 0,4455 (bbox vectorial) */
  .d-cta-r{right:calc(38 * var(--u));bottom:auto;top:calc(138.4 * var(--u));width:calc(542 * var(--u))} /* FLOR DER 860,4869 */
  .cta-title{position:absolute;left:calc(72.7 * var(--u));top:calc(130.15 * var(--u));
    font-size:calc(55 * var(--u));line-height:calc(66 * var(--u))}             /* bases 4911.9 / 4977.9 */
  .cta-p{position:absolute;left:calc(72.7 * var(--u));top:calc(301.45 * var(--u));margin:0;
    font-size:calc(25 * var(--u));line-height:calc(30 * var(--u))}              /* base 5055.8 */
  .cta-btns{display:block;margin:0}
  .cta .btn-cta1{left:calc(73 * var(--u));top:calc(443.4 * var(--u));width:calc(396 * var(--u));height:calc(53 * var(--u));
    padding-left:calc(20.6 * var(--u));line-height:calc(51 * var(--u));align-items:flex-start}  /* 73,5174 396×53 */
  .cta .btn-cta2{left:calc(489 * var(--u));top:calc(443.4 * var(--u));width:calc(268 * var(--u));height:calc(54 * var(--u));
    justify-content:center;line-height:calc(51.4 * var(--u));align-items:flex-start}                     /* 489,5174 268×54 */
  .pin{--k:var(--u);position:absolute;left:calc(812 * var(--u));top:calc(65.4 * var(--u))}  /* CARD CON PIN 812,4796 576×450 */

  /* ---------- TU BIENESTAR — maqueta: 5349–5956 ---------- */
  .final{height:calc(607 * var(--u))}
  .final .wrap{display:block;height:100%}
  .d-fin-l{left:0;top:calc(-81 * var(--u));width:calc(457 * var(--u))}       /* FLOR IZQ ULTIMA 0,5268 (bbox vectorial) */
  .d-fin-r{right:calc(-6 * var(--u));top:calc(-158 * var(--u));width:calc(542 * var(--u))} /* FLOR DER ULTIMA 904,5191 */
  .fin-title{position:absolute;left:calc(79.2 * var(--u));top:calc(129.05 * var(--u));
    font-size:calc(55 * var(--u));line-height:calc(66 * var(--u))}             /* bases 5529.2 / 5595.2 */
  .fin-p{position:absolute;left:calc(79.2 * var(--u));top:calc(315.15 * var(--u));margin:0;
    font-size:calc(25 * var(--u));line-height:calc(30 * var(--u))}              /* base 5687.9 */
  .fin-media{position:static;width:auto;aspect-ratio:auto}
  .fin-blob{left:calc(658 * var(--u));top:calc(59 * var(--u));width:calc(924 * var(--u))}  /* TEXTURA VERDE AGUA 658,5408 */
  .fin-photo{position:absolute;left:calc(822 * var(--u));top:calc(21 * var(--u));width:calc(572 * var(--u))} /* 822,5370 572×592 */

  /* ---------- FOOTER — maqueta: FORMA FOOTER en -1,5926 1444×477 → fin 6403 ---------- */
  .site-footer{height:calc(477 * var(--u));margin-top:calc(-30 * var(--u));background-size:calc(100% + 4px) calc(477 * var(--u))}
  .site-footer .wrap{display:block;height:100%}
  .ft-logo{position:absolute;left:calc(63 * var(--u));top:calc(17 * var(--u));width:calc(464 * var(--u));margin:0} /* 63,5943 */
  .ft-p{position:absolute;left:calc(79.8 * var(--u));top:calc(236 * var(--u));margin:0;white-space:nowrap;
    font-size:calc(20 * var(--u));line-height:calc(24 * var(--u))}              /* 20 px, base 6181.0 */
  .btn-ft{position:absolute;left:calc(76 * var(--u));top:calc(336 * var(--u));width:calc(267 * var(--u));height:calc(54 * var(--u));margin:0;
    padding:0 0 0 calc(60.4 * var(--u));font-size:calc(20 * var(--u));line-height:calc(52.4 * var(--u));align-items:flex-start} /* 76,6262 267×54 */
  .ft-r{display:block}
  .fi{position:absolute;left:calc(817 * var(--u));display:block;font-size:calc(20 * var(--u));line-height:calc(24 * var(--u));white-space:nowrap}
  .fi img{position:absolute;left:0;top:0;width:calc(49 * var(--u))}
  .fi span{position:absolute;left:calc(76.6 * var(--u))}
  .fi .ph{padding-left:.27em}
  .fi-ubi{top:calc(156 * var(--u))}  .fi-ubi span{top:calc(4.2 * var(--u))}    /* icono 817,6082 · base 6105.2 */
  .fi-wa{top:calc(231 * var(--u))}   .fi-wa span{top:calc(11.8 * var(--u))}    /* icono 6157 · base 6187.8 */
  .fi-mail{top:calc(308 * var(--u))} .fi-mail span{top:calc(7.3 * var(--u))}   /* icono 6234 · base 6260.3 */
}

/* =====================================================================
   ANIMACIONES E INTERACCIÓN
   ---------------------------------------------------------------------
   · Entradas: solo usan opacity, translate y scale (propiedades
     independientes), así no alteran los transform que cuadran la maqueta.
   · Hovers: usan transform.
   · Solo se activan si main.js agrega la clase .anim al <html>
     (CONFIG.animaciones). Sin JS todo se ve normal.
   ===================================================================== */
:root{--ease:cubic-bezier(.22,.8,.24,1);--pop:cubic-bezier(.34,1.56,.64,1)}

/* ---------- entradas al hacer scroll ---------- */
.anim .rv{opacity:0;translate:0 34px;transition:opacity .9s var(--ease) var(--d,0s),translate .9s var(--ease) var(--d,0s),scale .9s var(--ease) var(--d,0s),
  transform .45s var(--ease),filter .45s var(--ease),box-shadow .3s var(--ease)} /* transform/filter: conserva los hovers */
.anim .rv-l{translate:-56px 0}
.anim .rv-r{translate:56px 0}
.anim .rv-z{translate:0 0;scale:.86}
.anim .rv-pop{translate:0 16px;scale:.8;transition-timing-function:var(--pop)}
.anim .rv.in{opacity:1;translate:0 0;scale:1}
.anim-init .rv{transition:none!important}
.anim .site-footer{overflow:clip} /* lo desplazado antes de entrar no alarga la página */

/* subrayado del hero: se dibuja de izquierda a derecha */
.anim .hl::after{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease) 1s}
.anim .hero-title.in .hl::after{clip-path:inset(0 0 0 0)}

/* ---------- movimiento ambiental (lento, sutil) ---------- */
@keyframes flota{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes flota-x{0%,100%{translate:0 0}50%{translate:12px -8px}}
@keyframes gira{0%,100%{rotate:0deg}50%{rotate:4deg}}
.anim .d-hero-r,.anim .d-sol-r,.anim .d-cta-r,.anim .d-fin-r{animation:gira 16s ease-in-out infinite;transform-origin:70% 40%}
.anim .d-hero-l,.anim .d-sol-l,.anim .d-help-l,.anim .d-cta-l,.anim .d-fin-l{animation:flota 12s ease-in-out infinite}
.anim .d-about-r,.anim .d-help-r{animation:flota-x 14s ease-in-out infinite}
.anim .fin-blob.in{animation:gira 18s ease-in-out 1s infinite;transform-origin:50% 55%}
.anim .d-about-blob.in{animation:flota-x 15s ease-in-out 1s infinite}

/* ---------- botones: brillo que cruza + elevación ---------- */
.btn{overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s} /* position se define arriba (no pisar el absolute de escritorio) */
.btn::after,.svc-btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn:hover::after,.svc-btn:hover::after{left:130%}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px -8px rgba(30,60,80,.45);filter:saturate(1.1)}
.btn:active{transform:translateY(0) scale(.98)}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}
.btn:hover img{animation:wiggle .7s ease}

/* ---------- header ---------- */
.hdr-logo img{transition:transform .4s var(--ease)}
.hdr-logo:hover img{transform:scale(1.05)}
.hdr-social a,.hdr-ubi img{transition:transform .35s var(--pop)}
.hdr-social a:hover{transform:translateY(-3px) scale(1.12)}
.hdr-ubi:hover img{transform:translateY(-3px)}

/* ---------- tarjeta "Mi objetivo" ---------- */
.about-card{transition:transform .4s var(--ease),filter .4s}
.about-card:hover{transform:translateY(-6px);filter:drop-shadow(0 14px 18px rgba(122,100,153,.18))}
.about-flor{transition:transform .6s var(--pop);transform-origin:50% 100%}
.about-card:hover .about-flor{transform:rotate(-10deg) scale(1.08)}

/* ---------- tarjetas de servicios ---------- */
.svc{transition:transform .45s var(--ease),filter .45s var(--ease)}
.svc:hover{transform:translateY(-10px);filter:drop-shadow(0 18px 22px rgba(40,30,60,.18))}
.svc-ico{transition:transform .6s var(--pop)}
.svc:hover .svc-ico{transform:rotate(-12deg) scale(1.12)}
.svc-btn{overflow:hidden;transition:transform .3s var(--ease),background-color .3s,color .3s,box-shadow .3s}
.svc-1{--c:var(--purple)} .svc-2{--c:var(--teal)} .svc-3{--c:var(--sky)} .svc-4{--c:var(--yellow)}
.svc-btn:hover{background:var(--c);color:#fff!important;box-shadow:inset 0 0 0 2px #fff,0 8px 18px -6px rgba(0,0,0,.35);transform:translateY(-2px)}

/* ---------- fotos "Estoy aquí para ayudarte" ---------- */
.hc{transition:transform .45s var(--ease)}
.hc img{transition:filter .45s var(--ease)}
.hc:hover{transform:translateY(-8px) scale(1.03);z-index:2}
.hc:hover img{filter:brightness(.8) saturate(1.1)}
.hc-l{transition:transform .45s var(--ease),filter .45s}
.hc:hover .hc-l{transform:translateX(calc(10 * var(--k)));filter:brightness(1.08)}

/* ---------- tulipanes ---------- */
.wc{transition:transform .5s var(--pop),filter .5s var(--ease)}
.wc:hover{transform:translateY(-14px) rotate(-1.5deg);filter:drop-shadow(0 20px 20px rgba(40,30,60,.16))}
.wc:nth-child(even):hover{transform:translateY(-14px) rotate(1.5deg)}

/* ---------- tarjeta con pin y listas de contacto ---------- */
.pin{transition:transform .5s var(--pop);transform-origin:50% 8%}
.pin:hover{transform:rotate(-1.2deg)}
.pi img,.fi img{transition:transform .35s var(--pop)}
.pi:hover img,.fi:hover img{transform:scale(1.15) rotate(-8deg)}
.pi span,.fi span{transition:color .25s}

/* ---------- fotos de la psicóloga ---------- */
.about-photo,.fin-photo{transition:transform .6s var(--ease)}
.about-photo:hover,.fin-photo:hover{transform:scale(1.02)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .anim .rv{opacity:1!important;translate:none!important;scale:none!important}
  .anim .hl::after{clip-path:none!important}
}