/*
 * site.css
 * ------------------------------------------------------------
 * Front público de Solumed. Se carga después de base.css → layout.css →
 * components.css → site_header.css.
 *
 * Aquí viven los alias del starter, la base tipográfica, el sistema de
 * secciones y las piezas del home: hero, motivos (tarjeta montada sobre
 * el hero), quiénes somos, llamado a WhatsApp con foto, contacto y el
 * sistema de reveal. La vitrina de servicios, la página de servicio, la
 * experiencia, los proyectos y las preguntas están en servicios.css; las
 * páginas internas (hero, cuerpo CMS, contacto, legales), en pages.css.
 */

/* ==========================================================
   Tokens: alias del starter
   ----------------------------------------------------------
   Los tokens --sm-* viven SOLO en base.css (bloque «Solumed»).
   Aquí únicamente se apuntan los knobs genéricos del starter
   (botones, formularios, tipografía) a la marca.
   ========================================================== */
:root {
    --color-primary:       var(--sm-primario);
    --color-primary-hover: var(--sm-oscuro);
    --font-family:         var(--sm-body);
    --font-heading:        var(--sm-display);
    --font-size-base:      16px;
}

/* ==========================================================
   Base
   ========================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    background: var(--sm-papel);
    color: var(--sm-texto);
    font: 400 var(--fs-body)/var(--lh-body) var(--sm-body);
    overflow-x: hidden;
    overflow-x: clip;
}
body.is-locked { overflow: hidden; padding-right: var(--scrollbar-w, 0px); }

/* El footer cierra pegado a la última sección (sin la franja blanca del starter). */
main { padding-bottom: 0; }
main:focus { outline: none; }        /* destino del skip-link (tabindex="-1") */

h1, h2, h3, h4,
.section__title {
    font-family: var(--sm-display);
    letter-spacing: var(--tr-title);
    color: inherit;
}
h1, h2 { line-height: var(--lh-title); }
h3, h4 { line-height: var(--lh-snug); font-weight: 700; }

a { color: var(--sm-primario); text-decoration-color: rgba(10, 122, 140, .4); }
a:hover { color: var(--sm-oscuro); text-decoration-color: currentColor; }

::selection { background: var(--sm-primario-100); color: var(--sm-tinta); }

.container {
    max-width: var(--sm-wide);
    padding-left: var(--sm-gutter);
    padding-right: var(--sm-gutter);
}

/* ==========================================================
   Secciones: ritmo, eyebrow, títulos y divisor
   ----------------------------------------------------------
   .section (+ --sm) · .section--paper · .section--niebla
   .section--dark (petróleo, texto blanco, foco blanco)
   .eyebrow: microetiqueta Montserrat 600 .75rem, .16em, mayúsculas
   .section__title: H2 de sección, Montserrat 800 en mayúsculas
   Las viñetas con check (.list-check) están en servicios.css.
   ========================================================== */
.section { padding: var(--sm-section) 0; }
.section--sm { padding: var(--sm-section-sm) 0; }
.section--paper { background: var(--sm-papel); }
.section--niebla { background: var(--sm-niebla); }
.section--dark {
    --focus: #fff;
    background: var(--sm-oscuro);
    color: var(--sm-blanco-86);
}

.eyebrow {
    display: inline-flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0 0 1rem;
    font: 600 var(--fs-label)/1.3 var(--sm-display);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--sm-primario);
}
/* La raya acompaña a la primera línea (centrada en ella) aunque el eyebrow
   pase a dos líneas en móvil. */
.eyebrow::before {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 1px;
    margin-top: calc(.65em - .5px);
    background: currentColor;
}
.eyebrow--light,
.section--dark .eyebrow { color: var(--sm-cian); }

.section__title {
    margin: 0 0 1.25rem;
    font-weight: 800;
    font-size: var(--fs-h2);
    line-height: var(--lh-title);
    letter-spacing: var(--tr-title);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--sm-primario);
}
.section__title--center { text-align: center; }
.on-dark .section__title,
.section--dark .section__title,
.stats .section__title { color: #fff; }

.section__lead {
    max-width: 58ch;
    margin: 0 0 1.5rem;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--sm-gris-texto);
}
.on-dark .section__lead,
.section--dark .section__lead { color: var(--sm-blanco-86); }

.section__head { max-width: var(--sm-narrow); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }

/* ==========================================================
   Home: hero a pantalla completa
   ----------------------------------------------------------
   Foto a sangre bajo un velo petróleo. Título en dos voces: la primera
   línea («Excelencia técnica,») en turquesa y el resto en blanco, display
   800. La tarjeta de motivos se monta
   sobre el borde inferior, así que el padding de abajo reserva su solape.
   Orquestación de entrada (solo bajo .js-reveal: pestaña visible y sin
   reduced-motion; si no, todo queda en su estado final):
     0 ms foto (zoom 14 s) · 120 eyebrow · 200 y 320 líneas del título en
     máscara · 520 bajada · 640 botones · 760 tarjeta de pilares.
   El header no se anima al cargar.
   ========================================================== */
.home-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    color: #fff;
    background: var(--sm-profundo);
    overflow: hidden;
    isolation: isolate;
}
.home-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    z-index: -2;
}
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(var(--sm-profundo-rgb), .94) 0%, rgba(var(--sm-profundo-rgb), .62) 36%, rgba(var(--sm-profundo-rgb), .14) 68%, rgba(var(--sm-profundo-rgb), .38) 100%),
        linear-gradient(90deg, rgba(var(--sm-profundo-rgb), .62) 0%, rgba(var(--sm-profundo-rgb), 0) 68%);
}
.home-hero__inner {
    width: 100%;
    padding-top: calc(var(--sh-total) + clamp(1.5rem, 6vh, 4rem));
    /* solape de la tarjeta de pilares + aire antes de los botones */
    padding-bottom: calc(clamp(3rem, 6vw, 4.5rem) + clamp(2.25rem, 6vh, 4rem));
}

.home-hero__eyebrow { align-items: center; margin-bottom: 1.25rem; color: var(--sm-blanco-86); }
.home-hero__eyebrow::before { margin-top: 0; background: var(--sm-cian); }
/* Enlace de una línea: 44 px de objetivo táctil; el margen negativo
   conserva el ritmo del hero. */
.home-hero__eyebrow a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    margin-block: calc((1.3em + .9rem - 44px) / 2);   /* mismo alto de antes (padding .45rem) */
    color: inherit;
    text-decoration: none;
    border-radius: var(--r-xs);
}
.home-hero__eyebrow a:hover { color: #fff; }
.home-hero__eyebrow-icon { width: 14px; height: 14px; color: var(--sm-cian); transition: transform var(--dur-2) var(--ease-out); }
.home-hero__eyebrow a:hover .home-hero__eyebrow-icon { transform: translateX(3px); }

.home-hero__title {
    margin: 0 0 1.5rem;
    font-family: var(--sm-display);
    font-size: var(--fs-display);
    color: #fff;
}
/* Cada línea es una máscara: el span interno sube desde abajo (padding para
   que la coma y las tildes no se corten con overflow: hidden). */
.home-hero__title-lead,
.home-hero__title-main {
    display: block;
    overflow: hidden;
    padding: .08em 0 .06em;
    margin: -.08em 0 -.06em;
}
.home-hero__title-lead > span,
.home-hero__title-main > span { display: block; }
/* «Excelencia técnica,» es la primera línea del título, no una etiqueta:
   mismo cuerpo y peso que el resto; el turquesa la distingue sin achicarla. */
.home-hero__title-lead {
    font-size: 1em;
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -.012em;
    text-transform: uppercase;
    color: var(--sm-cian);
}
.home-hero__title-main {
    max-width: 16ch;
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -.012em;
    text-transform: uppercase;
    text-wrap: balance;
}
.home-hero__subtitle {
    max-width: 52ch;
    margin: 0 0 2.25rem;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--sm-blanco-86);
}
.home-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* Botón de pausa del video (WCAG 2.2.2): lo inserta site.js cuando hay video. */
.home-hero__toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    color: #fff;
    background: rgba(var(--sm-profundo-rgb), .28);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: var(--r-pill);
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.home-hero__toggle:hover { background: #fff; border-color: #fff; color: var(--sm-oscuro); }
.home-hero__toggle .icon { width: 18px; height: 18px; stroke-width: 2; }

/* Orquestación de entrada */
@keyframes home-card-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.js-reveal .home-hero__bg { animation: ag-zoom 14s var(--ease-out) both; }
.js-reveal .home-hero__eyebrow { animation: ag-rise var(--dur-4) var(--ease-out-expo) 120ms both; }
.js-reveal .home-hero__title-lead > span { animation: ag-mask-up var(--dur-5) var(--ease-out-expo) 200ms both; }
.js-reveal .home-hero__title-main > span { animation: ag-mask-up var(--dur-5) var(--ease-out-expo) 320ms both; }
.js-reveal .home-hero__subtitle { animation: ag-rise var(--dur-4) var(--ease-out-expo) 520ms both; }
.js-reveal .home-hero__cta { animation: ag-rise var(--dur-4) var(--ease-out-expo) 640ms both; }

/* Video de YouTube de fondo: lo inserta site.js solo si se cumple la misma
   condición que aquí (≥1024 px, horizontal, puntero fino, sin reduced-motion).
   Aparece con fundido cuando reproduce; en pausa vuelve la foto. El scale(1.25)
   saca de cuadro la barra de título y la franja de subtítulos de YouTube. */
.home-hero__iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 177.78vh);
    height: max(100%, 56.25vw);
    border: 0;
    transform: translate(-50%, -50%) scale(1.25);
}
@supports (height: 100svh) {
    .home-hero__iframe { width: max(100%, 177.78svh); }
}

/* Pantallas bajas (laptop con barra del navegador): se comprime la bajada. */
@media (max-height: 720px) and (min-width: 768px) {
    .home-hero__inner { padding-top: calc(var(--sh-total) + 1.25rem); }
    .home-hero__eyebrow { margin-bottom: .75rem; }
    .home-hero__title { margin-bottom: 1rem; }
    .home-hero__subtitle { margin-bottom: 1.4rem; font-size: 1.0625rem; max-width: 60ch; }
}
@media (max-width: 480px) {
    .home-hero__title-main,
    .home-hero__title-lead { font-size: clamp(1.9rem, 8.2vw, 2.4rem); }
    .home-hero__cta .btn { flex: 1 1 100%; }
}

/* ==========================================================
   Home: pilares (tarjeta blanca montada sobre el hero)
   ----------------------------------------------------------
   4 columnas separadas por líneas de 1 px; ícono de 40 px que se dibuja
   (trazo) al entrar; línea de 2 px arriba al pasar el mouse.
   ≤900: 2×2 · ≤600: solape corto y 2×2 compacto · ≤360: una columna.
   ========================================================== */
@keyframes home-draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }

.pillars { position: relative; z-index: 2; background: var(--sm-niebla); }
.pillars__card {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: calc(-1 * clamp(3rem, 6vw, 4.5rem));
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--sh-3), var(--sh-1);
    overflow: hidden;
}
.js-reveal .pillars__card { animation: home-card-rise 700ms var(--ease-out-expo) 760ms both; }

.pillar {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.6rem 2.1rem;
}
.pillar + .pillar { border-left: 1px solid var(--sm-linea); }
.pillar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--sm-primario);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 400ms var(--ease-out-expo);
}
.pillar:hover::before { transform: scaleX(1); }
.pillar:nth-child(2) { --i: 1; }
.pillar:nth-child(3) { --i: 2; }
.pillar:nth-child(4) { --i: 3; }

.pillar__icon { width: 40px; height: 40px; margin-bottom: 1rem; color: var(--sm-primario); }
/* Trazo dibujado: los símbolos traen pathLength="100"; dasharray y offset
   se heredan al árbol del <use>. Después de que la tarjeta aterriza. */
.js-reveal .pillar__icon {
    stroke-dasharray: 120;
    animation: home-draw var(--dur-5) var(--ease-in-out) calc(1150ms + var(--i, 0) * var(--stagger)) both;
}
.pillar__title {
    min-height: 2.6em;
    margin: 0 0 .35rem;
    font: 700 .9375rem/1.3 var(--sm-display);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--sm-tinta);
}
.pillar__text { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--sm-gris-texto); }

@media (max-width: 900px) {
    .pillars__card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pillar:nth-child(odd) { border-left: 0; }
    .pillar:nth-child(n+3) { border-top: 1px solid var(--sm-linea); }
}
@media (max-width: 600px) {
    .pillars__card { margin-top: -1.5rem; }
    .pillar { padding: 1.25rem 1rem 1.35rem; }
    .pillar__icon { width: 32px; height: 32px; margin-bottom: .7rem; }
    .pillar__title { min-height: 2.6em; font-size: .8125rem; letter-spacing: .05em; }
    .pillar__text { font-size: .875rem; line-height: 1.45; }
}
@media (max-width: 360px) {
    .pillars__card { grid-template-columns: minmax(0, 1fr); }
    .pillar {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: .9rem;
        border-left: 0;
    }
    .pillar + .pillar { border-top: 1px solid var(--sm-linea); }
    .pillar__icon { grid-row: span 2; margin: 0; }
    .pillar__title { min-height: 0; }
}

/* ==========================================================
   Home: quiénes somos (fondo papel)
   ----------------------------------------------------------
   Foto en máscara (clip-path de abajo hacia arriba) con zoom
   interno 1.12 → 1 y parallax sutil (≥900 px); marco de 1 px desplazado que
   entra 300 ms después. El cuerpo entra escalonado y la línea del eyebrow
   crece de 0 a 24 px. La foto se recorta a 5:4.
   ========================================================== */
.about { background: var(--sm-papel); }
.about-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}
.about-split--single { grid-template-columns: minmax(0, 1fr); max-width: var(--sm-narrow); }

.about-split__media {
    --seal: 168px;
    position: relative;
    margin: 0;
    isolation: isolate;
}
.about-split__photo {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--sm-oscuro);
}
.about-split__parallax { position: absolute; inset: 0; overflow: hidden; }
.about-split__parallax img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 50%;
}
.about-split__parallax.has-parallax > img { transform: translate3d(0, var(--py, 0px), 0) scale(1.1); }
.js-reveal .about-split__parallax { transition: transform var(--dur-6) var(--ease-out-expo); }
.js-reveal .about-split__photo:not(.is-in) .about-split__parallax { transform: scale(1.12); }

.about-split__frame {
    position: absolute;
    inset: 1.5rem -1.5rem -1.5rem 1.5rem;
    z-index: -1;
    border: 1px solid rgba(10, 122, 140, .35);
    border-radius: var(--r-md);
    pointer-events: none;
}
.js-reveal .about-split__frame {
    transition:
        opacity var(--dur-4) var(--ease-out) 300ms,
        transform var(--dur-5) var(--ease-out-expo) 300ms;
}
.js-reveal .about-split__photo:not(.is-in) ~ .about-split__frame { opacity: 0; transform: translate(-1.5rem, -1.5rem); }

/* Cuerpo */
.about-split__title { max-width: 15ch; }
.about-split__text {
    max-width: 52ch;
    margin: 0 0 1.75rem;
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--sm-texto);
}
.about-split__points {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2rem;
    margin: 0 0 2.25rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--sm-linea);
    border-bottom: 1px solid var(--sm-linea);
}
.about-split__points > li {
    margin: 0;
    font: 600 .9375rem/1.4 var(--sm-display);
    color: var(--sm-tinta);
}
.about-split__cta { margin: 0; }
.js-reveal .about-split__body .eyebrow::before {
    transform-origin: left;
    transition: transform var(--dur-4) var(--ease-out-expo) 200ms;
}
.js-reveal .about-split__body .eyebrow:not(.is-in)::before { transform: scaleX(0); }

@media (max-width: 1100px) and (min-width: 821px) {
    .about-split__media { --seal: 144px; }
}
@media (max-width: 820px) {
    .about-split { grid-template-columns: minmax(0, 1fr); gap: 4.5rem; }
    .about-split__media { --seal: 120px; }
    .about-split__photo { aspect-ratio: 16 / 9; }
    .about-split__frame { inset: 1rem -.75rem -.75rem 1rem; }
    .about-split__title { max-width: none; }
}
@media (max-width: 600px) {
    .about-split__photo { aspect-ratio: 4 / 3; }
    .about-split__text { font-size: 1.0625rem; margin-bottom: 1.5rem; }
    .about-split__points { margin-bottom: 1.75rem; }
    .about-split__points { gap: .5rem 1.25rem; }
}

/* ==========================================================
   Enlace con flecha
   ========================================================== */
/* Enlace de texto con flecha (acción secundaria sobre fondo claro). */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    font: 600 .9375rem/1.2 var(--sm-display);
    color: var(--sm-primario);
    text-decoration: underline;
    text-decoration-color: rgba(10, 122, 140, .35);
    text-underline-offset: .35em;
}
.link-arrow:hover { color: var(--sm-oscuro); text-decoration-color: currentColor; }
.link-arrow__icon { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover .link-arrow__icon { transform: translateX(4px); }

/* ==========================================================
   Home: llamado a hablar con un técnico (fondo fotográfico)
   ----------------------------------------------------------
   Acción principal: WhatsApp (o «Solicitar cotización» si no hay número).
   El teléfono es un enlace secundario con ícono, no un botón. Foto con
   velo más denso a la izquierda.
   ========================================================== */
.cta-band {
    position: relative;
    padding: clamp(5rem, 11vw, 9rem) 0;
    color: #fff;
    background: var(--sm-profundo);
    overflow: hidden;
    isolation: isolate;
}
.cta-band__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% 50%;
    z-index: -2;
}
.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(var(--sm-profundo-rgb), .95) 0%, rgba(var(--sm-profundo-rgb), .86) 40%, rgba(var(--sm-profundo-rgb), .5) 75%, rgba(var(--sm-profundo-rgb), .34) 100%);
}
.cta-band__title { max-width: 18ch; margin-bottom: 1rem; }
.cta-band__text {
    max-width: 46ch;
    margin: 0 0 2.25rem;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--sm-blanco-86);
}
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.cta-band__phone {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    min-height: 48px;
    color: #fff;
    text-decoration: none;
    border-radius: var(--r-sm);
}
.cta-band__phone:hover { color: #fff; }
.cta-band__phone-icon {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: var(--r-pill);
    transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.cta-band__phone-icon .icon { width: 18px; height: 18px; }
.cta-band__phone:hover .cta-band__phone-icon { background: #fff; border-color: #fff; color: var(--sm-oscuro); }
.cta-band__phone-text { display: flex; flex-direction: column; gap: .25rem; }
.cta-band__phone-text small {
    font: 600 var(--fs-label)/1.2 var(--sm-display);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--sm-cian);
}
.cta-band__phone-number {
    font: 700 1.0625rem/1.2 var(--sm-display);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .3);
    text-underline-offset: .3em;
    transition: text-decoration-color var(--dur-2) var(--ease-out);
}
.cta-band__phone:hover .cta-band__phone-number { text-decoration-color: currentColor; }

@media (max-width: 700px) {
    .cta-band::after { background: rgba(var(--sm-profundo-rgb), .86); }
}
@media (max-width: 480px) {
    .cta-band__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================
   Testimonios / FAQ (si se cargan desde el panel)
   ========================================================== */
.testimonial-card { background: #fff; border: 1px solid var(--sm-linea); border-radius: 2px; }
.faq-item { border-radius: 2px; }

/* ==========================================================
   Contacto / formulario de leads
   ========================================================== */
.contact-section { background: var(--sm-niebla); }
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
.contact-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
/* El formulario llena su columna: los campos alinean con el título. */
.contact-grid .lead-form { max-width: none; }

/* Campos: estilos en components.css (sistema .field; .lead-form por compatibilidad). */
.lead-form__submit .btn { padding: .95rem 2.2rem; font-size: 1rem; }

/* Acompaña al formulario mientras se completa (sticky bajo el header) en
   vez de dejar un hueco abajo; mismo radio que las demás tarjetas. */
.contact-info {
    position: sticky;
    top: calc(var(--sh-h-compact) + 1.5rem);
    padding: clamp(1.8rem, 4vw, 2.6rem);
    background: var(--sm-oscuro);
    color: rgba(255, 255, 255, .8);
    border: 0;
    border-radius: var(--r-md);
}
.contact-info__title {
    margin: 0 0 1.4rem;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
}
.contact-info__list { margin: 0 0 1.6rem; }
.contact-info__list dt {
    margin-top: 1.1rem;
    font-family: var(--sm-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sm-cian);
}
.contact-info__list dt:first-child { margin-top: 0; }
.contact-info__list dd { margin: .2rem 0 0; line-height: 1.5; }
.contact-info a { color: #fff; }
/* Llamar y escribir: objetivo táctil de 44 px sin cambiar el alto de la fila. */
.contact-info__list a { display: inline-flex; align-items: center; min-height: 44px; margin-block: calc((1.5em - 44px) / 2); }
.contact-info .contact-info__wa { width: 100%; background: var(--sm-cian); border-color: var(--sm-cian); color: var(--sm-profundo); }
.contact-info .contact-info__wa:hover { background: #fff; border-color: #fff; color: var(--sm-profundo); }

.lead-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

@media (max-width: 860px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .contact-info { position: static; }
}

/* ==========================================================
   404 (sin foto: header sólido)
   ========================================================== */
.no-hero main { min-height: 50vh; }

/* ==========================================================
   Animaciones y reveal
   ----------------------------------------------------------
   Sistema de motion (site.js expone window.Solumed):
   - [data-reveal] / ="up"  opacidad + sube 24 px (600 ms, expo)
   - [data-reveal="rise"]   solo sube 16 px, SIN opacidad (obligatoria
                            en franjas oscuras: nunca un bloque vacío)
   - [data-reveal="fade"]   solo opacidad (500 ms)
   - [data-reveal="mask"]   clip-path de abajo hacia arriba (900 ms), fotos
   - [data-reveal-stagger]  en el padre: site.js da --i (0–5) a cada hijo
                            [data-reveal] y el retardo es --i × --stagger
   El JS agrega .is-in al entrar y .is-revealed al terminar (devuelve las
   transiciones propias del componente, p. ej. el hover de una tarjeta).
   Sin JS, con reduced-motion o con la pestaña oculta: todo visible.
   [data-count] (cifras), [data-parallax] (fotos) y sus clases, abajo.
   ========================================================== */
@keyframes ag-zoom    { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes ag-rise    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ag-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes ag-mask-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes ag-spin    { to { transform: rotate(360deg); } }
@keyframes ag-drop    { 0% { transform: translateY(-24px); } 100% { transform: translateY(64px); } }

/* Estado previo a la entrada */
.js-reveal [data-reveal]:not(.is-in)        { opacity: 0; transform: translateY(24px); }
.js-reveal [data-reveal="rise"]:not(.is-in) { opacity: 1; transform: translateY(16px); }
.js-reveal [data-reveal="fade"]:not(.is-in) { opacity: 0; transform: none; }
.js-reveal [data-reveal="mask"]:not(.is-in) { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); }

/* Transición de entrada (solo hasta .is-revealed) */
.js-reveal [data-reveal]:not(.is-revealed) {
    transition:
        opacity var(--dur-4) var(--ease-out-expo),
        transform var(--dur-4) var(--ease-out-expo);
    transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js-reveal [data-reveal="fade"]:not(.is-revealed) {
    transition: opacity 500ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js-reveal [data-reveal="mask"]:not(.is-revealed) {
    transition: clip-path var(--dur-5) var(--ease-out-expo);
    transition-delay: calc(var(--i, 0) * var(--stagger));
}
/* clip-path no interpola de inset() a none: mientras entra, el destino es inset(0). */
.js-reveal [data-reveal="mask"].is-in:not(.is-revealed) { clip-path: inset(0 0 0 0); }

/* Cifras que cuentan: sin temblor de ancho mientras corren */
[data-count] { font-variant-numeric: tabular-nums; }
.js-reveal [data-count] { display: inline-block; min-width: var(--count-w, 0); }

/* Parallax sutil (site.js agrega .has-parallax solo ≥900 px y sin reduced-motion) */
.has-parallax { overflow: hidden; }
.has-parallax > img { transform: translate3d(0, var(--py, 0px), 0) scale(1.08); will-change: transform; }

@media print {
    .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}