/* AHM — hoja de estilos del sitio.
   Cortes: escritorio > 1024 px, tableta 768–1024 px, móvil ≤ 767 px (los de Elementor en el original).
   Índice: 1 base · 2 encabezado y menú · 3 piezas comunes · 4 portada · 5 ventajas ·
           6 presentación (texto, foto con marco y lista) · 7 cifras · 8 organización · 9 servicios ·
           10 foto y texto · 11 cierre · 12 pie · 13 cabecera de las páginas interiores ·
           14 escudos (Fútbol) · 15 contacto (WhatsApp, mapa y formulario) · 16 animaciones de entrada */

/* ---------- 1. Base ---------- */
:root {
  --verde: #009a1b;
  --negro: #131416;
  --gris: #656a74;
  --lima: #b8ff3a;
  --violeta: #9724d6;
  --gris-claro: #f1f2f3;
  --gris-borde: #c7cbcf;
  --nada: rgba(2, 1, 1, 0);   /* el «transparente» del original (#02010100) */
  /* Tamaños de letra del kit de Elementor; cambian en tableta y móvil (más abajo). */
  --t-cuerpo: 16px;
  --t-acento: 20px;
  --t-boton: 15px;
  --t-menu: 16px;
  --t-portada: 68px;
  --t-pagina: 54px;
  --t-titulo: 42px;
  --t-tarjeta: 25px;
  --t-pie: 20px;
  --t-ante: 14px;
  --t-legal: 13px;
}
@media (max-width: 1024px) {
  :root {
    --t-cuerpo: 15px; --t-acento: 19px; --t-boton: 14px; --t-menu: 15px; --t-portada: 54px; --t-pagina: 43px;
    --t-titulo: 35px; --t-tarjeta: 22px; --t-pie: 18px; --t-ante: 12.7px; --t-legal: 12px;
  }
}
@media (max-width: 767px) {
  :root {
    --t-cuerpo: 14px; --t-acento: 17px; --t-boton: 13px; --t-menu: 14px; --t-portada: 40px; --t-pagina: 33px;
    --t-titulo: 28px; --t-tarjeta: 19px; --t-pie: 16px; --t-ante: 11.3px; --t-legal: 11px;
  }
}

*, ::before, ::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--gris);
  font-family: "Raleway", sans-serif; font-size: var(--t-cuerpo); font-weight: 500; line-height: 1.5em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, figure { margin: 0; }
/* Las entradas animadas desde un costado (fadeInRight, slideInRight…) arrancan corridas un
   ancho entero; en el original eso ensancha la página mientras se mueven y en el teléfono se
   puede correr hacia el costado. Se recorta solo en horizontal, sin crear barra de desplazamiento. */
main { overflow-x: clip; }
p { margin-bottom: .9rem; }
a { color: var(--negro); text-decoration: none; }
img { display: block; max-width: 100%; height: auto; border: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
.sprite-iconos { position: absolute; width: 0; height: 0; overflow: hidden; }

.saltar {
  position: absolute; top: -10000px; left: 5px; z-index: 100000;
  padding: 12px 24px; background: #eee; color: #333; font-size: 1rem; line-height: normal;
}
.saltar:focus { top: 5px; }

/* ---------- 2. Encabezado y menú ---------- */
.encabezado {
  position: relative; z-index: 10; background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
}
.encabezado__caja { display: flex; position: relative; max-width: 1280px; margin-inline: auto; }
.encabezado__marca { display: flex; flex-wrap: wrap; align-items: center; width: 25%; padding: 10px; }
.encabezado__logo { display: block; }
.encabezado__logo img { width: auto; height: 50px; object-fit: contain; }
.encabezado__menu { display: flex; flex-wrap: wrap; align-items: center; width: 59%; }
.encabezado__idiomas { display: flex; flex-wrap: wrap; align-items: center; }
.encabezado__idiomas--compacto { display: none; }
.encabezado__idiomas--amplio { justify-content: flex-end; width: 14%; padding: 10px; }

/* Selector de idioma (GTranslate en el original). */
.idiomas { width: 100%; text-align: right; }
.idioma { color: var(--negro); }
.idioma:hover, .idioma:active { color: #336; }
.idioma.activo { font-weight: bold; }

.menu { width: 100%; border-right: 1px solid var(--gris-claro); }
.menu__boton, .menu__identidad, .menu__velo { display: none; }
.menu__panel { position: relative; z-index: 90000; height: 75px; background: #fff; }
.menu__lista { display: flex; flex-wrap: wrap; justify-content: flex-end; height: 100%; }
.menu__lista li { position: relative; }
.menu__lista a {
  display: flex; align-items: center; height: 100%; padding: 0 30px;
  border: 0 solid var(--gris-claro); border-left-width: 1px; background: #fff; color: var(--negro);
  font-size: var(--t-menu); font-weight: 600; line-height: 1.5em; letter-spacing: .5px; text-transform: capitalize;
  transition: all .4s ease;
}
.menu__lista a:hover, .menu__lista a:focus, .menu__lista a:active { background: var(--gris-claro); color: var(--verde); }
.menu__lista a[aria-current] { background: #fff; color: var(--verde); }

@media (max-width: 1024px) {
  .encabezado { padding: 10px; }
  .encabezado__caja { flex-wrap: wrap; max-width: 1024px; }
  .encabezado__logo img { height: 30px; }

  .menu__boton {
    display: block; float: right; position: relative; z-index: 10; width: 55px; padding: 0;
    border: 1px solid rgba(0, 0, 0, .2); border-radius: 3px; background: var(--nada); color: #000;
    font-size: var(--t-boton); font-weight: 800; line-height: 1.5em; text-transform: uppercase;
    cursor: pointer; transition: all .4s ease-in;
  }
  /* Como en el original, el estilo de los botones del sitio quita el borde al pasar el puntero o enfocar. */
  .menu__boton:hover, .menu__boton:focus { border-width: 0; color: var(--verde); }
  .menu__boton .icono {
    display: inline-block; color: var(--negro); font-size: 27px; text-transform: none; vertical-align: -2px;
  }
  .menu__boton:hover .icono { color: var(--verde); }

  .menu__panel {
    position: fixed; top: 0; left: -100vw; display: flex; flex-direction: column-reverse; justify-content: flex-end;
    width: 100%; max-width: 350px; height: 100%; padding-bottom: 10px; overflow-x: hidden; overflow-y: auto;
    transition: left .6s cubic-bezier(.6, .1, .68, .53);
  }
  .menu.is-abierto .menu__panel { left: 0; }
  .menu__lista { display: block; height: 100%; }
  .menu__lista a { padding: 12px 20px; border-width: 1px 0 0; }

  .menu__identidad { display: block; position: relative; z-index: 5; width: 100%; padding: 10px 0; }
  .menu__logo { display: inline-block; margin-top: 5px; padding: 10px 20px 5px; }
  .menu__logo img { display: inline; max-width: 160px; max-height: 60px; width: auto; }
  .menu__cerrar {
    float: right; position: relative; z-index: 10; width: 45px; margin: 15px 15px 0 0; padding: 0;
    border: 0; border-radius: 3px; background: var(--nada); color: var(--negro);
    font-size: var(--t-boton); font-weight: 800; line-height: 1.5em; text-transform: uppercase;
    cursor: pointer; transition: all .4s ease-in;
  }
  .menu__cerrar:hover, .menu__cerrar:focus { color: var(--verde); }

  .menu__velo {
    display: block; position: fixed; z-index: 14; top: 0; left: -100%; width: 100%; height: 100%; padding-bottom: 10px;
    background: rgba(51, 51, 51, .5); transition: all .6s cubic-bezier(.6, .1, .68, .53) .4s;
  }
  .menu.is-abierto .menu__velo { left: 0; transition: all .6s cubic-bezier(.22, .61, .24, 1) 0s; }
}
/* En tableta el original muestra el selector de idioma dos veces (la columna «compacta» de
   Elementor solo se oculta en escritorio). A pedido del cliente, la copia deja uno solo: el de la
   derecha, y el encabezado queda en una fila. Para volver al original: mostrar
   .encabezado__idiomas--compacto también acá, con width: 52%. */
@media (min-width: 768px) and (max-width: 1024px) {
  .encabezado__marca { width: 27%; }
  .encabezado__menu { width: 52%; }
  .encabezado__idiomas--amplio { width: 21%; }
}
@media (max-width: 767px) {
  .encabezado { padding: 7px; }
  .encabezado__caja { max-width: 767px; }
  .encabezado__marca { width: 54%; }
  .encabezado__logo img { height: 26px; }
  .encabezado__idiomas--compacto { display: flex; width: 26%; }
  .encabezado__menu { width: 20%; }
  .encabezado__idiomas--amplio { display: none; }
  .menu { border-right: 0; }
  .menu__boton .icono { font-size: 25px; }
  .menu__panel { max-width: 320px; }
  .menu__lista a { padding: 10px 20px; }
  .menu__logo img { max-width: 135px; max-height: 50px; }
}

/* ---------- 3. Piezas comunes ---------- */
/* Contenedor de cada franja y columna (en el original, sección, contenedor y columna de Elementor). */
.caja { display: flex; position: relative; max-width: 1280px; margin-inline: auto; }
.col { display: flex; flex-wrap: wrap; align-content: flex-start; position: relative; min-height: 1px; padding: 10px; }
.col > * { width: 100%; }
.col > :not(:last-child) { margin-bottom: 20px; }
.col > p:not(:last-child) { margin-bottom: calc(.9rem + 20px); }
@media (max-width: 1024px) { .caja { flex-wrap: wrap; max-width: 1024px; } }
@media (max-width: 767px) { .caja { max-width: 767px; } .col { width: 100%; } }

.antetitulo {
  margin-bottom: 0; color: var(--negro); font-size: var(--t-ante); font-style: italic; font-weight: 700; line-height: 1.2em;
  letter-spacing: 2px; text-transform: uppercase;
}
.col > .antetitulo:not(:last-child) { margin-bottom: 20px; }
.titulo {
  color: var(--negro); font-family: "Barlow", sans-serif; font-size: var(--t-titulo); font-style: italic;
  font-weight: 700; line-height: 1.1em;
}

/* Lista con tildes (lista de íconos de Elementor). */
.tildes li { display: flex; align-items: center; }
.tildes .icono { flex: none; width: 14px; height: 14px; margin-right: 3.5px; }
.tildes span { padding-left: 5px; }

/* Botón con la esquina recortada. */
.boton {
  display: inline-block; padding: 12px 24px; border-radius: 0;
  background-color: transparent; background-image: linear-gradient(135deg, var(--lima) 93%, var(--nada) 93%);
  color: var(--negro); font-size: var(--t-boton); font-weight: 800; line-height: 1.5em; text-align: center;
  text-transform: uppercase; transition: all .3s;
}
.boton:hover, .boton:focus { background-image: linear-gradient(135deg, var(--negro) 93%, var(--nada) 93%); color: var(--verde); }

/* ---------- 4. Portada ---------- */
.portada {
  position: relative; isolation: isolate; overflow: hidden; padding: 14em 1em;
  background: url("../images/inicio-portada-delegacion-1920x1080.jpg") 50% 50% / cover;
}
.portada__video {
  position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  transition: opacity 1s;
}
.portada__video.is-cargando { opacity: 0; }
.portada::before {
  content: ""; position: absolute; inset: 0; background: var(--negro); opacity: .55;
  transition: background .3s, border-radius .3s, opacity .3s;
}
.portada__caja { position: relative; max-width: 1300px; margin-inline: auto; padding: 10px; }
.portada__texto { padding: 10px calc(50% + 10px) 10px 10px; }
.trazo {
  display: block; width: 120px; min-height: 20px; margin-bottom: 20px; background: var(--verde);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' height='100%25' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpolygon points='9.4,2 24,2 14.6,21.6 0,21.6'/%3E%3C/svg%3E") repeat-x 0 0 / 20px 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' height='100%25' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpolygon points='9.4,2 24,2 14.6,21.6 0,21.6'/%3E%3C/svg%3E") repeat-x 0 0 / 20px 100%;
}
.portada__titulo {
  margin-bottom: 20px; color: #fff; font-family: "Barlow", sans-serif; font-size: var(--t-portada);
  font-style: italic; font-weight: 700; line-height: 1em; letter-spacing: -1px; text-transform: capitalize;
}
.portada__bajada {
  width: 550px; max-width: 100%; margin-bottom: 1.5em; color: #fff;
  font-size: var(--t-acento); line-height: 1.5em;
}
@media (max-width: 1024px) {
  .portada { padding: 7em 1em 10em; }
  .portada__texto { padding-right: calc(25% + 10px); }
  .portada__bajada { width: 410px; }
}
@media (max-width: 767px) {
  .portada { padding: 6em .5em 9em; }
  .portada__texto { padding-right: 10px; }
  .trazo { width: 100px; }
}

/* ---------- 5. Ventajas (franja blanca que monta sobre la portada) ---------- */
.ventajas { display: flow-root; position: relative; border-bottom: 1px solid var(--gris-borde); }
.ventajas__fondo {
  position: relative; margin-top: -5em;
  background-image: linear-gradient(90deg, var(--nada) 50%, #fff 50%);
}
.ventajas__lista { display: flex; position: relative; max-width: 1280px; margin-inline: auto; }
.ventaja { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; position: relative; background: #fff; }
.ventaja:nth-child(1) { width: 36%; padding: 2em 2em 2em 5em; background: linear-gradient(105deg, var(--nada) 10%, #fff 10%); }
.ventaja:nth-child(2) { width: 31.332%; padding: 35px; }
.ventaja:nth-child(3) { width: 32%; padding: 35px; }
.ventaja__caja { display: flex; gap: 15px; align-items: flex-start; width: 320px; max-width: 320px; }
.ventaja__icono { flex: none; color: var(--verde); font-size: 30px; line-height: 1; }
.ventaja__texto { flex-grow: 1; width: 100%; }
.ventaja__titulo {
  margin-bottom: 10px; color: var(--negro); font-family: "Barlow", sans-serif; font-size: var(--t-tarjeta);
  font-style: italic; font-weight: 700; line-height: 1.2em;
}
.ventaja p { margin: 0; color: var(--gris); }
@media (max-width: 1024px) {
  .ventajas__lista { flex-wrap: wrap; max-width: 1024px; }
  .ventaja:nth-child(1) { padding: 30px 20px 30px 50px; }
  .ventaja:nth-child(2), .ventaja:nth-child(3) { padding: 30px 20px; }
  .ventaja__caja { width: 100%; max-width: 100%; }
  .ventaja__icono { font-size: 25px; }
}
@media (max-width: 767px) {
  .ventajas__lista { max-width: 767px; }
  .ventaja:nth-child(n) { width: 100%; }
  .ventaja:nth-child(1) { padding: 25px 20px 0 50px; }
  .ventaja:nth-child(2) { padding: 20px 20px 0 50px; }
  .ventaja:nth-child(3) { padding: 20px 20px 25px 50px; }
  .ventaja__icono { font-size: 22px; }
}

/* ---------- 6. Presentación: texto, foto con marco verde y lista ----------
   «Quienes somos» en la portada y la primera sección de Fútbol. */
.presentacion {
  position: relative; overflow: hidden; padding: 4em 1em 7em;
  background: url("../images/fondo-textura-1080x810.jpg") center / cover no-repeat;
}
.presentacion::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(at center center, var(--nada) 0%, #fff 50%);
}
.presentacion__texto { align-content: center; align-items: center; padding-right: calc(10px + 1em); }
.presentacion__bajada { font-size: var(--t-acento); line-height: 1.5em; }
.linea { display: block; border-top: 4px solid var(--verde); }
.col > .linea { width: 80px; }
.presentacion__foto { display: flex; }
.presentacion__marco { display: flow-root; width: 100%; margin: 26px 26px 10px 10px; background: var(--verde); }
.presentacion__marco img { width: 100%; height: 525px; margin: -1em -1em 1em 1em; object-fit: cover; }
.presentacion__lista { align-content: center; align-items: center; padding-left: calc(10px + 2em); }
@media (min-width: 1025px) { .presentacion__texto, .presentacion__foto, .presentacion__lista { width: 33.333%; } }
.presentacion__lista .tildes li { align-items: flex-start; }
.presentacion__lista .tildes li:not(:last-child) { padding-bottom: 8px; }
.presentacion__lista .tildes li:not(:first-child) { margin-top: 8px; }
.presentacion__lista .tildes .icono { position: relative; top: 5px; color: var(--gris); }
.presentacion__subtitulo {
  color: var(--negro); font-family: "Barlow", sans-serif; font-size: var(--t-tarjeta); font-style: italic;
  font-weight: 700; line-height: 1.2em;
}
@media (max-width: 1024px) {
  .presentacion { padding: 4em 2em; }
  .presentacion__texto { padding: 10px 10px calc(10px + 2em); }
  .presentacion__marco img { height: 480px; }
  .presentacion__lista { padding-left: calc(10px + 1em); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .presentacion__texto { width: 100%; }
  .presentacion__foto, .presentacion__lista { width: 50%; }
}
@media (max-width: 767px) {
  .presentacion { padding: 2.5em 1.5em; }
  .presentacion__texto { padding-bottom: calc(10px + 1em); }
  .presentacion__foto { width: 100%; }
  .presentacion__marco img { height: 365px; }
  .presentacion__lista { padding-left: 10px; }
  .presentacion__lista--separada { padding-top: calc(10px + 2.5em); }
}

/* ---------- 7. Cifras ---------- */
.cifras { position: relative; padding: 0 1em 7em; }
.cifras__grupo { display: flex; position: relative; width: 50%; }
.cifra {
  display: flex; flex-direction: column; position: relative; width: 50%; padding: 1.5em;
  background-image: linear-gradient(105deg, #fff 10%, var(--nada) 10%), linear-gradient(105deg, var(--fondo-cifra) 90%, #fff 90%);
}
.cifra--clara { --fondo-cifra: var(--gris-claro); --tinta-numero: var(--verde); --tinta-rotulo: var(--negro); }
.cifra--oscura { --fondo-cifra: var(--gris); --tinta-numero: #fff; --tinta-rotulo: #fff; }
.cifra__numero {
  color: var(--tinta-numero); font-family: "Barlow", sans-serif; font-size: var(--t-titulo); font-style: italic;
  font-weight: 700; line-height: 1.1em; text-align: center;
}
.cifra__rotulo {
  color: var(--tinta-rotulo); font-size: var(--t-menu); font-weight: 600; line-height: 1.5em;
  letter-spacing: .5px; text-align: center; text-transform: capitalize;
}
@media (max-width: 1024px) {
  .cifras { padding: 0 1em 5em; }
  .cifras__grupo { flex-wrap: wrap; width: 100%; }
  .cifras__grupo:first-child { margin-bottom: 2em; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .cifras__grupo--invertido > :first-child { order: 2; }
}
@media (max-width: 767px) {
  .cifras { padding: 0 1.5em 3em; }
  .cifras__grupo:first-child { margin-bottom: 0; }
  .cifra { width: 100%; }
}

/* ---------- 8. Organización ---------- */
.organizacion {
  position: relative; overflow: hidden; padding: 7em 1em;
  background: url("../images/inicio-organizacion-hotel-1536x1024.jpg") center / cover no-repeat;
}
.organizacion::before { content: ""; position: absolute; inset: 0; background: var(--negro); opacity: .64; }
.organizacion__texto { align-content: center; align-items: center; padding-right: calc(10px + 2em); }
.organizacion .titulo { color: #fff; }
.tildes--claras li:not(:last-child) { padding-bottom: .2em; }
.tildes--claras li:not(:first-child) { margin-top: .2em; }
.tildes--claras span { color: #fff; }
.tildes--claras .icono { fill: #fff; }
.organizacion__recuadros { padding-left: calc(10px + 2em); }
@media (min-width: 1025px) { .organizacion__texto, .organizacion__recuadros { width: 50%; } }
.recuadro { padding: 30px; border: 1px dashed #fff; background: var(--nada); }
.recuadro h3, .recuadro p { color: #fff; }
.recuadro h3 {
  margin-bottom: 1rem; font-family: "Barlow", sans-serif; font-size: var(--t-tarjeta); font-style: italic;
  font-weight: 700; line-height: 1.2em;
}
.recuadro p { margin: 0; }
@media (max-width: 1024px) {
  .organizacion { padding: 5em 1em; }
  .organizacion__texto { padding-right: 10px; }
  .organizacion__recuadros { align-content: center; align-items: center; padding-left: calc(10px + 1.5em); }
  .recuadro { padding: 20px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .organizacion__texto { width: 55%; }
  .organizacion__recuadros { width: 45%; }
}
@media (max-width: 767px) {
  .organizacion { padding: 3em 1.5em; }
  .organizacion__texto { padding-bottom: calc(10px + 1em); }
  .organizacion__recuadros { padding-left: 10px; }
  .recuadro { padding: 18px; }
}

/* ---------- 9. Servicios ---------- */
.servicios { position: relative; padding: 0 1em; }
.servicios::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: url("../images/fondo-textura-1080x810.jpg") center / cover no-repeat;
}
.servicios__caja {
  display: flex; flex-direction: column; gap: 20px; position: relative;
  max-width: 1280px; margin-inline: auto; padding: 6em 0;
}
.servicios__caja > * { position: relative; }
.servicios .antetitulo, .servicios .titulo, .servicios__bajada { text-align: center; }
#servicios { scroll-margin-top: 45px; }
.servicios__grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 10px; }
.servicios__grilla--dos { grid-template-columns: repeat(2, 1fr); width: 100%; max-width: 846px; margin-inline: auto; padding: 10px 0; }
.servicio {
  position: relative; align-self: start; overflow: hidden; padding: 50px 40px; background: #fff; color: var(--negro);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .15); text-align: center; transition: all .4s ease;
}
.servicio__icono.icono { width: 1em; margin: 0 auto 13px; color: #656565; font-size: 40px; }
.servicio h3 {
  margin-bottom: 1rem; color: #000; font-family: "Barlow", sans-serif; font-size: 23px; font-style: italic;
  font-weight: 700; line-height: 1.2em; transition: all .4s ease;
}
.servicio p { margin-bottom: 10px; color: #656565; transition: all .4s ease; }
@media (max-width: 1024px) {
  .servicios { padding: 0 2em; }
  .servicios__caja { max-width: 1024px; padding: 4em 0; }
  .servicio { padding: 1.5em; }
  .servicio--alto { padding-bottom: 3em; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .servicios__grilla--dos { max-width: 470px; }
}
@media (max-width: 767px) {
  .servicios { padding: 0 1.5em; }
  .servicios__caja { max-width: 767px; padding: 3em 0; }
  .servicios__grilla, .servicios__grilla--dos { grid-template-columns: 1fr; }
  .servicios__grilla--dos { width: auto; max-width: none; margin: -20px 10px 0; }
  .servicio, .servicio--alto { padding: 2em; }
}

/* ---------- 10. Foto y texto ----------
   Foto a la izquierda y texto a la derecha; en tableta y móvil, el texto primero. «Soluciones para
   delegaciones» en la portada (con el lema y la foto chica encima) y «Logística Multideporte» en
   Otros Deportes (con la lista de deportes). */
.foto-texto { position: relative; overflow: hidden; padding: 7em 1em; }
.foto-texto__fotos { width: 50%; }
.soluciones__lema {
  position: absolute; z-index: 1; bottom: 30px; left: 35px; width: 350px; max-width: 350px;
  color: var(--nada); font-family: "Barlow", sans-serif; font-size: 68px; font-style: italic; font-weight: 700;
  line-height: 1em; letter-spacing: -1px; -webkit-text-stroke: 2px var(--violeta);
}
.col > p.soluciones__lema { width: 350px; margin-bottom: 0; }
.soluciones__foto-chica {
  position: absolute; z-index: 1; top: 0; right: 10px; border: solid #fff; border-width: 0 0 10px 10px;
}
.col > .soluciones__foto-chica { width: 300px; margin-bottom: 0; }
.foto-texto__foto { padding-top: 10px; }
.foto-texto__foto img { width: 100%; height: 450px; object-fit: cover; }
.foto-texto__texto { align-content: center; align-items: center; width: 50%; padding-left: calc(10px + 2em); }
.parrafos { display: flow-root; }
.col > .boton { width: auto; margin-bottom: 0; }
.col > .soluciones__boton { margin-right: 30px; }
@media (max-width: 1024px) {
  .foto-texto { padding: 4em 2em; }
  .soluciones__lema { font-size: 54px; }
  .foto-texto__fotos { order: 2; width: 100%; }
  .foto-texto__texto { width: 100%; padding: 10px 10px calc(10px + 2em); }
}
@media (max-width: 767px) {
  .foto-texto { padding: 2.5em 1.5em 3em; }
  .foto-texto__fotos { padding: 0; }
  .soluciones__lema { bottom: 15px; left: 15px; max-width: 190px; font-size: 40px; }
  .col > p.soluciones__lema { width: 190px; }
  .soluciones__foto-chica { right: 0; border-width: 0 0 7px 7px; }
  .col > .soluciones__foto-chica { width: 160px; }
  .foto-texto__foto img { height: 240px; }
  .foto-texto__texto { padding-bottom: calc(10px + 1em); }
  .col > .soluciones__boton { margin-right: 20px; }
}
/* Deportes (Otros Deportes): dos columnas de ítems con la flecha en círculo. */
.col > .deportes { display: flex; margin-bottom: 20px; }
.deportes__col { width: 50%; }
.deportes__col:first-child { padding-right: 10px; }
.deportes__col:last-child { padding-left: 10px; }
.deportes li { display: flex; gap: 15px; align-items: flex-start; }
.deportes li:not(:last-child) { margin-bottom: 20px; }
.deportes .icono { flex: none; color: var(--verde); font-size: 30px; line-height: 1; }
.deportes span {
  flex-grow: 1; margin-bottom: 10px; color: var(--negro); font-family: "Barlow", sans-serif;
  font-size: var(--t-tarjeta); font-style: italic; font-weight: 700; line-height: 1.2em;
}
@media (max-width: 1024px) {
  .col > .deportes { flex-wrap: wrap; }
  .deportes li { padding-right: 5em; }
  .deportes .icono { font-size: 25px; }
}
@media (max-width: 767px) {
  .col > .deportes { margin-bottom: 15px; }
  .deportes__col { width: 100%; }
  .deportes__col:first-child { padding: 0 0 15px; }
  .deportes__col:last-child { padding: 0; }
  .deportes li { padding-right: 0; }
  .deportes .icono { font-size: 22px; }
}

/* ---------- 11. Cierre ---------- */
.cierre {
  position: relative; overflow: hidden; padding: 6em 1em 5em;
  background: url("../images/inicio-cierre-estadio-1920x1280.jpg") 50% 15% / cover no-repeat;
}
.cierre::before { content: ""; position: absolute; inset: 0; background: var(--negro); opacity: .1; }
.cierre .caja { max-width: 700px; }
.cierre .titulo { color: #fff; text-align: center; }
.cierre__texto { color: #fff; text-align: center; }
.col > .cierre__accion { margin-bottom: 0; text-align: center; }
@media (max-width: 1024px) {
  .cierre { padding: 5em 1em; background-position: 0 0; }
  .cierre .caja { max-width: 500px; }
}
@media (max-width: 767px) {
  .cierre { padding: 4em 1em; background-position: center center; }
}

/* ---------- 12. Pie ---------- */
.pie {
  position: relative;
  background: url("../images/pie-fondo-ruta-1536x1024.jpg") 5% 65% / cover no-repeat;
}
.pie::before { content: ""; position: absolute; inset: 0; background: var(--negro); opacity: .92; }
.pie__caja { position: relative; max-width: 1300px; margin-inline: auto; padding: 10px; }
.pie__columnas { display: flex; max-width: 1280px; margin: 5em auto; }
.pie__col { display: flex; flex-wrap: wrap; align-content: flex-start; min-height: 1px; padding: 10px; }
.pie__col > * { width: 100%; }
.pie__col--marca { width: 26.565%; }
.pie__col--enlaces { width: 15.286%; margin-left: 18.149%; }
.pie__col--contacto { width: 20%; margin-left: 20%; }
.pie__logo { width: auto; margin-bottom: 1em; }
.pie__logo img { width: auto; height: 55px; object-fit: contain; }
.pie__col--marca p { margin-bottom: calc(.9rem - 1em); color: #fff; }
.pie__titulo {
  margin-bottom: 20px; color: var(--verde); font-family: "Barlow", sans-serif; font-size: var(--t-pie);
  font-style: italic; font-weight: 700; line-height: 1.2em;
}
.pie__lista li { display: flex; align-items: center; }
.pie__lista a { display: flex; align-items: center; width: 100%; color: #fff; transition: color .3s; }
.pie__lista a:hover { color: var(--gris); }
.pie__lista--enlaces li:not(:last-child) { padding-bottom: 5px; }
.pie__lista--enlaces li:not(:first-child) { margin-top: 5px; }
.pie__lista--enlaces a { font-size: var(--t-boton); font-weight: 800; line-height: 1.5em; text-transform: uppercase; }
.pie__lista--whatsapp, .pie__lista--redes { color: var(--verde); }
/* En el original, a las dos listas las siguen otras dos ocultas en todos los tamaños: las dos
   conservan el margen inferior de 20 px que Elementor da a todo bloque que no es el último. */
.pie__lista--whatsapp, .pie__lista--redes { margin-bottom: 20px; }
.pie__lista--whatsapp li:not(:last-child), .pie__lista--redes li:not(:last-child) { padding-bottom: 3.5px; }
.pie__lista--whatsapp li:not(:first-child), .pie__lista--redes li:not(:first-child) { margin-top: 3.5px; }
.pie__lista .icono { flex: none; color: var(--verde); }
/* El glifo de WhatsApp ocupa 16 px a la izquierda de una caja de 20 (1,25em de IcoFont). */
.pie__lista .icono-whatsapp { width: 20px; height: 16px; }
.pie__lista .icono-instagram { width: 16px; height: 16px; margin-right: 4px; }
.pie__lista span:last-child { padding-left: 5px; }
/* El sobre del correo es un glifo de Material Design Icons en un renglón de la altura del texto:
   ocupa ese alto y queda sobre la misma línea de base, como en el original (el navegador pone el
   glifo a una media interlínea redondeada hacia abajo del borde superior). */
.pie__correo { flex: none; width: 20px; color: var(--verde); font-size: 16px; }
.pie__correo .icono {
  --media: round(down, (1lh - 1em) / 2, 1px);
  display: inline-block; height: 1lh; padding: var(--media) 0 calc(1lh - 1em - var(--media)); color: var(--verde);
  vertical-align: calc(var(--media) + .875em - 1lh);
}
.pie__legal { padding: 1em 0 .5em; border-top: 1px solid rgba(255, 255, 255, .13); }
.pie__legal p {
  margin: 0; padding: 10px; color: #fff; font-size: var(--t-legal); font-style: italic; font-weight: 400;
  line-height: 1.1em; text-align: center;
}
@media (max-width: 1024px) {
  .pie { padding: 0 1em; background-position: center center; }
  .pie__columnas { flex-wrap: wrap; max-width: 1024px; margin: 4em auto; }
  .pie__col--marca { width: 100%; padding-bottom: calc(10px + 2em); }
  .pie__col--enlaces, .pie__col--contacto { margin: 1px 75% 0 0; width: 25%; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .pie__legal p { width: 50%; }
}
@media (max-width: 767px) {
  .pie { padding: 0 .5em; background-position: top center; }
  .pie__columnas { max-width: 767px; margin: 3em auto; }
  .pie__col--enlaces, .pie__col--contacto { margin-right: 50%; width: 50%; }
  .pie__logo img { height: 28px; }
  .pie__legal p { text-align: left; }
}
@media (min-width: 768px) and (max-width: 1024px) { .pie__logo img { height: 33px; } }

/* ---------- 13. Cabecera de las páginas interiores: título y migas sobre una foto ---------- */
.cabecera {
  position: relative; overflow: hidden; padding: 9em 1em 8em;
  background-position: center center; background-repeat: no-repeat; background-size: cover;
}
.cabecera--futbol { background-image: url("../images/futbol-cabecera-estadio-1920x734.jpg"); }
.cabecera--otros { background-image: url("../images/otros-deportes-cabecera-gimnasio-1536x587.jpg"); }
.cabecera--contacto {
  background-image: url("../images/contacto-cabecera-mapa-1536x1024.jpg"); background-position: 50% 38%;
}
.cabecera::before { content: ""; position: absolute; inset: 0; background: var(--negro); opacity: .7; }
.cabecera--otros::before { opacity: .6; }
.cabecera__caja {
  display: flex; flex-wrap: wrap; align-content: flex-start; position: relative;
  max-width: 1280px; margin-inline: auto; padding: 10px;
}
.cabecera--futbol .cabecera__caja { max-width: 300px; }
.cabecera__caja > * { width: 100%; }
.cabecera__titulo {
  margin-bottom: 20px; color: #fff; font-family: "Barlow", sans-serif; font-size: var(--t-pagina);
  font-style: italic; font-weight: 700; line-height: 1.1em; letter-spacing: -1px; text-align: center;
  text-transform: capitalize;
}
/* Migas: «Inicio — Página», con una barra lima de 15 × 3 px entre una y otra. */
.migas { overflow: hidden; }
.migas ol { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -8px; padding: 0; list-style: none; }
.migas li { display: flex; align-items: center; justify-content: center; position: relative; margin: 0 8px; }
.migas li:not(:last-child)::after {
  content: ""; position: relative; right: -8px; height: 3px; border-left: 15px solid var(--lima);
}
.migas a {
  display: flex; align-items: center; justify-content: center; color: var(--gris-borde);
  font-size: var(--t-ante); font-style: italic; font-weight: 700; line-height: 1.2em; letter-spacing: 2px;
  text-transform: uppercase; transition: color .3s;
}
.migas li:hover a { color: #fff; }
@media (max-width: 1024px) { .cabecera { padding: 7em 1em 6em; } }
@media (max-width: 767px) {
  .cabecera { padding: 6em 1em 5em; }
  .cabecera { background-position: 55% 50%; }
}
@media (max-width: 1024px) { .cabecera--contacto { background-position: 0 0; } }

/* ---------- 14. Escudos (Fútbol) ----------
   Tres cintas que corren sin parar, como los carruseles de Swiper del original (sin espera entre
   pasos, un escudo cada --paso, en línea recta; la del medio, hacia la derecha). Diez escudos por
   vista en escritorio, dos en tableta y tres en móvil. site.js duplica la cinta para que dé la
   vuelta sin salto y la pone en marcha. */
.clubes { position: relative; overflow: hidden; padding: 4em 0; }
.clubes::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: url("../images/fondo-diagonales-1200x800.jpg") center / cover no-repeat;
}
.clubes__caja { display: flex; flex-wrap: wrap; align-content: center; align-items: center; position: relative; }
.logos { position: relative; width: 100%; overflow: hidden; container-type: inline-size; --por-vista: 10; }
.logos:not(:last-child) { margin-bottom: 20px; }
.logos--derecha { direction: rtl; }
/* Lo que tarda en pasar cada escudo. En el original son 2,6 / 2,2 / 1,8 s por paso de Swiper, más
   la pausa de uno o dos cuadros entre paso y paso: el ritmo medido (tools/probar-carrusel.mjs)
   es 2,61 / 2,24 / 1,83 s por escudo. */
.logos:nth-child(1) { --paso: 2.61s; }
.logos:nth-child(2) { --paso: 2.24s; }
.logos:nth-child(3) { --paso: 1.83s; }
.logos__pista { display: flex; align-items: flex-start; width: max-content; }
.logos__pista li { flex: none; width: calc(100cqw / var(--por-vista)); text-align: center; }
.logos__pista img { display: inline-block; max-width: 100%; height: auto; }
.logos.is-andando .logos__pista { animation: logos-izquierda calc(var(--logos) * var(--paso)) linear infinite; }
.logos--derecha.is-andando .logos__pista { animation-name: logos-derecha; }
@keyframes logos-izquierda { to { transform: translateX(-50%); } }
@keyframes logos-derecha { to { transform: translateX(50%); } }
@media (max-width: 1024px) {
  .clubes { padding: 4em 2.5em; }
  .clubes__caja { padding-bottom: 1em; }
}
@media (max-width: 767px) {
  .clubes { padding: 2em 0 2.5em; }
  .clubes__caja { padding-bottom: 0; }
  .logos:not(:last-child) { margin-bottom: 5px; }
}
/* Escudos por vista: Swiper toma los cortes de Elementor como «desde» (min-width) y no «hasta», así
   que cambia un píxel antes que el resto del diseño: diez desde 1024 px, dos de 767 a 1023 y tres
   por debajo de 767. */
@media (max-width: 1023px) { .logos { --por-vista: 2; } }
@media (max-width: 766px) { .logos { --por-vista: 3; } }
@media (prefers-reduced-motion: reduce) { .logos.is-andando .logos__pista { animation: none; } }

/* ---------- 15. Contacto: WhatsApp, mapa y formulario ---------- */
/* «Envianos un Whatsapp»: un recuadro con las diagonales del fondo en gris oscuro (brillo al 40 %,
   sin color), el texto a la izquierda y los tres contactos en dos columnas. */
.whatsapp { overflow: hidden; padding: 7em 1em 0; }
.whatsapp__marco { position: relative; isolation: isolate; max-width: 1280px; margin-inline: auto; padding: 40px 50px; }
.whatsapp__marco::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: url("../images/fondo-diagonales-1200x800.jpg") center / cover no-repeat;
  filter: brightness(40%) saturate(0);
}
.whatsapp .titulo, .whatsapp__intro .parrafos, .whatsapp__telefono { color: #fff; }
.whatsapp__intro { padding: 10px 20px 10px 10px; }
.whatsapp__lista:nth-child(2) { padding: 10px 10px 10px 20px; }
.whatsapp__contacto { display: flex; align-items: flex-start; gap: 15px; }
.whatsapp__icono {
  flex: none; padding: .5em; border-radius: 2px; background: var(--verde); color: var(--negro);
  font-size: 20px; line-height: 1;
}
.whatsapp__icono .icono { width: 1em; }
.whatsapp__datos { flex-grow: 1; }
.whatsapp__nombre {
  margin: 0; font-family: "Barlow", sans-serif; font-size: var(--t-pie); font-style: italic; font-weight: 700;
  line-height: 1.2em;
}
.whatsapp__nombre a { color: #fff; }
.whatsapp__telefono { margin: 0; }
@media (min-width: 1025px) {
  .whatsapp__intro { width: 50%; }
  .whatsapp__lista:nth-child(2) { width: 24.333%; }
  .whatsapp__lista:nth-child(3) { width: 25%; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .whatsapp__intro { width: 55%; }
  .whatsapp__lista { width: 45%; }
}
@media (max-width: 1024px) {
  .whatsapp { padding: 3em 1em 4em; }
  .whatsapp__marco { padding: 25px; }
  .whatsapp__contacto { padding-right: 10em; }
  .whatsapp__icono { font-size: 19px; }
}
@media (max-width: 767px) {
  .whatsapp { padding: 3em 1em 2em; }
  .whatsapp__marco { padding: 20px; }
  .whatsapp__contacto { padding-right: 2em; }
  .whatsapp__icono { font-size: 18px; }
}

/* Mapa y formulario. La columna del formulario es la que fija el alto de la fila; el mapa queda
   arriba, con 2em de margen. */
.consulta { padding: 6em 0 7em; }
.consulta__marco { max-width: 1300px; margin-inline: auto; padding: 10px; }
.consulta__mapa { margin: 2em 0; padding: 0; }
.consulta__mapa iframe { display: block; height: 550px; border: 0; line-height: 1; }
.consulta__formulario {
  align-content: center; padding: 3em; background: #fff; box-shadow: 0 20px 50px 0 rgba(0, 0, 0, .15);
}
/* «Hablemos» con la raya verde a continuación (divisor de Elementor con texto). */
.separador { display: flex; align-items: center; font: inherit; }
.col > .separador { width: 435px; }
.separador span {
  flex-shrink: 0; max-width: 95%; margin-right: 10px; color: var(--negro); font-family: "Barlow", sans-serif;
  font-size: var(--t-titulo); font-style: italic; font-weight: 700; line-height: 1.1em;
}
.separador::after { content: ""; flex-grow: 1; border-top: 4px solid var(--verde); }
/* Formulario: campos de a dos con la etiqueta arriba. El margen inferior es el de un bloque más
   (el original tiene un segundo formulario oculto debajo); el 1 px sobre el botón es lo que ocupa
   el reCAPTCHA invisible del original. */
.col > .formulario { display: flex; flex-wrap: wrap; width: calc(100% + 10px); margin: 0 -5px 10px; }
.campo {
  display: flex; flex-wrap: wrap; align-items: center; width: 50%; min-height: 1px; margin-bottom: 10px;
  padding: 0 5px;
}
.campo--ancho { width: 100%; }
.campo label { display: inline-block; color: var(--negro); font-weight: 600; line-height: 1.5; cursor: pointer; }
.campo input, .campo textarea {
  flex-basis: 100%; width: 100%; max-width: 100%; min-height: 40px; padding: .5rem 1rem;
  border: 1px solid var(--gris-borde); border-radius: 0; background: #fff; color: var(--gris);
  font: 500 var(--t-cuerpo)/1.4 "Raleway", sans-serif; vertical-align: middle; transition: all .3s;
}
.campo textarea { padding: 5px 14px; overflow: auto; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: inherit; opacity: .6; }
.campo input:focus, .campo textarea:focus { outline: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.campo--boton { align-items: flex-end; margin-top: 1px; }
.campo button {
  flex-basis: 100%; min-height: 47px; padding: 15px 30px; border: 0; border-radius: 0;
  background: var(--lima); color: var(--negro); font-size: var(--t-boton); font-weight: 800; line-height: 1.5em;
  text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: all .3s;
}
.campo button:hover, .campo button:focus { background: var(--negro); color: var(--verde); }
.formulario__estado { width: 100%; margin: 0 0 10px; padding: 0 5px; color: var(--verde); font-weight: 600; line-height: 1.5; }
.formulario__estado:empty { display: none; }
.formulario__estado--error { color: #b3261e; }
.formulario__estado--cargando::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;
  border: 2px solid rgba(0, 154, 27, .3); border-top-color: var(--verde); border-radius: 50%; animation: girar .8s linear infinite;
}
.campo button:disabled { opacity: .6; cursor: wait; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (min-width: 1025px) { .consulta .caja > .col { width: 50%; } }
@media (min-width: 768px) and (max-width: 1024px) { .consulta .caja > .col { width: 100%; } }
@media (max-width: 1024px) {
  .consulta { padding: 4em .5em; }
  .consulta__mapa { margin: 0; }
  .consulta__mapa iframe { height: 450px; }
  .consulta__formulario { padding: 35px 35px 50px; }
  .col > .separador { width: 380px; }
}
@media (max-width: 767px) {
  .consulta { padding: 2.5em .5em; }
  .consulta__mapa iframe { height: 350px; }
  .consulta__formulario { padding: 35px 25px; }
  .col > .separador { width: 270px; }
  .campo { width: 100%; }
}

/* ---------- 16. Animaciones de entrada ----------
   Solo con JS: site.js pone .con-animaciones en <html> y .animado a cada bloque cuando entra en
   pantalla (con su demora). Sin JS (o con «reducir movimiento») todo se ve en su lugar. */
.con-animaciones [data-animacion]:not(.animado) { visibility: hidden; }
.animado { animation-duration: 1.25s; }
.animado[data-animacion="fadeIn"] { animation-name: fadeIn; }
.animado[data-animacion="fadeInUp"] { animation-name: fadeInUp; }
.animado[data-animacion="fadeInDown"] { animation-name: fadeInDown; }
.animado[data-animacion="fadeInLeft"] { animation-name: fadeInLeft; }
.animado[data-animacion="fadeInRight"] { animation-name: fadeInRight; }
.animado[data-animacion="slideInLeft"] { animation-name: slideInLeft; }
.animado[data-animacion="slideInRight"] { animation-name: slideInRight; }
.animado[data-animacion="slideInUp"] { animation-name: slideInUp; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .animado { animation: none !important; } }