/* ─────────────────────────────────────────────────────────────
   base.css — LA hoja de estilos del kit. Una sola, para todos.

   Regla dura: acá NO se escribe ningún color ni ninguna tipografía
   a mano. Todo sale de var(--…), que inyecta tema.php desde el
   tema.json del cliente. El respaldo del var() existe para que la
   página siga siendo legible si un cliente no cargó esa variable,
   no para "elegir un color por defecto".

   Las variantes de layout (l-hero-partido, l-servicios-lista) están
   las dos acá. La config elige cuál. Es lo que evita que dos
   clientes parezcan la misma plantilla repintada.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* El decorado va encima del color y en su propia variable: --c-fondo
     tiene que seguir siendo un color porque se usa en color-mix() (D-138).
     Sin decorado configurado, background-image queda en none. */
  background-color: var(--c-fondo, #fff);
  background-image: var(--fondo-decorado, none);
  background-repeat: no-repeat;
  color: var(--c-texto, #1a1a1a);
  font-family: var(--t-texto, system-ui, sans-serif);
  font-size: calc(1rem * var(--t-escala, 1));
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, iframe { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--t-titulos, Georgia, serif);
  line-height: 1.12;
  margin: 0 0 .6em;
  font-weight: var(--f-peso-titulo, 600);
  letter-spacing: var(--f-espaciado-titulo, -0.01em);
}

.contenedor { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.contenedor--angosto { width: min(100% - 2.5rem, 46rem); }

.seccion { padding-block: var(--e-seccion, clamp(3.5rem, 9vw, 7rem)); }
.seccion--alterna { background: var(--c-alterna, var(--c-superficie, #f7f7f7)); }
.seccion--angosta { padding-block: 6rem; text-align: center; }

.seccion__encabezado { max-width: 42rem; margin-bottom: 3rem; }
.titulo { font-size: clamp(1.7rem, 3.6vw, 2.6rem); text-transform: var(--f-caja-titulo, none); }
.bajada { color: var(--c-texto-suave, #666); font-size: 1.05rem; margin: 0; }
.parrafo { margin: 0 0 1rem; }
.nota { color: var(--c-texto-suave, #666); font-size: .9rem; margin-top: 2rem; }

.sello {
  display: inline-block; margin: 0 0 1rem;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-acento, #333);
  border: var(--f-borde, 1px) solid currentColor;
  border-radius: 999px; padding: .35rem .85rem;
}

/* --- Accesibilidad ------------------------------------------------ */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-acento, #000); color: var(--c-acento-texto, #fff); padding: .75rem 1rem;
}
.saltar:focus { left: 0; }
:focus-visible { outline: 2px solid var(--c-acento, #000); outline-offset: 3px; }

/* --- Botones ------------------------------------------------------ */
.boton {
  display: inline-block; text-decoration: none;
  background: var(--c-acento, #1a1a1a); color: var(--c-acento-texto, #fff);
  padding: .85rem 1.6rem; border-radius: var(--f-radio-chico, 8px);
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  border: var(--f-borde, 1px) solid var(--c-acento, #1a1a1a);
  transition: transform .18s ease, opacity .18s ease;
}
.boton:hover { transform: translateY(-2px); opacity: .92; }
.boton--chico { padding: .55rem 1.1rem; font-size: .85rem; }
.boton--fantasma { background: transparent; color: var(--c-texto, #1a1a1a); border-color: var(--c-borde, #ddd); }
.boton--claro { background: var(--c-acento-texto, #fff); color: var(--c-acento, #1a1a1a); border-color: transparent; }

/* --- Navegación --------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--c-fondo, #fff) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--f-borde, 1px) solid transparent;
  transition: border-color .2s ease;
}
.nav[data-desplazado] { border-bottom-color: var(--c-borde, #e5e5e5); }
.nav__caja { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.nav__marca {
  font-family: var(--t-titulos, Georgia, serif);
  font-size: 1.15rem; font-weight: 600; text-decoration: none;
  letter-spacing: var(--f-espaciado-marca, 0);
  text-transform: var(--f-caja-marca, none);
}
/* El logo en imagen (D-138). Alto fijo y ancho libre: un logo apaisado y
   uno cuadrado tienen que ocupar la misma altura en la barra. */
.nav__marca--logo { display: inline-flex; align-items: center; gap: .6rem; }
.nav__logo { height: 2.5rem; width: auto; max-width: 12rem; object-fit: contain; }
.nav__menu { display: flex; align-items: center; gap: 1.6rem; }
.nav__enlace { text-decoration: none; font-size: .92rem; color: var(--c-texto-suave, #666); }
.nav__enlace:hover { color: var(--c-texto, #111); }

.nav__hamburguesa { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.nav__barras, .nav__barras::before, .nav__barras::after {
  display: block; width: 22px; height: 2px; background: var(--c-texto, #111); content: '';
}
.nav__barras::before { transform: translateY(-7px); }
.nav__barras::after { transform: translateY(5px); }

@media (max-width: 800px) {
  .nav__hamburguesa { display: block; }
  .nav__menu {
    position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: flex-start;
    gap: .5rem; padding: 1.25rem 1.75rem 2rem;
    background: var(--c-fondo, #fff); border-bottom: 1px solid var(--c-borde, #e5e5e5);
    display: none;
  }
  .nav__menu[data-abierto] { display: flex; }
}

/* --- Hero: dos variantes, un solo marcado ------------------------- */
.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem); }
.hero__caja { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__titulo {
  font-size: clamp(2.2rem, 6vw, 4rem);
  text-transform: var(--f-caja-titulo, none);
}
.hero__bajada { font-size: 1.12rem; color: var(--c-texto-suave, #666); max-width: 34rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.hero__datos { display: flex; flex-wrap: wrap; gap: 2.5rem; list-style: none; margin: 3rem 0 0; padding: 0; }
.hero__datos li { display: flex; flex-direction: column; }
.hero__datos strong { font-family: var(--t-titulos, Georgia, serif); font-size: 1.9rem; line-height: 1; }
.hero__datos span { font-size: .82rem; color: var(--c-texto-suave, #666); letter-spacing: .06em; text-transform: uppercase; margin-top: .4rem; }

.hero__figura { border-radius: var(--f-radio, 16px); overflow: hidden; box-shadow: var(--f-sombra, none); }
.hero__figura img { width: 100%; height: 100%; object-fit: cover; }
.hero__figura--vacia {
  min-height: 24rem;
  background:
    radial-gradient(120% 90% at 70% 15%, color-mix(in srgb, var(--c-acento, #888) 32%, transparent), transparent 60%),
    var(--c-alterna, #eee);
  border: var(--f-borde, 1px) solid var(--c-borde, #e5e5e5);
}

/* Centrado: sin columna de imagen, todo al medio. */
.l-hero-centrado .hero__caja { justify-items: center; text-align: center; }
.l-hero-centrado .hero__bajada { margin-inline: auto; }
.l-hero-centrado .hero__acciones, .l-hero-centrado .hero__datos { justify-content: center; }

/* Datos en tarjetas (D-163): opción por cliente, `tema.layout.datos`.
   Sin la clave, los datos siguen planos como siempre. Todo sale de las
   variables del tema, para que la profundidad se vea bien con cualquier
   marca: la luz de arriba es el fondo aclarado, la sombra lejana se tiñe
   con el acento. Sin hover en el celular: la tarjeta ya está elevada. */
.l-datos-tarjetas .hero__datos {
  /* Grilla de columnas iguales y no flex: así las tres tienen el mismo
     ancho y, con la fila estirada, el mismo alto, digan lo que digan. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.6rem, 1.5vw, 1.1rem);
  width: min(100%, 48rem); margin-inline: auto;
  perspective: 900px;
}
.l-datos-tarjetas .hero__datos li {
  container-type: inline-size;
  justify-content: center; align-items: center; text-align: center;
  min-width: 0; padding: 1.2rem clamp(.75rem, 1.4vw, 1.1rem) 1.05rem;
  border-radius: var(--f-radio, 16px);
  border: 1px solid color-mix(in srgb, var(--c-borde, #e5e5e5) 80%, transparent);
  background: linear-gradient(180deg,
    var(--c-superficie, var(--c-fondo, #fff)),
    color-mix(in srgb, var(--c-superficie, var(--c-fondo, #fff)) 94%, var(--c-acento, #888)));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--c-fondo, #fff) 60%, white),
    0 1px 2px color-mix(in srgb, var(--c-texto, #222) 8%, transparent),
    0 6px 14px -4px color-mix(in srgb, var(--c-texto, #222) 12%, transparent),
    0 18px 36px -12px color-mix(in srgb, var(--c-acento, #888) 22%, transparent);
  transform: translateY(-2px);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
}
/* El valor se mide contra el ancho de SU tarjeta (cqi), no de la pantalla:
   una palabra de 13-14 letras entra en una línea. La primera línea es para
   un navegador sin consultas de contenedor. overflow-wrap es la última red:
   antes que salirse del borde, se corta. */
.l-datos-tarjetas .hero__datos strong {
  color: var(--c-texto, inherit); max-width: 100%;
  font-size: clamp(1.1rem, 1.9vw, 1.9rem);
  font-size: clamp(1.05rem, 11.5cqi, 1.9rem);
  overflow-wrap: anywhere; hyphens: auto;
}
.l-datos-tarjetas .hero__datos span {
  max-width: 100%; overflow-wrap: anywhere;
  font-size: clamp(.68rem, 5.2cqi, .82rem);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .l-datos-tarjetas .hero__datos li:hover {
    transform: translateY(-6px) rotateX(5deg) rotateY(-3deg);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--c-fondo, #fff) 50%, white),
      0 2px 4px color-mix(in srgb, var(--c-texto, #222) 8%, transparent),
      0 12px 22px -6px color-mix(in srgb, var(--c-texto, #222) 14%, transparent),
      0 28px 48px -14px color-mix(in srgb, var(--c-acento, #888) 30%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .l-datos-tarjetas .hero__datos li { transition: none; }
}
/* En el celular, apiladas a todo el ancho. */
@media (max-width: 600px) {
  .l-datos-tarjetas .hero__datos { grid-template-columns: minmax(0, 1fr); }
  .l-datos-tarjetas .hero__datos strong { font-size: clamp(1.4rem, 9cqi, 1.9rem); }
}
.l-hero-centrado .hero__figura { display: none; }

/* Partido: texto e imagen lado a lado. */
@media (min-width: 900px) {
  .l-hero-partido .hero__caja { grid-template-columns: 1.05fr .95fr; }
}

/* --- Servicios: tarjetas o lista ---------------------------------- */
.servicios { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.servicio__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.servicio__nombre { font-size: 1.15rem; margin: 0; }
.servicio__precio { font-family: var(--t-titulos, Georgia, serif); font-size: 1.05rem; margin: 0; white-space: nowrap; color: var(--c-acento, #333); }
.servicio__desc { color: var(--c-texto-suave, #666); font-size: .95rem; margin: .6rem 0 0; }
.servicio__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; font-size: .78rem; color: var(--c-texto-suave, #666); }
.etiqueta { border: var(--f-borde, 1px) solid var(--c-borde, #ddd); border-radius: 999px; padding: .15rem .6rem; }

.l-servicios-tarjetas .servicios { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.l-servicios-tarjetas .servicio {
  background: var(--c-superficie, #fff);
  border: var(--f-borde, 1px) solid var(--c-borde, #e5e5e5);
  border-radius: var(--f-radio, 16px);
  padding: 1.6rem;
}

.l-servicios-lista .servicio {
  border-top: var(--f-borde, 1px) solid var(--c-borde, #e5e5e5);
  padding: 1.4rem 0 .4rem;
}
.l-servicios-lista .servicios { gap: 0; }
.l-servicios-lista .servicio__nombre { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }

/* --- Sobre -------------------------------------------------------- */
.sobre { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .sobre { grid-template-columns: 1.1fr .9fr; } }
.destacados { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; align-content: start; }
.destacado {
  background: var(--c-superficie, #fff);
  border: var(--f-borde, 1px) solid var(--c-borde, #e5e5e5);
  border-radius: var(--f-radio-chico, 10px);
  padding: 1.25rem 1.4rem;
}
.destacado h3 { font-size: 1rem; margin: 0 0 .35rem; }
.destacado p { margin: 0; font-size: .92rem; color: var(--c-texto-suave, #666); }

/* --- Testimonios -------------------------------------------------- */
.testimonios { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.testimonio {
  background: var(--c-superficie, #fff);
  border: var(--f-borde, 1px) solid var(--c-borde, #e5e5e5);
  border-radius: var(--f-radio, 16px);
  padding: 1.75rem;
}
.testimonio blockquote { margin: 0; font-size: 1.02rem; font-style: var(--f-estilo-cita, italic); }
.testimonio__autor { margin: 1rem 0 0; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-texto-suave, #666); }

/* --- FAQ ---------------------------------------------------------- */
.faq__item { border-bottom: var(--f-borde, 1px) solid var(--c-borde, #e5e5e5); }
.faq__item summary {
  cursor: pointer; padding: 1.1rem 0; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; color: var(--c-acento, #333); font-size: 1.3rem; line-height: 1; }
.faq__item[open] summary::after { content: '−'; }
.faq__respuesta { padding-bottom: 1.2rem; color: var(--c-texto-suave, #666); }
.faq__respuesta p { margin: 0; }

/* --- Contacto ----------------------------------------------------- */
.contacto { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .contacto { grid-template-columns: 1fr 1fr; align-items: start; } }
.contacto__datos { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; margin: 2rem 0; font-size: .95rem; }
.contacto__datos dt { color: var(--c-texto-suave, #666); }
.contacto__datos dd { margin: 0; }
.contacto__mapa { border-radius: var(--f-radio, 16px); overflow: hidden; border: var(--f-borde, 1px) solid var(--c-borde, #e5e5e5); }
.contacto__mapa iframe { width: 100%; height: 24rem; border: 0; }

/* --- Franja de cierre --------------------------------------------- */
.franja { background: var(--c-acento, #1a1a1a); color: var(--c-acento-texto, #fff); padding-block: clamp(3rem, 7vw, 5rem); }
.franja__caja { text-align: center; display: grid; justify-items: center; gap: .5rem; }
.franja__titulo { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0; text-transform: var(--f-caja-titulo, none); }
.franja__bajada { margin: 0 0 1.5rem; opacity: .85; max-width: 36rem; }

/* --- Pie ---------------------------------------------------------- */
.pie { background: var(--c-alterna, #f4f4f4); padding-block: 3.5rem 1.5rem; font-size: .9rem; }
.pie__caja { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pie__bloque p { margin: 0 0 .4rem; }
.pie__marca { font-family: var(--t-titulos, Georgia, serif); font-size: 1.1rem; }
.pie__tagline { color: var(--c-texto-suave, #666); }
.pie__horario span { color: var(--c-texto-suave, #666); display: inline-block; min-width: 7.5rem; }
.pie__redes { display: flex; gap: 1rem; margin-top: .75rem; }
.pie__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: var(--f-borde, 1px) solid var(--c-borde, #e0e0e0);
  color: var(--c-texto-suave, #666); font-size: .8rem;
}
.pie__legal p { margin: 0; }

/* --- Aparición al hacer scroll ------------------------------------
   Sólo transform y opacity: son las dos propiedades que el navegador
   anima sin recalcular layout. En un celular de gama media eso es la
   diferencia entre fluido y a los tirones. */
.revelar { transition: opacity .6s ease, transform .6s ease; }

/* Se oculta SÓLO si hay JS para volver a mostrarlo. Al revés (ocultar
   siempre y mostrar con JS) una falla del script dejaría la web en
   blanco, que es el peor error posible en la home de un cliente.
   La clase la pone un script en línea en el <head>, antes del pintado,
   así no hay parpadeo. */
.con-js .revelar { opacity: 0; transform: translateY(18px); }
.con-js .revelar[data-visible] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .con-js .revelar { opacity: 1; transform: none; transition: none; }
  .boton:hover { transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}