/* ── Tipografías de marca ───────────────────────────────────────────── */
@font-face{font-family:"Stage Grotesk";src:url("../fonts/StageGrotesk-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Stage Grotesk";src:url("../fonts/StageGrotesk-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Cloudy Organic";src:url("../fonts/CloudyOrganic.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
:root{
  --navy:#1b2a63; --blue:#5b6fd6; --blue-soft:#a9c2f5; --pale:#e1edfb; --lime:#cbe86b;
  --white:#fff; --ink:#1b2a63; --muted:#5a6a9a;
  --serif:"Stage Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --sans:"Stage Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --hl:"Cloudy Organic","Stage Grotesk",cursive;
  --pad:clamp(1.25rem,5vw,4rem); --sec:clamp(5rem,10vw,9rem); --hdr:118px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--pad)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.02em;
  text-align:center}
/* El bloque que acompaña al titular se centra con él para que no quede
   un titular centrado sobre un cuerpo de texto justificado a la izquierda. */
.eyebrow{text-align:center}
.lead{margin-inline:auto;text-align:center}

/* Cloudy Organic — highlight de marca. Uso deliberadamente escaso:
   resalta la carga emocional de un titular, nunca el titular entero. */
.hl{font-family:var(--hl);font-weight:400;letter-spacing:0;
  font-size:1.1em;line-height:.9;color:var(--blue)}
.close .hl{color:var(--lime)}
h1{font-size:clamp(2.6rem,7vw,5.2rem)}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.2}
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin-bottom:1.1rem;text-align:center}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--muted);max-width:56ch}
section{padding-block:var(--sec)}
.alt{background:var(--pale)}

/* header */
/* Acotado a #hdr: la regla apuntaba a cualquier <header> del documento, asi
   que el <header> de cada tarjeta de resena heredaba `position:fixed` y los
   nombres se apilaban en la esquina superior izquierda de la pagina. */
#hdr{position:fixed;inset:0 0 auto 0;height:var(--hdr);z-index:100;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(27,42,99,.08);transition:box-shadow .3s}
#hdr.scrolled{box-shadow:0 6px 30px rgba(27,42,99,.07)}
.bar{max-width:1200px;margin:0 auto;padding-inline:var(--pad);height:100%;
  display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
/* 80% más grande que el tamaño original (38–52px) */
.brand img{height:clamp(68px,7.9vw,94px);width:auto}
.brand small{display:block;font-family:var(--sans);font-size:.56rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue);margin-top:2px}
.bar nav{margin-left:auto;display:flex;gap:clamp(1rem,1.7vw,1.9rem);align-items:center;white-space:nowrap}
.bar nav a:not(.btn){font-size:.86rem;color:var(--navy);text-decoration:none;opacity:.75;transition:opacity .2s}
.bar nav a:not(.btn):hover{opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.6rem;border-radius:100px;font-size:.88rem;font-weight:600;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .2s,background .2s,color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn.btn-primary{background:var(--navy);color:#fff}
.btn.btn-primary:hover{background:var(--blue)}
.btn.btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent}
.btn.btn-ghost:hover{background:var(--navy);color:#fff}
.btn.btn-lime{background:var(--lime);color:var(--navy)}
.lang{display:flex;gap:.3rem;align-items:center;font-size:.74rem;font-weight:600;
  border:1px solid rgba(27,42,99,.18);border-radius:100px;padding:.22rem;flex-shrink:0}
.lang a, .lang button{border:0;background:none;font:inherit;color:var(--muted);cursor:pointer;
  padding:.28rem .62rem;border-radius:100px;transition:.2s;text-decoration:none;
  display:inline-block;line-height:1.3}
.lang a.on, .lang button.on{background:var(--navy);color:#fff}
.menu-btn{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:.4rem}
.menu-btn span{display:block;width:22px;height:1.5px;background:var(--navy);margin:5px 0}

/* hero */
.hero{padding-top:calc(var(--hdr) + clamp(2.5rem,6vw,5rem));
  padding-bottom:clamp(3rem,6vw,5.5rem);background:var(--pale);
  position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.hero .copy{text-align:center}
.hero h1{margin:.4rem 0 1.4rem;text-wrap:balance}
.hero .cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2.2rem;justify-content:center}
/* El video vuelve a ser una pieza contenida, no un fondo a sangre */
.video{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(27,42,99,.5);background:var(--navy);margin:0}
.video video{width:100%;height:100%;object-fit:cover;display:block}
.video figcaption{position:absolute;bottom:14px;left:0;right:0;text-align:center;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);
  text-shadow:0 1px 6px rgba(27,42,99,.6);pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none}
.b1{width:190px;height:190px;background:var(--lime);top:-60px;right:12%}
.b2{width:120px;height:120px;background:var(--blue-soft);bottom:-40px;left:8%}

/* services */
.rail{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.5rem .25rem 1.6rem;scrollbar-width:thin}
.card{flex:0 0 clamp(258px,30vw,330px);scroll-snap-align:start;background:#fff;
  border-radius:18px;overflow:hidden;border:1px solid rgba(27,42,99,.09);
  transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 46px -24px rgba(27,42,99,.4)}
/* Mismo formato 4:3 de siempre; ahora con foto.
   --pos ajusta el encuadre de cada imagen para centrar a la persona. */
.card .ph{aspect-ratio:4/3;width:100%;display:block;object-fit:cover;
  object-position:var(--pos,50% 50%);background:var(--pale)}
.card .body{padding:1.5rem 1.4rem 1.7rem}
.card p{font-size:.92rem;color:var(--muted);margin-top:.55rem}
.rail-nav{display:flex;flex-direction:column;align-items:center;gap:1.4rem;margin-top:1rem}
.rail-arrows{display:flex;gap:.5rem;justify-content:center}
.rail-nav button{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(27,42,99,.2);
  background:#fff;cursor:pointer;color:var(--navy);font-size:1.1rem;transition:.2s}
.rail-nav button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
/* Sin esto, el reset del tema padre deja la flecha rosa tras el clic. */
.rail-nav button:focus{background:#fff;color:var(--navy)}
.rail-nav button:focus:hover{background:var(--navy);color:#fff}

/* partners */
/* ── Cinta de logos ─────────────────────────────────────────────────────
   La pista contiene dos tandas idénticas de logos. La animación la desplaza
   exactamente un 50%, es decir el largo de una tanda, así que al reiniciarse
   el segundo grupo queda donde estaba el primero y el bucle no tiene salto. */
.marquee{margin-top:3.2rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;
  gap:clamp(2.5rem,6vw,5rem);will-change:transform;animation:pcc-marquee 55s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{width:clamp(90px,10.2vw,123px);height:auto;object-fit:contain;
  flex-shrink:0;opacity:.62;transition:opacity .3s}
.marquee img:hover{opacity:1}
@keyframes pcc-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* Sin movimiento para quien lo pidió en su sistema: la cinta queda quieta */
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .marquee{-webkit-mask-image:none;mask-image:none}
}
.logos img:hover{opacity:1}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:1px;background:rgba(27,42,99,.12);margin-top:3.4rem;
  border:1px solid rgba(27,42,99,.12);border-radius:18px;overflow:hidden}
.pillar{background:var(--pale);padding:2.3rem 1.9rem;transition:background .3s}
.pillar:hover{background:#fff}
.pillar .n{font-family:var(--serif);font-size:2.4rem;color:var(--blue-soft);line-height:1}
.pillar h3{margin:.5rem 0 .7rem}
.pillar p{font-size:.93rem;color:var(--muted)}

/* close + contact */
.close{background:var(--navy);color:#fff;text-align:center}
.close .eyebrow{color:var(--blue-soft)}
/* 30ch: cada frase del titular de cierre mide 29 caracteres y debe caber
   entera en su linea. Con 16ch se partia en cuatro. `balance` reparte
   mejor el texto cuando la pantalla si obliga a cortar. */
.close h2{color:#fff;max-width:30ch;margin:0 auto 1.6rem;text-wrap:balance}
.close p{color:rgba(255,255,255,.72);max-width:60ch;margin:0 auto}
/* El cierre repite la diagramacion del hero: texto a un lado, imagen al
   otro, en el mismo formato vertical y con el mismo marco que el video. */
.close .wrap{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.close .copy{text-align:center}
.close .cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2.2rem;justify-content:center}
.close .close-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:20px;box-shadow:0 30px 70px -30px rgba(0,0,0,.55);
  background:rgba(255,255,255,.08)}
@media(max-width:900px){
  .close .wrap{grid-template-columns:1fr}
  /* El `order` va en el widget, que es el hijo de la rejilla; en la
     imagen no hacia nada. Asi la foto sube antes del texto, igual que
     el video del hero. */
  .close .close-foto{order:-1}
  .close .close-foto img{aspect-ratio:16/10}
}
.close .kicker{font-family:var(--hl);font-style:normal;line-height:1.15;font-size:clamp(1.2rem,2.2vw,1.7rem);
  color:var(--lime);margin:2.4rem auto 2.6rem;max-width:30ch}
.contact{text-align:center}
.contact .btns{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.contact .mail{margin-top:1.4rem;font-size:.9rem;color:var(--muted)}
.contact .mail a{color:var(--blue)}

/* footer */
footer{background:var(--navy);color:rgba(255,255,255,.75);padding-block:4.5rem 2.5rem;font-size:.9rem}
footer a{color:rgba(255,255,255,.75);text-decoration:none}
footer a:hover{color:var(--lime)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem}
.fgrid h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-soft);margin-bottom:1rem;font-weight:600}
.fgrid ul{list-style:none;display:grid;gap:.55rem}
.ftag{font-family:var(--hl);font-style:normal;color:#fff;font-size:1.15rem;margin-top:.5rem}
.fbot{border-top:1px solid rgba(255,255,255,.14);margin-top:3rem;padding-top:1.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;
  color:rgba(255,255,255,.5)}
.fbot a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.fbot a:hover{color:var(--lime)}


/* numbered list (why it matters) + steps (before/during/after) */












/* Standards va sobre el blanco de su seccion, sin caja de fondo: el
   contraste lo ponen las tarjetas, una a una. */
.remarks{margin:0}
/* El eyebrow es aqui el unico titulo de la seccion, asi que necesita el mismo
   aire que un titular: en Our Approach hay 64px del h2 a la rejilla de
   pilares, y esta es la misma situacion. Sin esto el eyebrow quedaba pegado
   a las tarjetas, porque Elementor anula los margenes de sus contenedores. */
.remarks .remarks-items{margin-top:clamp(2.4rem,4.5vw,4rem)}
.remarks h3{font-size:1.15rem;color:var(--navy);margin-bottom:2rem}
/* Los cinco puntos en una sola línea */
.remarks ul{list-style:none;padding:0;margin:0;display:grid;gap:clamp(.8rem,1.6vw,1.4rem);
  grid-template-columns:repeat(5,1fr)}
/* Icono arriba, texto abajo */
.remarks li{display:flex;flex-direction:column;align-items:center;gap:.9rem;
  text-align:center;font-size:.82rem;line-height:1.5;color:var(--navy);
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);
  border-radius:16px;padding:1.5rem 1rem;transition:background .25s,transform .25s}
.remarks li:hover{background:rgba(255,255,255,.85);transform:translateY(-3px)}
.remarks .ico{width:46px;height:46px;flex-shrink:0;border-radius:50%;
  background:#fff;display:grid;place-items:center}
.remarks .ico svg{width:23px;height:23px;stroke:var(--blue);stroke-width:1.7;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){ .remarks ul{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .remarks ul{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ .remarks li:hover{transform:none} }
.hero .lead + .lead{margin-top:.9rem}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

.note{position:fixed;left:1rem;bottom:1rem;z-index:200;background:var(--navy);color:#fff;
  font-size:.72rem;padding:.6rem 1rem;border-radius:100px;opacity:.85}

@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .video{aspect-ratio:16/10}
  /* El `order` tiene que ir en el widget de Elementor, que es el hijo de la
     rejilla; puesto en el <figure> no hacia nada y el video quedaba debajo
     del texto, al reves de lo previsto en el diseno. */
  .hero .e-con.wrap > .elementor-widget-html{order:-1}
  .fgrid{grid-template-columns:1fr 1fr}
}
/* El nav completo deja de caber antes de lo previsto por el ancho de Stage Grotesk */
@media(max-width:1040px){
  .bar nav{display:none}
  .menu-btn{display:block}
  .lang{margin-left:auto}
}
@media(max-width:720px){
  .lang{margin-left:auto}
  .fgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv.in{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
}

/* ── Logos ─────────────────────────────────────────────────────────────── */
/* El wordmark viene en navy; sobre el footer oscuro se invierte a blanco. */
.flogo{width:min(230px,70%);filter:brightness(0) invert(1);opacity:.95}
/* Isotipo de caritas como acento; decorativo, por eso alt="" y aria-hidden. */
.faces{width:96px;margin:0 auto 1.6rem}

/* ── Formulario de reservación ─────────────────────────────────────────── */
.form-hero{padding-top:calc(var(--hdr) + clamp(2.5rem,6vw,4.5rem));
  padding-bottom:clamp(2rem,4vw,3rem);background:var(--pale)}
.form-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:.4rem 0 1.2rem}
.form-wrap{max-width:760px;margin:0 auto;padding-inline:var(--pad)}
form{padding-block:clamp(2.5rem,5vw,4rem)}
fieldset{border:0;padding:0;margin:0 0 clamp(2.2rem,4vw,3.2rem)}
legend{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--navy);
  padding:0 0 .3rem;border-bottom:1px solid rgba(27,42,99,.14);width:100%;margin-bottom:1.5rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field.full{grid-column:1/-1}
label,.qlabel{font-size:.88rem;font-weight:600;color:var(--navy)}
.req{color:var(--blue)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],textarea{
  font:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  border:1px solid rgba(27,42,99,.22);border-radius:10px;padding:.75rem .9rem;width:100%;
  transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{outline:0;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(91,111,214,.18)}
textarea{min-height:110px;resize:vertical}
.hint{font-size:.8rem;color:var(--muted)}
/* Preguntas Sí/No en línea */
.q{padding:1rem 0;border-bottom:1px solid rgba(27,42,99,.09);
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
.q:last-of-type{border-bottom:0}
.opts{display:flex;gap:.5rem}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt span{display:block;padding:.5rem 1.1rem;border:1px solid rgba(27,42,99,.22);
  border-radius:100px;font-size:.85rem;font-weight:600;cursor:pointer;transition:.2s}
.opt input:checked + span{background:var(--navy);color:#fff;border-color:var(--navy)}
.opt input:focus-visible + span{box-shadow:0 0 0 3px rgba(91,111,214,.3)}
.conditional{display:none;margin-top:.8rem}
.conditional.show{display:block}
/* Bloques repetibles: fechas de servicio y niños comparten tratamiento */
.repe{background:var(--pale);border-radius:14px;padding:1.3rem;margin-bottom:1rem;position:relative}
.repe[hidden]{display:none}
.repe h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  margin-bottom:.9rem;font-weight:600}
.repe .field:last-child{margin-bottom:0}
.repe-quitar{position:absolute;top:1rem;right:1rem;background:none;border:0;cursor:pointer;
  color:var(--muted);font-size:.78rem;font-weight:600;line-height:1;padding:.25rem .4rem;
  border-radius:6px;transition:color .2s,background .2s}
.repe-quitar:hover{color:var(--navy);background:rgba(255,255,255,.7)}
.repe-quitar:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.add-repe{margin-top:.3rem;background:none;border:1px dashed rgba(27,42,99,.3);
  border-radius:100px;padding:.6rem 1.2rem;font:inherit;font-size:.85rem;font-weight:600;
  color:var(--blue);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.add-repe:hover{border-color:var(--blue);background:var(--pale);color:var(--navy)}
.add-repe:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* El select debe leerse igual que los campos de texto */
select{font:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  border:1px solid rgba(27,42,99,.22);border-radius:10px;padding:.75rem .9rem;width:100%;
  transition:border-color .2s,box-shadow .2s}
select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(91,111,214,.18)}
/* Autorizaciones */
.check{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;
  padding:1rem 0;border-bottom:1px solid rgba(27,42,99,.09)}
.check:last-of-type{border-bottom:0}
.check input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--navy);flex-shrink:0}
.check p{font-size:.88rem;color:var(--muted);line-height:1.55}
/* La primera casilla cubre tres declaraciones: van juntas, sin lineas
   divisorias entre ellas, bajo un unico consentimiento. */
.check div p + p{margin-top:.8rem}
.notice{background:var(--pale);border-left:3px solid var(--blue);border-radius:0 10px 10px 0;
  padding:.9rem 1.1rem;font-size:.86rem;color:var(--navy);margin-top:1.2rem}
.notice-alerta{display:flex;gap:.7rem;align-items:flex-start}
.notice-ico{flex-shrink:0;line-height:0;margin-top:.05rem}
.notice-ico svg{width:19px;height:19px;fill:none;stroke:var(--blue);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.submit-row{margin-top:2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
/* Hasta marcar las dos autorizaciones el envio no esta disponible. */
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
@media(max-width:640px){ .grid2{grid-template-columns:1fr} .q{grid-template-columns:1fr} }
.check p a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

/* ── CTA de sección: centrados ──────────────────────────────────────────── */
.cta-center{display:flex;justify-content:center;margin-top:2.6rem}

/* ── Menú móvil ─────────────────────────────────────────────────────────── */
.menu-btn span{transition:transform .3s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
#mobnav{position:fixed;top:var(--hdr);left:0;right:0;z-index:99;background:#fff;
  border-bottom:1px solid rgba(27,42,99,.1);box-shadow:0 18px 40px -20px rgba(27,42,99,.35);
  display:grid;gap:.2rem;padding:1.2rem var(--pad) 1.8rem;
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:transform .28s ease,opacity .28s ease,visibility .28s}
#mobnav.open{transform:none;opacity:1;visibility:visible}
#mobnav a:not(.btn){padding:.85rem 0;color:var(--navy);text-decoration:none;font-size:1.05rem;
  border-bottom:1px solid rgba(27,42,99,.08)}
#mobnav a:not(.btn):last-of-type{border-bottom:0}
#mobnav .btn{margin-top:1rem;justify-content:center}
@media(min-width:1041px){ #mobnav{display:none} }

/* ── Botón de reproducción del microvideo ───────────────────────────────── */
button.play{border:0;cursor:pointer;padding:0}
button.play:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
button.play:hover{transform:scale(1.06)}
.play{transition:transform .25s}
@media(prefers-reduced-motion:reduce){ .play,button.play:hover{transition:none;transform:none} }

/* ── Página legal ───────────────────────────────────────────────────────── */
.legal{list-style:none;padding:0;margin-top:1.4rem;display:grid;gap:.9rem}
.legal li{position:relative;padding-left:1.4rem;color:var(--muted);font-size:.95rem;line-height:1.7}
.legal li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;
  border-radius:50%;background:var(--blue-soft)}
.legal.duties li{display:grid;gap:.2rem}
.legal.duties strong{color:var(--navy);font-weight:600}
.form-wrap h2{font-size:clamp(1.5rem,3vw,2.1rem);padding-bottom:.4rem;
  border-bottom:1px solid rgba(27,42,99,.14)}
.form-wrap h3{font-size:1.05rem;color:var(--navy)}

/* Titulares de card y pilar: el bloque completo se centra con el titular */
.card .body{text-align:center}
.pillar{text-align:center}
.pillar .n{text-align:center}
.legal li{text-align:left}
legend{text-align:center}

/* ==========================================================================
   PUENTE CON ELEMENTOR
   Elementor envuelve cada widget en dos divs y da a sus botones e imágenes
   sus propias clases. Estas reglas hacen que el diseño ya existente se aplique
   sobre ese markup, en lugar de reproducir el diseño con los controles de
   Elementor. Así el cliente edita textos e imágenes desde el editor y el
   resultado visual no cambia.
   ========================================================================== */

/* Elementor fija display/ancho/padding por variables en cada contenedor.
   El diseño manda: se neutraliza lo que estorba. */
.e-con.wrap, .e-con.copy, .e-con.cta, .e-con.rail, .e-con.card,
.e-con.pillars, .e-con.pillar, .e-con.body,
.e-con.remarks-items, .e-con.remarks-item, .e-con.nums {
	--padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
	--margin-top: 0; --margin-right: 0; --margin-bottom: 0; --margin-left: 0;
	--width: auto;
}
section.e-con { --width: 100%; }

/* Los widgets no deben aportar márgenes propios: el espaciado lo da el layout */
.elementor-widget { margin: 0 }
.elementor-widget-container > :first-child { margin-top: 0 }
.elementor-widget-container > :last-child { margin-bottom: 0 }

/* Titulares: heredan la alineación centrada del diseño */
.elementor-heading-title { text-align: inherit; font: inherit; color: inherit }
h1.elementor-heading-title { font-size: clamp(2.6rem,7vw,5.2rem); line-height: 1.1; letter-spacing: -.02em }
h2.elementor-heading-title { font-size: clamp(2rem,4.6vw,3.5rem);  line-height: 1.1; letter-spacing: -.02em }
h3.elementor-heading-title { font-size: clamp(1.15rem,1.9vw,1.45rem); line-height: 1.2 }

/* El eyebrow y el lead se aplican al contenedor del widget; el texto hereda */
.eyebrow .elementor-heading-title { font: inherit; letter-spacing: inherit;
	text-transform: inherit; color: inherit }
.lead p { margin: 0 0 .9em }
.lead p:last-child { margin-bottom: 0 }

/* Botones: se estiliza la clase propia de Elementor con el diseño del sitio */
.elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .82rem 1.6rem; border-radius: 100px; font-size: .88rem; font-weight: 600;
	font-family: var(--sans); text-decoration: none; border: 1.5px solid transparent;
	background: var(--navy); color: #fff; cursor: pointer;
	transition: transform .2s, background .2s, color .2s;
}
/* Elementor declara el radio por tamano: `.elementor-button.elementor-size-md`
   son DOS clases y le ganaban a la regla de una sola, asi que sus botones
   salian rectangulares (4px) mientras los del header, que son `.btn` propios,
   si eran pildoras. Hay que igualar la especificidad tamano por tamano. */
.elementor-button.elementor-size-xs, .elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md, .elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl { border-radius: 100px }
.elementor-button:hover { transform: translateY(-2px); background: var(--blue); color: #fff }
.btn-ghost .elementor-button { border-color: var(--navy); color: var(--navy); background: transparent }
.btn-ghost .elementor-button:hover { background: var(--navy); color: #fff }
.close .btn-ghost .elementor-button { border-color: #fff; color: #fff }
.btn-lime .elementor-button { background: var(--lime); color: var(--navy) }
.btn-lime .elementor-button:hover { background: var(--lime); color: var(--navy) }
.elementor-widget-button { display: flex; justify-content: center }
@media(prefers-reduced-motion:reduce){ .elementor-button:hover { transform: none } }

/* Imágenes de las cards: el recorte 4:3 del diseño, sobre el markup de Elementor */
/* La nota de cada servicio (minimo, duracion, tarifas de grupo), separada
   del parrafo que lo describe. Sin versalitas: son frases completas y en
   mayuscula sostenida se leian como una etiqueta, no como texto. */
.serv-min{margin-top:.9rem;padding-top:.75rem;border-top:1px solid rgba(27,42,99,.12);
  font-size:.8rem;font-weight:600;line-height:1.45;color:var(--blue)}
.card .elementor-widget-image { line-height: 0 }
.card .elementor-widget-image img {
	aspect-ratio: 4/3; width: 100%; display: block; object-fit: cover;
	background: var(--pale);
}
/* El encuadre de cada foto. Va por slug y no por posicion: cuando se
   reordenaron los servicios, las reglas numeradas quedaron aplicadas a la
   foto equivocada (Kids' Corner heredo el encuadre de Pet Care y Pet Care
   se quedo sin el suyo). Con el slug, reordenar ya no afecta el recorte. */
.card-in-room-childcare .elementor-widget-image img { object-position: 38% 50% }
.card-family-support    .elementor-widget-image img { object-position: 50% 50% }
.card-weekly-care       .elementor-widget-image img { object-position: 50% 50% }
.card-spanish-lessons   .elementor-widget-image img { object-position: 50% 45% }
.card-swimming-lessons  .elementor-widget-image img { object-position: 50% 45% }
.card-kids-corner       .elementor-widget-image img { object-position: 50% 42% }
.card-pet-care          .elementor-widget-image img { object-position: 50% 58% }

/* El número de cada pilar */
.pillar .n .elementor-heading-title {
	font-family: var(--serif); font-size: 2.4rem; color: var(--blue-soft); line-height: 1
}

/* Good to know: el panel usaba <ul>/<li>; con contenedores se replica igual */
.remarks-items {
	display: grid; gap: clamp(.8rem,1.6vw,1.4rem); grid-template-columns: repeat(5,1fr)
}
.remarks-item {
	display: flex; flex-direction: column; align-items: center; gap: .9rem;
	text-align: center; font-size: .82rem; line-height: 1.5; color: var(--navy);
	background: var(--pale); border: 1px solid rgba(27,42,99,.10);
	border-radius: 16px; padding: 1.5rem 1rem;
	transition: background .25s, transform .25s;
}
.remarks-item:hover { background: color-mix(in oklab, var(--pale) 78%, var(--blue-soft));
	transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(27,42,99,.45) }
.remarks-item p { margin: 0 }
@media(max-width:900px){ .remarks-items { grid-template-columns: repeat(2,1fr) } }
@media(max-width:520px){ .remarks-items { grid-template-columns: 1fr } }
@media(prefers-reduced-motion:reduce){ .remarks-item:hover { transform: none } }

/* Dos estilos que en el prototipo iban en atributos style inline y ahora
   necesitan clase, porque el markup lo genera Elementor. */
.hero-note {
	margin-top: 2.2rem; font-size: .93rem; color: var(--muted);
	border-left: 2px solid var(--blue-soft); padding-left: 1.1rem; text-align: left;
}
.lead-serv { padding-bottom: 25px }

/* Refuerzo de especificidad frente al kit de Elementor.
   Elementor prefija sus reglas con `.elementor-kit-N`, que son dos clases.
   Estos selectores igualan esa especificidad y, al cargar site.css después,
   ganan. Es una red de seguridad: los colores correctos ya están en el kit,
   pero así el diseño no depende de que el kit quede bien configurado. */
.e-con .elementor-heading-title,
.elementor-widget .elementor-heading-title { color: inherit; font-family: var(--serif) }
.hero .elementor-heading-title { color: #fff0 }
.hero h1.elementor-heading-title { color: var(--navy) }
.close .elementor-heading-title { color: #fff }
.e-con .elementor-button,
.elementor-widget-button .elementor-button { background-color: var(--navy); color: #fff }
.e-con .btn-ghost .elementor-button { background-color: transparent; color: var(--navy) }
.close .btn-lime .elementor-button,
.e-con .btn-lime .elementor-button { background-color: var(--lime); color: var(--navy) }
.e-con .elementor-widget-text-editor { color: var(--muted) }
.close .elementor-widget-text-editor { color: rgba(255,255,255,.72) }
.card .elementor-widget-text-editor { color: var(--muted) }

/* Elementor impone display:flex y flex-direction:column a TODOS sus
   contenedores mediante variables. El diseño original usaba divs normales, así
   que hay que declarar el layout de cada uno de forma explícita: si no, las
   cards del carrusel se apilan en vertical y la sección crece a 7000px. */
.e-con.wrap, .e-con.copy, .e-con.card, .e-con.body,
.e-con.pillar, .e-con.remarks { display: block }
.e-con.rail  { display: flex; flex-direction: row; flex-wrap: nowrap }
.e-con.cta, .e-con.btns { display: flex; flex-direction: row; flex-wrap: wrap;
	justify-content: center }
.e-con.cta-center { display: flex; flex-direction: row; justify-content: center }
.e-con.pillars { display: grid }
.e-con.remarks-items { display: grid }
.e-con.remarks-item { display: flex; flex-direction: column }
.hero .e-con.wrap, .close .e-con.wrap { display: grid }
/* Elementor añade su propio gap entre hijos; el diseño ya lo controla */
.e-con.wrap, .e-con.copy, .e-con.card, .e-con.body, .e-con.pillar,
.e-con.remarks { --gap: 0; gap: 0 }

/* Padding vertical de las secciones.
   Elementor escribe el padding de cada elemento como variables CSS en una
   regla `.elementor-element-XXXX`, que le gana en especificidad a
   `section{padding-block:...}`. Así que en lugar de pelearle, se usa su mismo
   mecanismo: se redefinen las variables con un selector más específico. */
section.e-con {
	--padding-top: var(--sec); --padding-bottom: var(--sec);
	--padding-left: 0; --padding-right: 0;
}
section.e-con.hero {
	--padding-top: calc(var(--hdr) + clamp(2.5rem,6vw,5rem));
	--padding-bottom: clamp(3rem,6vw,5.5rem);
}
/* El .wrap conserva su ancho máximo y su padding lateral.
   `--width` debe ser 100% y no auto: las secciones de Elementor son
   `display:flex; flex-direction:column`, asi que cada .wrap es un flex item.
   Con `width:auto` + `margin-inline:auto` el item se encoge al contenido en
   vez de centrarse, y las secciones cuyo contenido tiene poco max-content
   colapsaban (la rejilla de nannies caia a 338px, las resenas a 608px,
   el cierre a 683px). Con 100% recupera el comportamiento de bloque. */
.e-con.wrap { --width: 100%; --padding-left: var(--pad); --padding-right: var(--pad);
	max-width: 1200px; margin-inline: auto; align-self: stretch }

/* ── Layout: especificidad frente a `.e-con.e-flex` ──────────────────────────
   Elementor declara flex, gap y alineación en `.e-con.e-flex`, que son DOS
   clases, mientras el diseño original las declaraba con una sola. Por eso
   Elementor ganaba y las cards colapsaban a 146px en vez de 330.
   Estas reglas repiten las propiedades de layout con el prefijo `.e-con.`
   para igualar especificidad; al cargar site.css al final, ganan.
   -------------------------------------------------------------------------- */
.e-con.card {
	flex: 0 0 clamp(258px, 30vw, 330px);
	scroll-snap-align: start;
}
.e-con.rail {
	gap: 1.4rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: .5rem .25rem 1.6rem;
}
.e-con.pillars {
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 1px;
}
.e-con.remarks-items { gap: clamp(.8rem, 1.6vw, 1.4rem) }
.e-con.remarks-item  { gap: .9rem; align-items: center }
.e-con.cta, .e-con.btns { gap: .85rem }
.hero .e-con.wrap, .close .e-con.wrap {
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
@media(max-width:900px){
	.close .e-con.wrap { grid-template-columns: 1fr }
}
.e-con.copy { text-align: center }
@media(max-width:900px){
	.hero .e-con.wrap { grid-template-columns: 1fr }
}
@media(max-width:900px){ .e-con.remarks-items { grid-template-columns: repeat(2,1fr) } }
@media(max-width:520px){ .e-con.remarks-items { grid-template-columns: 1fr } }

/* ── Padding de sección ──────────────────────────────────────────────────────
   SOLO los contenedores de primer nivel son secciones. `.elementor > .e-con`
   los identifica con precisión: son los 7 hijos directos del contenedor de
   Elementor. La regla anterior usaba un selector de atributo que alcanzaba a
   TODOS los contenedores y le ponía 144px de padding a cada card, cada pilar y
   cada item, duplicando el alto de la página.
   -------------------------------------------------------------------------- */
.elementor > .e-con { padding-block: var(--sec); padding-inline: 0 }
.elementor > .e-con.hero {
	padding-top: calc(var(--hdr) + clamp(2.5rem,6vw,5rem));
	padding-bottom: clamp(3rem,6vw,5.5rem);
}

/* Padding propio de los contenedores internos, según el diseño */
.e-con.wrap, .e-con.copy, .e-con.cta, .e-con.btns, .e-con.cta-center,
.e-con.pillars, .e-con.remarks-items { padding-block: 0 }
.e-con.card    { padding: 0 }
.e-con.body    { padding: 1.5rem 1.4rem 1.7rem }
.e-con.pillar  { padding: 2.3rem 1.9rem }
.e-con.rail    { padding: .5rem .25rem 1.6rem }

.e-con.remarks-item { padding: 1.5rem 1rem }

/* ── Titulares centrados ─────────────────────────────────────────────────────
   El diseño centra todos los titulares. Con el markup de Elementor el h2
   heredaba la alineación del contenedor, que es a la izquierda.
   -------------------------------------------------------------------------- */
.elementor-widget-heading { text-align: center }
.elementor-heading-title  { text-align: center }
.elementor-widget-text-editor { text-align: center }

/* ── Botones ─────────────────────────────────────────────────────────────────
   Elementor los estiraba a todo el ancho y les aplicaba el tamaño de fuente
   del kit (16px) en lugar del del diseño (14px).
   -------------------------------------------------------------------------- */
.elementor-widget-button { display: block; text-align: center }
.elementor-widget-button .elementor-widget-container { display: block }
.e-con .elementor-button,
.elementor-widget-button .elementor-button {
	display: inline-flex; width: auto;
	font-size: .88rem; font-weight: 600; font-family: var(--sans);
	padding: .82rem 1.6rem;
}

/* ── Ancho de lectura del bloque editorial ───────────────────────────────────
   La seccion "Why we exist" es texto corrido: a 1200px de ancho las lineas
   quedan demasiado largas. El diseño la limita a 820px.
   -------------------------------------------------------------------------- */
.e-con.wrap.narrow { max-width: 820px }

/* ── Ritmo vertical entre widgets ────────────────────────────────────────────
   El diseño separaba los párrafos con márgenes propios. Al pasar cada párrafo
   a su propio widget, Elementor los deja pegados (`.elementor-widget{margin:0}`
   es necesario para el resto del layout). Se restituye el ritmo con
   selectores de hermano adyacente, acotados por contexto.
   -------------------------------------------------------------------------- */
.wrap.narrow .elementor-widget-heading + .elementor-widget-text-editor { margin-top: 1.8rem }
.wrap.narrow .elementor-widget-text-editor + .elementor-widget-text-editor { margin-top: 1.2rem }
.wrap.narrow .elementor-widget-text-editor + .elementor-widget-html { margin-top: 2.2rem }

/* En las cards la separación es mucho menor */
.card .elementor-widget-heading + .elementor-widget-text-editor { margin-top: .55rem }
/* Igual en los pilares */
.pillar .elementor-widget-heading + .elementor-widget-text-editor { margin-top: .7rem }
.pillar .n + .elementor-widget-heading { margin-top: .5rem }

/* Bajo el titular de sección */
.e-con.rv > .elementor-widget-heading + .elementor-widget-text-editor { margin-top: 1.2rem }
.eyebrow + .elementor-widget-heading { margin-top: 1.1rem }

/* ── Alto de los botones ─────────────────────────────────────────────────────
   Elementor fija line-height 1 en su botón; el diseño heredaba el 1.65 del
   cuerpo, lo que daba 52px de alto en vez de 43.
   -------------------------------------------------------------------------- */
.e-con .elementor-button,
.elementor-widget-button .elementor-button { line-height: 1.65 }

/* El <p> dentro del widget de texto trae margen propio del tema padre, que se
   sumaba 14px en cada card, cada pilar y cada bloque de texto. El espaciado lo
   controlan las reglas de hermano adyacente de arriba, no los márgenes del
   párrafo. Se conserva la separación si el cliente escribe varios párrafos. */
.elementor-widget-text-editor p:first-child { margin-top: 0 }
.elementor-widget-text-editor p:last-child  { margin-bottom: 0 }

/* ══════════════════════════════════════════════════════════════════════════
   RESEÑAS DE GOOGLE
   Reutiliza .rail y .card del carrusel de servicios, así hereda el
   comportamiento de scroll con snap ya probado.
   ══════════════════════════════════════════════════════════════════════════ */
.pcc-reviews-resumen { text-align: center; margin-bottom: 2.6rem }
.pcc-reviews-nota { font-size: 1rem; color: var(--muted); margin-top: .6rem }
.pcc-reviews-nota strong {
	font-family: var(--serif); font-size: 1.9rem; color: var(--navy);
	margin-right: .4rem; vertical-align: -.12em;
}

/* Estrellas dibujadas con CSS: sin iconos ni fuentes extra que cargar */
.pcc-stars { display: inline-flex; gap: .18rem; line-height: 1 }
.pcc-stars span {
	width: 1.15em; height: 1.15em; display: inline-block;
	background: var(--blue-soft);
	clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.pcc-stars span.full { background: var(--lime) }
.pcc-stars span.half { background: linear-gradient(90deg, var(--lime) 50%, var(--blue-soft) 50%) }
.pcc-reviews-resumen .pcc-stars { font-size: 1.6rem }

.pcc-reviews-rail { justify-content: flex-start }
.pcc-review .body { text-align: left; display: flex; flex-direction: column; gap: .75rem }
/* El nombre firma la resena, dentro de la misma burbuja y despues del texto:
   como bloque propio encima descuadraba las tarjetas entre si. */
.pcc-review-autor {
	margin: auto 0 0; padding-top: .7rem; border-top: 1px solid rgba(27,42,99,.08);
	font-weight: 600; color: var(--navy); font-size: .88rem;
}
.pcc-review .pcc-stars { font-size: .95rem }
.pcc-review-texto {
	font-size: .88rem; color: var(--muted); line-height: 1.6; margin: 0;
	/* Se recorta a 7 líneas para que las tarjetas queden parejas */
	display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.pcc-reviews-fuente { text-align: center; margin-top: 2rem; font-size: .9rem }
.pcc-reviews-fuente a { color: var(--blue) }
.pcc-reviews-aviso {
	text-align: center; color: #8a5a00; background: #fff6e0;
	border: 1px solid #f0d9a0; border-radius: 10px; padding: 1rem; font-size: .9rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN DE NANNIES  ·  "Meet your caregiver"
   Reemplaza la de partners. Retratos en formato vertical con pie de foto.
   ══════════════════════════════════════════════════════════════════════════ */
.nannies {
	display: grid; gap: clamp(1.2rem,2.5vw,2rem); margin-top: clamp(2.6rem,5vw,3.6rem);
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.nanny { text-align: center }

/* El retrato tambien abre el modal, pero no entra en el orden de tabulacion:
   el enlace "Read her bio" ya cubre esa ruta para teclado y lectores. */
.nanny-foto {
	display: block; width: 100%; padding: 0; border: 0; background: none;
	cursor: pointer; border-radius: 18px; overflow: hidden;
}
.nanny-foto img {
	width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
	background: var(--pale); transition: transform .5s ease;
}
.nanny-foto:hover img { transform: scale(1.04) }
.nanny-nombre {
	font-family: var(--serif); font-size: 1.12rem; color: var(--navy);
	margin: .9rem 0 .15rem;
}
.nanny-rol { font-size: .8rem; color: var(--muted); margin: 0 0 .6rem }
.nanny-bio {
	font: inherit; font-size: .82rem; font-weight: 600; color: var(--blue);
	background: none; border: 0; border-bottom: 1px solid currentColor;
	padding: 0 0 1px; cursor: pointer;
}
/* El reset de Hello Elementor pinta `button:hover` y `button:focus` de rosa
   (#c36) con especificidad (0,1,1), por encima de una sola clase. Hay que
   declarar el fondo de estos botones en todos sus estados. */
.nanny-foto, .nanny-foto:hover, .nanny-foto:focus,
.nanny-bio,  .nanny-bio:hover,  .nanny-bio:focus { background: none }
.nanny-bio:hover { color: var(--navy) }
.nanny-foto:focus-visible, .nanny-bio:focus-visible {
	outline: 2px solid var(--blue); outline-offset: 3px;
}

/* ── Modal de biografia ─────────────────────────────────────────────────────
   <dialog> nativo: showModal() aporta foco atrapado, cierre con Esc e
   inertizacion del fondo sin JS adicional. */
.bio {
	/* El reset `* { margin: 0 }` del sitio pisa el `margin: auto` que el
	   navegador aplica a dialog:modal, y el modal se iba a la esquina. */
	margin: auto;
	width: min(880px, calc(100vw - 2rem)); padding: 0; border: 0;
	border-radius: 22px; background: var(--white); color: var(--ink);
	overflow: hidden; box-shadow: 0 30px 80px rgba(27,42,99,.28);
}
.bio::backdrop { background: rgba(27,42,99,.55); backdrop-filter: blur(3px) }
.bio[open] { animation: bio-entra .3s cubic-bezier(.2,.7,.3,1) }
@keyframes bio-entra { from { opacity: 0; transform: translateY(14px) scale(.985) } }

.bio-cuerpo {
	display: grid; grid-template-columns: 300px 1fr;
	height: min(84vh, 680px);
}
.bio .bio-foto {
	width: 100%; height: 100%; object-fit: cover;
	object-position: 50% 28%; display: block; background: var(--pale);
}
.bio-texto { overflow-y: auto; padding: clamp(1.8rem,3.2vw,2.8rem) }
.bio-texto .eyebrow { text-align: left; margin-bottom: .5rem }
.bio-texto h3 {
	font-size: clamp(1.5rem,2.6vw,2rem); color: var(--navy); margin: 0 0 1.1rem;
}
.bio-texto p { color: var(--muted); margin: 0 0 1rem; font-size: .96rem }
.bio-cita {
	margin: 1.6rem 0 0; padding: 1.1rem 1.3rem; background: var(--pale);
	border-radius: 14px; color: var(--navy); font-size: 1rem; line-height: 1.55;
}
.bio-cita cite { display: block; margin-top: .6rem; font-style: normal;
	font-size: .82rem; color: var(--blue); font-weight: 600 }

.bio-x {
	position: absolute; top: .85rem; right: .9rem; z-index: 2;
	width: 42px; height: 42px; display: grid; place-items: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255,255,255,.92); color: var(--navy);
	box-shadow: 0 2px 10px rgba(27,42,99,.18);
}
.bio-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2 }
/* showModal() enfoca la X al abrir, asi que sin esto el boton nacia rosa. */
.bio .bio-x, .bio .bio-x:focus, .bio .bio-x:focus-visible {
	background: rgba(255,255,255,.92); color: var(--navy);
}
.bio .bio-x:hover { background: var(--navy); color: #fff }
.bio .bio-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }

@media (max-width: 720px) {
	.bio-cuerpo { grid-template-columns: 1fr; grid-template-rows: 210px 1fr; height: min(88vh,640px) }
	.bio .bio-foto { object-position: 50% 22% }
}
@media (prefers-reduced-motion: reduce) {
	.bio[open] { animation: none }
	.nanny-foto img, .nanny-foto:hover img { transition: none; transform: none }
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOQUE DE PRECIO
   Cierra la seccion Our Philosophy, sobre el fondo de nubes.
   Todas las medidas estan al 75% de las originales: el bloque se redujo
   una cuarta parte, caja, tipografia y espaciados por igual.
   ══════════════════════════════════════════════════════════════════════════ */
.precio {
	background: var(--navy); border-radius: 17px; color: #fff; text-align: center;
	padding: clamp(1.65rem,3vw,2.25rem) clamp(1.13rem,3vw,2.25rem);
	max-width: 420px; margin: clamp(2.6rem,5vw,3.6rem) auto 0;
}
.precio-monto {
	font-family: var(--serif); font-weight: 700; color: var(--lime);
	font-size: clamp(2.25rem,5.25vw,3.45rem); line-height: 1; margin: 0;
}
.precio-unidad {
	font-family: var(--hl); color: var(--lime);
	font-size: clamp(1.5rem,3.45vw,2.25rem); line-height: 1.1; margin: .08rem 0 1.05rem;
}
.precio ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .38rem }
.precio li { font-size: .71rem; color: rgba(255,255,255,.88) }

/* ══════════════════════════════════════════════════════════════════════════
   FONDO DE NUBES ANIMADO  ·  "Our Philosophy"
   Dos capas de nubes a distinta velocidad: la diferencia de ritmo da la
   sensación de brisa en vez de un desplazamiento plano.
   ══════════════════════════════════════════════════════════════════════════ */
.nubes {
	position: relative; overflow: hidden;
	background: linear-gradient(160deg, var(--pale), #f2f8ff 60%, var(--pale));
}
.nubes::before,
.nubes::after {
	content: ""; position: absolute; inset: 0;
	background-repeat: repeat-x;
	pointer-events: none;
}

/* Cinco hileras a alturas desiguales (14, 30, 45, 60 y 74%) que se solapan
   entre si. Con `background-position` en porcentaje, el borde superior de
   cada hilera cae en p*(alto - altoNube), asi que la banda va del 10% al
   80% de la seccion: cubre el 70% del alto y deja aire arriba y abajo. El tamano va en
   pixeles y no en porcentaje: al compartir contenedor con Services la caja
   mide ~1650px de alto, y un `auto 62%` convertia cada nube en una mancha de
   mil pixeles. La SVG es 1200x300, o sea 4:1, asi que el ancho de cada tramo
   es el alto por cuatro; el recorrido de la animacion tiene que ser multiplo
   exacto de ese ancho para que el bucle no de un salto. */
.nubes::before {
	background-image: var(--nubes), var(--nubes), var(--nubes);
	background-size: auto 260px, auto 200px, auto 230px;   /* tramos de 1040, 800 y 920 */
	background-position: 0 14%, 0 45%, 0 74%;
	opacity: 1;
	animation: pcc-brisa-frente 67s linear infinite;
}
.nubes::after {
	background-image: var(--nubes), var(--nubes);
	background-size: auto 160px, auto 130px;               /* tramos de 640 y 520 */
	background-position: 0 30%, 0 60%;
	opacity: .72;
	animation: pcc-brisa-fondo 139s linear infinite reverse;
}
.nubes > * { position: relative; z-index: 1 }

/* Cada hilera recorre una distancia distinta en el mismo tiempo: eso da la
   sensacion de profundidad, en vez de un bloque que se desplaza entero. */
@keyframes pcc-brisa-frente {
	from { background-position: 0 14%, 0 45%, 0 74% }
	to   { background-position: -1040px 14%, -1600px 45%, -920px 74% }
}
@keyframes pcc-brisa-fondo {
	from { background-position: 0 30%, 0 60% }
	to   { background-position: -1280px 30%, -520px 60% }
}
@media (prefers-reduced-motion: reduce) {
	.nubes::before, .nubes::after { animation: none }
}
}

.remarks-titulo {
	font-family: var(--serif); font-size: .98rem; color: var(--navy);
	margin: 0 0 .35rem; line-height: 1.25;
}

/* ══════════════════════════════════════════════════════════════════════════
   ICONOS DE OUR APPROACH
   Trazo fino, mismo lenguaje que los de Standards. Se apoyan sobre el número
   del pilar, que pasa a segundo plano.
   ══════════════════════════════════════════════════════════════════════════ */
.pillar-ico { display: flex; justify-content: center; margin-bottom: .9rem }
.pillar-ico svg {
	width: 34px; height: 34px; stroke: var(--blue); stroke-width: 1.5;
	fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* ══════════════════════════════════════════════════════════════════════════
   CARRUSEL DE RESEÑAS
   Avance automático cada 6s, con flechas para control manual. Se detiene al
   pasar el mouse y al enfocar con teclado, para no mover el texto que alguien
   está leyendo.
   ══════════════════════════════════════════════════════════════════════════ */
.pcc-reviews-carrusel { position: relative; margin-top: 2.4rem }
.pcc-reviews-pista {
	display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; padding: .5rem .25rem 1.6rem;
	scrollbar-width: none;
}
.pcc-reviews-pista::-webkit-scrollbar { display: none }
.pcc-reviews-pista > .card { flex: 0 0 clamp(258px,30vw,330px); scroll-snap-align: start }
.pcc-reviews-nav {
	display: flex; gap: .5rem; justify-content: center; margin-top: .4rem;
}
.pcc-reviews-nav button {
	width: 42px; height: 42px; border-radius: 50%;
	border: 1.5px solid rgba(27,42,99,.2); background: #fff; cursor: pointer;
	color: var(--navy); font-size: 1.1rem; transition: .2s;
}
.pcc-reviews-nav button:hover { background: var(--navy); color: #fff; border-color: var(--navy) }
.pcc-reviews-nav button:focus { background: #fff; color: var(--navy) }
.pcc-reviews-nav button:focus:hover { background: var(--navy); color: #fff }
.pcc-reviews-nav button:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px }

/* El isotipo de caritas, un 25% más grande */
.faces { width: 120px }

/* Weekly Care todavía no tiene foto propia: se reserva el espacio con el
   degradado de marca para que la card conserve su proporción en el carrusel. */
.card-sin-foto {
	aspect-ratio: 4/3; width: 100%;
	background: linear-gradient(140deg, var(--blue-soft), var(--blue));
}
/* Las nubes se inyectan como variable para no repetir la ruta del tema */
.nubes { --nubes: url("../img/nubes.svg") }
/* El bloque de precio se centra aunque el contenedor sea flex */
.e-con .precio, .precio { margin-inline: auto }

/* ── Campos marcados por el servidor tras un envío incompleto ───────────── */
#resv [aria-invalid="true"] {
	border-color: #b32d2e;
	box-shadow: 0 0 0 3px rgba(179,45,46,.12);
}
#resv [aria-invalid="true"]:focus { outline-color: #b32d2e }