/**
 * Estilos personalizados del sitio Dr. Sanchez.
 *
 * Este archivo se carga después de style.css y de los estilos del tema padre.
 * Añadí tus reglas CSS debajo de este comentario.
 */

.site-title, .site-description, .site-footer, .site-header{
    display:none;
}

.ds-button-icon .elementor-button-content-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ds-button-icon .elementor-button-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
}

.ds-button-icon .elementor-button-icon svg {
    width: 36px;
    height: 36px;
    display: block;
}

.ds-button-icon .elementor-button-text {
    display: flex;
    align-items: center;
}

.text-reveal .elementor-heading-title,
.text-reveal.elementor-widget-text-editor > .elementor-widget-container,
.text-reveal.elementor-widget-text-editor > :not(.elementor-widget-container) {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: translateY(0.2em);
    will-change: clip-path, opacity, transform;
}

.text-reveal.is-visible .elementor-heading-title,
.text-reveal.elementor-widget-text-editor.is-visible > .elementor-widget-container,
.text-reveal.elementor-widget-text-editor.is-visible > :not(.elementor-widget-container) {
    animation: dr-sanchez-text-reveal 1.35s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes dr-sanchez-text-reveal {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        transform: translateY(0.2em);
    }

    20% {
        opacity: 1;
    }

    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mostrarlo normalmente dentro del editor */
.elementor-editor-active .text-reveal .elementor-heading-title,
.elementor-editor-active .text-reveal.elementor-widget-text-editor > .elementor-widget-container,
.elementor-editor-active .text-reveal.elementor-widget-text-editor > :not(.elementor-widget-container) {
    animation: none;
    clip-path: inset(0);
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .text-reveal .elementor-heading-title,
    .text-reveal.is-visible .elementor-heading-title,
    .text-reveal.elementor-widget-text-editor > .elementor-widget-container,
    .text-reveal.elementor-widget-text-editor > :not(.elementor-widget-container),
    .text-reveal.elementor-widget-text-editor.is-visible > .elementor-widget-container,
    .text-reveal.elementor-widget-text-editor.is-visible > :not(.elementor-widget-container) {
        animation: none;
        clip-path: inset(0);
        opacity: 1;
        transform: none;
    }
}

/* Fondo canvas animado para la sección destacada */
.gradient-mesh {
    --mesh-saturation: 1.02;
    --mesh-brightness: 0.98;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #081d32 !important;
}

.gradient-mesh > .ds-gradient-mesh-canvas {
    position: absolute;
    z-index: 0;
    inset: -2%;
    display: block;
    width: 104%;
    height: 104%;
    pointer-events: none;
    filter:
        saturate(var(--mesh-saturation))
        brightness(var(--mesh-brightness));
    transform: scale(1.02);
}

.gradient-mesh::before {
    z-index: 1;
}

.gradient-mesh::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(1, 12, 25, 0.08), transparent 42%),
        radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 9, 20, 0.08) 120%);
}

.gradient-mesh > .e-con-inner {
    position: relative;
    z-index: 3;
}

/* Carrusel infinito de tratamientos */
.scroll-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-behavior: auto;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.scroll-container > .card-container {
    flex: 0 0 clamp(18rem, 24vw, 22rem) !important;
    width: clamp(18rem, 24vw, 22rem) !important;
    max-width: none !important;
    -webkit-user-drag: none;
}

.scroll-container.is-dragging,
.scroll-container.is-dragging * {
    cursor: grabbing !important;
}

/* Flechas del carrusel (las crea custom.js; solo se muestran en móvil) */
.scroll-nav {
    display: none;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

/* Selectores con especificidad alta para ganarle a los estilos de botón de
   Elementor/Hello (padding, fondo rosa en :focus, etc.) */
.scroll-nav .scroll-nav__btn,
.scroll-nav .scroll-nav__btn:is(:hover, :focus, :focus-visible, :active) {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--e-global-color-db260d1, #091e35);
    border-radius: 50%;
    background: transparent;
    background-image: none;
    box-shadow: none;
    color: var(--e-global-color-db260d1, #091e35);
    font-size: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.scroll-nav .scroll-nav__btn:focus-visible {
    outline: 2px solid var(--e-global-color-db260d1, #091e35);
    outline-offset: 3px;
}

.scroll-nav .scroll-nav__btn svg {
    display: block;
    width: 16px;
    height: 12px;
    flex: 0 0 auto;
}

.scroll-nav .scroll-nav__btn:active {
    background: var(--e-global-color-db260d1, #091e35);
    color: #fff;
}

.scroll-nav .scroll-nav__btn:disabled,
.scroll-nav .scroll-nav__btn:disabled:is(:hover, :focus, :active) {
    opacity: 0.3;
    background: transparent;
    color: var(--e-global-color-db260d1, #091e35);
    cursor: default;
}

/* Móvil: carrusel de una tarjeta por pasada, scroll táctil con snap, texto visible */
@media (max-width: 767px) {
    .scroll-container {
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        touch-action: pan-x pan-y;
        cursor: auto;
    }

    /* Dos tarjetas por pantalla entre 600 y 767px, una por debajo */
    .scroll-container > .card-container {
        flex-basis: calc((100% - var(--sc-gap, 20px)) / 2) !important;
        width: calc((100% - var(--sc-gap, 20px)) / 2) !important;
        scroll-snap-align: start;
    }

    .scroll-container > .card-container > .tratamiento-texto {
        grid-template-rows: 1fr;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition: none;
    }

    .scroll-nav {
        display: flex;
    }
}

@media (max-width: 600px) {
    .scroll-container > .card-container {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* Tarjetas de tratamientos */
.card-container {
    cursor: pointer;
}

.card-container > .tratamiento-titulo .elementor-heading-title {
    transition: color 280ms ease;
}

.card-container > .tratamiento-texto {
    display: grid;
    grid-template-rows: 0fr;
    height: auto !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    pointer-events: none;
    transition:
        grid-template-rows 600ms cubic-bezier(.22, 1, .36, 1),
        opacity 260ms ease,
        transform 500ms cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 600ms;
}

.card-container > .tratamiento-texto > :is(.elementor-widget-container, p) {
    min-height: 0;
    margin-block: 0;
    overflow: hidden;
}

.scroll-container:not(.is-dragging):not(.suppress-card-hover) > .card-container:hover > .tratamiento-titulo .elementor-heading-title,
.scroll-container > .card-container:focus-visible > .tratamiento-titulo .elementor-heading-title {
    color: #fff !important;
}

.scroll-container:not(.is-dragging):not(.suppress-card-hover) > .card-container:hover > .tratamiento-texto,
.scroll-container > .card-container:focus-visible > .tratamiento-texto {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    color: #fff !important;
    transition-delay: 0s, 80ms, 40ms, 0s;
}

.scroll-container:not(.is-dragging):not(.suppress-card-hover) > .card-container:hover > .tratamiento-texto :is(p, a, strong),
.scroll-container > .card-container:focus-visible > .tratamiento-texto :is(p, a, strong) {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .card-container > .tratamiento-titulo .elementor-heading-title,
    .card-container > .tratamiento-texto {
        transition-duration: 0.01ms;
    }
}

/* Listado interactivo de tratamientos */
.tratamientos-showcase {
    position: relative;
}

.tratamientos-showcase > .e-con-inner {
    align-items: stretch;
}

.tratamientos-showcase .tratamientos-media-column {
    align-self: stretch;
}

.tratamientos-showcase .tratamientos-imagen {
    position: sticky;
    top: clamp(5rem, 12vh, 8rem);
}

.tratamientos-imagen .tratamientos-image-stage {
    position: relative;
    isolation: isolate;
}

.tratamientos-imagen img {
    transition: opacity 220ms ease;
}

.tratamientos-imagen img.is-switching {
    opacity: 0;
}

.tratamiento-item {
    cursor: pointer;
    text-decoration: none;
}

.tratamiento-item .elementor-heading-title {
    transform: translateX(0);
    transition:
        color 260ms ease,
        transform 380ms cubic-bezier(.22, 1, .36, 1);
}

.tratamiento-item .elementor-icon svg rect,
.tratamiento-item .elementor-icon svg path {
    transition:
        fill 260ms ease,
        stroke 260ms ease;
}

.tratamiento-item:is(:hover, :focus-visible, :focus-within) .elementor-heading-title {
    font-style: italic;
    transform: translateX(0.2rem);
}

.tratamiento-item:is(:hover, :focus-visible, :focus-within) .elementor-icon svg rect {
    fill: #091e35;
    stroke: #091e35;
}

.tratamiento-item:is(:hover, :focus-visible, :focus-within) .elementor-icon svg path {
    fill: #fff;
}

/* Móvil y pantallas táctiles: sin efecto hover en el título (itálica y
   desplazamiento), que en touch quedaba "pegado" tras tocar */
@media (max-width: 767px), (hover: none) {
    .tratamiento-item:is(:hover, :focus-visible, :focus-within) .elementor-heading-title {
        font-style: normal;
        transform: none;
    }
}

@media (max-width: 767px) {
    .tratamientos-showcase .tratamientos-media-column {
        order: -1;
    }

    .tratamientos-showcase .tratamientos-imagen {
        position: relative;
        top: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tratamientos-imagen img,
    .tratamiento-item .elementor-heading-title,
    .tratamiento-item .elementor-icon svg rect,
    .tratamiento-item .elementor-icon svg path {
        transition-duration: 0.01ms;
    }
}

/* Vector Eyes: escena fijada y fases controladas por distancia de scroll */
html.vector-scroll-is-controlled {
    scroll-behavior: auto !important;
}

.vector-scroll {
    position: relative;
    height: calc(100svh + var(--vector-scroll-distance, 2400px));
    min-height: calc(100svh + var(--vector-scroll-distance, 2400px));
    overflow: visible !important;
    align-items: flex-start !important;
}

.vector-scroll > .e-con-inner {
    height: 100%;
    min-height: 100%;
    padding-bottom: 0 !important;
    align-items: flex-start;
    overflow: visible;
}

.vector-scroll .vector-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100svh;
    flex-shrink: 0;
}

.vector-scroll .vector-zones {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
}

.vector-scroll .vector-zone {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transform: translateY(0.85rem);
    filter: blur(3px);
    transition:
        opacity 360ms ease,
        transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 360ms ease;
    transition-delay: 0ms;
}

.vector-scroll .vector-zone.is-before {
    transform: translateY(-0.75rem);
}

.vector-scroll .vector-zone.is-after {
    transform: translateY(0.85rem);
}

.vector-scroll:not([data-vector-eyes-ready]) .vector-zone:first-child,
.vector-scroll .vector-zone.is-active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition-delay: 80ms;
}

.vector-scroll .vector-progress {
    grid-column: 1;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.38rem !important;
    width: min(20rem, 100%) !important;
    max-width: 20rem;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start;
    align-self: flex-start;
}

.vector-scroll .vector-progress-line {
    position: relative;
    display: block;
    width: 100%;
    height: 0.16rem;
    overflow: hidden;
    border-radius: 99rem;
    background: rgba(255, 255, 255, 0.92);
}

.vector-scroll .vector-progress-line::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #09233d;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vector-scroll .vector-progress-line.is-active::after {
    transform: scaleX(1);
}

.vector-scroll .vector-visual {
    position: relative;
    isolation: isolate;
    transform-origin: center center;
}

.vector-scroll.is-phase-changing .vector-visual {
    animation: vector-visual-breathe 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vector-scroll .vector-overlay {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}

.vector-scroll .vector-marker {
    position: absolute;
    display: block;
    max-width: none !important;
    height: auto;
    opacity: 0;
    transform: translateY(0.4rem);
    clip-path: inset(0 100% 0 0);
    transition:
        opacity 420ms ease 140ms,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 140ms,
        clip-path 650ms cubic-bezier(0.22, 1, 0.36, 1) 140ms;
}

.vector-scroll .vector-marker[data-direction="left"] {
    clip-path: inset(0 0 0 100%);
}

.vector-scroll .vector-marker[data-zone="1"] {
    top: 18.9%;
    left: 8.8%;
    width: 21.43%;
}

.vector-scroll .vector-marker[data-zone="2"] {
    top: 34.3%;
    left: 67.3%;
    width: 17.93%;
}

.vector-scroll .vector-marker[data-zone="3"] {
    top: 34.5%;
    left: 7.3%;
    width: 18.8%;
}

.vector-scroll .vector-marker[data-zone="4"] {
    top: 44.1%;
    left: 56.2%;
    width: 17.93%;
}

.vector-scroll .vector-marker[data-zone="5"] {
    top: 45.6%;
    left: 20.3%;
    width: 18.8%;
}

.vector-scroll .vector-marker.is-visible {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    animation: vector-marker-emphasis 780ms ease-out 520ms both;
}

/* Móvil: sin escena fijada; las zonas son un carrusel con flechas y la foto
   muestra todos los marcadores de entrada (lo activa vector-eyes.js) */
@media (max-width: 767px) {
    .vector-scroll.is-carousel {
        height: auto !important;
        min-height: 0 !important;
    }

    .vector-scroll.is-carousel > .e-con-inner {
        height: auto;
        min-height: 0;
    }

    .vector-scroll.is-carousel .vector-stage {
        position: static;
        height: auto;
        min-height: 0;
    }

    .vector-scroll.is-carousel .vector-zones {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start;
        height: auto !important;
        min-height: 0 !important;
        gap: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
    }

    .vector-scroll.is-carousel .vector-zones::-webkit-scrollbar {
        display: none;
    }

    .vector-scroll.is-carousel .vector-zone {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        scroll-snap-align: start;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        pointer-events: auto;
        transition: none;
    }

    .vector-scroll.is-carousel .vector-progress {
        display: none !important;
    }

    .vector-scroll.is-carousel .vector-zones-nav {
        margin-top: 12px;
        margin-bottom: 8px;
        justify-content: flex-start;
    }

    .vector-scroll.is-carousel .vector-marker {
        opacity: 1 !important;
        transform: none !important;
        clip-path: inset(0 0 0 0) !important;
        animation: none !important;
        transition: none !important;
    }

    .vector-scroll.is-carousel .vector-visual {
        animation: none !important;
    }
}

@keyframes vector-visual-breathe {
    0%,
    100% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.01);
    }
}

@keyframes vector-marker-emphasis {
    0%,
    55%,
    100% {
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }

    78% {
        filter: drop-shadow(0 0 0.65rem rgba(255, 255, 255, 0.82));
    }
}

@media (prefers-reduced-motion: reduce) {
    .vector-scroll .vector-zone,
    .vector-scroll .vector-progress-line::after,
    .vector-scroll .vector-marker {
        transition: none;
    }

    .vector-scroll.is-phase-changing .vector-visual,
    .vector-scroll .vector-marker.is-visible {
        animation: none;
    }
}


/* =========================================================
   Horizontal scroll
   .horizontal-scroll  -> sección alta: 100vh + recorrido (el alto lo fija el JS)
   .horizontal-stage   -> sticky a 100vh, recorta
   .horizontal-track   -> fila de columnas; se traslada en X con el scroll
   .horizontal-panel   -> contenido, mide lo que mide su contenido
   El movimiento lo hace el navegador con una animación ligada al scroll (CSS):
   1px de scroll = 1px de desplazamiento, sin JS por frame, sin suavizado.
   En navegadores sin soporte el JS hace el mismo cálculo en el evento scroll.
   ========================================================= */

.horizontal-scroll {
    --hs-vw: 100vw;                          /* ancho del stage, lo fija el JS */
    --hs-col-text: 50rem;                    /* ancho real de la 1ª columna, lo mide el JS */
    --hs-pad: clamp(40px, 7vw, 120px);       /* aire a la derecha al final del recorrido */
    --hs-pad-left: max(var(--hs-pad), calc((var(--hs-vw) - var(--hs-col-text)) / 2));
    --hs-gap: clamp(64px, 8vw, 140px);       /* separación entre columnas */
    --hs-col-list: clamp(440px, 36vw, 620px);
    --hs-img-height: min(72vh, 747px);
    --hs-accent: #24476C;
    --hs-progress: 0;
    position: relative;
    min-height: 100vh;
    padding: 0 !important;
    overflow: visible !important;            /* sticky se rompe si un ancestro recorta */
    view-timeline-name: --hs;
    view-timeline-axis: block;
}

.horizontal-stage {
    position: sticky;
    top: 0;
    height: 100vh !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: hidden;
}

.horizontal-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: max-content !important;
    max-width: none !important;
    height: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    will-change: transform;
}

/* Movimiento ligado al scroll: de 0 a (ancho visible - ancho del track) */
@keyframes hs-move {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(var(--hs-vw) - 100%), 0, 0); }
}

@keyframes hs-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@supports (animation-timeline: view()) {
    .horizontal-track {
        animation: hs-move linear both;
        animation-timeline: --hs;
        animation-range: contain 0% contain 100%;
    }

    .horizontal-stage::after {
        animation: hs-progress linear both;
        animation-timeline: --hs;
        animation-range: contain 0% contain 100%;
    }
}

/* El panel mide lo que mide su contenido: sus columnas van en fila */
.horizontal-panel {
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--hs-gap) !important;
    padding: 0 var(--hs-pad) 0 var(--hs-pad-left) !important;
    margin: 0 !important;
    position: relative;
    overflow: visible;
}

/* Columnas: ancho de contenido, nunca se encogen */
.horizontal-panel > .e-con {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

.horizontal-panel > .e-con:last-child {
    width: var(--hs-col-list) !important;
}

/* Columna de imagen: alto fijo, ancho natural */
.horizontal-panel > .e-con .elementor-widget-image,
.horizontal-panel > .e-con .elementor-widget-image .elementor-widget-container {
    width: auto !important;
    max-width: none !important;
}

.horizontal-panel > .e-con .elementor-widget-image img {
    height: var(--hs-img-height);
    width: auto;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* Línea de progreso */
.horizontal-stage::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--hs-accent);
    opacity: 0.55;
    transform-origin: left center;
    transform: scaleX(var(--hs-progress));
    pointer-events: none;
    z-index: 5;
}

/* Móvil: sin horizontal, columnas apiladas */
@media (max-width: 767px) {
    .horizontal-scroll {
        height: auto !important;
        min-height: 0 !important;
    }

    .horizontal-stage {
        position: static;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible;
    }

    .horizontal-stage::after {
        display: none;
    }

    .horizontal-track {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        animation: none !important;
        transform: none !important;
    }

    .horizontal-panel {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 40px !important;
        padding: 48px 1rem !important;
        overflow: visible;
    }

    .horizontal-panel > .e-con,
    .horizontal-panel > .e-con:last-child {
        width: 100% !important;
    }

    .horizontal-panel > .e-con .elementor-widget-image img {
        height: auto;
        width: 100%;
        max-width: 100%;
    }
}

/* =========================================================
   Proceso: cards apiladas (.proceso-container > .proceso-card)
   Cada card se queda pegada un poco antes del borde superior; la siguiente
   pasa por encima y la tapada se achica según --stack-p (0..1, lo fija el JS).
   ========================================================= */
.proceso-container {
    --stack-top: 12vh;      /* distancia al borde superior donde se queda pegada */
    --stack-offset: 22px;   /* escalón entre cards apiladas */
    --stack-scale: 0.12;    /* cuánto se achica la card tapada (12%) */
    --stack-speed: 2.4;     /* velocidad del achique: 2.4 = termina cuando la siguiente tapó el 42% */
    --stack-hold: 0px;      /* espacio extra al final para sostener la pila antes de que suba (0 = ninguno) */
    position: relative;
    overflow: visible !important;
}

.proceso-container > .proceso-card {
    --stack-p: 0;
    position: sticky;
    top: calc(var(--stack-top) + var(--stack-i, 0) * var(--stack-offset));
    transform-origin: center top;
    transform: scale(calc(1 - var(--stack-p) * var(--stack-scale)));
    will-change: transform;
    z-index: calc(1 + var(--stack-i, 0));
}

.proceso-container > .proceso-card:nth-child(1) { --stack-i: 0; }
.proceso-container > .proceso-card:nth-child(2) { --stack-i: 1; }
.proceso-container > .proceso-card:nth-child(3) { --stack-i: 2; }
.proceso-container > .proceso-card:nth-child(4) { --stack-i: 3; }
.proceso-container > .proceso-card:nth-child(5) { --stack-i: 4; }
.proceso-container > .proceso-card:nth-child(6) { --stack-i: 5; }

/* La última card no se achica nunca */
.proceso-container > .proceso-card:last-child {
    --stack-p: 0 !important;
}

/* Espacio opcional al final para sostener la pila (ver --stack-hold) */
.proceso-container::after {
    content: "";
    display: block;
    height: var(--stack-hold);
}

@media (max-width: 767px) {
    .proceso-container {
        --stack-top: 8vh;
        --stack-offset: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .proceso-container > .proceso-card {
        transform: none;
    }
}

/* =========================================================
   Contenedor stick: .stick1 se queda pegada arriba y .stick2 le pasa por encima.
   Cuando .stick2 la tapa del todo, el scroll sigue normal.
   ========================================================= */
.contenedor-stick,
.contenedor-stick > .e-con-inner {
    overflow: visible !important;   /* sticky se rompe si un ancestro recorta */
}

.contenedor-stick .stick1 {
    position: sticky;
    top: 0;
    z-index: 1;
}

.contenedor-stick .stick2 {
    position: relative;
    z-index: 2;
}

/* =========================================================
   Icono "timeline" (página El doctor): su tamaño está en vw y el SVG,
   por su proporción, sale más ancho que la pantalla y crea desborde
   horizontal. Se limita al ancho de su contenedor manteniendo la proporción.
   ========================================================= */
.elementor-widget.icon-timeline .elementor-icon svg {
    max-width: 100% !important;
}

/* Red de seguridad: la página nunca se desplaza en horizontal, aunque algún
   elemento sobresalga (iOS ignora el recorte del body si el html no lo tiene). */
html {
    overflow-x: clip;
}

/* =========================================================
   Imagen con parallax interno (.image-scroll-animated en un widget Imagen)
   El marco se queda quieto y recorta; la imagen, ampliada, se desplaza en
   vertical según el scroll. Animación ligada al scroll, sin JS.
   --parallax: recorrido en fracción del alto (0.12 = 12% arriba y 12% abajo).
   ========================================================= */
.elementor-widget-image.image-scroll-animated {
    --parallax: 0.12;
    /* clip recorta sin crear un contenedor de scroll: la animación ligada al
       scroll debe medirse contra la página, no contra este marco. */
    overflow: clip;
}

.elementor-widget-image.image-scroll-animated img {
    display: block;
    width: 100%;
    height: auto;
}

/* El radio de borde lo lleva el marco (el JS copia el que tenga la imagen
   en Elementor); la imagen, que se mueve, va sin radio. */
.elementor-widget-image.image-scroll-animated.has-frame-radius img {
    border-radius: 0 !important;
}

@supports (animation-timeline: view()) {
    .elementor-widget-image.image-scroll-animated img {
        will-change: transform;
        animation: ds-image-scroll linear both;
        animation-timeline: view();
        /* de que entra por abajo hasta que sale por arriba */
        animation-range: cover 0% cover 100%;
    }

    @keyframes ds-image-scroll {
        from { transform: translateY(calc(var(--parallax) * -100%)) scale(calc(1 + var(--parallax) * 2)); }
        to   { transform: translateY(calc(var(--parallax) * 100%)) scale(calc(1 + var(--parallax) * 2)); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-widget-image.image-scroll-animated img {
        animation: none;
        transform: none;
    }
}

/* =========================================================
   Gradiente beige animado (.gradiente-tratamientos)
   El canvas lo inserta gradient-mesh-beige.js. El contenido va encima.
   ========================================================= */
.gradiente-tratamientos {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #cfc2b1 !important;
}

.gradiente-tratamientos > .ds-gradient-mesh-canvas {
    position: absolute;
    z-index: 0;
    inset: -2.5%;
    display: block;
    width: 105%;
    height: 105%;
    pointer-events: none;
    filter: saturate(0.92) contrast(0.98);
}

/* Velo cálido: conserva el acabado mate de la referencia. */
.gradiente-tratamientos::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.04), transparent 45%),
        radial-gradient(circle at 50% 50%, transparent 55%, rgba(150, 130, 108, 0.10) 125%);
}

.gradiente-tratamientos > .e-con-inner {
    position: relative;
    z-index: 2;
}

/* =========================================================
   Gradiente celeste animado (.gradient-casos)
   El canvas lo inserta gradient-mesh-celeste.js. El contenido va encima.
   ========================================================= */
.gradient-casos {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #afc0d3 !important;
}

.gradient-casos > .ds-gradient-mesh-canvas {
    position: absolute;
    z-index: 0;
    inset: -2.5%;
    display: block;
    width: 105%;
    height: 105%;
    pointer-events: none;
    filter: saturate(0.97) contrast(0.98);
}

.gradient-casos::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 46%),
        radial-gradient(circle at center, transparent 64%, rgba(66, 99, 135, 0.035) 125%);
}

.gradient-casos > .e-con-inner {
    position: relative;
    z-index: 2;
}

/* Overlay de fondo de Elementor (::before, p. ej. un SVG) por encima del canvas animado */
.gradient-casos::before,
.gradiente-tratamientos::before {
    z-index: 1;
}

/* =========================================================
   Gradiente celeste claro animado (.gradiente-casosclinicos), base #E0EDF6
   El canvas lo inserta gradient-mesh-casos.js. El contenido va encima.
   ========================================================= */
.gradiente-casosclinicos {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #e0edf6 !important;
}

.gradiente-casosclinicos > .ds-gradient-mesh-canvas {
    position: absolute;
    z-index: 0;
    inset: -2.5%;
    display: block;
    width: 105%;
    height: 105%;
    pointer-events: none;
    filter: saturate(0.96) contrast(0.98);
}

.gradiente-casosclinicos::before {
    z-index: 1;
}

.gradiente-casosclinicos::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 45%),
        radial-gradient(circle at 50% 50%, transparent 58%, rgba(120, 156, 186, 0.08) 125%);
}

.gradiente-casosclinicos > .e-con-inner {
    position: relative;
    z-index: 2;
}

/* =========================================================
   Fondo de página animado (body.ds-page-mesh): canvas fijo detrás de todo,
   azul medio con velo uniforme. El script page-mesh.js inserta la capa.
   ========================================================= */
body.ds-page-mesh {
    background-color: #4f76a0 !important;
}

.ds-page-mesh__layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
    background: #587fa7;
}

.ds-page-mesh__layer canvas {
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1.05);
    filter: saturate(1.03) contrast(1.02) brightness(0.94);
}

/* Velo azul uniforme para que los textos blancos mantengan contraste */
.ds-page-mesh__layer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(17, 44, 72, 0.10), rgba(20, 49, 79, 0.16)),
        radial-gradient(circle at center, transparent 55%, rgba(15, 41, 69, 0.08) 125%);
}

/* Imagen de fondo del body (p. ej. un SVG), por encima del gradiente y debajo del contenido */
body.ds-page-mesh {
    position: relative;
}

.ds-page-mesh__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.ds-page-mesh__image.is-fixed {
    position: fixed;
}

/* El contenido del sitio por encima del fondo */
body.ds-page-mesh > *:not(.ds-page-mesh__layer):not(.ds-page-mesh__image):not(.ds-header) {
    position: relative;
    z-index: 1;
}

/* =========================================================
   Formulario (widget Formulario de Elementor con la clase ds-form)
   - campos sin contorno al enfocar
   - botón tipo píldora con icono de flecha en círculo
   ========================================================= */
.elementor-widget-form.ds-form {
    --ds-form-btn-bg: var(--e-global-color-db260d1, #091e35);
    --ds-form-btn-bg-hover: var(--e-global-color-accent, #073e7a);
    --ds-form-btn-color: #ffffff;
    --ds-form-btn-icon-bg: #4e6d80;
    --ds-form-btn-icon-color: #ffffff;
    --ds-form-btn-icon-size: 36px;
    --ds-form-btn-height: 54px;
}

/* Campos: sin contorno ni sombra al enfocar; solo cambia el borde */
.elementor-widget-form.ds-form .elementor-field:focus,
.elementor-widget-form.ds-form .elementor-field:focus-visible,
.elementor-widget-form.ds-form .elementor-field-textual:focus,
.elementor-widget-form.ds-form input:focus,
.elementor-widget-form.ds-form textarea:focus,
.elementor-widget-form.ds-form select:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--e-global-color-db260d1, #091e35);
}

/* Botón */
.elementor-widget-form.ds-form .elementor-button[type="submit"] {
    box-sizing: border-box;
    min-height: var(--ds-form-btn-height);
    padding: 9px 9px 9px 26px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--ds-form-btn-bg) !important;
    background-image: none !important;
    color: var(--ds-form-btn-color) !important;
    box-shadow: none !important;
    line-height: 1.2;
    transition: background-color 0.2s ease;
}

.elementor-widget-form.ds-form .elementor-button[type="submit"]:hover,
.elementor-widget-form.ds-form .elementor-button[type="submit"]:focus-visible {
    background: var(--ds-form-btn-bg-hover) !important;
    outline: none;
}

/* Texto a la izquierda e icono en la punta derecha; si el botón es ancho
   (móvil a 100%), el icono se queda en el extremo como en el resto de botones */
.elementor-widget-form.ds-form .elementor-button[type="submit"] .elementor-button-content-wrapper {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
}

.elementor-widget-form.ds-form .elementor-button[type="submit"] .elementor-button-text {
    flex: 1 1 auto;
}

.elementor-widget-form.ds-form .elementor-button[type="submit"] .elementor-button-text {
    display: inline-block;
}

/* Icono: flecha en círculo, sin configurar nada en el widget */
.elementor-widget-form.ds-form .elementor-button[type="submit"] .elementor-button-content-wrapper::after {
    content: "";
    flex: 0 0 auto;
    width: var(--ds-form-btn-icon-size);
    height: var(--ds-form-btn-icon-size);
    border-radius: 50%;
    background-color: var(--ds-form-btn-icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 46% auto;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none'><path d='M1 6h14m0 0-5-5m5 5-5 5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Si en el widget se activó un icono propio, no se duplica */
.elementor-widget-form.ds-form .elementor-button[type="submit"] .elementor-button-icon {
    display: none;
}

/* =========================================================
   Tamaño base de fuente fluido: todo lo que está en rem escala con el ancho
   de la pantalla. La recta (0.99vw - 2px) deja los portátiles como estaban y
   crece más en pantallas grandes:
     1280px → 10.7px · 1440px → 12.3px · 1600px → 13.8px
     1920px → 17px   · 2200px → 19.8px · desde 2220px → 20px (tope)
   ========================================================= */
html,
body {
    font-size: clamp(10px, 0.99vw - 2px, 20px);
}

/* =========================================================
   INTRO "VECTOR EYES®" (.vector-eyes)
   Contenedor vacío de Elementor con la clase `vector-eyes`. El JS de
   custom.js inyecta el escenario; toda la animación va atada al scroll
   (scroll-driven, 1:1, sin inercia).
   El bloque se solapa una pantalla con la sección anterior y otra con la
   siguiente (márgenes negativos), así el iris se abre por encima del final
   de la sección anterior y el azul se retira exactamente al ritmo que sube
   la sección siguiente. Sobre el recorrido en que queda fijo (`contain`):
     0–33%   la sección anterior termina de irse; el color base la sigue
             por debajo y la pantalla se va oscureciendo hasta el azul
     28–50%  entran las letras, escalonadas
     50–58%  se sostiene
     58–66%  la palabra se va
     67–100% el azul se retira hacia arriba al ritmo de la sección siguiente
   Variables editables (Elementor > Avanzado > CSS personalizado):
     --ve-length   alto total del contenedor (default 400svh)
     --ve-color    azul del fondo (default #091E35)
     --ve-glow     brillo del centro (default #24476C)
     --ve-text     color del texto (default #DEEDF6)
     --ve-size     tamaño de la palabra
     --ve-base     color de fondo detrás de la sección siguiente (default #DEEDF6)
   Texto: data-ve-title / data-ve-tagline en el contenedor (Avanzado >
   Atributos), o un widget Título dentro del contenedor.
   ========================================================= */
.vector-eyes {
    --ve-length: 400svh;
    --ve-color: var(--e-global-color-db260d1, #091E35);
    --ve-glow: #24476C;
    --ve-text: var(--e-global-color-primary, #DEEDF6);
    --ve-size: clamp(34px, 9vw, 150px);
    --ve-base: var(--e-global-color-primary, #DEEDF6);
    --ve-overlap: 100svh;
    position: relative;
    z-index: 0;
    /* El bloque se solapa con la sección anterior: no debe capturar clics ni hover */
    pointer-events: none;
}

.vector-eyes > .e-con-inner {
    display: none;
}

.vector-eyes .ve-intro {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    height: 100svh;
    height: 100dvh; /* sigue al viewport real del móvil cuando se oculta la barra del navegador */
    margin-inline: calc(50% - 50vw);
    display: grid;
    place-items: center;
    overflow: clip;
    isolation: isolate;
    background: transparent;
    pointer-events: none;
}

.vector-eyes .ve-intro__mask {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.vector-eyes .ve-intro__dive {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 60% at 50% 50%, var(--ve-glow) 0%, transparent 70%),
        var(--ve-color);
}

/* Móvil: el brillo como círculo (en pantallas altas el 60%/60% quedaba ovalado) */
@media (max-width: 767px) {
    .vector-eyes .ve-intro__dive {
        background:
            radial-gradient(circle 70vmin at 50% 50%, var(--ve-glow) 0%, transparent 70%),
            var(--ve-color);
    }
}

.vector-eyes .ve-intro__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(70vw, 70svh);
    aspect-ratio: 1;
    margin: calc(min(70vw, 70svh) / -2) 0 0 calc(min(70vw, 70svh) / -2);
    border: 1px solid color-mix(in srgb, var(--ve-text) 18%, transparent);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

.vector-eyes .ve-intro__ring--2 {
    width: min(110vw, 110svh);
    margin: calc(min(110vw, 110svh) / -2) 0 0 calc(min(110vw, 110svh) / -2);
    border-color: color-mix(in srgb, var(--ve-text) 10%, transparent);
}

.vector-eyes .ve-intro__word {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 20px;
    font-family: var(--e-global-typography-primary-font-family, "Fraunces"), serif;
    font-weight: 300;
    font-size: var(--ve-size);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ve-text);
    white-space: nowrap;
}

.vector-eyes .ve-intro__letter {
    display: inline-block;
    will-change: transform, opacity, filter;
}

.vector-eyes .ve-intro__space {
    display: inline-block;
    width: 0.3em;
}

.vector-eyes .ve-intro__reg {
    display: inline-block;
    font-size: 0.32em;
    vertical-align: top;
    margin-top: 0.18em;
    margin-left: 0.08em;
    letter-spacing: 0;
}

.vector-eyes .ve-intro__tagline {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(50% + var(--ve-size) * 0.9);
    transform: translateX(-50%);
    margin: 0;
    padding: 0 20px;
    font-size: clamp(12px, 1.1vw, 16px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    color: color-mix(in srgb, var(--ve-text) 70%, transparent);
    white-space: nowrap;
    opacity: 0;
}

.vector-eyes .ve-intro__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Animación ligada al scroll --- */
@supports (animation-timeline: view()) and (animation-range: contain 0% contain 100%) {
    .vector-eyes.is-ready {
        height: var(--ve-length);
        min-height: var(--ve-length);
        margin-top: calc(-1 * var(--ve-overlap));
        margin-bottom: calc(-1 * var(--ve-overlap));
        view-timeline-name: --ve-intro;
        view-timeline-axis: block;
    }

    /* Los rangos de la base y del oscurecido los fija el JS según el solape real */
    /* El color base lo pinta el propio contenedor, transparente en la franja
       que se solapa con la sección anterior (misma unidad que el margen, así
       el borde coincide exacto con el final de esa sección) y color base
       debajo, que es lo que se ve a través de la sección siguiente. */
    .vector-eyes.is-ready {
        background-image: linear-gradient(to bottom, transparent var(--ve-overlap), var(--ve-base) var(--ve-overlap));
        background-repeat: no-repeat;
    }

    .vector-eyes.is-ready .ve-intro {
        position: sticky;
        top: 0;
    }

    .vector-eyes.is-ready .ve-intro__dive {
        animation: ve-dive linear both;
        animation-timeline: --ve-intro;
        animation-range: contain 5% contain 36%;
    }

    /* La salida (inset que sube) la fija el JS según el solape real */
    .vector-eyes.is-ready .ve-intro__mask {
        animation: ve-wipe linear both;
        animation-timeline: --ve-intro;
        animation-range: contain 67% contain 100%;
    }

    .vector-eyes.is-ready .ve-intro__ring {
        animation: ve-ring linear both;
        animation-timeline: --ve-intro;
        animation-range: contain 0% contain 100%;
    }

    .vector-eyes.is-ready .ve-intro__ring--2 {
        animation-name: ve-ring-2;
    }

    .vector-eyes.is-ready .ve-intro__word {
        animation: ve-word-out linear both;
        animation-timeline: --ve-intro;
        animation-range: contain 58% contain 66%;
    }

    .vector-eyes.is-ready .ve-intro__letter {
        animation: ve-letter-in linear both;
        animation-timeline: --ve-intro;
        /* animation-range por letra lo pone el JS (escalonado) */
    }

    .vector-eyes.is-ready .ve-intro__tagline {
        animation: ve-tagline linear both;
        animation-timeline: --ve-intro;
        animation-range: contain 34% contain 62%;
    }
}

@keyframes ve-dive {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ve-wipe {
    from { clip-path: inset(0 0 0 0); }
    to   { clip-path: inset(0 0 100% 0); }
}

@keyframes ve-ring {
    0%   { transform: scale(0.35); opacity: 0; }
    30%  { opacity: 0.9; }
    52%  { opacity: 0.9; }
    64%  { opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes ve-ring-2 {
    0%   { transform: scale(0.2); opacity: 0; }
    34%  { opacity: 0.8; }
    52%  { opacity: 0.8; }
    64%  { opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}

@keyframes ve-letter-in {
    from { opacity: 0; transform: translateY(0.35em); filter: blur(10px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes ve-word-out {
    from { opacity: 1; scale: 1; filter: blur(0); }
    to   { opacity: 0; scale: 0.92; filter: blur(8px); }
}

@keyframes ve-tagline {
    0%   { opacity: 0; transform: translate(-50%, 12px); }
    30%  { opacity: 1; transform: translate(-50%, 0); }
    75%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -8px); }
}

/* Navegadores sin animaciones ligadas al scroll (Safari anterior a 26):
   el JS (custom.js) reproduce las mismas animaciones moviendo su currentTime
   con el scroll. Mismas reglas de alto/solape/sticky que arriba. */
.vector-eyes.is-js-driven {
    height: var(--ve-length);
    min-height: var(--ve-length);
    margin-top: calc(-1 * var(--ve-overlap));
    margin-bottom: calc(-1 * var(--ve-overlap));
    background-image: linear-gradient(to bottom, transparent var(--ve-overlap), var(--ve-base) var(--ve-overlap));
    background-repeat: no-repeat;
}

.vector-eyes.is-js-driven .ve-intro {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.vector-eyes.is-js-driven .ve-intro__dive { animation: ve-dive 1s linear both paused; }
.vector-eyes.is-js-driven .ve-intro__mask { animation: ve-wipe 1s linear both paused; }
.vector-eyes.is-js-driven .ve-intro__ring { animation: ve-ring 1s linear both paused; }
.vector-eyes.is-js-driven .ve-intro__ring--2 { animation-name: ve-ring-2; }
.vector-eyes.is-js-driven .ve-intro__word { animation: ve-word-out 1s linear both paused; }
.vector-eyes.is-js-driven .ve-intro__letter { animation: ve-letter-in 1s linear both paused; }
.vector-eyes.is-js-driven .ve-intro__tagline { animation: ve-tagline 1s linear both paused; }

/* Sin soporte de scroll-driven o con reduced motion: bloque estático */
@media (prefers-reduced-motion: reduce) {
    .vector-eyes.is-ready,
    .vector-eyes.is-js-driven {
        height: auto;
        min-height: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .vector-eyes.is-ready .ve-intro {
        position: relative;
    }

    .vector-eyes.is-ready .ve-intro,
    .vector-eyes.is-ready .ve-intro__mask,
    .vector-eyes.is-ready .ve-intro__dive,
    .vector-eyes.is-ready .ve-intro__ring,
    .vector-eyes.is-ready .ve-intro__word,
    .vector-eyes.is-ready .ve-intro__letter,
    .vector-eyes.is-ready .ve-intro__tagline {
        animation: none;
    }

    .vector-eyes.is-ready .ve-intro__ring {
        opacity: 0.8;
    }

    .vector-eyes.is-ready .ve-intro__tagline {
        opacity: 1;
    }
}

/* =========================================================
   ANATOMÍA DE LA MIRADA (.anatomia-mirada)
   Contenedor de Elementor con la clase `anatomia-mirada`. Foto fija a
   pantalla completa y, con el scroll, van apareciendo los puntos: un
   marcador, una línea que se dibuja y una ficha con título y texto.
   Todo scroll-driven (1:1, sin inercia).
   Contenido editable:
     - Foto: un widget Imagen dentro del contenedor (si no hay, usa la del hero).
     - Puntos: contenedores hijos con la clase `am-punto`, cada uno con un
       Título y un Texto, y en Avanzado > Atributos `data-x|55` y `data-y|40`
       (posición en % sobre la foto). Si no hay ninguno, usa 5 de ejemplo.
     - Cabecera: atributos data-am-eyebrow, data-am-title, data-am-intro.
   Variables (Avanzado > CSS personalizado): --am-color (fondo/scrim),
   --am-text, --am-accent (marcadores), --am-line (largo de la línea),
   --am-step (scroll por punto, default 70svh).
   ========================================================= */
.anatomia-mirada {
    --am-color: var(--e-global-color-db260d1, #091E35);
    --am-text: var(--e-global-color-primary, #DEEDF6);
    --am-accent: #DEEDF6;
    --am-line: 120px;
    --am-step: 70svh;
    --am-settle: 0.45;
    position: relative;
    z-index: 0;
}

.anatomia-mirada > .e-con-inner {
    display: none;
}

.anatomia-mirada .am-stage {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    height: 100svh;
    margin-inline: calc(50% - 50vw);
    overflow: clip;
    isolation: isolate;
    background: var(--am-color);
    color: var(--am-text);
}

.anatomia-mirada .am-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.anatomia-mirada .am-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--am-focus, 60% 50%);
    display: block;
    transform-origin: 55% 50%;
}

.anatomia-mirada .am-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--am-color) 78%, transparent) 0%, color-mix(in srgb, var(--am-color) 25%, transparent) 45%, transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--am-color) 55%, transparent) 0%, transparent 30%, transparent 70%, color-mix(in srgb, var(--am-color) 65%, transparent) 100%);
    pointer-events: none;
}

.anatomia-mirada .am-head {
    position: absolute;
    z-index: 3;
    left: clamp(20px, 6vw, 96px);
    top: clamp(96px, 16svh, 160px);
    max-width: min(34rem, 40vw);
}

.anatomia-mirada .am-head__eyebrow {
    margin: 0 0 14px;
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.75;
}

.anatomia-mirada .am-head__title {
    margin: 0;
    font-family: var(--e-global-typography-primary-font-family, "Fraunces"), serif;
    font-weight: 300;
    font-size: clamp(30px, 3.6vw, 58px);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--am-text);
}

.anatomia-mirada .am-head__intro {
    margin: 18px 0 0;
    max-width: 26rem;
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.6;
    opacity: 0.85;
}

.anatomia-mirada .am-progress {
    position: absolute;
    z-index: 3;
    left: clamp(20px, 6vw, 96px);
    bottom: clamp(28px, 6svh, 64px);
    width: 1px;
    height: clamp(80px, 18svh, 160px);
    background: color-mix(in srgb, var(--am-text) 22%, transparent);
}

.anatomia-mirada .am-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--am-accent);
    transform-origin: top;
    transform: scaleY(0);
}

.anatomia-mirada .am-counter {
    position: absolute;
    z-index: 3;
    left: calc(clamp(20px, 6vw, 96px) + 16px);
    bottom: clamp(28px, 6svh, 64px);
    font-size: 12px;
    letter-spacing: 0.18em;
    opacity: 0.7;
}

/* --- Marcadores --- */
.anatomia-mirada .am-punto {
    position: absolute;
    z-index: 2;
    left: var(--x);
    top: var(--y);
    width: 0;
    height: 0;
}

.anatomia-mirada .am-punto__dot {
    position: absolute;
    left: -6px;
    top: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--am-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--am-color) 60%, transparent);
}

.anatomia-mirada .am-punto__pulse {
    position: absolute;
    left: -18px;
    top: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--am-accent);
    opacity: 0.6;
}

.anatomia-mirada .am-punto__line {
    position: absolute;
    top: 0;
    left: 6px;
    width: var(--am-line);
    height: 1px;
    background: var(--am-accent);
    transform-origin: left center;
}

.anatomia-mirada .am-punto.is-left .am-punto__line {
    left: auto;
    right: 6px;
    transform-origin: right center;
}

.anatomia-mirada .am-card {
    position: absolute;
    z-index: 3;
    left: calc(var(--x) + var(--am-line) + 22px);
    top: var(--y);
    transform: translateY(-50%);
    box-sizing: border-box;
    width: min(20rem, 30vw);
    padding: 14px 16px 16px;
    border-left: 1px solid color-mix(in srgb, var(--am-accent) 60%, transparent);
    background: color-mix(in srgb, var(--am-color) 55%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.anatomia-mirada .am-card.is-left {
    left: auto;
    right: calc(100% - var(--x) + var(--am-line) + 22px);
    border-left: 0;
    border-right: 1px solid color-mix(in srgb, var(--am-accent) 60%, transparent);
    text-align: right;
}

.anatomia-mirada .am-card__num {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 0.2em;
    opacity: 0.7;
}

.anatomia-mirada .am-card__title {
    margin: 0 0 6px;
    font-family: var(--e-global-typography-primary-font-family, "Fraunces"), serif;
    font-weight: 300;
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--am-text);
}

.anatomia-mirada .am-card__text {
    margin: 0;
    font-size: clamp(12px, 0.95vw, 14px);
    line-height: 1.55;
    opacity: 0.85;
}

.anatomia-mirada .am-card__text p {
    margin: 0;
}

.anatomia-mirada .am-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Móvil: ficha abajo, sin líneas --- */
@media (max-width: 767px) {
    .anatomia-mirada {
        --am-settle: 0;
    }

    .anatomia-mirada .am-head {
        max-width: calc(100vw - 40px);
        top: 100px;
    }

    .anatomia-mirada .am-head__intro {
        display: none;
    }

    .anatomia-mirada .am-punto__line,
    .anatomia-mirada .am-counter {
        display: none;
    }

    .anatomia-mirada .am-card,
    .anatomia-mirada .am-card.is-left {
        left: 20px;
        right: 20px;
        top: auto;
        bottom: 84px;
        transform: none;
        width: auto;
        text-align: left;
        border-right: 0;
        border-left: 1px solid color-mix(in srgb, var(--am-accent) 60%, transparent);
    }
}

/* --- Animación ligada al scroll (rangos por punto los pone el JS) --- */
@supports (animation-timeline: view()) and (animation-range: contain 0% contain 100%) {
    .anatomia-mirada.is-ready {
        view-timeline-name: --am;
        view-timeline-axis: block;
    }

    .anatomia-mirada.is-ready .am-stage {
        position: sticky;
        top: 0;
    }

    .anatomia-mirada.is-ready .am-media img {
        animation: am-zoom linear both;
        animation-timeline: --am;
        animation-range: contain 0% contain 100%;
    }

    .anatomia-mirada.is-ready .am-head {
        animation: am-fade-up linear both;
        animation-timeline: --am;
        animation-range: contain 0% contain 8%;
    }

    .anatomia-mirada.is-ready .am-progress::after {
        animation: am-grow linear both;
        animation-timeline: --am;
        animation-range: contain 8% contain 94%;
    }

    .anatomia-mirada.is-ready .am-punto__dot,
    .anatomia-mirada.is-ready .am-punto__pulse {
        animation: am-pop linear both;
        animation-timeline: --am;
    }

    .anatomia-mirada.is-ready .am-punto__pulse {
        animation-name: am-pulse;
    }

    .anatomia-mirada.is-ready .am-punto__line {
        animation: am-draw linear both;
        animation-timeline: --am;
    }

    .anatomia-mirada.is-ready .am-card {
        animation: am-fade-up linear both;
        animation-timeline: --am;
    }

    /* Al pasar al siguiente punto, el anterior se atenúa (en móvil se oculta) */
    .anatomia-mirada.is-ready .am-punto,
    .anatomia-mirada.is-ready .am-card__inner {
        animation: am-settle linear both;
        animation-timeline: --am;
    }

    .anatomia-mirada.is-ready .am-counter__n {
        animation: am-count linear both;
        animation-timeline: --am;
    }
}

@keyframes am-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

@keyframes am-fade-up {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes am-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes am-pop {
    from { opacity: 0; scale: 0.2; }
    to   { opacity: 1; scale: 1; }
}

@keyframes am-pulse {
    0%   { opacity: 0; scale: 0.3; }
    50%  { opacity: 0.7; }
    100% { opacity: 0; scale: 1.9; }
}

@keyframes am-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes am-settle {
    from { opacity: 1; }
    to   { opacity: var(--am-settle); }
}

@keyframes am-count {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; }
}

.anatomia-mirada .am-counter {
    display: grid;
}

.anatomia-mirada .am-counter__n {
    grid-area: 1 / 1;
}

.anatomia-mirada.is-ready .am-counter__n {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .anatomia-mirada.is-ready {
        height: auto !important;
        min-height: 0;
    }

    .anatomia-mirada.is-ready .am-stage {
        position: relative;
    }

    .anatomia-mirada.is-ready .am-media img,
    .anatomia-mirada.is-ready .am-head,
    .anatomia-mirada.is-ready .am-progress::after,
    .anatomia-mirada.is-ready .am-punto,
    .anatomia-mirada.is-ready .am-punto__dot,
    .anatomia-mirada.is-ready .am-punto__pulse,
    .anatomia-mirada.is-ready .am-punto__line,
    .anatomia-mirada.is-ready .am-card,
    .anatomia-mirada.is-ready .am-card__inner,
    .anatomia-mirada.is-ready .am-counter__n {
        animation: none;
    }

    .anatomia-mirada.is-ready .am-punto__pulse,
    .anatomia-mirada.is-ready .am-counter__n:not(:last-child) {
        display: none;
    }

    .anatomia-mirada.is-ready .am-counter__n {
        opacity: 1;
    }
}

/* =========================================================
   F y J mayúsculas de Fraunces
   Fraunces no trae alternativas para la F y la J mayúsculas y sus formas
   resultan demasiado "góticas". Se define la familia "Fraunces FJ", que solo
   contiene esos dos caracteres (unicode-range) tomados de Newsreader, una
   serif de contraste y peso muy parecidos cuya J apoya en la línea base,
   escalada para igualar la altura de mayúsculas. El JS de custom.js antepone "Fraunces FJ" a todas las reglas
   que usan Fraunces (tipografías globales de Elementor, widgets con la fuente
   puesta a mano y CSS del theme), así el navegador toma F y J de aquí y el
   resto de letras de Fraunces. Para probar otra fuente, cambiar las url.
   ========================================================= */
@font-face {
    font-family: "Fraunces FJ";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    size-adjust: 98%;
    src: url("https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK4397yjIJFJpc.woff2") format("woff2");
    unicode-range: U+0046, U+004A; /* F, J */
}

@font-face {
    font-family: "Fraunces FJ";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    size-adjust: 98%;
    src: url("https://fonts.gstatic.com/s/newsreader/v26/cY9CfjOCX1hbuyalUrK439vCjohCBJWxZA.woff2") format("woff2");
    unicode-range: U+0046, U+004A; /* F, J */
}

/* =========================================================
   Clases de visibilidad (Elementor > Avanzado > Clases CSS)
   Mismos cortes que Elementor: móvil ≤767px, tablet 768–1024px,
   escritorio ≥1025px.
     ocultar-mobile     no se ve en móvil
     ocultar-tablet     no se ve en tablet
     ocultar-desktop    no se ve en escritorio
   Se pueden combinar (p. ej. "ocultar-tablet ocultar-desktop" = solo móvil).
   ========================================================= */
@media (max-width: 767px) {
    .ocultar-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .ocultar-tablet {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .ocultar-desktop {
        display: none !important;
    }
}

/* Botones anchos en móvil (clase btn-custom-mobile en Avanzado > Clases CSS) */
@media (max-width: 768px) {
    .btn-custom-mobile,
    .btn-custom-mobile .elementor-button {
        min-width: 24rem;
    }
}

/* =========================================================
   Transición entre páginas: parpadeo
   Una capa fija (body::before) del color de la marca con un "ojo" recortado
   en el centro (máscara elíptica más ancha que la pantalla, así los extremos
   quedan afinados). Al cargar la página el ojo se abre desde una línea
   horizontal (animación CSS, sin depender del JS); al hacer clic en un enlace
   interno, custom.js añade `ds-blink-closing` al <html>, el ojo se cierra y
   recién entonces se navega.
   Variables: --blink-color, --blink-open (duración), --blink-close,
   --blink-width (ancho del ojo; más ancho = extremos menos afilados).
   ========================================================= */
:root {
    --blink-color: var(--e-global-color-db260d1, #091e35);
    --blink-open: 0.6s;
    --blink-close: 0.45s;
    --blink-width: 112vw;       /* ancho del ojo al final (abierto del todo) */
    --blink-width-start: 112vw; /* ancho del ojo mientras se abre (puntas en los bordes) */
    --blink-height: 180vh;      /* alto del ojo totalmente abierto (mayor que la pantalla) */
    --blink-height-mid: 45vh;   /* alto al 25 % de la animación (en escritorio = lineal) */
}

/* Pantallas verticales (móvil/tablet): la pantalla es más alta que ancha y la
   elipse se veía como un óvalo vertical. Aquí el ojo se abre primero con las
   puntas en los bordes (hasta 50vw de alto, proporción de ojo) y después crece
   también a lo ancho, como un párpado de cerca, hasta descubrir las esquinas. */
@media (orientation: portrait) {
    :root {
        --blink-width-start: 112vw;
        --blink-width: 400vw;
        --blink-height: 140vh;
        --blink-height-mid: 50vw;
    }
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 200000;
        background: var(--blink-color);
        pointer-events: none;
        /* capa 1: todo; capa 2: la elipse. Se restan: queda todo menos el ojo */
        -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(50% 50% at 50% 50%, #000 99.4%, transparent 100%);
        mask-image: linear-gradient(#000, #000), radial-gradient(50% 50% at 50% 50%, #000 99.4%, transparent 100%);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: 0 0, center center;
        mask-position: 0 0, center center;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: ds-blink-open var(--blink-open) cubic-bezier(0.22, 0.61, 0.36, 1) 0.06s both;
    }

    html.ds-blink-closing body::before {
        animation: ds-blink-close var(--blink-close) cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    /* página prerenderizada en segundo plano (inc/setup/speculation.php):
       el ojo espera cerrado hasta que la página se muestra de verdad */
    html.ds-prerendering body::before {
        animation-play-state: paused;
    }

    /* sin transición en el editor de Elementor ni con "reducir movimiento" */
    body.elementor-editor-active::before {
        display: none;
    }

    @media (prefers-reduced-motion: reduce) {
        body::before {
            display: none;
        }
    }
}

@keyframes ds-blink-open {
    0% {
        -webkit-mask-size: 100% 100%, var(--blink-width-start) 0vh;
        mask-size: 100% 100%, var(--blink-width-start) 0vh;
        visibility: visible;
    }
    25% {
        -webkit-mask-size: 100% 100%, var(--blink-width-start) var(--blink-height-mid);
        mask-size: 100% 100%, var(--blink-width-start) var(--blink-height-mid);
    }
    100% {
        -webkit-mask-size: 100% 100%, var(--blink-width) var(--blink-height);
        mask-size: 100% 100%, var(--blink-width) var(--blink-height);
        visibility: hidden;
    }
}

@keyframes ds-blink-close {
    0% {
        -webkit-mask-size: 100% 100%, var(--blink-width) var(--blink-height);
        mask-size: 100% 100%, var(--blink-width) var(--blink-height);
        visibility: visible;
    }
    75% {
        -webkit-mask-size: 100% 100%, var(--blink-width-start) var(--blink-height-mid);
        mask-size: 100% 100%, var(--blink-width-start) var(--blink-height-mid);
    }
    100% {
        -webkit-mask-size: 100% 100%, var(--blink-width-start) 0vh;
        mask-size: 100% 100%, var(--blink-width-start) 0vh;
        visibility: visible;
    }
}

/* =========================================================
   HERO VECTOR EYES (.vector-eyes-hero)
   Contenedor de Elementor con un Título y un Texto. custom.js añade:
   un iris (canvas con fibras que reaccionan al cursor), el eyebrow, el
   título partido en palabras que convergen desde el iris con haces de luz,
   y el desenfoque/zoom al hacer scroll.
   Variables: --veh-bg, --veh-glow, --veh-text, --veh-accent, --veh-iris
   (tamaño), data-veh-eyebrow en el contenedor para el texto pequeño.
   ========================================================= */
.vector-eyes-hero {
    --veh-bg: var(--e-global-color-db260d1, #091e35);
    --veh-glow: #24476c;
    --veh-text: #ffffff;
    --veh-accent: var(--e-global-color-primary, #deedf6);
    --veh-iris: min(88vmin, 820px);
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(70% 60% at 50% 50%, color-mix(in srgb, var(--veh-glow) 55%, transparent) 0%, transparent 70%),
        radial-gradient(40% 40% at 15% 20%, color-mix(in srgb, var(--veh-glow) 30%, transparent) 0%, transparent 70%),
        var(--veh-bg);
    color: var(--veh-text);
}

.vector-eyes-hero > .e-con-inner {
    position: relative;
    z-index: 2;
}

/* sombra suave detrás del bloque de texto para que se lea sobre el iris */
.vector-eyes-hero > .e-con-inner::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(110%, 1100px);
    height: 110%;
    transform: translate(-50%, -50%);
    background: radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--veh-bg) 78%, transparent) 0%, color-mix(in srgb, var(--veh-bg) 45%, transparent) 55%, transparent 100%);
    filter: blur(20px);
    z-index: -1;
    pointer-events: none;
}

/* ---- iris ---- */
.veh-iris {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: var(--veh-iris);
    height: var(--veh-iris);
    margin: calc(var(--veh-iris) / -2) 0 0 calc(var(--veh-iris) / -2);
    border-radius: 50%;
    pointer-events: none;
    transform: translate3d(var(--veh-px, 0px), var(--veh-py, 0px), 0);
    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    animation: veh-iris-in 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
}

.veh-iris canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* halo suave detrás del iris */
.veh-iris::before {
    content: "";
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--veh-accent) 22%, transparent) 0%, transparent 60%);
    filter: blur(18px);
    z-index: -1;
}

@keyframes veh-iris-in {
    from { opacity: 0; scale: 0.7; filter: blur(24px); }
    to   { opacity: 1; scale: 1; filter: blur(0); }
}

/* ---- textos ---- */
.vector-eyes-hero .elementor-widget-heading,
.vector-eyes-hero .elementor-widget-text-editor {
    position: relative;
    z-index: 2;
}

.veh-eyebrow {
    display: block;
    margin: 0 0 22px;
    font-family: var(--e-global-typography-text-font-family, "Geist"), sans-serif;
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--veh-accent);
    letter-spacing: 0.6em;
    opacity: 0;
    animation: veh-eyebrow 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s forwards;
}

@keyframes veh-eyebrow {
    from { opacity: 0; letter-spacing: 0.6em; }
    to   { opacity: 0.85; letter-spacing: 0.24em; }
}

.vector-eyes-hero h1.elementor-heading-title {
    text-shadow: 0 2px 40px rgba(9, 30, 53, 0.6);
}

.veh-word {
    display: inline-block;
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0) scale(1.18);
    filter: blur(14px);
    text-shadow: -0.06em 0 0 color-mix(in srgb, var(--veh-accent) 80%, transparent), 0.06em 0 0 rgba(255, 255, 255, 0.55);
    animation: veh-word 1.15s cubic-bezier(0.16, 1, 0.3, 1) var(--wd, 0s) forwards;
    will-change: transform, filter, opacity;
}

.veh-word.is-key {
    color: var(--veh-accent);
}

@keyframes veh-word {
    0%   { opacity: 0; transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0) scale(1.18); filter: blur(14px); text-shadow: -0.06em 0 0 color-mix(in srgb, var(--veh-accent) 80%, transparent), 0.06em 0 0 rgba(255, 255, 255, 0.55); }
    55%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); text-shadow: 0 0 0 transparent, 0 0 0 transparent; }
}

/* haz de luz que empuja cada palabra desde el iris */
.veh-beam {
    position: absolute;
    z-index: 1;
    left: var(--bx);
    top: var(--by);
    width: var(--bl);
    height: 3px;
    margin-top: -1.5px;
    transform-origin: 0 50%;
    transform: rotate(var(--ba)) scaleX(0);
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--veh-accent) 90%, transparent) 60%, #ffffff 100%);
    filter: blur(1.5px);
    box-shadow: 0 0 18px color-mix(in srgb, var(--veh-accent) 70%, transparent);
    opacity: 0;
    pointer-events: none;
    animation: veh-beam 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--bd, 0s) forwards;
}

@keyframes veh-beam {
    0%   { opacity: 0; transform: rotate(var(--ba)) scaleX(0); }
    35%  { opacity: 1; }
    70%  { opacity: 0.9; transform: rotate(var(--ba)) scaleX(1); }
    100% { opacity: 0; transform: rotate(var(--ba)) scaleX(1); }
}

.vector-eyes-hero .elementor-widget-text-editor {
    opacity: 0;
    animation: veh-fade-up 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) var(--veh-desc-delay, 1.3s) forwards;
}

@keyframes veh-fade-up {
    from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ---- al hacer scroll: te metés en el iris, el texto se aleja ---- */
@supports (animation-timeline: view()) {
    .vector-eyes-hero.is-ready {
        view-timeline-name: --veh;
        view-timeline-axis: block;
    }

    .vector-eyes-hero.is-ready.is-in .veh-iris {
        animation: veh-iris-zoom linear both;
        animation-timeline: --veh;
        animation-range: exit 0% exit 75%;
    }

    .vector-eyes-hero.is-ready.is-in > .e-con-inner {
        animation: veh-copy-out linear both;
        animation-timeline: --veh;
        animation-range: exit 0% exit 70%;
    }
}

/* al bajar el iris crece un poco, se desenfoca y se disuelve antes de llegar
   al borde de la sección, así nunca se ve cortado */
@keyframes veh-iris-zoom {
    0%   { scale: 1; opacity: 1; filter: blur(0); translate: 0 0; }
    45%  { opacity: 0.75; }
    100% { scale: 1.6; opacity: 0; filter: blur(28px); translate: 0 -45vh; }
}

@keyframes veh-copy-out {
    from { opacity: 1; transform: translateY(0); filter: blur(0); }
    to   { opacity: 0; transform: translateY(-12vh); filter: blur(10px); }
}

@media (max-width: 767px) {
    .vector-eyes-hero {
        --veh-iris: 96vw;
    }

    .veh-beam {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .veh-iris,
    .veh-eyebrow,
    .veh-word,
    .veh-beam,
    .vector-eyes-hero .elementor-widget-text-editor,
    .vector-eyes-hero.is-ready.is-in .veh-iris,
    .vector-eyes-hero.is-ready.is-in > .e-con-inner {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
        text-shadow: none;
    }

    .veh-beam {
        display: none;
    }
}

/* =========================================================
   TEXTO QUE SE ESCRIBE CON EL SCROLL (.animacion-texto)
   Contenedor con un widget de Texto. custom.js parte los párrafos en
   palabras y reparte a cada una un tramo del recorrido de la sección: se
   van encendiendo en orden, palabra a palabra, ligado 1:1 al scroll.
   No toca tipografía, colores ni espaciados: eso queda en Elementor.
   Variable: --at-dim (opacidad de las palabras aún no escritas, 0 = invisibles).
   ========================================================= */
.animacion-texto {
    --at-dim: 0;
}

.animacion-texto.is-ready {
    view-timeline-name: --at;
    view-timeline-axis: block;
}

.animacion-texto.is-ready .at-word {
    opacity: var(--at-dim);
}

.animacion-texto.is-ready .at-word.is-on {
    opacity: 1;
}

@supports (animation-timeline: view()) {
    .animacion-texto.is-ready .at-word {
        animation: at-reveal linear both;
        animation-timeline: --at;
        /* animation-range por palabra: lo pone custom.js */
    }
}

@keyframes at-reveal {
    from { opacity: var(--at-dim); }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .animacion-texto.is-ready .at-word {
        animation: none;
        opacity: 1;
    }
}

/* ==========================================================================
   VECTOR PROCEDIMIENTOS
   Columna izquierda sticky + lista de la derecha con checks y una línea
   por grupo (cada título abre un grupo) que se va rellenando con el scroll.
   El progreso lo pone custom.js en --vp-fill (0 → 1), estrictamente 1:1.
   ========================================================================== */
.vector-procedimientos {
    --vp-top: 8rem;                       /* distancia al borde superior del sticky */
    --vp-icon: 1.5rem;                    /* diámetro del check */
    --vp-gap: 1rem;                       /* espacio check → texto */
    --vp-track: color-mix(in srgb, var(--e-global-color-text, #074B94) 18%, transparent);
    --vp-on: var(--e-global-color-accent, #073E7A);
    --vp-dim: 0.55;                       /* opacidad del texto todavía no marcado */
}

.vector-procedimientos > .e-con-inner {
    align-items: flex-start;
}

.vector-procedimientos .col-izq-procedimientos {
    position: sticky !important;
    top: var(--vp-top);
    align-self: flex-start;
}

.vector-procedimientos .col-der-procedimientos {
    position: relative;
}

.vector-procedimientos .vp-item {
    position: relative;
    padding-left: calc(var(--vp-icon) + var(--vp-gap));
    opacity: var(--vp-dim);
    transition: opacity .25s ease;
}

.vector-procedimientos .vp-item.is-on {
    opacity: 1;
}

.vector-procedimientos .vp-check {
    position: absolute;
    left: 0;
    top: 0;
    height: 1lh;
    width: var(--vp-icon);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.vector-procedimientos .vp-check svg {
    width: var(--vp-icon);
    height: var(--vp-icon);
    display: block;
    border-radius: 50%;
    background: var(--vp-bg, transparent);
    box-shadow: inset 0 0 0 1.5px var(--vp-track);
    color: transparent;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.vector-procedimientos .vp-item.is-on .vp-check svg {
    background: var(--vp-on);
    box-shadow: inset 0 0 0 1.5px var(--vp-on);
    color: #fff;
}

/* Línea de cada grupo: fondo tenue + relleno que crece con el scroll */
.vector-procedimientos .vp-line {
    position: absolute;
    width: 1.5px;
    background: var(--vp-track);
    pointer-events: none;
    z-index: 0;
}

.vector-procedimientos .vp-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vp-on);
    transform-origin: top;
    transform: scaleY(var(--vp-fill, 0));
}

.vector-procedimientos .vp-check {
    z-index: 1;
}

@media (max-width: 1024px) {
    .vector-procedimientos .col-izq-procedimientos {
        position: relative !important;
        top: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vector-procedimientos .vp-item,
    .vector-procedimientos .vp-check svg {
        transition: none;
    }
}