/* ==========================================================================
   Versión con fotografía — capa sobre base.css (design system compartido)
   ========================================================================== */

/* ---------- Header: lockup tipográfico ---------- */
.lockup { display: flex; align-items: center; gap: .85rem; text-decoration: none; flex: none; min-width: 0; }
.lockup img { width: 42px; height: 42px; flex: none; }
.lockup__text { display: grid; line-height: 1.1; }
.lockup__text strong { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: -.01em; white-space: nowrap; }
.lockup__text small { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; opacity: .8; margin-top: .25rem; white-space: nowrap; }
/* Isotipo original sin filtros: variante "sobre oscuro" en hero/menú, variante azul en header claro */
.lockup__iso--dark { display: none; }
.site-header.is-scrolled .lockup__iso--light { display: none; }
.site-header.is-scrolled .lockup__iso--dark { display: block; }
.site-header.nav-open .lockup__iso--light { display: block; }
.site-header.nav-open .lockup__iso--dark { display: none; }
@media (max-width: 420px) { .lockup__text small { display: none; } }

/* ---------- Hero fotográfico ---------- */
.phero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: #fff; background: var(--ink); }
.phero__bg, .phero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.phero__bg img { object-fit: cover; object-position: 72% 38%; }
@media (prefers-reduced-motion: no-preference) {
  .phero__bg img { animation: kenburns 24s ease-out both; }
  @keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
}
.phero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,23,42,.9) 0%, rgba(8,32,58,.72) 38%, rgba(8,32,58,.2) 70%, rgba(8,32,58,.05) 100%),
    linear-gradient(0deg, rgba(6,23,42,.8) 0%, rgba(6,23,42,0) 38%),
    linear-gradient(180deg, rgba(6,23,42,.55) 0%, rgba(6,23,42,0) 22%);
}
.phero__inner { position: relative; z-index: 2; display: grid; gap: var(--s-3); padding-top: calc(var(--header-h) + var(--s-5)); padding-bottom: var(--s-5); justify-items: start; }
.phero__title { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.4rem); line-height: 1.02; letter-spacing: -.025em; max-width: 12ch; }
.phero__title em { font-style: italic; color: var(--sky); }
.phero__sub { font-size: var(--step-1); color: #E1E9F2; max-width: 31em; }
.phero__bar { position: relative; z-index: 2; border-top: 1px solid var(--line-dark); background: rgba(6,23,42,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.phero__bar ul { display: flex; flex-wrap: wrap; gap: .5rem var(--s-5); padding-block: var(--s-2); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--stone-on-dark); }
.phero__bar strong { color: #fff; font-weight: 600; }
.phero__bar li { display: flex; gap: .6rem; align-items: baseline; }
.phero__bar li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); flex: none; transform: translateY(-1px); }
@media (max-width: 700px) {
  .phero__veil { background: linear-gradient(0deg, rgba(6,23,42,.92) 0%, rgba(6,23,42,.62) 55%, rgba(6,23,42,.3) 100%), linear-gradient(180deg, rgba(6,23,42,.6) 0%, rgba(6,23,42,0) 24%); }
  .phero__bg img { object-position: 78% 30%; }
  .phero__bar ul { gap: .35rem var(--s-3); }
}

/* ---------- Intro ---------- */
.intro { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.intro .h2 { max-width: 20ch; }
.intro__copy { display: grid; gap: var(--s-3); }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Servicios con fotografía ---------- */
.svc-list { display: grid; gap: var(--s-8); }
.svc { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.svc--rev { grid-template-columns: .95fr 1.05fr; }
.svc--rev .svc__media { order: 2; }
.svc__copy { display: grid; gap: var(--s-3); align-content: center; }
.svc__copy .btn { justify-self: start; margin-top: var(--s-1); }
.svc__media { position: relative; margin: 0; isolation: isolate; }
.svc__media::before { content: ""; position: absolute; inset: 1.6rem -1.6rem -1.6rem 1.6rem; border-radius: var(--radius-lg); background: var(--mist); z-index: -1; }
.svc--rev .svc__media::before { inset: 1.6rem 1.6rem -1.6rem -1.6rem; }
.svc__media img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.svc__media .chip {
  position: absolute; left: 1.25rem; bottom: 1.25rem; padding: .55rem 1.05rem; border-radius: 999px; background: rgba(255,255,255,.92);
  color: var(--ink); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(6px);
}
@media (hover: hover) { .svc__media img { transition: transform .9s var(--ease); } .svc__media { overflow: visible; } .svc__media:hover img { transform: scale(1.015); } }
@media (max-width: 900px) {
  .svc, .svc--rev { grid-template-columns: 1fr; gap: var(--s-5); }
  .svc--rev .svc__media { order: 0; }
  .svc__media { margin-right: 1.2rem; }
  .svc__media::before, .svc--rev .svc__media::before { inset: 1rem -1rem -1rem 1rem; }
  .svc-list { gap: var(--s-7); }
}

/* ---------- Banda fotográfica ---------- */
.band { position: relative; min-height: 34rem; display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--navy); }
.band__bg, .band__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.band__bg img { object-fit: cover; object-position: 50% 30%; transform: scaleX(-1); } /* espejado: los rostros quedan a la derecha, lejos del texto */
.band__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,23,42,.88) 0%, rgba(8,32,58,.7) 50%, rgba(8,32,58,.35) 100%); }
.band__inner { position: relative; z-index: 2; display: grid; gap: var(--s-4); justify-items: start; padding-block: var(--s-8); }
.band h2 { font-size: var(--step-5); max-width: 14ch; line-height: 1.04; letter-spacing: -.025em; }
.band h2 em { color: var(--sky); }
.band .eyebrow { color: var(--sky); }

/* ---------- Desarrollo profesional con foto ---------- */
.career2 { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.career2__media { margin: 0; position: relative; isolation: isolate; }
.career2__media::before { content: ""; position: absolute; inset: 1.6rem 1.6rem -1.6rem -1.6rem; border-radius: var(--radius-lg); border: 1px solid var(--blue); opacity: .4; z-index: -1; }
.career2__media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.career2__copy { display: grid; gap: var(--s-3); }
.career2__copy .btn { justify-self: start; margin-top: var(--s-1); }
.career2__copy .check-list strong { margin-right: .35ch; }
.career2__copy .check-list li > div { display: flex; gap: .4ch; flex-wrap: wrap; align-items: baseline; }
@media (max-width: 900px) { .career2 { grid-template-columns: 1fr; } .career2__media { margin-left: 1rem; } }

/* El hero oscuro no necesita el degradé radial de la versión tipográfica */
.phero.is-dark { background: var(--ink); }

/* ---------- Índice de soluciones (tarjetas con foto) ---------- */
.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.sol { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: .4rem; height: 100%; padding: 0 0 var(--s-3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.sol:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sol img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .9s var(--ease); }
.sol:hover img { transform: scale(1.04); }
.sol > * { margin-inline: var(--s-3); }
.sol > img { margin-inline: 0; }
.sol__n { margin-top: var(--s-2); font-size: var(--step--1); letter-spacing: .18em; font-weight: 600; color: var(--blue-ink); }
.sol strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.15; }
.sol > span:not(.sol__n) { color: var(--stone); font-size: 1rem; }
.sol em { font-style: normal; font-weight: 600; color: var(--blue-ink); margin-top: var(--s-1); }
@media (max-width: 1000px) { .sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sol-grid { grid-template-columns: 1fr; } }

/* ---------- Desarrollo profesional con fotografía de fondo ---------- */
.school { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding-block: var(--s-8); }
.school__bg, .school__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.school__bg img { object-fit: cover; object-position: 50% 30%; }
.school__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,23,42,.92) 0%, rgba(8,32,58,.74) 48%, rgba(8,32,58,.42) 100%); }
.school__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.school__copy { display: grid; gap: var(--s-3); justify-items: start; }
.school h2 { font-size: var(--step-4); }
.school h2 em { color: var(--sky); }
.school__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.school__cards li { display: grid; gap: .4rem; align-content: start; padding: var(--s-3); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); background: rgba(255,255,255,.07); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.school__cards strong { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.school__cards span { color: #C9D6E4; font-size: .98rem; }
@media (max-width: 900px) { .school__inner { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .school__cards { grid-template-columns: 1fr; } }

/* ---------- Dos caminos para comenzar ---------- */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.path { display: grid; gap: .6rem; align-content: start; padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); text-decoration: none; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast); }
.path:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.path:nth-child(2) { background: var(--navy); color: #fff; border-color: var(--navy); }
.path__n { font-size: var(--step--1); letter-spacing: .18em; font-weight: 600; color: var(--blue-ink); }
.path:nth-child(2) .path__n { color: var(--sky); }
.path strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.1; }
.path > span:not(.path__n) { color: var(--stone); max-width: 30em; }
.path:nth-child(2) > span:not(.path__n) { color: var(--stone-on-dark); }
.path em { font-style: normal; font-weight: 600; margin-top: var(--s-2); color: var(--blue-ink); }
.path:nth-child(2) em { color: var(--sky); }
@media (max-width: 800px) { .paths { grid-template-columns: 1fr; } }
.contact__title { font-size: var(--step-3); margin-bottom: var(--s-3); }

/* ---------- Botones de redes con logo (sin texto) ---------- */
.icon-row { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .35rem; }
.icon-btn { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: #fff; text-decoration: none; border: 0; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.icon-btn svg { width: 56%; height: 56%; fill: currentColor; }
.icon-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -10px rgba(6, 23, 42, .6); }
.icon-btn--wa { background: #25D366; }
.icon-btn--in { background: #0A66C2; border-radius: 12px; }
.icon-btn--ig { background: linear-gradient(45deg, #F9A24A, #E1306C 55%, #833AB4); }
.icon-btn--fb { background: #1877F2; }
.icon-btn--sm { width: 2.5rem; height: 2.5rem; }
.icon-btn--in.icon-btn--sm { border-radius: 10px; }
.channel--icons a { font-family: var(--font-body); }

/* WhatsApp flotante: logo verde, sin texto */
.wa-float { width: 3.6rem; height: 3.6rem; padding: 0; gap: 0; border: 0; background: #25D366; color: #fff; place-items: center; box-shadow: 0 14px 28px -10px rgba(6, 23, 42, .55); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.wa-float.is-on { display: grid; }
.wa-float:hover { background: #20bd5a; transform: translateY(-3px) scale(1.04); }
.wa-float svg { width: 58%; height: 58%; fill: currentColor; }
@media (prefers-reduced-motion: no-preference) { .wa-float.is-on { animation: wa-pop .6s var(--ease) .8s backwards; } @keyframes wa-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } }

/* ---------- Redes en el footer ---------- */
.footer__social { margin-top: var(--s-3); }
.social { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.social a { font-size: .95rem; letter-spacing: .04em; border-bottom: 1px solid var(--line-dark); padding-bottom: 2px; text-decoration: none; }
.social a:hover { border-color: #fff; }
.social a.icon-btn { border: 0; padding: 0; font-size: 0; letter-spacing: 0; }
.social a.icon-btn:hover { border: 0; }
.site-footer { padding-bottom: calc(var(--s-4) + 3.6rem); }

/* =====================================================================
   Responsive y compatibilidad móvil (iPhone / Safari iOS, Android / Chrome, tablets)
   ===================================================================== */
html { overflow-x: hidden; }
body { overflow-x: clip; }
:root {
  -webkit-tap-highlight-color: rgba(10, 92, 160, .18);
  /* respeta el notch en horizontal (iPhone) además del margen normal */
  --gutter: max(clamp(1.25rem, 4vw, 3rem), env(safe-area-inset-left), env(safe-area-inset-right));
}

/* iOS < 15.4 no entiende svh: se declara 100vh primero como respaldo */
.phero { min-height: 100vh; min-height: 100svh; }

/* Encabezado: el botón de menú nunca se deforma y el logotipo se adapta */
.menu-toggle { flex: none; touch-action: manipulation; }
.lockup, .lockup__text { min-width: 0; }
.lockup__text strong, .lockup__text small { overflow: hidden; text-overflow: ellipsis; }
.lockup__text small { font-size: .72rem; }
@media (max-width: 520px) {
  .lockup__text small { display: none; }
  .lockup img { width: 38px; height: 38px; }
  .lockup__text strong { font-size: 1.2rem; }
}

/* Menú móvil: se puede desplazar si la pantalla es baja (teléfono en horizontal) y respeta la barra inferior del iPhone */
@media (max-width: 1239px) {
  .nav { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; justify-content: flex-start;
         padding-top: calc(var(--header-h) + 1rem); padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
  .nav::before, .nav::after { content: ""; flex: 1 0 0; }   /* centra el contenido cuando sobra espacio y permite scroll cuando falta */
  .nav a:not(.btn) { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 1239px) and (max-height: 560px) {
  .nav a:not(.btn) { font-size: 1.45rem; min-height: 40px; padding: .1rem 0; }
  .nav .btn { margin-top: var(--s-2); }
}

/* Formularios: apariencia uniforme en Safari iOS (sin sombra interior ni bordes redondeados nativos) */
.field input, .field select, .field textarea { -webkit-appearance: none; appearance: none; border-radius: var(--radius); font-size: max(1rem, 16px); }
.field select {
  padding-right: 2.8rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B6676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px;
}
.consent input { width: 1.4rem; height: 1.4rem; flex: none; }
.consent { align-items: start; }

/* Botón flotante y pie: zonas seguras del iPhone */
.wa-float { right: calc(1.1rem + env(safe-area-inset-right)); bottom: calc(1.1rem + env(safe-area-inset-bottom)); }
.site-footer { padding-bottom: calc(var(--s-4) + 3.6rem + env(safe-area-inset-bottom)); }

/* Pantallas táctiles: objetivos de al menos 44 px */
@media (pointer: coarse) {
  .channel a:not(.icon-btn), .link-arrow { display: inline-block; min-height: 44px; padding-block: .6rem; }
  .site-footer li a, .footer__bottom a { display: inline-block; padding-block: .55rem; }
  .icon-btn { width: 3rem; height: 3rem; }
  .icon-btn--sm { width: 2.75rem; height: 2.75rem; }
  .btn { min-height: 3.1rem; }
}
/* Sin cursor (táctil): se evitan los efectos hover que quedan "pegados" tras tocar */
@media (hover: none) {
  .btn:hover, .sol:hover, .path:hover, .icon-btn:hover, .wa-float:hover, .svc__media:hover img { transform: none; box-shadow: none; }
  .btn:hover { background: var(--bg); }
}

/* El checkbox conserva su apariencia nativa (la normalización de formularios es solo para campos de texto y select) */
.field input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; width: 1.4rem; height: 1.4rem; padding: 0; border: initial; background: none; box-shadow: none; border-radius: 4px; margin-top: .15rem; accent-color: var(--blue); }
/* Área táctil del logotipo del encabezado */
.lockup { min-height: 44px; }

@media (max-width: 760px) {
  .wa-float { transition: opacity .25s var(--ease), transform .25s var(--ease); }
  .wa-float.is-away { opacity: 0; pointer-events: none; transform: scale(.8); }
}

/* iPad en horizontal (menú de escritorio con pantalla táctil): enlaces del encabezado con área táctil cómoda */
@media (pointer: coarse) and (min-width: 1240px) {
  .nav a:not(.btn) { padding-block: .8rem; }
}

/* ---------- Barra superior siempre oscura (marino) + nueva portada ---------- */
.site-header { color: #fff; background: rgba(8, 26, 46, .86); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.site-header.is-scrolled { background: rgba(8, 26, 46, .96); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 10px 30px -18px rgba(0, 0, 0, .6); }
.site-header.is-scrolled .lockup__iso--light { display: block; }
.site-header.is-scrolled .lockup__iso--dark { display: none; }
.site-header.is-scrolled .menu-toggle { border-color: var(--line-dark); }
.site-header:not(.is-scrolled) .nav .btn, .site-header.is-scrolled .nav .btn { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.site-header.nav-open { background: transparent; box-shadow: none; }
.phero__bg img { object-position: 60% 40%; }
@media (max-width: 700px) { .phero__bg img { object-position: 50% 30%; } }
@media (min-width: 701px) {
  .phero__bg { background: var(--ink); }
  .phero__bg img { inset: 0 0 0 auto; width: 68%; object-position: 42% 8%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%); }
}
@media (max-width: 700px) {
  .phero__bg { background: var(--ink); }
  .phero__bg img { inset: 0 0 auto 0; width: 100%; height: 62%; object-position: 50% 22%; animation: none;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .phero__veil { background: linear-gradient(180deg, rgba(8,26,46,.55) 0%, rgba(8,26,46,0) 20%), linear-gradient(0deg, rgba(6,23,42,.9) 0%, rgba(6,23,42,.4) 45%, rgba(6,23,42,0) 70%); }
}
@media (max-width: 700px) {
  .phero__bg img { height: calc(100vw + 2rem); object-position: 50% 18%; }
  .phero__inner { padding-top: calc(100vw - 2.5rem); }
}

/* Portada luminosa (familia sonriente) con velo marino, al estilo institucional */
.phero__bg img { object-position: 50% 45%; filter: saturate(.95) brightness(.82); }
@media (min-width: 701px) { .phero__bg img { object-position: 50% 45%; } }
@media (max-width: 700px) { .phero__bg img { object-position: 50% 50%; } }
@media (min-width: 701px) { .phero__bg img { object-position: 50% 40%; } }
@media (min-width: 701px) { .phero__bg img { width: 76%; object-position: 50% 62%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); } }
@media (min-width: 701px) {
  .phero__bg img { object-position: 50% 22%; }
  .phero__veil { background: linear-gradient(90deg, rgba(6,23,42,.92) 0%, rgba(8,32,58,.55) 32%, rgba(8,32,58,0) 58%), linear-gradient(0deg, rgba(6,23,42,.7) 0%, rgba(6,23,42,0) 30%), linear-gradient(180deg, rgba(6,23,42,.5) 0%, rgba(6,23,42,0) 18%); }
}

/* ---------- Barra de navegación flotante (píldora) ---------- */
.site-header, .site-header.is-scrolled { height: auto; top: .75rem; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.site-header .container { position: relative; width: min(100% - 1.5rem, 1280px); min-height: 4.1rem; padding: .4rem .55rem .4rem 1.25rem; pointer-events: auto; }
.site-header .container::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: rgba(12, 34, 62, .9); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); box-shadow: 0 14px 34px -14px rgba(3, 12, 26, .65); transition: background var(--t-fast); }
.site-header.is-scrolled .container::before { background: rgba(10, 29, 54, .96); }
.site-header.nav-open .container::before { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.nav-open { pointer-events: auto; }
.nav a:not(.btn) { white-space: nowrap; }
.nav a.nav__pro { display: inline-flex; align-items: center; gap: .5rem; }
.nav a.nav__pro::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 3px rgba(125, 185, 235, .22); flex: none; }
.nav a.nav__pro { color: #fff; }
@media (min-width: 1240px) { .nav { gap: clamp(.9rem, 1.6vw, 1.75rem); } .nav .btn { margin-left: .35rem; } }
@media (max-width: 1239px) { .site-header .container { padding-right: .4rem; } .nav a.nav__pro { font-size: clamp(1.9rem, 7vw, 2.6rem); } }
@media (max-width: 420px) { .site-header .container { padding-left: 1rem; } }
html { scroll-padding-top: calc(var(--header-h) + 24px); }
.site-header.nav-open .lockup { position: relative; z-index: 130; }
/* Portada: caras en primer plano (familia sonriente) */
@media (min-width: 701px) { .phero__bg img { width: 78%; object-position: 50% 30%; } }
@media (max-width: 700px) { .phero__bg img { object-position: 50% 35%; } }
@media (max-width: 700px) { .phero__bg img { object-position: 50% 0%; } }
/* Portada: familia sonriente (perfil europeo) */
@media (min-width: 701px) { .phero__bg img { width: 80%; object-position: 55% 38%; } }
@media (max-width: 700px) { .phero__bg img { object-position: 50% 25%; } }
/* Portada: familia de cuatro sonriendo en primer plano */
@media (min-width: 701px) { .phero__bg img { width: 82%; object-position: 55% 30%; } }
@media (max-width: 700px) { .phero__bg img { object-position: 50% 20%; } }
@media (min-width: 701px) { .phero__bg img { inset: 0 -10vw 0 auto; width: 88%; object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); } }

/* Portada: familia abrazada en el sofá (dos nenas rubias). Un poco de aire arriba para que la barra flotante no tape la cabeza del papá. */
@media (min-width: 701px) {
  .phero__bg img { inset: 46px -10vw 0 auto; width: 88%; height: calc(100% - 46px); object-position: 50% 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 9%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 9%);
    mask-composite: intersect; }
}
@media (max-width: 700px) {
  .phero__bg img { inset: 44px 0 auto 0; height: calc(100vw + 2rem); object-position: 50% 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 55%, transparent 100%); }
  .phero__inner { padding-top: calc(100vw + 1rem); }
}

/* Portada: pareja y nena rubia a contraluz (foto vertical). Escritorio: panel a la derecha; hasta 900 px: foto arriba y texto abajo. */
@media (min-width: 901px) {
  .phero__bg img { inset: 46px 0 0 auto; width: 52%; height: calc(100% - 46px); object-position: 50% 10%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, #000 9%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, #000 9%);
    mask-composite: intersect; }
}
@media (max-width: 900px) {
  .phero { --hero-h: min(calc(100vw + 2rem), 640px); }
  .phero__bg { background: var(--ink); }
  .phero__bg img { inset: 44px 0 auto 0; width: 100%; height: var(--hero-h); object-position: 50% 15%; animation: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 55%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 55%, transparent 100%);
    mask-composite: add; }
  .phero__veil { background: linear-gradient(180deg, rgba(8,26,46,.55) 0%, rgba(8,26,46,0) 20%), linear-gradient(0deg, rgba(6,23,42,.9) 0%, rgba(6,23,42,.4) 45%, rgba(6,23,42,0) 70%); }
  .phero__inner { padding-top: calc(var(--hero-h) - 1rem); }
}

/* ---------- Portada clara: papel + foto entera (sin velo azul), texto en azul oscuro ---------- */
.phero { --bar-h: 3.6rem; background: var(--paper); color: var(--navy); }
.phero__veil { display: none; }
.phero__bg { background: transparent; }
.phero__bg img { filter: none; animation: none; -webkit-mask-image: none; mask-image: none; }
.phero .eyebrow { color: var(--blue-ink); }
.phero__title { color: var(--navy); }
.phero__title em { color: var(--blue); }
.phero__sub { color: #33445A; }
.phero .btn--light { --bg: var(--navy); --fg: #fff; --bd: var(--navy); }
.phero .btn--light:hover { box-shadow: 0 14px 28px -14px rgba(10, 37, 67, .6); }
.phero .btn--ghost { --fg: var(--navy); --bd: rgba(10, 37, 67, .32); }
.phero .btn--ghost:hover { --bd: var(--navy); }
.phero__bar { background: rgba(255, 255, 255, .6); border-top: 1px solid rgba(10, 37, 67, .12); -webkit-backdrop-filter: none; backdrop-filter: none; }
.phero__bar ul { color: #4A5A6E; }
.phero__bar strong { color: var(--navy); }
.phero__bar li::before { background: var(--blue); }
@media (min-width: 901px) {
  .phero__bg img { inset: 0 0 var(--bar-h) auto; width: 50%; height: auto; object-fit: cover; object-position: 50% 12%; }
  .phero__bg img { box-shadow: -24px 0 60px -30px rgba(10, 37, 67, .35); }
}
@media (max-width: 900px) {
  .phero__bg { background: var(--paper); }
  .phero__bg img { inset: 0 0 auto 0; width: 100%; height: var(--hero-h); object-position: 50% 18%;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%); }
  .phero__inner { padding-top: calc(var(--hero-h) - 1.25rem); }
}
@media (min-width: 901px) {
  /* el texto no puede pasar por debajo de la foto (que ocupa la mitad derecha) */
  .phero__sub { max-width: min(31em, calc(50vw - max(var(--gutter), (100vw - 1240px) / 2) - 1.75rem)); }
  .phero__title { max-width: min(12ch, calc(50vw - max(var(--gutter), (100vw - 1240px) / 2) - 1.75rem)); }
}