/*
Estudio One · website-refresh.css  (v2)
Capa de identidad del sitio público. Se carga después de website.css.

Qué cambió respecto a la v1, que rompió cosas:

  · Los accesos rápidos, el selector de tema y la barra móvil ya no se tocan.
    En la v1 los pinté sin haber leído su marcado y quedaron ilegibles.
  · El pie ya no depende de --eo-ink, que se invierte en modo oscuro y hacía
    que el fondo se volviera claro con el texto blanco encima.
  · Los contenedores de imagen ya no llevan overflow:hidden, que recortaba la
    marca de encuadre del isotipo.
  · Se recupera y se extiende esa marca de encuadre como recurso de marca.

Para revertir: comentar el bloque $refresh_css_file en functions.php.
*/

/* =========================================================
   1. TOKENS
========================================================= */

.eo-site,
.eo-site[data-theme="light"] {
    --eo-paper: #fbfaf7;
    --eo-paper-2: #f2efe9;
    --eo-mat: #ffffff;
    --eo-ink: #191410;
    --eo-ink-soft: #574e47;
    --eo-ink-faint: #837b75;
    --eo-ember: #c2470c;
    --eo-ember-bright: #e2570f;
    --eo-clay: #8a6a50;
    --eo-line: rgba(25, 20, 16, .14);
    --eo-line-soft: rgba(25, 20, 16, .08);

    --eo-lift: 0 1px 2px rgba(25, 20, 16, .05), 0 12px 28px -12px rgba(25, 20, 16, .16);
    --eo-lift-high: 0 2px 4px rgba(25, 20, 16, .05), 0 32px 64px -24px rgba(25, 20, 16, .26);

    --eo-ease: cubic-bezier(.22, .61, .36, 1);
    --eo-ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Puentes hacia los nombres antiguos. */
    --eo-bg: var(--eo-paper);
    --eo-bg-soft: var(--eo-paper-2);
    --eo-bg-card: var(--eo-mat);
    --eo-bg-elevated: var(--eo-paper-2);
    --eo-text: var(--eo-ink);
    --eo-text-soft: var(--eo-ink-soft);
    --eo-text-muted: var(--eo-ink-faint);
    --eo-primary: var(--eo-ember);
    --eo-primary-hover: var(--eo-ember-bright);
    --eo-primary-text: #ffffff;
    --eo-border: var(--eo-line);
    --eo-border-strong: rgba(25, 20, 16, .28);
    --eo-header-bg: rgba(251, 250, 247, .84);
    --eo-shadow: var(--eo-lift);
}

.eo-site[data-theme="dark"] {
    --eo-paper: #141110;
    --eo-paper-2: #1c1816;
    --eo-mat: #221d1a;
    --eo-ink: #f7f3ee;
    --eo-ink-soft: #bdb4ac;
    --eo-ink-faint: #948a83;
    --eo-ember: #ff7a3c;
    --eo-ember-bright: #ff9560;
    --eo-clay: #c19c79;
    --eo-line: rgba(255, 248, 240, .15);
    --eo-line-soft: rgba(255, 248, 240, .08);

    --eo-lift: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -12px rgba(0, 0, 0, .6);
    --eo-lift-high: 0 2px 4px rgba(0, 0, 0, .3), 0 32px 64px -24px rgba(0, 0, 0, .75);

    --eo-primary-text: #170e08;
    --eo-border-strong: rgba(255, 248, 240, .32);
    --eo-header-bg: rgba(20, 17, 16, .84);
}

/* =========================================================
   2. TIPOGRAFÍA
========================================================= */

body.eo-website,
body.eo-website button,
body.eo-website input,
body.eo-website textarea,
body.eo-website select {
    font-family: "Instrument Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.eo-website { background: var(--eo-paper); color: var(--eo-ink); }
.eo-site { background: var(--eo-paper); color: var(--eo-ink); }

.eo-hero__title,
.eo-section-title,
.eo-section-title h2,
.eo-catalog-heading h2,
.eo-public-hero h1,
.eo-service-hero h1,
.eo-about-story h2,
.eo-contact-info h2,
.eo-package-card h3,
.eo-values-grid h3,
.eo-value-card h3,
.eo-service-card-more h3,
.eo-session-card h3,
.eo-login-panel h1,
.eo-package-price,
.eo-service-card__content h3,
.eo-contact__card h3,
.eo-step-heading h2 {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 0, "WONK" 1;
    font-weight: 450;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.eo-hero__title {
    font-size: clamp(2.4rem, 5.2vw, 4.8rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.035em;
}

.eo-section-title,
.eo-section-title h2 {
    font-size: clamp(1.9rem, 3.4vw, 3.05rem);
    line-height: 1.11;
}

.eo-public-hero h1,
.eo-service-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    font-weight: 400;
    line-height: 1.05;
}

body.eo-website p { line-height: 1.72; }
.eo-about__content > p,
.eo-section-description,
.eo-public-hero p { max-width: 66ch; }

/* =========================================================
   3. ETIQUETAS DE SECCIÓN
   website.css las pinta doradas y en mayúsculas espaciadas
   desde varios selectores distintos, algunos con !important.
   Aquí se unifican en el naranja de marca y en caja normal.
========================================================= */

.eo-section-tag,
.eo-catalog-heading span,
.eo-section-title > span,
.eo-service-hero span,
.eo-about-story > span,
.eo-contact-info > span,
.eo-value-card__eyebrow,
.eo-public-hero span,
.eo-hero__eyebrow {
    color: var(--eo-ember) !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    font-variant: normal !important;
    font-feature-settings: normal !important;
}

.eo-hero__eyebrow { color: rgba(255, 255, 255, .86) !important; }

.eo-section-tag::before { opacity: .55; }

/* =========================================================
   4. BOTONES

   En reposo no hay fondo: solo el texto y las esquinas del
   encuadre. Al pasar el cursor florece un halo radial desde el
   centro, que llega a transparencia total antes del borde, así
   que nunca aparece un rectángulo.

   El halo crece con background-size, que sí se puede animar,
   partiendo de 0. Los degradados no admiten transición de color,
   por eso se anima el tamaño y no la opacidad.

   Todas las reglas llevan .eo-site delante y !important porque
   website.css pinta fondos y bordes propios por contexto, varios
   con !important y con más especificidad que .eo-button.
========================================================= */

.eo-site .eo-button,
.eo-site .eo-card-action,
.eo-site .eo-service-card__content > a:not(.eo-button),
.eo-site .eo-session-card > a:not(.eo-button),
.eo-site .eo-contact__explore {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 15px 30px;
    min-height: 52px;
    font-weight: 600;
    font-size: .94rem;
    letter-spacing: .012em;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    background-size: 0% 0% !important;
    transition:
        background-size .5s var(--eo-ease-out),
        color .3s var(--eo-ease),
        transform .14s var(--eo-ease);
}

/* El halo florece desde el centro. */
.eo-site .eo-button:hover,
.eo-site .eo-button:focus-visible,
.eo-site .eo-card-action:hover,
.eo-site .eo-service-card__content > a:not(.eo-button):hover,
.eo-site .eo-session-card > a:not(.eo-button):hover,
.eo-site .eo-contact__explore:hover {
    background-size: 210% 330% !important;
}

/* --- Esquinas del encuadre: la única estructura --- */
.eo-site .eo-button::before,
.eo-site .eo-button::after,
.eo-site .eo-card-action::before,
.eo-site .eo-card-action::after,
.eo-site .eo-service-card__content > a:not(.eo-button)::before,
.eo-site .eo-service-card__content > a:not(.eo-button)::after,
.eo-site .eo-session-card > a:not(.eo-button)::before,
.eo-site .eo-session-card > a:not(.eo-button)::after,
.eo-site .eo-contact__explore::before,
.eo-site .eo-contact__explore::after {
    position: absolute;
    width: 13px;
    height: 13px;
    opacity: .85;
    pointer-events: none;
    transition:
        opacity .32s var(--eo-ease),
        width .4s var(--eo-ease-out),
        height .4s var(--eo-ease-out);
    content: "";
}

.eo-site .eo-button::before,
.eo-site .eo-card-action::before,
.eo-site .eo-service-card__content > a:not(.eo-button)::before,
.eo-site .eo-session-card > a:not(.eo-button)::before,
.eo-site .eo-contact__explore::before {
    top: 3px;
    left: 3px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
}

.eo-site .eo-button::after,
.eo-site .eo-card-action::after,
.eo-site .eo-service-card__content > a:not(.eo-button)::after,
.eo-site .eo-session-card > a:not(.eo-button)::after,
.eo-site .eo-contact__explore::after {
    right: 3px;
    bottom: 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.eo-site .eo-button:hover::before,
.eo-site .eo-button:hover::after,
.eo-site .eo-button:focus-visible::before,
.eo-site .eo-button:focus-visible::after,
.eo-site .eo-card-action:hover::before,
.eo-site .eo-card-action:hover::after,
.eo-site .eo-service-card__content > a:not(.eo-button):hover::before,
.eo-site .eo-service-card__content > a:not(.eo-button):hover::after,
.eo-site .eo-service-card:hover .eo-service-card__content > a:not(.eo-button)::before,
.eo-site .eo-service-card:hover .eo-service-card__content > a:not(.eo-button)::after,
.eo-site .eo-session-card > a:not(.eo-button):hover::before,
.eo-site .eo-session-card > a:not(.eo-button):hover::after,
.eo-site .eo-contact__explore:hover::before,
.eo-site .eo-contact__explore:hover::after {
    opacity: 1;
    width: 20px;
    height: 20px;
}

.eo-site .eo-button:active,
.eo-site .eo-card-action:active,
.eo-site .eo-service-card__content > a:not(.eo-button):active,
.eo-site .eo-session-card > a:not(.eo-button):active {
    transform: translateY(2px);
    transition-duration: .07s;
}

/* =========================================================
   4b. COLOR POR CONTEXTO

   El color del texto depende de lo que hay detrás, no del tipo
   de botón. Cada bloque declara los dos: el color del texto y el
   halo a juego.
========================================================= */

/* --- Naranja: sobre superficies claras del sitio --- */
.eo-site .eo-button--primary,
.eo-site .eo-button-primary,
.eo-site .eo-contact__explore,
.eo-site .eo-session-card > a:not(.eo-button) {
    color: var(--eo-ember) !important;
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(194, 71, 12, .26) 0%,
        rgba(194, 71, 12, .15) 44%,
        rgba(194, 71, 12, .04) 68%,
        rgba(194, 71, 12, 0) 82%
    ) !important;
}

.eo-site[data-theme="dark"] .eo-button--primary,
.eo-site[data-theme="dark"] .eo-button-primary,
.eo-site[data-theme="dark"] .eo-contact__explore,
.eo-site[data-theme="dark"] .eo-session-card > a:not(.eo-button) {
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 122, 60, .3) 0%,
        rgba(255, 122, 60, .17) 44%,
        rgba(255, 122, 60, .05) 68%,
        rgba(255, 122, 60, 0) 82%
    ) !important;
}

/* --- Neutro: acciones secundarias sobre superficies del sitio --- */
.eo-site .eo-button--secondary,
.eo-site .eo-button--secondary:hover,
.eo-site .eo-button-outline {
    color: var(--eo-ink) !important;
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(25, 20, 16, .12) 0%,
        rgba(25, 20, 16, .07) 44%,
        rgba(25, 20, 16, .02) 68%,
        rgba(25, 20, 16, 0) 82%
    ) !important;
}

.eo-site[data-theme="dark"] .eo-button--secondary,
.eo-site[data-theme="dark"] .eo-button--secondary:hover,
.eo-site[data-theme="dark"] .eo-button-outline {
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 248, 240, .16) 0%,
        rgba(255, 248, 240, .09) 44%,
        rgba(255, 248, 240, .02) 68%,
        rgba(255, 248, 240, 0) 82%
    ) !important;
}

/* --- Blanco: encima de fotografía ---
   El hero siempre lleva una capa oscura sobre la foto, en los dos
   temas. website.css forzaba aquí un rectángulo blanco al 96% en
   tema claro; esto lo anula. */
.eo-site .eo-hero .eo-button,
.eo-site .eo-hero .eo-button--primary,
.eo-site .eo-hero .eo-button--secondary,
.eo-site[data-theme="light"] .eo-hero .eo-button--secondary,
.eo-site[data-theme="light"] .eo-hero .eo-button--secondary:hover,
.eo-site[data-theme="dark"] .eo-hero .eo-button--secondary {
    color: #ffffff !important;
    background-color: transparent !important;
    border: 0 !important;
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 255, 255, .28) 0%,
        rgba(255, 255, 255, .15) 44%,
        rgba(255, 255, 255, .04) 68%,
        rgba(255, 255, 255, 0) 82%
    ) !important;
}

/* El primario del hero mantiene el naranja para distinguirse. */
.eo-site .eo-hero .eo-button--primary {
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 122, 60, .4) 0%,
        rgba(255, 122, 60, .22) 44%,
        rgba(255, 122, 60, .06) 68%,
        rgba(255, 122, 60, 0) 82%
    ) !important;
}

/* --- Tarjeta de servicio en escritorio ---
   La foto va de fondo con un degradado encima. En tema oscuro ese
   degradado es negro, así que el texto va blanco. En tema claro es
   blanco, y por eso el enlace desaparecía: ahí tiene que ir en
   naranja. */
.eo-site[data-theme="dark"] .eo-services .eo-service-card__content > a:not(.eo-button) {
    color: #ffffff !important;
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 255, 255, .26) 0%,
        rgba(255, 255, 255, .14) 44%,
        rgba(255, 255, 255, .04) 68%,
        rgba(255, 255, 255, 0) 82%
    ) !important;
}

.eo-site[data-theme="light"] .eo-services .eo-service-card__content > a:not(.eo-button),
.eo-site .eo-services .eo-service-card__content > a:not(.eo-button) {
    color: var(--eo-ember) !important;
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(194, 71, 12, .26) 0%,
        rgba(194, 71, 12, .15) 44%,
        rgba(194, 71, 12, .04) 68%,
        rgba(194, 71, 12, 0) 82%
    ) !important;
}

.eo-site[data-theme="dark"] .eo-services .eo-service-card__content > a:not(.eo-button) {
    color: #ffffff !important;
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 255, 255, .26) 0%,
        rgba(255, 255, 255, .14) 44%,
        rgba(255, 255, 255, .04) 68%,
        rgba(255, 255, 255, 0) 82%
    ) !important;
}

/* --- Bloques oscuros: la tarjeta "Descubre todas" y el pie --- */
.eo-site .eo-service-card-more .eo-button,
.eo-site .eo-service-card-more .eo-service-card__content > a:not(.eo-button),
.eo-site .eo-footer .eo-button {
    color: #ffffff !important;
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 255, 255, .26) 0%,
        rgba(255, 255, 255, .14) 44%,
        rgba(255, 255, 255, .04) 68%,
        rgba(255, 255, 255, 0) 82%
    ) !important;
}

/* En móvil la tarjeta separa foto y texto sobre fondo claro, así
   que el enlace vuelve al naranja. */
@media (max-width: 900px) {
    .eo-site .eo-services .eo-service-card__content > a:not(.eo-button) {
        color: var(--eo-ember) !important;
        background-image: radial-gradient(
            ellipse at 50% 50%,
            rgba(194, 71, 12, .26) 0%,
            rgba(194, 71, 12, .15) 44%,
            rgba(194, 71, 12, .04) 68%,
            rgba(194, 71, 12, 0) 82%
        ) !important;
    }

    .eo-site .eo-service-card-more .eo-service-card__content > a:not(.eo-button),
    .eo-site .eo-service-card-more .eo-button {
        color: #ffffff !important;
    }
}

/* --- Encabezado: la llamada principal del sitio --- */
.eo-site .eo-button--header {
    padding: 12px 26px;
    min-height: 46px;
    font-size: .9rem;
    color: var(--eo-ember) !important;
}

body.eo-website a:focus-visible,
body.eo-website button:focus-visible,
body.eo-website input:focus-visible,
body.eo-website textarea:focus-visible,
body.eo-website select:focus-visible,
body.eo-website summary:focus-visible {
    outline: 2px solid var(--eo-ember);
    outline-offset: 3px;
}

/* =========================================================
   5. MARCA DE ENCUADRE
   El encuadre de las cuatro esquinas ya existía en website.css
   sobre .eo-about__image::before, hecho con ocho degradados y
   con !important. La v2 dibujaba encima sus propias esquinas y
   quedaba una mezcla de las dos. Aquí solo se le deja sitio y
   se extiende el mismo recurso a las tarjetas.
========================================================= */

.eo-service-card,
.eo-session-card,
.eo-work-gallery figure { position: relative; }

/* El contenedor no puede recortar el encuadre, que va por fuera. */
.eo-about__image,
.eo-reservation__image { overflow: visible; }

.eo-about__image img {
    position: relative;
    z-index: 1;
    box-shadow: var(--eo-lift-high);
}

/* El texto siempre por encima de la fotografía. */
.eo-about__content,
.eo-reservation__content { position: relative; z-index: 3; }

/* Las tarjetas de sesión revelan el encuadre al pasar el cursor:
   el movimiento responde a una acción, no aparece solo. */
.eo-session-card::before,
.eo-session-card::after {
    position: absolute;
    z-index: 3;
    width: 26px;
    height: 26px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--eo-ease), transform .35s var(--eo-ease-out);
    content: "";
}

.eo-session-card::before {
    top: 12px;
    left: 12px;
    border-top: 2px solid var(--eo-ember-bright);
    border-left: 2px solid var(--eo-ember-bright);
    transform: translate(6px, 6px);
}

.eo-session-card::after {
    right: 12px;
    bottom: 12px;
    border-right: 2px solid var(--eo-ember-bright);
    border-bottom: 2px solid var(--eo-ember-bright);
    transform: translate(-6px, -6px);
}

.eo-session-card:hover::before,
.eo-session-card:hover::after,
.eo-session-card:focus-within::before,
.eo-session-card:focus-within::after {
    opacity: 1;
    transform: none;
}

/* La marca de encuadre de las tarjetas de Nosotros. */
.eo-values-grid-premium .eo-value-card__brandmark::before,
.eo-values-grid-premium .eo-value-card__brandmark::after {
    border-color: var(--eo-ember);
}

.eo-value-card__brandmark svg {
    fill: none;
    stroke: var(--eo-ember);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   6. FOTOGRAFÍAS
   El revelado: entran algo desaturadas y se asientan.
========================================================= */

[data-eo-develop] {
    opacity: 0;
    filter: saturate(.5) contrast(.97);
    transform: scale(1.012);
    transition:
        opacity .85s var(--eo-ease-out),
        filter 1s var(--eo-ease-out),
        transform 1s var(--eo-ease-out);
}

[data-eo-develop].is-developed {
    opacity: 1;
    filter: none;
    transform: none;
}

/* =========================================================
   7. HERO
========================================================= */

.eo-hero { background: var(--eo-paper); }

.eo-hero__overlay {
    background:
        linear-gradient(
            96deg,
            rgba(14, 10, 8, .9) 0%,
            rgba(14, 10, 8, .66) 40%,
            rgba(14, 10, 8, .2) 76%,
            rgba(14, 10, 8, .3) 100%
        ),
        linear-gradient(0deg, rgba(14, 10, 8, .6) 0%, transparent 44%);
}

.eo-hero__background img {
    filter: saturate(1.02) contrast(1.03);
    transform: scale(1.09);
    transition: transform 9s linear, filter .9s ease;
}

.eo-hero__slide.is-active .eo-hero__background img { transform: scale(1); }

.eo-hero__eyebrow::before { opacity: .6; }
.eo-hero__description { color: rgba(255, 255, 255, .86); }

.eo-hero__frame {
    position: absolute;
    z-index: 4;
    right: clamp(18px, 4vw, 44px);
    bottom: clamp(48px, 6vw, 62px);
    display: flex;
    align-items: baseline;
    gap: 7px;
    color: rgba(255, 255, 255, .6);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}

.eo-hero__frame b { color: #fff; font-size: 1.4rem; font-weight: 500; line-height: 1; }

.eo-hero__exposure {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: rgba(255, 255, 255, .14);
}

.eo-hero__exposure i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--eo-ember-bright);
}

.eo-hero__exposure.is-running i { animation: eo-expose 7s linear forwards; }

@keyframes eo-expose { from { width: 0; } to { width: 100%; } }

.eo-hero__pagination {
    right: auto;
    left: clamp(18px, 4vw, 44px);
    bottom: clamp(50px, 6vw, 64px);
    justify-content: flex-start;
    gap: 7px;
}

.eo-hero__dot {
    width: 22px;
    height: 2px;
    border-radius: 0;
    background: rgba(255, 255, 255, .32);
}

.eo-hero__dot.is-active { width: 22px; background: #fff; }

.eo-hero__arrow {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .24);
    border-radius: 2px;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity .3s var(--eo-ease), background-color .2s var(--eo-ease);
}

.eo-hero:hover .eo-hero__arrow,
.eo-hero__arrow:focus-visible { opacity: 1; }
.eo-hero__arrow:hover { background: rgba(255, 255, 255, .2); }

.eo-hero__scroll {
    left: auto;
    right: clamp(18px, 4vw, 44px);
    bottom: 16px;
    color: rgba(255, 255, 255, .72);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: none;
}

.eo-hero__scroll span:last-child { animation: eo-nudge 2.6s var(--eo-ease) infinite; }

@keyframes eo-nudge {
    0%, 72%, 100% { transform: translateY(0); }
    82% { transform: translateY(4px); }
}

/* Secuencia de entrada, una sola vez. */
.eo-hero[data-hero-intro] .eo-hero__slide.is-active .eo-hero__eyebrow,
.eo-hero[data-hero-intro] .eo-hero__slide.is-active .eo-hero__title,
.eo-hero[data-hero-intro] .eo-hero__slide.is-active .eo-hero__description,
.eo-hero[data-hero-intro] .eo-hero__slide.is-active .eo-hero__actions {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s var(--eo-ease-out), transform .8s var(--eo-ease-out);
}

.eo-hero.is-revealed .eo-hero__slide.is-active .eo-hero__eyebrow { transition-delay: .12s; }
.eo-hero.is-revealed .eo-hero__slide.is-active .eo-hero__title { transition-delay: .2s; }
.eo-hero.is-revealed .eo-hero__slide.is-active .eo-hero__description { transition-delay: .32s; }
.eo-hero.is-revealed .eo-hero__slide.is-active .eo-hero__actions { transition-delay: .42s; }

.eo-hero.is-revealed .eo-hero__slide.is-active .eo-hero__eyebrow,
.eo-hero.is-revealed .eo-hero__slide.is-active .eo-hero__title,
.eo-hero.is-revealed .eo-hero__slide.is-active .eo-hero__description,
.eo-hero.is-revealed .eo-hero__slide.is-active .eo-hero__actions {
    opacity: 1;
    transform: none;
}

.eo-hero__shutter {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: var(--eo-paper);
    transform-origin: top center;
    pointer-events: none;
}

.eo-hero.is-revealed .eo-hero__shutter { animation: eo-shutter 1s var(--eo-ease-out) forwards; }

@keyframes eo-shutter { to { transform: scaleY(0); } }

/* =========================================================
   8. ENCABEZADO
========================================================= */

.eo-navigation__link { position: relative; font-weight: 500; }

.eo-navigation__link::after {
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 1px;
    background: var(--eo-ember);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .32s var(--eo-ease-out);
    content: "";
}

.eo-navigation__link:hover::after,
.eo-navigation__link.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* =========================================================
   9. TARJETAS DE SERVICIO
   El diseño original usa la fotografía como fondo de la tarjeta
   (.eo-service-card__image va en position:absolute; inset:0) con
   el texto encima sobre un degradado. La v2 lo reestructuró a
   "foto arriba, texto abajo" y en móvil la tarjeta se desbordaba
   de la pantalla. Aquí solo se corrige el alto fijo que recortaba
   el texto y se afina el contraste.
========================================================= */

.eo-service-card,
.eo-service-card:nth-child(4),
.eo-service-card:nth-child(5),
.eo-service-card-more,
.eo-services__grid > .eo-service-card,
.eo-services__grid > .eo-service-card:nth-child(4),
.eo-services__grid > .eo-service-card:nth-child(5),
.eo-services__grid > .eo-service-card:last-child,
.eo-services__grid > .eo-service-card-more {
    height: auto !important;
    min-height: 470px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: var(--eo-lift);
    transition: box-shadow .45s var(--eo-ease), transform .45s var(--eo-ease) !important;
}

.eo-service-card:hover {
    box-shadow: var(--eo-lift-high);
    transform: translateY(-3px);
}

.eo-service-card__image img {
    transition: transform 1.2s var(--eo-ease-out);
}

.eo-service-card:hover .eo-service-card__image img { transform: scale(1.05); }

.eo-service-card__content h3 {
    font-size: clamp(1.35rem, 2.4vw, 1.65rem) !important;
    line-height: 1.14;
}

.eo-service-card__content p { font-size: .95rem; }

.eo-service-card-more h3 { font-size: clamp(1.5rem, 2.8vw, 1.95rem) !important; }

/* =========================================================
   10. PÁGINAS INTERNAS
========================================================= */

.eo-public-page,
.eo-public-content,
.eo-public-hero,
.eo-site[data-theme="dark"] .eo-public-page,
.eo-site[data-theme="dark"] .eo-public-content,
.eo-site[data-theme="dark"] .eo-public-hero {
    background: var(--eo-paper) !important;
    color: var(--eo-ink) !important;
}

.eo-public-hero {
    padding: clamp(118px, 14vw, 168px) 7vw clamp(46px, 6vw, 72px) !important;
    text-align: left !important;
    border-bottom: 1px solid var(--eo-line-soft);
}

.eo-public-hero p { margin: 0 !important; font-size: 1.06rem; color: var(--eo-ink-soft); }

.eo-catalog-heading span,
.eo-session-card a,
.eo-register summary,
.eo-package-price,
.eo-reserve-steps strong,
.eo-card-action {
    color: var(--eo-ember) !important;
}

.eo-package-card > b,
.eo-step-number,
.eo-value-icon {
    background: var(--eo-ember) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #fff !important;
    border-radius: 3px !important;
}

.eo-package-card,
.eo-values-grid article,
.eo-value-card,
.eo-booking-main > section,
.eo-booking-summary,
.eo-contact-panel,
.eo-reserve-steps,
.eo-session-card,
.eo-fixed-calendar,
.eo-contact__card,
.eo-site[data-theme="dark"] .eo-package-card,
.eo-site[data-theme="dark"] .eo-values-grid article,
.eo-site[data-theme="dark"] .eo-value-card,
.eo-site[data-theme="dark"] .eo-booking-main > section,
.eo-site[data-theme="dark"] .eo-booking-summary {
    background: var(--eo-mat) !important;
    background-image: none !important;
    border: 1px solid var(--eo-line-soft) !important;
    border-radius: 5px !important;
    box-shadow: var(--eo-lift) !important;
    color: var(--eo-ink) !important;
}

.eo-package-card p,
.eo-value-card p,
.eo-values-grid article p,
.eo-contact__card p { color: var(--eo-ink-soft) !important; }

.eo-package-card.is-featured {
    transform: none !important;
    border-color: var(--eo-ember) !important;
    box-shadow: var(--eo-lift-high) !important;
}

.eo-package-card h3 { font-size: 1.85rem !important; }
.eo-package-price { font-size: 2.3rem !important; font-weight: 500 !important; }

.eo-session-card img {
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 1.1s var(--eo-ease-out);
}

.eo-session-card { transition: box-shadow .4s var(--eo-ease) !important; }
.eo-session-card:hover { box-shadow: var(--eo-lift-high) !important; }
.eo-session-card:hover img { transform: scale(1.04); }

.eo-work-gallery figure { border-radius: 3px !important; overflow: hidden; }
.eo-work-gallery img { transition: transform 1.2s var(--eo-ease-out); }
.eo-work-gallery figure:hover img { transform: scale(1.05); }

.eo-map-card { border-radius: 5px !important; box-shadow: var(--eo-lift) !important; }

/* =========================================================
   11. FORMULARIOS Y RESERVA
========================================================= */

.eo-form-grid input,
.eo-form-grid textarea,
.eo-form-grid select,
.eo-booking-main input[type="date"],
.eo-login-panel input,
.eo-site[data-theme="dark"] .eo-form-grid input,
.eo-site[data-theme="dark"] .eo-form-grid textarea,
.eo-site[data-theme="dark"] .eo-booking-main input[type="date"] {
    background: var(--eo-paper) !important;
    color: var(--eo-ink) !important;
    border: 1px solid var(--eo-line) !important;
    border-radius: 3px !important;
    padding: 14px 15px !important;
    font-size: 1rem;
    transition: border-color .2s var(--eo-ease), box-shadow .2s var(--eo-ease) !important;
}

.eo-form-grid input:focus,
.eo-form-grid textarea:focus,
.eo-booking-main input[type="date"]:focus,
.eo-login-panel input:focus {
    outline: none !important;
    border-color: var(--eo-ember) !important;
    box-shadow: 0 0 0 3px rgba(194, 71, 12, .16) !important;
}

.eo-form-grid label,
.eo-login-panel label { font-weight: 600 !important; color: var(--eo-ink) !important; }

.eo-time-grid span {
    border: 1px solid var(--eo-line) !important;
    border-radius: 3px !important;
    background: var(--eo-paper) !important;
    color: var(--eo-ink) !important;
    font-weight: 500;
    transition: border-color .18s var(--eo-ease), background-color .18s var(--eo-ease), color .18s var(--eo-ease) !important;
}

.eo-time-grid span:hover { border-color: var(--eo-ink-faint) !important; }

.eo-time-grid input:checked + span {
    background: var(--eo-ember) !important;
    border-color: var(--eo-ember) !important;
    color: #fff !important;
}

.eo-time-grid input:focus-visible + span { outline: 2px solid var(--eo-ember); outline-offset: 2px; }

.eo-calendar-day {
    border: 1px solid var(--eo-line) !important;
    border-radius: 3px !important;
    background: var(--eo-paper) !important;
    color: var(--eo-ink) !important;
    font-weight: 500 !important;
    transition: background-color .16s var(--eo-ease), border-color .16s var(--eo-ease) !important;
}

.eo-calendar-day:hover:not([disabled]):not(.is-selected) {
    border-color: var(--eo-ink) !important;
}

/* El día elegido se marca igual que la hora. En la versión
   anterior mis reglas de fondo llevaban !important y anulaban
   .is-selected, así que el cliente no veía qué día había tocado. */
.eo-calendar-day.is-selected,
.eo-calendar-day.is-selected:hover,
.eo-site[data-theme="dark"] .eo-calendar-day.is-selected {
    background: var(--eo-ember) !important;
    border-color: var(--eo-ember) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px -6px rgba(194, 71, 12, .7) !important;
}

.eo-calendar-day.is-today:not(.is-selected) {
    border-color: var(--eo-ember) !important;
    box-shadow: inset 0 0 0 1px var(--eo-ember) !important;
}

.eo-calendar-day[disabled],
.eo-calendar-day:disabled {
    opacity: .3 !important;
    background: var(--eo-paper-2) !important;
    cursor: not-allowed !important;
}

.eo-calendar-nav {
    border: 1px solid var(--eo-line) !important;
    border-radius: 3px !important;
    background: var(--eo-paper) !important;
    color: var(--eo-ink) !important;
}

.eo-selected-date {
    background: var(--eo-paper-2) !important;
    color: var(--eo-ink) !important;
    border-radius: 3px !important;
}

.eo-booking-summary img { border-radius: 3px !important; }
.eo-step-heading h2 { font-size: 1.6rem !important; }
.eo-step-heading p { color: var(--eo-ink-soft) !important; }

/* =========================================================
   12. ACCESO
========================================================= */

.eo-login-page { background: var(--eo-paper) !important; }
.eo-login-panel h1 { font-size: clamp(2.3rem, 4vw, 3.1rem) !important; font-weight: 400 !important; }
.eo-login-photo > div { z-index: 2; max-width: 26ch; }

.eo-auth-error {
    background: #fdf0ec !important;
    color: #8d2f06 !important;
    border: 1px solid rgba(194, 71, 12, .3) !important;
    border-radius: 3px !important;
}

.eo-site[data-theme="dark"] .eo-auth-error {
    background: rgba(194, 71, 12, .18) !important;
    color: #ffb493 !important;
}

/* =========================================================
   13. TARJETA DEL PORTAL EN LA PORTADA
========================================================= */

.eo-client-card {
    border-radius: 6px;
    border: 1px solid var(--eo-line-soft);
    background: var(--eo-mat);
    box-shadow: var(--eo-lift-high);
}

.eo-client-card__avatar {
    border-radius: 3px;
    background: var(--eo-ink);
    color: var(--eo-paper);
}

.eo-client-space__features li { color: var(--eo-ink-soft); }

/* =========================================================
   14. PIE
   Siempre oscuro, en los dos temas. En la v1 el fondo se ató a
   --eo-ink, que se invierte en modo oscuro: el fondo se volvía
   claro y el texto blanco desaparecía.
========================================================= */

.eo-footer,
.eo-site[data-theme="light"] .eo-footer,
.eo-site[data-theme="dark"] .eo-footer {
    background: #100d0b !important;
    color: #fbfaf7 !important;
    border-top: 0 !important;
}

.eo-footer__column h3,
.eo-site[data-theme="light"] .eo-footer__column h3,
.eo-site[data-theme="dark"] .eo-footer__column h3 {
    color: #ffffff !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    letter-spacing: .05em !important;
    text-transform: none !important;
}

.eo-footer__column a,
.eo-footer__column span,
.eo-footer__brand p,
.eo-site[data-theme="light"] .eo-footer__column a,
.eo-site[data-theme="light"] .eo-footer__column span,
.eo-site[data-theme="dark"] .eo-footer__column a,
.eo-site[data-theme="dark"] .eo-footer__column span {
    color: rgba(255, 255, 255, .76) !important;
    font-size: .89rem !important;
}

.eo-footer__column a:hover { color: var(--eo-ember-bright) !important; }

.eo-footer__bottom p,
.eo-site[data-theme="light"] .eo-footer__bottom p,
.eo-site[data-theme="dark"] .eo-footer__bottom p {
    color: rgba(255, 255, 255, .55) !important;
}

.eo-footer__bottom { border-top-color: rgba(255, 255, 255, .12) !important; }

/* El logo del pie va sobre fondo oscuro: sin filtros que lo apaguen. */
.eo-footer__logo img,
.eo-site[data-theme="light"] .eo-footer__logo img,
.eo-site[data-theme="dark"] .eo-footer__logo img {
    filter: none !important;
    opacity: 1 !important;
}

/* =========================================================
   15. RITMO VERTICAL
========================================================= */

.eo-about,
.eo-services,
.eo-client-space,
.eo-reservation,
.eo-contact { padding-block: clamp(64px, 9vw, 116px) !important; }

.eo-about { background: var(--eo-paper) !important; }
.eo-services { background: var(--eo-paper-2) !important; }
.eo-client-space { background: var(--eo-paper) !important; }
.eo-reservation { background: var(--eo-paper-2) !important; }
.eo-contact { background: var(--eo-paper) !important; }

.eo-public-content { padding: clamp(52px, 7vw, 84px) 30px !important; }

/* =========================================================
   16. RESPONSIVE
   Repaso completo de 1200 px hacia abajo. El sitio se probó a
   1440, 1280, 1024, 900, 768, 600, 430 y 360 px.
========================================================= */

@media (max-width: 1200px) {
    .eo-container { width: min(1180px, calc(100% - 40px)); }
    .eo-services__grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 1024px) {
    .eo-services__grid,
    .eo-package-grid,
    .eo-session-grid,
    .eo-values-grid,
    .eo-values-grid-premium,
    .eo-work-gallery { grid-template-columns: repeat(2, 1fr) !important; }

    .eo-about__grid,
    .eo-client-space__wrapper,
    .eo-reservation__wrapper,
    .eo-about-story,
    .eo-contact-showcase,
    .eo-public-two,
    .eo-contact__grid {
        grid-template-columns: 1fr !important;
        gap: clamp(38px, 6vw, 56px) !important;
    }

    /* La foto de Nosotros tenía alto fijo de 490 px en el
       contenedor y la imagen se desbordaba encima del título. */
    .eo-about__image,
    .eo-about__image img {
        min-height: 0 !important;
        height: auto !important;
    }

    .eo-about__image img { aspect-ratio: 3 / 4; object-fit: cover; }

    /* El encuadre sale 16 px por fuera de la foto: sin este
       margen se corta contra el borde de la pantalla. */
    .eo-about__image { margin: 22px 18px; }

    .eo-reservation__image { min-height: 320px !important; }
    .eo-reservation__image img {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
    }

    .eo-booking-flow,
    .eo-booking-flow-wide { grid-template-columns: 1fr !important; gap: 24px !important; }
    .eo-booking-summary { position: static !important; }

    .eo-service-hero { grid-template-columns: 1fr !important; }
    .eo-service-hero > div { padding: clamp(48px, 8vw, 76px) clamp(24px, 6vw, 56px) !important; }
    .eo-service-hero img { max-height: 420px; }

    .eo-login-page { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
    .eo-hero__container { padding: 116px 0 130px !important; }
    .eo-hero__frame { bottom: 82px; }
    .eo-hero__pagination { bottom: 84px !important; }
    .eo-hero__scroll { display: none !important; }
    .eo-hero__arrow { opacity: 1; }

    .eo-section-header { margin-bottom: 34px !important; }
}

@media (max-width: 768px) {
    .eo-services__grid,
    .eo-package-grid,
    .eo-session-grid,
    .eo-values-grid,
    .eo-values-grid-premium { grid-template-columns: 1fr !important; }

    .eo-work-gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

    .eo-form-grid { grid-template-columns: 1fr !important; }
    .eo-time-grid { grid-template-columns: repeat(3, 1fr) !important; }

    .eo-footer__top {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 34px !important;
    }

    .eo-footer__brand { grid-column: 1 / -1; max-width: none !important; }

    .eo-footer__bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .eo-contact-items > a,
    .eo-contact-items > div { flex-direction: column !important; gap: 4px !important; }
    .eo-contact__item--address a { max-width: none !important; text-align: left !important; }

    .eo-reserve-steps,
    .eo-contact-panel { flex-direction: column !important; }

    .eo-map-card iframe { height: 320px !important; }
}

@media (max-width: 600px) {
    .eo-container { width: calc(100% - 32px); }

    .eo-hero__title { font-size: clamp(2rem, 8.6vw, 2.7rem) !important; }
    .eo-hero__description { font-size: .98rem !important; }

    .eo-hero__actions { flex-direction: column; width: 100%; }
    .eo-hero__actions .eo-button { width: 100%; }

    .eo-about__content .eo-button,
    .eo-client-space__actions .eo-button,
    .eo-reservation__actions .eo-button { width: 100%; }

    .eo-client-space__actions,
    .eo-reservation__actions { flex-direction: column; width: 100%; }

    .eo-public-hero { padding-left: 22px !important; padding-right: 22px !important; }
    .eo-public-content { padding-left: 22px !important; padding-right: 22px !important; }

    .eo-service-card__image { aspect-ratio: 3 / 2; }
    .eo-time-grid { grid-template-columns: repeat(2, 1fr) !important; }

    .eo-package-card,
    .eo-value-card,
    .eo-booking-main > section,
    .eo-contact__card { padding: 24px !important; }

    /* Encuadre más cerca de la foto para que quepa en pantalla. */
    .eo-about__image { margin: 16px 14px !important; }
    .eo-about__image::before { inset: -10px !important; }
}

@media (max-width: 400px) {
    .eo-footer__top { grid-template-columns: 1fr !important; }
    .eo-work-gallery { grid-template-columns: 1fr !important; }
    .eo-hero__frame b { font-size: 1.2rem; }
}

/* Nada del sitio puede provocar desplazamiento horizontal. */
body.eo-website { overflow-x: hidden; }
body.eo-website img,
body.eo-website video,
body.eo-website iframe { max-width: 100%; }

/* =========================================================
   17. MOVIMIENTO REDUCIDO E IMPRESIÓN
========================================================= */

@media (prefers-reduced-motion: reduce) {
    body.eo-website *,
    body.eo-website *::before,
    body.eo-website *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    [data-eo-develop] { opacity: 1 !important; filter: none !important; transform: none !important; }
    .eo-hero__shutter { display: none !important; }

    .eo-hero[data-hero-intro] .eo-hero__slide.is-active .eo-hero__eyebrow,
    .eo-hero[data-hero-intro] .eo-hero__slide.is-active .eo-hero__title,
    .eo-hero[data-hero-intro] .eo-hero__slide.is-active .eo-hero__description,
    .eo-hero[data-hero-intro] .eo-hero__slide.is-active .eo-hero__actions {
        opacity: 1 !important;
        transform: none !important;
    }

    .eo-hero__background img { transform: none !important; }
    .eo-service-card::before,
    .eo-service-card::after { opacity: 1; transform: none; }
}

@media print {
    .eo-header,
    .eo-quick-actions,
    .eo-theme-control,
    .eo-mobile-bottom-nav,
    .eo-hero__arrow,
    .eo-footer { display: none !important; }

    body.eo-website { background: #fff; color: #000; }
}

/* =========================================================
   18. PÁGINA DE ACCESO
   El logo quedaba debajo del encabezado fijo y se cortaba por
   arriba. El panel arranca ahora por debajo de la cabecera.
========================================================= */

.eo-login-page { min-height: 100vh; }

.eo-login-panel {
    padding-top: calc(78px + 6vh) !important;
    padding-bottom: 6vh !important;
}

.eo-login-logo {
    width: 260px !important;
    max-width: 80%;
    height: auto;
    margin-bottom: 30px !important;
}

body.admin-bar .eo-login-panel { padding-top: calc(110px + 6vh) !important; }

@media (max-width: 1024px) {
    .eo-login-panel { padding-top: calc(78px + 4vh) !important; }
    .eo-login-photo { display: block !important; max-height: 34vh; overflow: hidden; }
    .eo-login-photo img { height: 34vh; object-fit: cover; }
}

@media (max-width: 600px) {
    .eo-login-photo { display: none !important; }
    .eo-login-panel { padding-left: 24px !important; padding-right: 24px !important; }
    .eo-login-logo { width: 200px !important; }
}

/* =========================================================
   19. PORTADA
   Aquí había un bloque que oscurecía la sección Reservar. Estaba
   mal: .eo-reservation__wrapper es una tarjeta clara, así que el
   texto forzado a blanco quedaba invisible sobre ella. Retirado.
========================================================= */

/* Separación entre secciones con una hairline, sin cambios
   bruscos de fondo. */
.eo-services,
.eo-reservation { position: relative; }

.eo-services::before,
.eo-reservation::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--eo-line-soft);
    content: "";
}

/* Los titulares grandes entran una vez, al llegar a pantalla.
   Un solo gesto y solo en los títulos, no en cada bloque. */
.eo-section-title[data-eo-rise] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s var(--eo-ease-out), transform .7s var(--eo-ease-out);
}

.eo-section-title[data-eo-rise].is-risen {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .eo-section-title[data-eo-rise] { opacity: 1 !important; transform: none !important; }
    .eo-button::after { display: none !important; }
}

/* =========================================================
   20. RECORTE DE FOTOGRAFÍAS
========================================================= */

.eo-service-card__image img,
.eo-session-card img,
.eo-hero__background img,
.eo-about__image img,
.eo-reservation__image img,
.eo-work-gallery img,
.eo-login-photo img,
.eo-service-hero img,
.eo-public-two img {
    object-fit: cover;
}

/* ---------------------------------------------------------
   En móvil la tarjeta se reparte: la fotografía completa arriba
   y el texto debajo.

   En escritorio la foto va de fondo (position:absolute; inset:0)
   con el texto encima, y funciona porque la tarjeta es ancha. En
   un teléfono esa misma tarjeta se estrecha y se alarga, así que
   el recorte se come los lados y el texto tapa la mitad inferior.
   Por muy bien calculado que esté el punto focal, no hay encuadre
   que salve eso. La solución no es recortar mejor: es dejar de
   recortar.
--------------------------------------------------------- */

@media (max-width: 900px) {
    .eo-services__grid > .eo-service-card,
    .eo-services__grid > .eo-service-card:nth-child(4),
    .eo-services__grid > .eo-service-card:nth-child(5),
    .eo-services__grid > .eo-service-card:last-child,
    .eo-services__grid > .eo-service-card-more,
    .eo-service-card {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        background: var(--eo-mat) !important;
        overflow: hidden !important;
    }

    /* La foto deja de ser fondo y pasa a ocupar su propio sitio,
       en formato apaisado: se ve entera y ancha. */
    .eo-service-card__image {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 2;
        flex: 0 0 auto;
        border-radius: 0 !important;
    }

    .eo-service-card__image img {
        width: 100% !important;
        height: 100% !important;
    }

    /* Sin foto detrás, el degradado que oscurecía la parte baja
       ya no tiene función. */
    .eo-service-card__image::before,
    .eo-service-card__image::after {
        display: none !important;
    }

    .eo-service-card__content,
    .eo-site[data-theme="light"] .eo-services .eo-service-card__content,
    .eo-site[data-theme="light"] .eo-services .eo-service-card-more .eo-service-card__content {
        position: relative !important;
        inset: auto !important;
        z-index: 1 !important;
        padding: 22px 22px 26px !important;
        background: var(--eo-mat) !important;
        background-image: none !important;
        color: var(--eo-ink) !important;
    }

    .eo-service-card__content h3 {
        margin: 0 0 8px !important;
        font-size: 1.42rem !important;
        color: var(--eo-ink) !important;
    }

    .eo-service-card__content p {
        max-width: none !important;
        margin: 0 0 16px !important;
        color: var(--eo-ink-soft) !important;
        font-size: .94rem !important;
    }

    /* La tarjeta oscura de "Descubre todas nuestras sesiones"
       mantiene su carácter, con el texto sobre fondo oscuro. */
    .eo-service-card-more .eo-service-card__content {
        background: var(--eo-ink) !important;
        color: var(--eo-paper) !important;
    }

    .eo-service-card-more .eo-service-card__content h3 { color: var(--eo-paper) !important; }
    .eo-service-card-more .eo-service-card__content p { color: rgba(255, 255, 255, .72) !important; }

    /* Las tarjetas de sesión de las páginas internas, igual. */
    .eo-session-card img {
        aspect-ratio: 3 / 2 !important;
        height: auto !important;
    }
}

@media (max-width: 520px) {
    .eo-service-card__image { aspect-ratio: 4 / 3; }
    .eo-service-card__content { padding: 20px 18px 24px !important; }
}

/* =========================================================
   21. AJUSTES FINALES DE BOTONES
   La sección anterior de esta parte pintaba fondos planos con
   !important y anulaba los halos. Retirada. Aquí solo quedan los
   casos que el halo por sí solo no resuelve.
========================================================= */

/* El pie es siempre oscuro, tenga el sitio el tema que tenga. */
.eo-footer .eo-button {
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 255, 255, .28) 0%,
        rgba(255, 255, 255, .15) 42%,
        rgba(255, 255, 255, .04) 68%,
        rgba(255, 255, 255, 0) 82%
    ) !important;
    color: #fff !important;
}

/* El botón redondo de reservar de la barra móvil se queda sólido:
   es un icono, no un rectángulo, y ahí el naranja pleno funciona.
   No hereda nada de .eo-button. */
.eo-mobile-bottom-nav__item--reserve .eo-mobile-bottom-nav__icon {
    background-image: none;
}

/* =========================================================
   22. BOTONES: LOS CUATRO CASOS QUE SE PERDÍAN

   Todos venían de reglas de website.css con !important y más
   especificidad que las mías. Cada bloque anota cuál era.
========================================================= */

/* --- 1. .eo-card-action ---
   "Explorar todas las experiencias" y "Conocer esta experiencia"
   de la página de servicios usan esta clase, no .eo-button.
   website.css tiene:
       .eo-card-action:hover { background:#e84f0e; color:#fff!important }
   El texto se volvía blanco sobre un halo claro y desaparecía. */
.eo-site .eo-card-action,
.eo-site .eo-card-action:hover,
.eo-site .eo-card-action:focus-visible,
.eo-site .eo-card-action:active {
    color: var(--eo-ember) !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(194, 71, 12, .26) 0%,
        rgba(194, 71, 12, .15) 44%,
        rgba(194, 71, 12, .04) 68%,
        rgba(194, 71, 12, 0) 82%
    ) !important;
}

.eo-site[data-theme="dark"] .eo-card-action,
.eo-site[data-theme="dark"] .eo-card-action:hover,
.eo-site[data-theme="dark"] .eo-card-action:focus-visible {
    color: var(--eo-ember) !important;
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 122, 60, .3) 0%,
        rgba(255, 122, 60, .17) 44%,
        rgba(255, 122, 60, .05) 68%,
        rgba(255, 122, 60, 0) 82%
    ) !important;
}

/* --- 2. El segundo botón del slider ---
   website.css tiene, con especificidad (0,4,1):
       .eo-site[data-theme="light"] .eo-hero .eo-button--secondary:hover
           { background:#ffffff!important }
   Mi background-color transparente iba en .eo-site .eo-button, con
   (0,2,0), y perdía: al pasar el cursor el botón se rellenaba de
   blanco. Aquí se iguala la especificidad. */
.eo-site[data-theme="light"] .eo-hero .eo-button--secondary,
.eo-site[data-theme="light"] .eo-hero .eo-button--secondary:hover,
.eo-site[data-theme="light"] .eo-hero .eo-button--secondary:focus-visible,
.eo-site[data-theme="dark"] .eo-hero .eo-button--secondary,
.eo-site[data-theme="dark"] .eo-hero .eo-button--secondary:hover,
.eo-site .eo-hero .eo-button--primary,
.eo-site .eo-hero .eo-button--primary:hover {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.eo-site .eo-hero .eo-button--secondary,
.eo-site[data-theme="light"] .eo-hero .eo-button--secondary:hover {
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 255, 255, .3) 0%,
        rgba(255, 255, 255, .16) 44%,
        rgba(255, 255, 255, .04) 68%,
        rgba(255, 255, 255, 0) 82%
    ) !important;
}

/* --- 3. "Descubrir más" en la tarjeta oscura ---
   En tema claro website.css le pone a esa tarjeta el mismo
   degradado blanco que a las demás:
       .eo-site[data-theme="light"] .eo-services
           .eo-service-card-more .eo-service-card__content
   Yo daba por hecho que seguía siendo oscura y ponía texto blanco:
   blanco sobre blanco. En tema claro va en naranja. */
.eo-site[data-theme="light"] .eo-services .eo-service-card-more .eo-button,
.eo-site[data-theme="light"] .eo-services .eo-service-card-more .eo-button:hover,
.eo-site[data-theme="light"] .eo-services .eo-service-card-more .eo-service-card__content > a {
    color: var(--eo-ember) !important;
    background-color: transparent !important;
    background-image: radial-gradient(
        ellipse at 50% 50%,
        rgba(194, 71, 12, .26) 0%,
        rgba(194, 71, 12, .15) 44%,
        rgba(194, 71, 12, .04) 68%,
        rgba(194, 71, 12, 0) 82%
    ) !important;
}

/* En móvil la tarjeta separa foto y texto y el fondo vuelve a ser
   oscuro de verdad, así que ahí el texto sí va blanco. */
@media (max-width: 900px) {
    .eo-site[data-theme="light"] .eo-services .eo-service-card-more .eo-button,
    .eo-site[data-theme="light"] .eo-services .eo-service-card-more .eo-button:hover,
    .eo-site[data-theme="light"] .eo-services .eo-service-card-more .eo-service-card__content > a {
        color: #ffffff !important;
        background-image: radial-gradient(
            ellipse at 50% 50%,
            rgba(255, 255, 255, .28) 0%,
            rgba(255, 255, 255, .15) 44%,
            rgba(255, 255, 255, .04) 68%,
            rgba(255, 255, 255, 0) 82%
        ) !important;
    }
}

/* --- 4. Enlaces de contacto ---
   website.css: .eo-contact__buttons .eo-contact__explore:hover
   { color:#fff!important } */
.eo-site .eo-contact__buttons .eo-contact__explore,
.eo-site .eo-contact__buttons .eo-contact__explore:hover,
.eo-site .eo-contact__explore:hover {
    color: var(--eo-ember) !important;
    background-color: transparent !important;
    border: 0 !important;
    filter: none !important;
}

/* --- Red de seguridad ---
   Ningún botón del sitio puede quedarse con fondo sólido ni con
   borde en ningún estado. */
.eo-site .eo-button,
.eo-site .eo-button:hover,
.eo-site .eo-button:focus,
.eo-site .eo-button:focus-visible,
.eo-site .eo-button:active,
.eo-site .eo-card-action:hover,
.eo-site .eo-service-card__content > a:not(.eo-button):hover,
.eo-site .eo-session-card > a:not(.eo-button):hover {
    background-color: transparent !important;
    border-color: transparent !important;
}