/* Entrada dinámica del título del hero (revelado por palabra, tipo máscara) */
  .hero-home__title .word-mask {
    display: inline-block; overflow: hidden; vertical-align: top;
    padding-bottom: 0.14em; margin-bottom: -0.14em;
  }
  .hero-home__title .word {
    display: inline-block; transform: translateY(118%); opacity: 0;
    will-change: transform, opacity;
  }
  .hero-home__title.is-in .word {
    transform: none; opacity: 1;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  }
  /* Garantía de visibilidad: estado final sin transición (iframe/pestaña en 2º plano) */
  .hero-home__title.is-shown .word { transform: none; opacity: 1; transition: none; }
  @media (prefers-reduced-motion: reduce) {
    .hero-home__title .word { transform: none; opacity: 1; transition: none; }
  }

  /* ====== Servicios que ofrecemos · acordeón vertical (Demo 2 Home) ====== */
  .svc-box { padding-block:0; }
  /* Servicios: todas las tarjetas del acordeón en blanco (fondo de sección E7EDF2) */
  .svc-box .vpanel { background:#FFFFFF; }
  .svc-box .vpanel:not(.is-active):hover { background:#F7F8FA; }
  html[data-theme="dark"] .svc-box .vpanel { background:var(--surface); }

  /* Talento innovador: color de icono por tarjeta + fondo suave al pasar el mouse */
  .talent .icon-chip {
    color: var(--ic, var(--accent));
    background: #F1F4F7;
    transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  html[data-theme="dark"] .talent .icon-chip { background: var(--surface-2); }
  .talent .flow__step:hover .icon-chip {
    background: var(--ic-soft, var(--accent-soft));
    box-shadow: 0 0 30px 6px var(--ic-soft, var(--accent-soft));
  }
  .svc-vacc { display:flex; gap:14px; min-height:480px; }
  .vpanel {
    position:relative; flex:1 1 0%; min-width:64px;
    border:1px solid var(--border); border-radius:var(--radius-lg);
    background:var(--surface); overflow:hidden; cursor:pointer;
    transition:flex-grow .6s var(--ease-out), background-color .4s var(--ease), border-color .4s var(--ease);
  }
  .vpanel.is-active { flex-grow:7; cursor:default; border-color:var(--accent-line); display:flex; align-items:center; justify-content:center; }
  .vpanel:not(.is-active):hover { background:var(--surface-2); }

  .vpanel__tab {
    position:absolute; inset:0; width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center; gap:1.25rem;
    justify-content:center; padding:1.5rem 0; background:none; border:0; cursor:pointer;
    transition:opacity .35s var(--ease);
  }
  .vpanel__avatar { width:44px; height:44px; flex:none; border-radius:999px;
    background-color:#D8DDE3; background-image:repeating-linear-gradient(135deg, rgba(8,40,67,.06) 0 1px, transparent 1px 7px); }
  html[data-theme="dark"] .vpanel__avatar { background-color:var(--surface-2); }
  .vpanel__name {
    writing-mode:vertical-rl; transform:rotate(180deg);
    font-family:var(--font-display); font-weight:700; font-size:1.1rem;
    letter-spacing:-0.01em; white-space:nowrap; color:var(--text);
  }
  .vpanel.is-active .vpanel__tab { opacity:0; pointer-events:none; }

  .vpanel__content { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .45s var(--ease) .12s; }
  .vpanel.is-active .vpanel__content { opacity:1; pointer-events:auto; position:relative; inset:auto; width:100%; }
  .vpanel__inner {
    overflow:visible; padding:clamp(1.5rem, 3vw, 2.5rem);
    display:flex; flex-direction:column; gap:.55rem; min-width:360px;
  }
  .vpanel__avatar--lg { width:60px; height:60px; margin-bottom:.4rem; }
  .vpanel__avatar--photo {
    background-image:none; background-color:#fff; background-size:cover;
    background-position:center top; background-repeat:no-repeat;
  }
  html[data-theme="dark"] .vpanel__avatar--photo { background-color:#fff; }
  .vpanel__content h3 { font-size:clamp(1.2rem, 1rem + .8vw, 1.6rem); }
  .vpanel__sub { font-size:.85rem; color:var(--text-muted); margin-bottom:.3rem; }
  .vpanel__content .muted { font-size:.9rem; line-height:1.55; }
  .vpanel__content .svc-sub-title { font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text); margin:.9rem 0 .55rem; }
  .vpanel__content .svc-sublist { display:grid; grid-template-columns:1fr 1fr; gap:.5rem clamp(1rem, 3vw, 2rem); padding-left:0; }
  .vpanel__content .svc-sublist li { font-size:.85rem; color:var(--text-muted); }
  .vpanel__body { display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(1.25rem, 3.5vw, 2.5rem); align-items:center; margin-top:.9rem; }
  .vpanel__body--solo { grid-template-columns:1fr; }
  /* Imagen panorámica a todo el ancho (como el modal de Servicios):
     sin espacio en blanco a los costados y el card queda más bajo. */
  .vpanel__body--solo .vpanel__img { aspect-ratio:16 / 7; width:100%; border-radius:24px; isolation:isolate; }
  /* La imagen hereda el radio para que las esquinas se recorten parejas
     (algunos navegadores no recortan bien la capa de la imagen con overflow). */
  .vpanel__img img { border-radius:inherit; }
  .vpanel__list { min-width:0; }
  .vpanel__list .svc-sub-title { margin-top:0; }
  .vpanel__img { aspect-ratio:16 / 11; border-radius:16px; background:#D8DDE3; display:grid; place-items:center; color:#FFFFFF; }
  html[data-theme="dark"] .vpanel__img { background:var(--surface-2); color:var(--text-faint); }
  .vpanel__img svg { width:60px; height:60px; opacity:.85; }

  /* ── Servicios que brindamos: panel activo = card con imagen de fondo + texto encima ── */
  .vpanel.is-active { align-items:stretch; }
  .vpanel.is-active .vpanel__content { display:flex; align-items:center; min-height:480px; overflow:hidden; border-radius:inherit; }
  .vpanel.is-active .vpanel__img { position:absolute; inset:0; z-index:0; aspect-ratio:auto; display:block; border-radius:0; background:none; }
  /* La imagen llena el card por posicionamiento absoluto (inset:0), no por
     height:100%. Safari no resuelve bien el height:100% dentro de un contenedor
     absoluto y la imagen quedaba corta, anclada abajo, dejando una franja clara
     arriba. Con inset:0 cubre todo el card en Safari; en Chrome se ve igual. */
  .vpanel.is-active .vpanel__img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center !important; border-radius:0; }
  .vpanel.is-active .vpanel__content::after {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 50%),
      linear-gradient(90deg, rgba(0,0,0,.90) 0%, rgba(64,64,64,.90) 27%, rgba(64,64,64,.80) 41%, rgba(64,64,64,.50) 55%, rgba(64,64,64,0) 70%);
  }
  .vpanel.is-active .vpanel__inner { position:relative; z-index:2; justify-content:center; gap:1.75rem; max-width:70%; min-width:0; padding:clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 2vw, 2rem) clamp(2rem, 4vw, 3.25rem) clamp(2rem, 3.5vw, 3.75rem); }
  .vpanel.is-active .vpanel__content h3 { color:#FFFFFF; font-size:clamp(1.6rem, 1rem + 2vw, 2.35rem); line-height:1.15; }
  .vpanel.is-active .vpanel__content .muted { color:rgba(255,255,255,.95); font-size:1rem; line-height:1.6; }

  @media (max-width: 760px) {
    .svc-vacc { flex-direction:column; min-height:0; gap:10px; }
    .vpanel { min-width:0; }
    .vpanel.is-active { flex-grow:0; display:block; }
    .vpanel__tab { position:relative; flex-direction:row; justify-content:center; gap:1rem; padding:1.1rem 1.25rem; height:auto; }
    .vpanel__name { writing-mode:horizontal-tb; transform:none; font-size:1.05rem; white-space:normal; text-align:center; }
    /* Al abrir un panel se oculta su cabecera (como en desktop): el título ya
       va grande sobre la imagen, así se evita el doble título. Los paneles
       cerrados siguen mostrando su cabecera para poder abrirlos. */
    .vpanel.is-active .vpanel__tab { display:none; }
    /* En móvil, al alternar de servicio SOLO se anima la apertura del panel
       nuevo: una expansión suave y sutil (tipo "smart animate"). El panel
       anterior se cierra al instante (base sin transición), así se evita el
       efecto de "se abre y luego se cierra" (doble movimiento) pero sin que la
       apertura sea brusca. El max-height se acota a 600px (el contenido real es
       ~356px) para que la animación se perciba a ~0.3s en vez de casi instantánea
       —con 1600px la parte visible pasaría en un instante— y con margen de sobra
       para que el texto crezca sin recortarse. Solo móvil; desktop no se toca. */
    .vpanel__content { position:relative; opacity:1; pointer-events:auto; height:auto; max-height:0; overflow:hidden; transition:none; }
    .vpanel.is-active .vpanel__content { max-height:600px; min-height:0; transition:max-height .5s ease-in-out; }
    /* En iOS Safari, a veces la imagen de fondo del panel activo no cubre el
       borde superior por un píxel y se asoma el blanco del card, que el overlay
       tiñe como una banda plateada arriba. Pintamos el fondo del content con el
       tono oscuro del borde superior de la imagen para que ese posible hueco sea
       imperceptible. Si la imagen cubre bien (Chromium/Android) no se ve nada;
       además evita el flash de texto blanco sobre blanco mientras carga. */
    .vpanel.is-active .vpanel__content { background:#040e17; }
    .vpanel__inner { min-width:0; overflow:visible; }
    .vpanel.is-active .vpanel__inner { max-width:100%; min-height:240px; padding:2rem 1.5rem; }
    .vpanel__body { grid-template-columns:1fr; }
    .vpanel__content .svc-sublist { grid-template-columns:1fr; }
  }

/* Quiénes somos: mostrar la foto de recepción completa, sin recorte.
   La imagen real (home-quienes-somos-v3.jpg) es 1920x1280 (3:2); la caja era
   cuadrada (.ph--square) y recortaba los lados. Aquí adopta la proporción real
   de la foto (solo este bloque, scoped), sin tocar las clases globales
   .ph--square ni .s-fill-cover. */
.ph.qs-photo { aspect-ratio: 3 / 2; }
/* Acercar (zoom) la foto de recepción dentro de la misma caja, como en Figma. */
.ph.qs-photo img { transform: scale(1.85); transform-origin: 33% 50%; }