/* ─────────────────────────────────────────────────────────────
   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;
  background: var(--c-fondo, #fff);
  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);
}
.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; }
.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; }
}