/* ==========================================================================
   Egacan — estilos compartidos (complementan a Tailwind)
   ========================================================================== */

html { scroll-padding-top: 130px; }

/* Cabecera fija */
/* --C = ancho de la caja de contenido de egacan.es (ancho útil menos 48 px, 1400 px como máximo).
   Los espacios del inicio que en egacan.es van en % se calculan sobre ella (calc(var(--C) * 0.1)...). */
main { container-type: inline-size; }
main > * { --C: min(calc(100cqw - 48px), 1400px); }

/* Espaciado de letras de egacan.es: textos 0,6 px y títulos 0,3 px */
body { letter-spacing: .6px; }
h1, h2, h3, h4, h5, h6 { letter-spacing: .3px; }

/* Menú principal (Poppins Light 14 px con el relleno de egacan.es) */
.nav-link { display: block; padding: 8.4px 14.7px; transition: color .2s ease; }
.nav-link:hover { color: #ff9800; }
/* Entre 1024 y 1279 px el menú no cabe con el relleno de egacan.es: se reduce un poco */
@media (min-width: 1024px) and (max-width: 1279px) { .nav-link { padding-left: 10px; padding-right: 10px; } }

/* Pie: títulos Poppins 22 px con línea azul de 40 px debajo y enlaces grises */
.footer-title { position: relative; padding-bottom: 25px; margin-bottom: 11px; font-family: Poppins, Arial, sans-serif; font-size: 22px; line-height: 26.4px; font-weight: 700; color: #0d0d0d; }
.footer-title::after { content: ""; position: absolute; left: 0; bottom: 18.7px; width: 40px; height: 2px; background-color: #1e7cd4; }
.footer-links { color: #929292; font-size: 14px; letter-spacing: normal; }
.footer-links li { padding: 7.5px 0; line-height: 22.4px; }

/* Separadores decorativos bajo los títulos */
.egacan-separator,
.egacan-separator-orange {
  width: 45px;
  height: 2px;
  margin: 12px auto;
  border-radius: 9999px;
  background-color: #203271;
}
.egacan-separator-orange { background-color: #ff9900; }

/* Submenú de "Servicios": el padding-top evita que se cierre al bajar el ratón.
   Se oculta con opacidad (no con visibility) para que sus enlaces sigan en el orden de
   tabulación: al llegar con Tab a una opción, :has(:focus-visible) lo muestra. */
.nav-dropdown { padding-top: .75rem; }
/* Cerrado con Escape: se mantiene oculto hasta que el ratón o el foco salgan */
.group.is-dismissed .nav-dropdown { visibility: hidden !important; opacity: 0 !important; }

/* ---------------- Barra lateral de compartir ---------------- */
.social-sidebar { transition: transform .3s ease; }
.social-sidebar.is-collapsed { transform: translateX(-40px); }
/* Al ocultarla, la flecha sigue visible en el borde */
.social-sidebar.is-collapsed .social-sidebar-toggle { transform: translateX(40px); }
.social-sidebar.is-collapsed .social-sidebar-toggle i { transform: rotate(180deg); }
.social-sidebar-item { transition: width .2s ease, visibility 0s; }
/* Plegada: los enlaces salen del orden de tabulación al terminar la animación */
.social-sidebar.is-collapsed .social-sidebar-item { visibility: hidden; transition: visibility 0s .3s; }
.social-sidebar-item:hover { width: 2.75rem; }

/* ---------------- Sliders (hero y galerías) ---------------- */
.hero-slide,
.fade-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility .9s ease;
  background-size: cover;
  background-position: center;
}
.hero-slide.is-active,
.fade-slide.is-active { opacity: 1; visibility: visible; }

/* Hero de inicio, como el slider de egacan.es:
   - la nueva diapositiva aparece encima de la anterior (que sigue visible debajo con .is-leaving, puesta por main.js);
   - cada foto hace un zoom lento del 100 % al 115 % en 10 s (--zoom cambia el final);
   - data-enter="drop": la diapositiva cae desde arriba y data-out-prev="shrink" encoge la anterior al 85 %;
   - el título aparece con un fundido de 1,5 s. */
.hero-slide.is-active { z-index: 2; }
.hero-slide.is-leaving { z-index: 1; opacity: 1; visibility: visible; transition: transform 1s ease; }
.hero-slide.is-shrinking { transform: scale(.85); }
.hero-slide > img { transform-origin: center; will-change: transform; }
.hero-slide.is-active > img,
.hero-slide.is-leaving > img { animation: hero-zoom 10s linear forwards; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(var(--zoom, 1.15)); } }
.hero-slide[data-enter="drop"].is-active { transition: none; animation: hero-drop 1s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes hero-drop { from { transform: translateY(-100%); } to { transform: none; } }
.hero-slide .hero-content { opacity: 0; transition: opacity 1.5s ease .2s; }
.hero-slide.is-active .hero-content,
.hero-slide.is-leaving .hero-content { opacity: 1; }

/* Título de cada diapositiva: mayúsculas centradas con sombra, como en egacan.es (65/75 px a 1240 px) */
.hero-title {
  max-width: 1000px;
  margin: 0 auto;
  letter-spacing: 0;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.75rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,.75);
}
@media (min-width: 640px)  { .hero-title { font-size: 2.5rem; line-height: 2.875rem; text-shadow: 4px 3px 8px rgba(0,0,0,.75); } }
@media (min-width: 1024px) { .hero-title { font-size: 3.3125rem; line-height: 3.8125rem; } }
@media (min-width: 1240px) { .hero-title { font-size: 4.0625rem; line-height: 4.6875rem; text-shadow: 6px 4px 12px rgba(0,0,0,.75); } }

/* Flechas redondas del slider (estilo "hephaistos" de egacan.es) */
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  background-color: rgba(0,0,0,.5);
  transition: background-color .2s ease;
}
.hero-arrow:hover,
.hero-arrow:focus-visible { background-color: #000; }

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  transition: width .3s ease, background-color .3s ease;
}
.gallery-dots .slider-dot { width: 8px; height: 8px; background-color: #64748b; }
.gallery-dots .slider-dot:hover { background-color: #334155; }
.gallery-dots .slider-dot.is-active { width: 22px; background-color: #333399; }
.clients-dots .slider-dot { width: 5px; height: 5px; background-color: #000; opacity: .2; }
.clients-dots .slider-dot:hover { opacity: .5; }
.clients-dots .slider-dot.is-active { opacity: 1; }

/* ---------------- Páginas interiores (copiadas de egacan.es) ---------------- */
/* Banner con zoom lento (egacan.es/sobre-nosotros: 100 % → 115 % en 50 s) */
.banner-zoom { animation: banner-zoom 50s linear forwards; transform-origin: center; }
@keyframes banner-zoom { from { transform: scale(1); } to { transform: scale(1.15); } }
.banner-zoom--40 { animation-name: banner-zoom-120; animation-duration: 40s; }
.banner-zoom--120 { animation-name: banner-zoom-120; }
@keyframes banner-zoom-120 { from { transform: scale(1); } to { transform: scale(1.2); } }
/* Páginas de servicios: párrafos 18/28,8 px, títulos 36 px, listas en Roboto y botón azul (egacan.es) */
.service-text p { font-size: 18px; line-height: 28.8px; margin: 0 0 32px; color: #333; }
.service-text p.text-black { color: #000; }
.service-text p:last-child, .service-text p:has(+ div) { margin-bottom: 0; }
.service-h { font-size: 28px; line-height: 1.15; font-weight: 600; color: #333399; margin-bottom: 38px; }
@media (min-width: 768px) { .service-h { font-size: 36px; line-height: 36px; } }
.service-list { list-style: disc; padding-left: 36px; font-family: Roboto, Arial, sans-serif; font-size: 18px; line-height: 28.8px; color: #333; }
/* Cada elemento ocupa 37 px con una línea y 28,8 px más por cada línea extra, como en egacan.es */
.service-list li { padding: 4px 0; }
.service-list.text-black { color: #000; }
.service-list--p { font-family: Arimo, Arial, sans-serif; }
.service-btn { display: inline-block; background-color: #333399; color: #fff; font-family: Roboto, Arial, sans-serif; font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: .6px; padding: 15px 30px; border-radius: 4px; transition: background-color .2s ease; }
.service-btn:hover { background-color: #262673; }
/* Textos justificados de 18/25 px */
.about-text p { font-size: 18px; line-height: 25px; margin-bottom: 10px; text-align: justify; color: #333; letter-spacing: normal; }
.about-text strong { font-weight: 700; }
/* Galería que se desliza (como el carrusel de Elementor): la nueva entra por la derecha y la anterior sale por la izquierda */
.slide-gallery [data-slide] { position: absolute; top: 0; left: 0; right: 0; transform: translateX(100%); visibility: hidden; transition: transform .5s ease; }
.slide-gallery [data-slide].is-active { transform: none; visibility: visible; z-index: 2; }
.slide-gallery [data-slide].is-leaving { transform: translateX(-100%); visibility: visible; z-index: 1; }
.slide-gallery [data-slide]:not(.is-active):not(.is-leaving) { transition: none; }
/* Puntos de 6 px como los de Swiper */
.swiper-dots .slider-dot { width: 6px; height: 6px; background-color: #000; opacity: .2; }
.swiper-dots .slider-dot:hover { opacity: .5; }
.swiper-dots .slider-dot.is-active { opacity: 1; }

/* ---------------- Aviso legal y cookies (texto de 18/28,8 px en negro, como egacan.es) ---------------- */
.legal-plain { font-size: 18px; line-height: 28.8px; color: #000; }
.legal-plain p, .legal-plain ul, .legal-plain ol { margin: 0 0 32px; }
.legal-plain h2, .legal-plain h3 { margin: 40px 0 18px; font-weight: 700; color: #232323; line-height: 1.3; }
.legal-plain h2 { font-size: 28px; }
.legal-plain h3 { font-size: 22px; }
.legal-plain ul { list-style: disc; padding-left: 2em; }
.legal-plain ol { list-style: decimal; padding-left: 2em; }
.legal-plain a { color: #1e7cd4; }
.legal-plain a:hover { text-decoration: underline; }
.legal-plain strong, .legal-plain b { font-weight: 700; }
/* En el aviso legal de egacan.es el primer apartado va pegado a su párrafo */
.legal-plain--first-tight > p:first-child { margin-bottom: 0; }

/* ---------------- Artículos del blog (plantilla de entrada de egacan.es) ---------------- */
.post-content { font-size: 14px; line-height: 22.4px; color: #444; overflow-wrap: anywhere; }
.post-content p, .post-content ul, .post-content ol, .post-content blockquote, .post-content table { margin: 0 0 32px; }
.post-content h2 { margin: 69px 0 23px; font-size: 30px; line-height: 1.4; font-weight: 700; color: #232323; }
.post-content h3 { margin: 54px 0 18px; font-size: 24px; line-height: 1.2; font-weight: 700; color: #232323; }
.post-content h4 { margin: 40px 0 14px; font-size: 20px; line-height: 1.3; font-weight: 700; color: #232323; }
@media (min-width: 768px) { .post-content h2 { font-size: 46px; } .post-content h3 { font-size: 36px; } .post-content h4 { font-size: 26px; } }
.post-content > :first-child { margin-top: 0; }
.post-content strong, .post-content b { font-weight: 700; }
.post-content a { color: #1e7cd4; }
.post-content a:hover { text-decoration: underline; }
.post-content ul { list-style: disc; padding-left: 2em; }
.post-content ol { list-style: decimal; padding-left: 2em; }
.post-content li { margin-bottom: 6px; }
.post-content blockquote { border-left: 3px solid #444; padding-left: 14px; }
.post-content blockquote p { margin: 0; }
.post-content table { width: 100%; border-collapse: collapse; }
.post-content th, .post-content td { border: 1px solid #ddd; padding: 8px; text-align: left; }

/* ---------------- Fondo de "Nuestros servicios" (inicio): foto de egacan.es ---------------- */
.services-bg {
  background: #1f2937 url('../img/servicios-bg.jpg') right bottom / cover no-repeat;
}
/* Capa gris clara al 29 % sobre la foto, como en el original */
.services-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(158,158,158,.29);
  pointer-events: none;
}

/* ---------------- Contadores: foto de egacan.es con capa negra al 50 % ---------------- */
.stats-bg {
  background-image:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('../img/stats-bg.jpg'),
    linear-gradient(135deg, #0b132b, #203271);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (hover: none) { .stats-bg { background-attachment: scroll; } }

/* ---------------- Carrusel de logos de clientes ----------------
   --visible = logos a la vez (lo lee main.js); --gap = separación entre logos. */
[data-logo-carousel] { --visible: 2; --gap: 1.5rem; }
@media (min-width: 768px) { [data-logo-carousel] { --visible: 4; --gap: 2rem; } }
@media (min-width: 1024px) { [data-logo-carousel] { --visible: 5; } }
[data-logo-carousel] .clients-viewport { overflow: hidden; overflow: clip; }
.clients-track {
  gap: var(--gap);
  transition: transform .5s ease;
  will-change: transform;
}
.client-logo {
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) { .client-logo { height: 10rem; } }
@media (min-width: 1024px) { .client-logo { height: 173px; } [data-logo-carousel] { --gap: 37px; } }
.client-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------------- Imágenes con texto de respaldo ---------------- */
.img-fallback .fallback-text { display: none; }
.img-fallback.is-fallback img { display: none; }
.img-fallback.is-fallback .fallback-text { display: flex; }

/* ---------------- Mapa bajo demanda ----------------
   La cuadrícula solo se ve si la foto aérea no carga. */
.map-placeholder {
  background-color: #e2e8f0;
  background-image:
    linear-gradient(rgba(255,255,255,.55) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.55) 2px, transparent 2px),
    linear-gradient(35deg, transparent 48%, rgba(255,255,255,.8) 48%, rgba(255,255,255,.8) 52%, transparent 52%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
}

/* ---------------- Contacto (como en egacan.es) ----------------
   Fondo blanco con la foto anclada arriba a la izquierda (se muestra a 768 px; el archivo es x2 para retina)
   y una capa gris #656565 al 50 % encima; el contenido va por encima de la capa. */
.contact-bg {
  position: relative;
  background: #fff url('../img/contacto-atencion-cliente.jpg') left top / 768px auto no-repeat;
}
.contact-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(101, 101, 101, .5);
  pointer-events: none;
}
.contact-bg > * { position: relative; }
/* Sombra suave para que el texto blanco se lea mejor sobre el gris claro */
.contact-shadow { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.contact-input {
  display: block;
  width: 100%;
  height: 28px;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 20px;
  border: 0;
  border-radius: 0;
  background-color: #fff;
  color: #1e293b;
  font-size: .875rem;
}
.contact-input:focus { outline: 2px solid #1e7cd4; outline-offset: 0; box-shadow: none; }
textarea.contact-input { height: 186px; padding: 4px 20px; resize: vertical; }
.contact-input.is-invalid { outline: 2px solid #b91c1c; }

/* ---------------- Páginas legales (política de privacidad, aviso legal...) ---------------- */
.legal-text h2 { margin: 2.5rem 0 1rem; font-size: 1.5rem; line-height: 1.25; font-weight: 700; color: #203271; }
@media (min-width: 768px) { .legal-text h2 { font-size: 2.25rem; } }
.legal-text p { margin: 0 0 1rem; }
.legal-text ul { margin: 0 0 1rem; padding-left: 1.5rem; list-style: disc; }
.legal-text li { margin-bottom: .4rem; }
.legal-text li::marker { color: #1e293b; }
.legal-text strong { color: #0f172a; font-weight: 700; }
.legal-text a { color: #203271; text-decoration: underline; text-underline-offset: 2px; }
.legal-text a:hover { color: #c2410c; }

/* ---------------- Empleo: pestañas de puestos (como en egacan.es) ---------------- */
.job-tab {
  padding: 20px 25px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  color: #333399;
  transition: background-color .2s ease, color .2s ease;
}
.job-tab:hover { color: #1e7cd4; }
.job-tab.is-active, .job-tab.is-active:hover { background-color: #1e7cd4; color: #fff; }
.job-tab:focus-visible { outline: 2px solid #1e7cd4; outline-offset: 2px; }
/* Contenido de cada puesto: 18/28,8 px con los apartados en naranja (#f49a12), como egacan.es */
.job-panels [role="tabpanel"] { padding: 20px; font-size: 18px; line-height: 28.8px; color: #333; letter-spacing: normal; }
.job-panels .job-h { color: #f49a12; }
.job-panels [role="tabpanel"]:focus-visible { outline: 2px solid #1e7cd4; outline-offset: -2px; }

.blog-cat.is-active { color: #203271; font-weight: 700; text-decoration: underline; }

/* ---------------- Botón volver arriba ---------------- */
.back-to-top { opacity: 0; pointer-events: none; transform: translateY(10px); transition: all .25s ease; }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* ---------------- Accesibilidad: menos movimiento ---------------- */
@media (prefers-reduced-motion: reduce) {
  html, html.scroll-smooth { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero-slide > img, .hero-slide[data-enter="drop"].is-active, .banner-zoom { animation: none !important; }
}