/* =========================================================
   Dra. Jhoselin Denisse Mejía — One page
   Medidas, colores y escala tipográfica tomadas de la
   maqueta original (mesa de trabajo 1440 px).
   ========================================================= */

@font-face{
  font-family:'Sora';
  src:url('../fonts/Sora-SemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --teal:#03c0b4;
  --teal-dark:#02a89e;
  --orange:#e17e44;
  --orange-btn:#f07a35;
  --orange-dark:#d1682b;
  --black:#000000;
  --ink:#141417;
  --ink-soft:#3a3a40;
  --mint:#eef6f6;
  --hero-bg:#efeff2;
  --white:#ffffff;
  --grad-franja:linear-gradient(90deg,#f5b28c 0%,#e8bd9b 25%,#a9cbb7 60%,#78dbd4 100%);
  --grad-banner:linear-gradient(90deg,#e2762f 0%,#b78952 28%,#7e9a71 52%,#44ac90 76%,#12b6a8 100%);
  /* el footer usa el mismo degradado al 56% sobre blanco */
  --grad-footer:linear-gradient(90deg,#f6b38d 0%,#d6bd9e 28%,#b7c6af 52%,#96d0c1 76%,#72dcd4 100%);
  --container:1340px;
  --shadow:0 18px 40px rgba(0,0,0,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:150px}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
[hidden]{display:none !important}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 24px}
.center{text-align:center}
/* El PDF de la maqueta exportó estas secciones con fondo negro por un fallo de
   aplanado: sus títulos son #141417 y su cuerpo #333333, así que el fondo real
   es blanco. */
.sec--blanca{background:#fff; position:relative; overflow:hidden}

h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif; font-weight:600; margin:0; letter-spacing:-.012em}
h1{font-size:clamp(32px,3.55vw,51px); line-height:1.16}
h2{font-size:clamp(28px,3.55vw,51px); line-height:1.18}
h3{font-size:clamp(18px,1.55vw,22px); line-height:1.25}
.h2--caps{font-size:clamp(28px,3.55vw,51px); letter-spacing:0}
.on-dark{color:#fff}

.kicker{
  font-family:'Montserrat',sans-serif; font-weight:500; font-size:19px;
  margin:0 0 12px; letter-spacing:.005em; line-height:1.3;
}
.kicker--orange{color:var(--orange)}
.lead{max-width:826px; margin:22px auto 0; font-size:22px; line-height:1.22; color:#333333}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:16px;
  padding:9px 10px 9px 30px; border-radius:999px;
  font-family:'Sora',sans-serif; font-weight:600; font-size:22px; line-height:1.2;
  color:#fff; transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.22)}
.btn__arrow{
  width:37px; height:37px; border-radius:50%; background:#fff;
  display:grid; place-items:center; flex:0 0 37px; transition:transform .25s ease;
}
.btn__arrow img{width:16px}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn--teal{background:var(--teal)}
.btn--teal:hover{background:var(--teal-dark)}
.btn--orange{background:var(--orange-btn)}
.btn--orange:hover{background:var(--orange-dark)}
.btn--teal-soft{background:rgba(3,192,180,.82)}
.btn--teal-soft:hover{background:var(--teal)}

/* ---------- Listas ---------- */
.checklist li{display:flex; gap:14px; align-items:flex-start; padding:3px 0; font-size:22px; line-height:1.25}
.checklist li::before{
  content:''; flex:0 0 24px; width:24px; height:24px; margin-top:3px;
  background:url('../img/iconos/check.png') center/contain no-repeat;
}
.dotlist li{display:flex; gap:16px; align-items:flex-start; padding:5px 0; font-size:22px; line-height:1.22}
.dotlist li::before{
  content:''; flex:0 0 13px; width:13px; height:13px; margin-top:9px;
  border-radius:50%; background:var(--teal);
}

.deco{position:absolute; pointer-events:none; user-select:none; z-index:0}

/* =========================================================
   TOPBAR  (maqueta: alto 59)
   ========================================================= */
/* la dirección completa del cliente es larga: 14.5px la deja en una sola línea a 1440 */
.topbar{background:var(--ink); color:#fff; font-size:14.5px}
.topbar__in{display:flex; align-items:center; justify-content:space-between; min-height:59px; flex-wrap:wrap}
.topbar__item{display:inline-flex; align-items:center; gap:10px; padding:6px 0; font-weight:500}
.topbar__sep{width:1px; height:30px; background:rgba(255,255,255,.28)}
.topbar__wa{transition:color .2s}
.topbar__wa:hover{color:var(--teal)}
.topbar img{opacity:.95}

/* =========================================================
   HEADER  (maqueta: barra blanca 83, pestaña 101 -> sobresale 18)
   ========================================================= */
.header{background:#fff; position:sticky; top:0; z-index:60}
.header__in{display:flex; align-items:center; height:83px; position:relative}
.header__logo{
  position:absolute; top:0; left:calc((100% - 100vw)/2);
  width:calc((100vw - var(--container))/2 + 24px + 266px);
  height:101px;
  background:var(--grad-franja);
  border-radius:0 84px 84px 0 / 0 50px 50px 0;
  display:flex; align-items:center;
  padding-left:calc((100vw - var(--container))/2 + 24px + 25px);
  z-index:2;
}
.header__logo img{width:125px; height:auto}
.nav{margin-left:auto; margin-right:40px; display:flex; align-items:center; gap:61px}
.nav a{
  font-family:'Sora',sans-serif; font-weight:600; font-size:20px; color:var(--ink);
  position:relative; padding:6px 0; transition:color .2s; white-space:nowrap;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--teal); transition:width .25s ease;
}
.nav a:hover{color:var(--teal)}
.nav a:hover::after{width:100%}

.burger{display:none; width:42px; height:42px; margin-left:auto; flex-direction:column; justify-content:center; gap:5px}
.burger span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   HERO + BENEFICIOS  (bloque con fondo negro compartido)
   maqueta: hero claro 142..735 (593) · foto hasta 809
            card menta 674..1190, ancho 918
   ========================================================= */
.herowrap{background:#fff; position:relative; overflow:hidden}
.hero{position:relative; height:593px; background:var(--hero-bg); z-index:1}
.hero__media{position:absolute; top:0; bottom:-75px; left:36%; right:0; z-index:0}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 20%}
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--hero-bg) 0%,rgba(239,239,242,.92) 14%,rgba(239,239,242,0) 44%);
}
.hero__dots{position:absolute; top:0; left:665px; width:300px; z-index:1}
.hero__in{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; padding-bottom:22px}
.hero__copy{max-width:700px}
.hero .kicker{white-space:nowrap}
.hero__copy h1{margin:0 0 24px; color:var(--ink); max-width:600px}
.hero__text{margin:0 0 32px; font-size:22px; line-height:1.22; color:var(--ink-soft); max-width:582px}

.beneficios{position:relative; z-index:2; margin-top:-61px}
.beneficios .container{position:relative; z-index:3}
.deco--benef-l{left:-260px; top:302px; width:520px; z-index:0; opacity:.45}
.deco--benef-r2{right:-212px; top:736px; width:420px; z-index:0; opacity:.45}
.benef__card{
  background:var(--mint); border-radius:34px; padding:46px 60px 48px;
  max-width:918px; margin:0 auto; position:relative;
  box-shadow:0 20px 45px rgba(0,0,0,.10);
}
.benef__card h2{margin:0 0 24px; color:var(--ink)}
.benef__lead{max-width:800px; margin:0 auto; color:var(--ink-soft); font-size:22px; line-height:1.22}
.benef__grid{display:flex; gap:30px; justify-content:center; margin-top:48px; flex-wrap:wrap}
.benef__item{
  background:#fff; border-radius:16px; padding:14px 20px 14px; width:274px;
  border-bottom:9px solid var(--teal); box-shadow:0 10px 24px rgba(0,0,0,.10);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.benef__item p{margin:0; font-size:15px; line-height:1.4; font-weight:600; text-align:left; width:100%}
.benef__logo{width:110px; margin-bottom:6px}
.benef__icon{width:52px; margin-bottom:8px}

/* =========================================================
   TRATAMIENTOS
   maqueta: kicker 1297 · h2 1342 · lead 1427 · círculos 1570 (Ø202)
            card blanca 1647..2355 (x 76..1362)
   ========================================================= */
.tratamientos{padding:107px 0 70px}
.tratamientos .container{position:relative; z-index:2}
.tratamientos h2{margin:0 auto; max-width:900px}
.trat{margin-top:69px; position:relative}
.trat__tabs{display:flex; justify-content:center; gap:85px; position:relative; z-index:3; flex-wrap:wrap}
.trat__tab{
  width:202px; height:202px; border-radius:50%; background:var(--mint);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  font-family:'Sora',sans-serif; font-weight:600; font-size:19px; color:var(--ink);
  text-align:center; padding:0 18px; position:relative; line-height:1.2;
  transition:background-color .3s ease, color .3s ease, transform .3s ease;
}
.trat__tab img{width:52px; height:44px; object-fit:contain; transition:filter .3s ease}
.trat__tab:hover{transform:translateY(-4px)}
.trat__tab.is-active{background:var(--orange); color:#fff}
.trat__tab.is-active img{filter:brightness(0) invert(1)}
.trat__tab.is-active::after{
  content:''; position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent;
  border-top:18px solid var(--orange);
}
.trat__card{
  background:var(--white); border-radius:34px; margin-top:-125px; padding:207px 73px 30px;
  position:relative; z-index:2; overflow:hidden;
  box-shadow:0 20px 45px rgba(0,0,0,.09);
}
.trat__card::before,.trat__card::after{content:''; position:absolute; width:230px; height:230px; pointer-events:none}
.trat__card::before{left:0; top:0; background:url('../img/deco/dots-naranja.png') left top/cover no-repeat; opacity:.7}
.trat__card::after{right:0; bottom:0; background:url('../img/deco/dots-teal-der.png') right bottom/cover no-repeat; opacity:.75}
.trat__panel{display:none; grid-template-columns:1fr 470px; gap:52px; align-items:start; position:relative; z-index:2}
.trat__panel.is-active{display:grid}
.trat__text p{margin:0 0 22px; font-size:22px; line-height:1.22; color:var(--ink-soft)}
.trat__text .checklist{margin:26px 0 6px}
.trat__text .trat__nota{font-size:19px; margin-top:22px}
.trat__img img{border-radius:20px; width:100%; aspect-ratio:470/395; object-fit:cover}
.trat__btn{margin-top:30px; position:relative; z-index:2}

/* =========================================================
   ACERCA DE
   maqueta: sección 2425..3312 · kicker 2494 · caja tabs 717x349
            foto 2510..3273, sangra hasta el borde derecho
   ========================================================= */
.acerca{background:var(--mint); padding:69px 0 46px; position:relative; overflow:hidden}
.acerca__in{display:grid; grid-template-columns:717px 1fr; gap:0; align-items:end}
.acerca__copy{padding-bottom:32px}
.acerca__copy h2{margin:0 0 32px; max-width:700px}
.acerca__quote{margin:0 0 48px; font-size:22px; line-height:1.22; color:var(--ink-soft); max-width:700px}

.ptabs__nav{display:flex; gap:8px; position:relative; z-index:2}
.ptabs__tab{
  padding:12px 24px; border-radius:12px 12px 0 0; background:#fff;
  font-family:'Sora',sans-serif; font-weight:600; font-size:17px; color:var(--ink);
  border:1px solid rgba(0,0,0,.06); border-bottom:0; transition:.25s;
}
.ptabs__tab.is-active{background:var(--orange); color:#fff; border-color:var(--orange)}
.ptabs__box{
  background:#fff; border-radius:0 18px 18px 18px; padding:30px 34px 32px 38px;
  box-shadow:var(--shadow); margin-top:-1px; width:717px; max-width:100%;
}
.ptabs__panel{display:none}
.ptabs__panel.is-active{display:block}
.ptabs__panel p{margin:0 0 20px; font-size:22px; line-height:1.22; color:var(--ink-soft)}
.ptabs__panel p:last-child{margin-bottom:0}
.checklist--dark li{font-size:22px; color:var(--ink-soft)}

.acerca__media{position:relative; align-self:end; margin-bottom:39px; margin-right:calc((100vw - var(--container))/-2 - 24px)}
.acerca__foto{width:100%; max-width:559px; margin-left:auto}
.acerca__tag{
  position:absolute; background:var(--teal); color:#fff; border-radius:14px;
  font-family:'Sora',sans-serif; font-weight:600; padding:16px 22px; line-height:1.3;
  box-shadow:0 10px 24px rgba(0,0,0,.14); font-size:21px;
}
.acerca__tag--top{left:53px; top:14.6%; width:256px}
.acerca__tag--bottom{left:167px; right:76px; bottom:-39px}

/* =========================================================
   TECNOLOGÍA
   maqueta: sección 3313..4301 · kicker 3424 · tarjetas 382 ancho, rejilla 1225
   ========================================================= */
.tecno{padding:111px 0 118px}
.tecno .container{position:relative; z-index:2}
.deco--tec-l{left:-104px; top:184px; width:310px; opacity:.45}
.deco--tec-r{right:-98px; top:406px; width:310px; opacity:.45}
.tecno h2{max-width:800px; margin:0 auto}
.tecno .lead{margin-bottom:44px}
.tecno__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:39px; margin:76px auto 0; max-width:1225px; align-items:start}
.tecno__card{
  background:var(--mint); border-radius:24px; padding:54px 29px 58px; position:relative;
  box-shadow:0 14px 32px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.tecno__card--low{transform:translateY(50px)}
.tecno__card:hover{transform:translateY(-8px); box-shadow:0 22px 44px rgba(0,0,0,.17)}
.tecno__card--low:hover{transform:translateY(42px); box-shadow:0 22px 44px rgba(0,0,0,.17)}
.tecno__icon{position:absolute; top:-51px; left:27px; width:95px; display:block; line-height:0}
.tecno__icon img{width:100%; height:auto}
.tecno__card h3{margin:0 0 18px}
.tecno__card p{margin:0; font-size:22px; line-height:1.22; color:var(--ink-soft)}

/* =========================================================
   MÁS SERVICIOS
   maqueta: sección 4301..5091 · kicker 4390 · h2 4428
            4 tarjetas de 320x366, paso 342, franja naranja 5px a la derecha
   ========================================================= */
.servicios{background:var(--mint); padding:89px 0 76px}
.servicios h2{margin:0 0 71px}
.serv__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin:0 -40px 60px -29px}
.serv__card{
  position:relative; border-radius:20px; overflow:hidden; aspect-ratio:320/366;
  box-shadow:5px 0 0 0 var(--orange), 0 16px 30px rgba(0,0,0,.16);
  transition:transform .38s ease, box-shadow .38s ease;
}
.serv__card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.serv__card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.62) 100%);
  transition:background .38s ease;
}
.serv__card:hover{transform:scale(1.045); box-shadow:5px 0 0 0 var(--orange), 0 26px 46px rgba(0,0,0,.3)}
.serv__card:hover img{transform:scale(1.08)}
.serv__card:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.78) 100%)}
.serv__body{position:absolute; left:0; right:0; top:40%; z-index:2; padding:0 24px; color:#fff}
.serv__body h3{font-size:18px; margin:0 0 12px}
.serv__body p{margin:0; font-size:19px; line-height:1.3}

/* =========================================================
   BANNER ÓPTICA  (maqueta 5092..5547, alto 455)
   La foto es un recorte a color que va ENCIMA del degradado y
   sobresale 86 px por arriba, invadiendo el bloque claro anterior.
   ========================================================= */
.banner{position:relative; background:var(--grad-banner); overflow:visible; z-index:2}
.banner__mujer{
  position:absolute; left:-5px; bottom:0; width:681px; max-width:52%;
  height:auto; z-index:3; pointer-events:none;
}
.banner__in{position:relative; z-index:2; display:flex; justify-content:flex-end; align-items:center; min-height:455px; padding:56px 0}
.banner__copy{max-width:600px; text-align:center}
.banner__tag{
  display:inline-block; background:rgba(255,255,255,.28); color:#fff; border-radius:999px;
  padding:8px 22px; font-size:17px; font-weight:500; margin-bottom:20px;
}
.banner__copy h2{margin:0 0 20px}
.banner__copy p{margin:0 0 30px; color:rgba(255,255,255,.95); font-size:20px; line-height:1.3}

/* =========================================================
   GALERÍA  (maqueta 5546..6478 · kicker 5617 · filas 311, gap 16/23)
   ========================================================= */
.galeria{background:var(--mint); padding:71px 0 76px; position:relative; overflow:hidden}
.galeria .container{position:relative; z-index:2}
.deco--gal-l{left:-224px; top:123px; width:420px; opacity:.55}
.deco--gal-r{right:-98px; top:29px; width:310px; opacity:.6}
.galeria h2{margin:0 0 66px}
.galeria__grid{
  display:grid; grid-template-columns:1.128fr 1.128fr 1fr; grid-template-rows:311px 311px;
  column-gap:16px; row-gap:23px; margin:0 -58px 0 -57px;
}
.galeria__grid figure{margin:0; border-radius:14px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.10); min-height:0}
.galeria__grid img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.galeria__grid figure:hover img{transform:scale(1.06)}
.g1{grid-column:1; grid-row:1}
.g2{grid-column:2; grid-row:1}
.g3{grid-column:3; grid-row:1/3}
.g4{grid-column:1; grid-row:2}
.g5{grid-column:2; grid-row:2}

/* =========================================================
   ¿SOY CANDIDATO?  (maqueta 6479..~7500 · kicker 6539)
   ========================================================= */
.candidato{padding:60px 0 90px}
.candidato .container{position:relative; z-index:2}
.deco--cand-l{left:-104px; top:60px; width:310px; opacity:.45}
.deco--cand-r{right:-98px; top:4px; width:310px; opacity:.45}
.candidato h2{max-width:1200px; margin:0 auto}
.candidato .lead{margin-bottom:44px}
.cand__grid{display:grid; grid-template-columns:714px 1fr; gap:92px; margin-top:82px; align-items:start}
.cand__card{background:var(--mint); border-radius:24px; padding:36px 36px 42px; box-shadow:0 14px 32px rgba(0,0,0,.08)}
.cand__card h3{margin:0 0 22px; font-size:22px}
.cand__card>p{margin:0 0 20px; font-size:22px; line-height:1.22; color:var(--ink-soft)}
.cand__proceso-title{font-family:'Montserrat',sans-serif; font-weight:600; color:var(--ink); font-size:20px; text-align:right; margin:0 0 22px}

/* ---------- Acordeones ---------- */
.acc--proceso{background:var(--mint); border-radius:16px; box-shadow:0 14px 32px rgba(0,0,0,.08)}
.acc--proceso .acc__item{position:relative}
.acc--proceso .acc__item:first-child .acc__head{border-radius:16px 16px 0 0}
.acc--proceso .acc__item:last-child .acc__head{border-radius:0 0 16px 16px}
.acc--proceso .acc__item.is-open{
  background:#fff; border-radius:16px; z-index:2;
  box-shadow:0 10px 22px rgba(0,0,0,.13);
}
.acc--proceso .acc__item.is-open .acc__head{border-radius:16px 16px 0 0}
.acc--proceso .acc__item.is-open:last-child{border-radius:16px}
.acc--proceso .acc__head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 24px; font-family:'Sora',sans-serif; font-weight:600; font-size:22px;
  text-align:left; line-height:1.25; transition:.25s;
}
.acc--proceso .acc__item+.acc__item .acc__head{border-top:1px solid #dbe7e7}
.acc--proceso .acc__item.is-open .acc__head,
.acc--proceso .acc__item.is-open+.acc__item .acc__head{border-top:0}
.acc--proceso .acc__item.is-open .acc__head{background:var(--teal); color:#fff}
.acc--proceso .acc__body{padding:0 24px; max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease}
.acc--proceso .acc__item.is-open .acc__body{padding:18px 24px 22px; max-height:400px}
.acc--proceso .acc__body p{margin:0; font-size:21px; line-height:1.24; color:var(--ink-soft)}
.acc__ico{flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:url('../img/iconos/mas.png') center/contain no-repeat}
.acc__item.is-open .acc__ico{background-image:url('../img/iconos/menos.png')}

.acc--faq .acc__item{margin-bottom:25px}
.acc--faq{margin-bottom:0}
.acc--faq .acc__head{
  width:100%; text-align:left; background:#fff; border-radius:14px; padding:24px 30px;
  font-family:'Sora',sans-serif; font-weight:600; font-size:22px; line-height:1.28;
  box-shadow:0 8px 18px rgba(0,0,0,.07); transition:.25s;
}
.acc--faq .acc__head:hover{box-shadow:0 12px 24px rgba(0,0,0,.12)}
.acc--faq .acc__body{max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; padding:0 30px}
.acc--faq .acc__item.is-open .acc__body{padding:18px 30px 6px; max-height:400px}
.acc--faq .acc__body p{margin:0; font-size:22px; line-height:1.22; color:var(--ink-soft)}

/* =========================================================
   FAQ  (maqueta ~7506..8756 · pills 667 ancho · imagen a la derecha)
   ========================================================= */
.faq{background:var(--mint); padding:100px 0 72px; position:relative; overflow:hidden}
.faq .container{position:relative; z-index:2}
.deco--faq-l{left:40%; top:190px; width:230px; opacity:.45}
.deco--faq-r{right:-120px; bottom:60px; width:300px; opacity:.5}
.faq h2{margin:0 0 60px}
.faq__in{display:grid; grid-template-columns:667px 1fr; gap:110px; align-items:end}
.faq__media{position:relative}
.faq__media img{border-radius:16px; width:100%; box-shadow:0 16px 34px rgba(0,0,0,.12)}

/* =========================================================
   CONTACTO  (maqueta 8756..9614 · kicker 8860 · card menta 580 ancho)
   ========================================================= */
.contacto{padding:104px 0 96px}
.contacto__in{position:relative; z-index:2; display:grid; grid-template-columns:1fr 580px; gap:76px; align-items:start}
.deco--con-l{left:-182px; top:330px; width:250px; opacity:.45}
.deco--con-r{right:-98px; top:136px; width:310px; opacity:.45}
.contacto__copy h2{margin:0 0 40px; max-width:680px}
.contacto__strong{font-weight:700; color:var(--ink); margin:0 0 22px; font-size:22px}
.contacto__text{margin:0 0 40px; color:#333333; font-size:22px; line-height:1.22; max-width:600px}
.contacto__wa-title{margin-top:6px}
.walist li{margin-bottom:16px}
.walist a{display:inline-flex; align-items:center; gap:18px; color:var(--ink); font-size:22px; transition:color .2s}
.walist a:hover{color:var(--teal)}
.walist img{width:45px}
.contacto__btns{display:flex; gap:24px; margin-top:30px; flex-wrap:wrap}

.contacto__card{
  background:var(--mint); border-radius:24px; padding:58px 46px 42px; position:relative;
  margin-top:56px; box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.contacto__avatar{
  position:absolute; top:-54px; left:46px; width:108px; height:108px; border-radius:50%;
  background:var(--grad-franja); display:grid; place-items:center; overflow:hidden;
}
.contacto__avatar img{width:82px}
.contacto__card p{margin:0 0 22px; font-size:20px; line-height:1.3; color:var(--ink-soft)}
.contacto__nombre{font-weight:600; color:var(--ink) !important; font-size:22px !important}
.contacto__card .btn{margin-top:8px; font-size:19px}

/* =========================================================
   FOOTER  (maqueta 9614..10016, alto 402)
   ========================================================= */
.footer{position:relative; overflow:hidden; background:var(--grad-footer); color:#fff; padding:52px 0 20px}

.footer__in,.footer__legal{position:relative; z-index:2}
.deco--foot-l{left:-150px; top:-40px; width:330px; opacity:.55}
.deco--foot-r{right:-130px; bottom:-120px; width:330px; opacity:.5}
.footer__in{display:grid; grid-template-columns:2.37fr 1.86fr 1fr; gap:40px; align-items:start}
.footer__brand > img{width:323px; margin:6px auto 0 62px}
.footer__col h4{font-family:'Sora',sans-serif; font-size:22px; letter-spacing:.04em; margin:0 0 24px}
.footer__col li{margin-bottom:12px}
.footer__col a{display:inline-flex; align-items:center; gap:16px; font-size:22px; transition:opacity .2s, transform .2s}
.footer__col a:hover{opacity:.82; transform:translateX(3px)}
.footer__col a img{width:20px}
.footer__wa li{margin-bottom:20px}
.footer__wa a img{width:45px}
.footer__urgencias{align-items:center}
.ico-tel{width:45px; height:45px; flex:0 0 45px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linejoin:round}
.footer__urg-txt{display:flex; flex-direction:column; line-height:1.2}
.footer__urg-txt b{font-size:16px; font-weight:700; letter-spacing:.03em; opacity:.92}
.footer__dir{
  display:flex; align-items:flex-start; gap:12px; margin:22px 0 0 34px;
  font-size:17px; line-height:1.4; max-width:400px;
}
.footer__dir img{width:14px; margin-top:4px; flex:0 0 14px}
.footer__legal{margin-top:30px; padding-top:16px; border-top:1px solid rgba(20,20,23,.16)}
.footer__legal p{margin:0; font-size:14px; color:rgba(20,20,23,.6); text-align:center}
.footer__cofepris{margin-top:8px !important; font-weight:600; letter-spacing:.01em}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1400px){
  .serv__grid{margin-left:0; margin-right:0}
  .galeria__grid{margin-left:0; margin-right:0}
  .acerca__in{grid-template-columns:minmax(0,717px) 1fr}
  .cand__grid{grid-template-columns:minmax(0,714px) 1fr; gap:60px}
  .faq__in{grid-template-columns:minmax(0,667px) 1fr; gap:60px}
  .contacto__in{grid-template-columns:1fr minmax(0,580px); gap:56px}
  .trat__panel{grid-template-columns:1fr minmax(0,470px); gap:44px}
}

@media (max-width:1200px){
  .trat__tabs{gap:40px}
  .trat__tab{width:172px; height:172px; font-size:17px}
  .trat__card{padding:176px 44px 44px; margin-top:-104px}
  .serv__grid{gap:18px}
  .footer__brand > img{width:250px; margin-left:0}
  .header__logo{width:300px; padding-left:24px}
  .nav{gap:34px}
  .nav a{font-size:18px}
}

@media (max-width:1024px){
  html{scroll-padding-top:96px}
  .topbar{font-size:14px}
  .topbar__item{padding:6px 12px}
  .nav{display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
       flex-direction:column; align-items:flex-start; gap:0; padding:12px 24px 20px;
       box-shadow:0 14px 26px rgba(0,0,0,.12); margin-right:0}
  .nav.is-open{display:flex}
  .nav a{padding:12px 0; width:100%; border-bottom:1px solid #eef2f2; font-size:18px}
  .burger{display:flex}
  .header{position:relative}
  .header__in{height:74px}
  .header__logo{position:relative; left:auto; width:auto; height:74px; padding:0 44px 0 24px;
    margin-left:-24px; border-radius:0 60px 60px 0 / 0 37px 37px 0}
  .header__logo img{width:100px}

  .hero{height:auto}
  .hero .kicker{white-space:normal}
  .hero__in{padding-top:56px; padding-bottom:130px}
  .hero__media{left:28%; bottom:-40px}
  .hero__dots{left:auto; right:6%; width:230px}
  h1{font-size:clamp(30px,4.4vw,44px)}
  h2{font-size:clamp(26px,4.2vw,42px)}
  .h2--caps{font-size:clamp(26px,4.2vw,42px)}
  .lead,.hero__text,.benef__lead,.trat__text p,.tecno__card p,.cand__card>p,
  .acc--faq .acc__body p,.acc--proceso .acc__body p,.contacto__text,
  .checklist li,.dotlist li,.walist a,.footer__col a{font-size:18px}
  .acc--faq .acc__head{font-size:18px}
  .acc--proceso .acc__head{font-size:18px}
  .btn{font-size:18px}

  .acerca__in,.cand__grid,.faq__in,.contacto__in{grid-template-columns:1fr; gap:44px}
  .acerca__copy{padding-bottom:0}
  .ptabs__box{width:100%}
  .acerca__media{max-width:560px; margin:0 auto}
  .acerca__tag--top{left:0}
  .acerca__tag--bottom{left:0; right:0}
  .cand__proceso-title{text-align:left}
  .contacto__card{margin-top:70px}
  .tecno__grid{grid-template-columns:repeat(2,1fr); gap:56px 30px}
  .tecno__card--low{transform:none}
  .tecno__card--low:hover{transform:translateY(-8px)}
  .serv__grid{grid-template-columns:repeat(2,1fr); margin-left:0; margin-right:0}
  .galeria__grid{margin-left:0; margin-right:0}
  .banner__mujer{width:40%; max-width:none; left:0; bottom:0}
  .banner__in{justify-content:flex-end; min-height:420px; padding:56px 0}
  .banner__copy{max-width:56%; text-align:left}
  .footer__in{grid-template-columns:1fr 1fr; gap:40px}
  .footer__brand{grid-column:1/-1; text-align:center}
  .footer__brand > img{margin:0 auto}
  /* mismo criterio que la barra superior: el icono en línea con el texto */
  .footer__dir{display:block; margin:20px auto 0; max-width:360px; text-align:center}
  .footer__dir img{display:inline-block; vertical-align:-3px; margin:0 8px 0 0}
  .galeria__grid{grid-template-rows:260px 260px}
}

@media (max-width:820px){
  .beneficios{margin-top:-70px}
  .benef__card{padding:40px 26px 44px; border-radius:26px}
  .trat__panel.is-active{grid-template-columns:1fr; gap:30px}
  .trat__img{order:-1}
  .galeria__grid{grid-template-columns:repeat(2,1fr); grid-template-rows:230px 230px 230px}
  .g1,.g2,.g4,.g5{grid-column:auto; grid-row:auto}
  .g3{grid-column:1/-1; grid-row:auto}
}

@media (max-width:640px){
  .container{padding:0 18px}
  html{scroll-padding-top:86px}
  .topbar__in{flex-direction:column; align-items:center; gap:0; padding:10px 0}
  .topbar__sep{display:none}
  .topbar{font-size:13.5px}
  /* el icono fluye dentro del texto para que quede pegado y todo centrado */
  .topbar__item{display:block; padding:5px 0; text-align:center}
  .topbar__item img{display:inline-block; vertical-align:-2px; margin-right:8px}
  .topbar__item span{display:inline}
  .header__in{height:64px}
  .header__logo{height:64px; padding:0 30px 0 18px; margin-left:-18px; border-radius:0 50px 50px 0 / 0 32px 32px 0}
  .header__logo img{width:84px}

  .hero__media{left:0; bottom:0}
  .hero__media img{object-position:64% 18%}
  .hero__media::after{background:linear-gradient(180deg,rgba(239,239,242,.95) 0%,rgba(239,239,242,.88) 44%,rgba(239,239,242,.58) 100%)}
  .hero__dots{right:-40px; width:200px}
  .hero__in{padding-top:44px; padding-bottom:130px}
  .hero__text{max-width:100%}

  .btn{font-size:16px; padding:8px 8px 8px 22px; gap:12px; white-space:normal; text-align:left}
  .btn__arrow{width:32px; height:32px; flex:0 0 32px}

  .benef__grid{flex-direction:column; align-items:center}
  .benef__item{width:100%; max-width:340px; padding:16px 20px 14px}
  .benef__item p{text-align:center}
  .benef__logo{width:132px; margin-bottom:2px}
  .benef__icon{width:56px; margin-bottom:4px}

  .trat__tabs{gap:14px}
  .trat__tab{width:calc(50% - 7px); height:auto; aspect-ratio:1/1; max-width:160px; font-size:15px}
  .trat__card{padding:110px 22px 40px; border-radius:26px; margin-top:-70px}
  .trat__tab.is-active::after{border-top-width:14px}

  .acerca{padding-top:56px}
  .acerca__tag{font-size:15px; padding:9px 14px; border-radius:11px}
  .acerca__tag--top{left:0; top:5%; width:auto; max-width:47%}
  .acerca__tag--bottom{left:0; right:0; bottom:14px; font-size:14.5px}

  .tecno{padding:64px 0 72px}
  .tecno__grid{grid-template-columns:1fr; gap:56px; margin-top:60px}
  .banner__mujer{width:56%; left:-6%; bottom:0}
  .banner__in{min-height:0; padding:44px 0 calc(44vw + 24px)}
  .banner__copy{max-width:100%; text-align:center}
  .servicios{padding:60px 0 60px}
  .servicios h2{margin-bottom:40px}
  .serv__grid{grid-template-columns:1fr; gap:34px}
  .serv__card{aspect-ratio:1/.92}
  .serv__body{top:auto; bottom:22px}
  .galeria__grid{grid-template-columns:1fr; grid-template-rows:repeat(5,210px)}
  .galeria h2{margin-bottom:36px}

  .faq{padding:60px 0 70px}
  .faq h2{margin-bottom:34px}
  .candidato{padding:56px 0 70px}
  .cand__grid{margin-top:52px; gap:34px}
  .cand__card{padding:26px 22px 30px}
  .contacto{padding:64px 0 70px}
  .contacto__btns{flex-direction:column; align-items:flex-start}
  .contacto__card{padding:56px 24px 34px}
  .contacto__avatar{left:24px}
  .footer__in{grid-template-columns:1fr; text-align:center}
  .footer__col a{justify-content:center}
  .footer__col ul{display:inline-block; text-align:left}
}