/*
 * Tienda de servicios de eKonos (/tienda y landings /tienda/<servicio>).
 * Usa los tokens del kit de Elementor (post-10.css, clase .elementor-kit-10 del body) para
 * que case con el resto de la web: Montserrat, #212529, #485B60, fondo #FDFBF7.
 * El kit aplica estilos globales a a/h1-h6/button: aquí se acotan dentro de los componentes.
 */
.ek-tienda,
.ek-servicio {
    --ek-dark: var(--e-global-color-secondary, #212529);
    --ek-text: var(--e-global-color-text, #485B60);
    --ek-bg: var(--e-global-color-d52da6c, #FDFBF7);
    --ek-sand: var(--e-global-color-70d529d, #F7F3EC);
    --ek-line: var(--e-global-color-e0bb381, #DDDDDD);
    --ek-white: #fff;
    --ek-max: 1250px;
    font-family: "Montserrat", sans-serif;
    color: var(--ek-text);
    font-size: 16px;
    line-height: 1.65rem;
}

.ek-container { max-width: var(--ek-max); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.ek-center { text-align: center; }
.ek-tienda a, .ek-servicio a { font-size: inherit; line-height: inherit; text-transform: none; }

.ek-h2,
.elementor-kit-10 .ek-h2 {
    font-size: 36px; line-height: 2.8125rem; font-weight: 500; color: var(--ek-dark);
    margin: 0 0 24px;
}

.ek-richtext p { margin: 0 0 1em; }
.ek-richtext ul, .ek-richtext ol { padding-left: 1.2em; margin: 0 0 1em; }
.ek-richtext a { color: var(--ek-dark); text-decoration: underline; }

/* ---------------------------------------------------------------- hero */
.ek-hero {
    position: relative;
    min-height: 360px;
    display: flex; align-items: center;
    margin-bottom: 65px;
    background: url("/theme/wp-content/uploads/2025/04/breadcrumb-bg.png") no-repeat bottom center / contain;
}
.ek-hero__inner { text-align: center; padding-top: 10px; }
.ek-hero__title,
.elementor-kit-10 .ek-hero__title { font-size: 65px; line-height: 1.2em; font-weight: 500; margin: 0 0 20px; color: var(--ek-dark); }

.ek-breadcrumb { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 15px; font-size: 16px; }
.ek-breadcrumb--left { justify-content: flex-start; margin-bottom: 30px; font-size: 14px; }
.ek-breadcrumb a,
.elementor-kit-10 .ek-breadcrumb a { color: var(--ek-text); font-size: inherit; font-weight: 400; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% .5px; }
.ek-breadcrumb a:hover { background-size: 0 .5px; }

.ek-idiomas { display: flex; justify-content: center; gap: 6px; margin-top: 22px; font-size: 13px; letter-spacing: .05em; }
.ek-servicio .ek-idiomas { justify-content: flex-start; }
.ek-idiomas a, .ek-idiomas span { padding: 2px 8px; border: 1px solid var(--ek-line); color: var(--ek-text); text-decoration: none; }
.elementor-kit-10 .ek-idiomas a { font-size: 13px; font-weight: 400; }
.ek-idiomas .is-active { background: var(--ek-dark); border-color: var(--ek-dark); color: #fff; }

.ek-intro { max-width: 860px; text-align: center; margin-bottom: 50px; font-size: 18px; line-height: 1.7rem; }

/* ---------------------------------------------------------------- filtros */
.ek-filtros { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 50px; }
.ek-filtro,
.elementor-kit-10 .ek-filtro {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: 1px solid var(--ek-dark);
    font-size: 15px; font-weight: 500; color: var(--ek-dark); text-decoration: none; text-transform: none;
    transition: background .2s, color .2s;
}
.ek-filtro span { font-size: 12px; opacity: .6; }
.ek-filtro:hover, .ek-filtro.is-active,
.elementor-kit-10 .ek-filtro.is-active { background: var(--ek-dark); color: #fff; }

/* ---------------------------------------------------------------- tarjetas */
.ek-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px 50px; margin-bottom: 80px; }
.ek-card { display: flex; flex-direction: column; border-left: 4px solid var(--ek-dark); }
.ek-card[hidden] { display: none; }
.ek-card__media { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: var(--ek-sand); }
.ek-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ek-card:hover .ek-card__media img { transform: scale(1.04); }
.ek-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 64px; font-weight: 300; color: var(--ek-dark); }
.ek-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 10px 0 12px; }
.ek-card__title,
.elementor-kit-10 .ek-card__title { font-size: 20px; line-height: 1.6875rem; font-weight: 500; margin: 0 0 12px; }
.ek-card__title a,
.elementor-kit-10 .ek-card__title a { color: var(--ek-dark); font-size: inherit; font-weight: inherit; text-transform: none; }
.ek-card__cat { margin: 0 0 8px; font-size: 16px; color: var(--ek-dark); }
.ek-card__cat strong { font-weight: 700; color: var(--ek-text); font-size: 14px; }
.ek-card__text { font-size: 15px; margin: 0 0 14px; }
.ek-card--destacado { border-left-color: #b89b5e; }

.ek-link-arrow,
.elementor-kit-10 .ek-link-arrow { margin-top: auto; display: inline-flex; gap: 8px; color: var(--ek-dark); font-size: 16px; font-weight: 500; text-transform: capitalize; }
.ek-link-arrow span { transition: transform .25s; }
.ek-link-arrow:hover span { transform: translateX(4px); }

.ek-vacio { text-align: center; padding: 40px 0 80px; }
.ek-final { max-width: 860px; text-align: center; padding-bottom: 80px; }

/* ---------------------------------------------------------------- precio */
.ek-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 22px; }
.ek-precio__importe { font-size: 30px; line-height: 1.2; font-weight: 500; color: var(--ek-dark); }
.ek-precio__iva { font-size: 13px; }
.ek-precio__nota { flex-basis: 100%; font-size: 14px; font-style: italic; }
.ek-precio--consultar .ek-precio__importe { font-size: 22px; }
.ek-precio--compacto { margin-bottom: 10px; }
.ek-precio--compacto .ek-precio__importe { font-size: 18px; }

/* botones (.ek-btn): en ekonos.css, se usan en toda la web (aviso de cookies, modales...) */

/* ---------------------------------------------------------------- landing */
.ek-hero--servicio { background-position: bottom right; background-size: 45%; min-height: 0; padding: 60px 0 40px; margin-bottom: 70px; }
.ek-servicio-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.ek-eyebrow { display: inline-block; margin: 0 0 16px; padding: 3px 14px; border: 1px solid var(--ek-dark); border-radius: 30px; font-size: 14px; color: var(--ek-dark); }
.ek-servicio-hero__title,
.elementor-kit-10 .ek-servicio-hero__title { font-size: 50px; line-height: 1.2em; font-weight: 500; margin: 0 0 20px; color: var(--ek-dark); }
.ek-servicio-hero__lead { font-size: 18px; line-height: 1.7rem; margin: 0 0 28px; }
.ek-servicio-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ek-servicio-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-left: 4px solid var(--ek-dark); }

.ek-servicio-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 70px; align-items: start; margin-bottom: 90px; }
.ek-servicio-main__content > .ek-richtext { font-size: 17px; margin-bottom: 40px; }
.ek-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ek-checklist li { position: relative; padding-left: 36px; color: var(--ek-dark); font-weight: 500; }
.ek-checklist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ek-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 12px; }
.ek-checklist li span { display: block; font-weight: 400; color: var(--ek-text); }

.ek-ficha { position: sticky; top: 110px; padding: 32px; background: #fff; border: 1px solid var(--ek-line); border-top: 4px solid var(--ek-dark); }
.ek-ficha__title { font-size: 20px; font-weight: 500; color: var(--ek-dark); margin: 0 0 14px; line-height: 1.4; }
.ek-ficha__contacto { margin: 22px 0 0; font-size: 14px; }
.ek-ficha__contacto a, .elementor-kit-10 .ek-ficha__contacto a { color: var(--ek-dark); font-size: 14px; font-weight: 500; }

/* bloques */
.ek-bloque { margin-bottom: 90px; }
.ek-bloque--texto { max-width: 900px; }
.ek-bloque--texto-imagen { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.ek-bloque--texto-imagen.is-reverse .ek-bloque__media { order: 2; }
.ek-bloque__media img { width: 100%; border-left: 4px solid var(--ek-dark); }

.ek-bloque--pasos { background: var(--ek-sand); padding: 80px 0; }
.ek-pasos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; counter-reset: none; }
.ek-pasos li { border-left: 4px solid var(--ek-dark); padding: 0 0 0 20px; }
.ek-pasos__num { display: block; font-size: 36px; font-weight: 300; color: var(--ek-dark); margin-bottom: 10px; }
.ek-pasos strong { display: block; color: var(--ek-dark); font-weight: 500; font-size: 18px; margin-bottom: 6px; }
.ek-pasos p { margin: 0; font-size: 15px; }

.ek-bloque--faq { max-width: 900px; margin-bottom: 0; }
.ek-bloque--faq + :not(.ek-bloque--faq) { margin-top: 90px; }
.ek-faq { border-bottom: 1px solid var(--ek-line); }
.ek-bloque--faq.is-first .ek-faq { border-top: 1px solid var(--ek-line); }
.ek-faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; color: var(--ek-dark); font-weight: 500; font-size: 18px; }
.ek-faq summary::-webkit-details-marker { display: none; }
.ek-faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 26px; font-weight: 300; transition: transform .2s; }
.ek-faq[open] summary::after { transform: rotate(45deg); }
.ek-faq .ek-richtext { padding: 0 0 20px; }

.ek-bloque--cta { background: var(--ek-dark); padding: 70px 0; color: #ddd; margin-bottom: 0; }
.ek-cta { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.ek-cta .ek-h2, .elementor-kit-10 .ek-cta .ek-h2 { color: #fff; margin-bottom: 10px; }
.ek-cta p { margin: 0; }

/* formulario de solicitud */
.ek-solicitud { background: var(--ek-sand); padding: 90px 0; margin-bottom: 90px; scroll-margin-top: 90px; }
.ek-solicitud__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.ek-solicitud__servicio { font-size: 20px; font-weight: 500; color: var(--ek-dark); border-left: 4px solid var(--ek-dark); padding-left: 14px; }
.ek-form { display: grid; gap: 18px; background: #fff; padding: 40px; }
.ek-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ek-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ek-dark); }
.ek-form input[type=text], .ek-form input[type=email], .ek-form input[type=tel], .ek-form textarea {
    width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--ek-line); border-radius: 0;
    font: 400 15px/1.5 "Montserrat", sans-serif; color: var(--ek-dark); background: var(--ek-bg);
}
.ek-form input:focus, .ek-form textarea:focus { outline: none; border-color: var(--ek-dark); background: #fff; }
.ek-form__check { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 400 !important; }
.ek-form__check input { margin-top: 4px; }
.ek-form__check a, .elementor-kit-10 .ek-form__check a { font-size: 14px; font-weight: 400; text-decoration: underline; }
.ek-form .ek-btn { justify-self: start; }
.ek-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ek-alert { margin: 0; padding: 14px 18px; font-size: 15px; }
.ek-alert--ok { background: #e7f3ec; color: #1e5b36; border-left: 4px solid #2e7d4f; }
.ek-alert--error { background: #fbeaea; color: #8a1f1f; border-left: 4px solid #b3261e; }

.ek-relacionados { margin-bottom: 40px; }
.ek-relacionados .ek-grid { margin: 40px 0 30px; }
.ek-relacionados > p { margin-bottom: 80px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    .ek-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 30px; }
    .ek-hero__title, .elementor-kit-10 .ek-hero__title { font-size: 50px; }
    .ek-servicio-hero, .ek-servicio-main, .ek-solicitud__inner, .ek-bloque--texto-imagen { grid-template-columns: 1fr; gap: 40px; }
    .ek-bloque--texto-imagen.is-reverse .ek-bloque__media { order: 0; }
    .ek-ficha { position: static; }
    .ek-servicio-hero__title, .elementor-kit-10 .ek-servicio-hero__title { font-size: 40px; }
}
@media (max-width: 767px) {
    .ek-grid { grid-template-columns: 1fr; }
    .ek-hero { min-height: 260px; margin-bottom: 40px; }
    .ek-hero__title, .elementor-kit-10 .ek-hero__title { font-size: 38px; }
    .ek-servicio-hero__title, .elementor-kit-10 .ek-servicio-hero__title { font-size: 32px; }
    .ek-h2, .elementor-kit-10 .ek-h2 { font-size: 28px; line-height: 1.25; }
    .ek-form { padding: 24px; }
    .ek-form__row { grid-template-columns: 1fr; }
    .ek-cta { flex-direction: column; align-items: flex-start; }
}

/* conmutador particular/empresa (templates/ekonos/_cliente_switch.html.twig) */
.ek-catalogo__cliente { display: flex; justify-content: center; margin: -20px 0 26px; }
.ek-cliente-switch--hero { margin: -8px 0 26px; }

/* páginas de error (templates/error/error.html.twig) */
.ek-error .ek-hero { min-height: 480px; margin-bottom: 0; }
.ek-error .ek-intro { margin: 0 auto 30px; }
.ek-error__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ------------------------------------------------------------------ View Transitions entre páginas
   Tienda: al pulsar una tarjeta, su foto, su título y su precio vuelan hasta la imagen, el <h1> y el
   precio del hero de la landing (y al revés al volver atrás). El resto de la página se aleja y la
   nueva entra desde abajo. Los view-transition-name (únicos, con el uuid del servicio) están en
   tienda/_card.html.twig, tienda/_precio.html.twig y articles/servicio.html.twig.
   Solo lo activan las páginas que cargan este CSS (ambas páginas tienen que optar). Navegadores
   sin soporte (Firefox, por ahora) navegan normal; con "reducir movimiento" no hay animación. */
@view-transition { navigation: auto; }

:root {
    --ek-vt-curva: cubic-bezier(.22, 1, .36, 1);   /* easeOutQuint: arranca rápido y aterriza suave */
    --ek-vt-dur: .7s;
}

/* página que se va: se aleja un poco y se desvanece; página que llega: sube y aparece */
::view-transition-old(root) { animation: ek-vt-salir .35s ease-in both; }
::view-transition-new(root) { animation: ek-vt-entrar .6s var(--ek-vt-curva) .12s both; }
@keyframes ek-vt-salir  { to   { opacity: 0; transform: scale(.965); filter: blur(3px); } }
@keyframes ek-vt-entrar { from { opacity: 0; transform: translateY(36px); } }

/* elementos compartidos: vuelo con la misma curva */
::view-transition-group(*) { animation-duration: var(--ek-vt-dur); animation-timing-function: var(--ek-vt-curva); }

/* foto: primero y por encima de todo; la tarjeta (8:5) y el hero (4:3) tienen distinta proporción,
   así que se recorta (cover) en lugar de deformarse, con un leve zoom al aterrizar */
::view-transition-group(*.ek-foto) { z-index: 3; }
::view-transition-old(*.ek-foto), ::view-transition-new(*.ek-foto) {
    width: 100%; height: 100%; object-fit: cover; overflow: clip;
    animation-duration: var(--ek-vt-dur); animation-timing-function: var(--ek-vt-curva);
}
::view-transition-new(*.ek-foto) { animation-name: ek-vt-foto-new; }
::view-transition-old(*.ek-foto) { animation-name: ek-vt-foto-old; }
@keyframes ek-vt-foto-new { from { opacity: 0; transform: scale(1.06); } }
@keyframes ek-vt-foto-old { to { opacity: 0; } }

/* título y precio: salen un instante después que la foto (efecto de profundidad); el texto cambia
   de tamaño y de saltos de línea: se escala sin deformarse, anclado arriba a la izquierda */
::view-transition-group(*.ek-titulo), ::view-transition-group(*.ek-precio) { z-index: 4; animation-delay: .06s; }
::view-transition-old(*.ek-titulo), ::view-transition-new(*.ek-titulo),
::view-transition-old(*.ek-precio), ::view-transition-new(*.ek-precio) {
    height: 100%; width: auto; object-fit: contain; object-position: left top;
    animation-duration: .45s; animation-delay: .06s;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}