/* ==========================================================================
   BASE FUNCIONAL — no es un diseño final.
   Contiene lo que suele salir mal (menú móvil, foco visible, formularios,
   banner de cookies, botón de WhatsApp, movimiento reducido). La identidad
   visual (colores, tipografías, composición) sale del plan de diseño del
   proyecto: SUSTITUYE los tokens y adapta los componentes.
   ========================================================================== */

:root {
  /* Tokens de color — sustituir por la paleta del proyecto */
  --c-fondo: #ffffff;
  --c-superficie: #f3f4f5;
  --c-texto: #1d2126;
  --c-texto-suave: #545c65;
  --c-acento: #0f6b63;
  --c-acento-texto: #ffffff;
  --c-borde: #d8dce0;
  --c-foco: #1a5fd0;

  /* Tokens tipográficos — usar fuentes del sistema o autoalojadas (woff2), nunca Google Fonts remoto */
  --f-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-titulos: var(--f-texto);

  /* Escala y ritmo */
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-h1: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --t-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --t-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --espacio: clamp(1rem, 3vw, 1.5rem);
  --seccion: clamp(3rem, 8vw, 6rem);
  --ancho: 72rem;
  --ancho-texto: 42rem;
  --radio: 0.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-wrap: break-word;
}
img, svg, iframe { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--f-titulos); line-height: 1.15; margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { margin: 0 0 1em; }
a { color: var(--c-acento); text-underline-offset: 0.18em; }
ul { padding-left: 1.2rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 3px; border-radius: 2px; }
.saltar { position: absolute; left: 0.5rem; top: -4rem; background: var(--c-fondo); padding: 0.6rem 1rem; z-index: 100; }
.saltar:focus { top: 0.5rem; }

.contenedor { width: min(100% - 2 * var(--espacio), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--seccion); }
.seccion-alt { background: var(--c-superficie); }
.texto-largo { max-width: var(--ancho-texto); }
/* Bloques estrechos alineados a la izquierda del mismo eje que el resto del contenido */
.contenedor.texto-largo, .contenedor.hero-texto { margin-left: max(var(--espacio), calc((100% - var(--ancho)) / 2)); margin-right: auto; }
.rejilla { display: grid; gap: var(--espacio); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

/* Botones */
.boton, .boton-cookie {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.6rem 1.25rem;
  background: var(--c-acento); color: var(--c-acento-texto);
  border: 2px solid var(--c-acento); border-radius: var(--radio);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.boton:hover { filter: brightness(1.08); }
.boton-sec { background: transparent; color: var(--c-acento); }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Cabecera y navegación (móvil primero) */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--c-fondo); border-bottom: 1px solid var(--c-borde); }
.cabecera-interior { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; gap: 1rem; }
.marca { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--f-titulos); font-weight: 700; font-size: 1.2rem; color: var(--c-texto); text-decoration: none; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--c-borde); border-radius: var(--radio); cursor: pointer; }
.nav-toggle-icono, .nav-toggle-icono::before, .nav-toggle-icono::after { display: block; width: 1.25rem; height: 2px; background: var(--c-texto); content: ""; position: relative; }
.nav-toggle-icono::before { position: absolute; top: -6px; }
.nav-toggle-icono::after { position: absolute; top: 6px; }
.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--c-fondo); border-bottom: 1px solid var(--c-borde); padding: 1rem var(--espacio) 1.5rem; }
.nav[data-open="true"] { display: block; }
.nav ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.nav li a { display: block; padding: 0.75rem 0; color: var(--c-texto); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--c-borde); }
.nav a[aria-current="page"] { color: var(--c-acento); font-weight: 700; }
@media (min-width: 56rem) {
  .nav-toggle { display: none; }
  .nav { display: flex; position: static; align-items: center; gap: 1.5rem; border: 0; padding: 0; background: none; }
  .nav ul { display: flex; gap: 1.5rem; margin: 0; }
  .nav li a { border: 0; padding: 0.4rem 0; }
}

/* Portada */
.hero { padding-block: clamp(3rem, 10vw, 7rem); }
.hero-texto { max-width: 38rem; }
.hero .lema { font-size: 1.15em; color: var(--c-texto-suave); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* Tarjetas de servicio */
.tarjeta { border: 1px solid var(--c-borde); border-radius: var(--radio); padding: 1.25rem; background: var(--c-fondo); }
.tarjeta h3 { margin-bottom: 0.4em; }
.precio { font-weight: 700; color: var(--c-acento); }
.lista-servicios { display: grid; gap: 1.25rem; }
.servicio { display: grid; gap: 0.25rem 1.5rem; padding-block: 1.25rem; border-top: 1px solid var(--c-borde); }
@media (min-width: 40rem) { .servicio { grid-template-columns: 1fr auto; } .servicio p { grid-column: 1; } }

/* Formulario */
.formulario { display: grid; gap: 1rem; max-width: 34rem; }
.campo { display: grid; gap: 0.35rem; }
.campo label { font-weight: 600; }
.opcional { font-weight: 400; color: var(--c-texto-suave); }
input, textarea { font: inherit; width: 100%; padding: 0.7rem 0.8rem; border: 1px solid #8a929b; border-radius: var(--radio); background: var(--c-fondo); color: inherit; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95em; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex: none; }
.form-estado { min-height: 1.5em; font-weight: 600; margin: 0; }
.form-estado[data-tipo="ok"] { color: #12663a; }
.form-estado[data-tipo="error"] { color: #a1261b; }

/* Contacto, mapa y horario */
.contacto-rejilla { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .contacto-rejilla { grid-template-columns: 1fr 1fr; } }
.mapa-bloque { border: 1px solid var(--c-borde); border-radius: var(--radio); overflow: hidden; background: var(--c-superficie); min-height: 18rem; display: grid; }
.mapa-aviso a { display: inline-block; padding-block: 0.4rem; }
.mapa-aviso { padding: 1.5rem; display: grid; gap: 0.75rem; align-content: center; justify-items: start; }
.mapa-bloque iframe { width: 100%; height: 100%; min-height: 18rem; border: 0; }
.horario { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.horario li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--c-borde); }

/* Pie */
.pie { background: var(--c-texto); color: #eef0f2; padding-block: 3rem 2rem; font-size: 0.95em; }
.pie a { color: #ffffff; display: inline-block; padding-block: 0.3rem; }
.pie h2 { font-size: 1rem; margin-bottom: 0.5em; }
.pie-rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pie address { font-style: normal; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie .enlace-boton { color: #ffffff; padding-block: 0.3rem; }
.pie-marca { font-family: var(--f-titulos); font-size: 1.25rem; font-weight: 700; }
.pie-legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.25); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; }
.pie-legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

/* Botón flotante de WhatsApp (respeta zonas seguras del móvil) */
.wa-boton {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0.6rem 1.1rem;
  background: #128c4a; color: #ffffff; border-radius: 999px; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.wa-boton svg { width: 1.4rem; height: 1.4rem; flex: none; }
@media (max-width: 30rem) { .wa-boton .wa-texto { display: none; } .wa-boton { width: 3.25rem; height: 3.25rem; padding: 0; justify-content: center; } }

/* Banner de cookies — «Rechazar» y «Aceptar» con el MISMO peso visual (exigencia AEPD) */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 70; background: var(--c-fondo); border-top: 2px solid var(--c-texto);
  padding: 1rem var(--espacio) max(1rem, env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.15);
  max-height: 85vh; overflow: auto;
}
.cookies[hidden], .cookies-panel[hidden] { display: none; }
.cookies h2 { font-size: 1.1rem; margin-bottom: 0.3em; }
.cookies p { max-width: 60rem; font-size: 0.95em; }
.cookies-panel { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.cookies-botones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.boton-cookie { background: var(--c-fondo); color: var(--c-acento); }
.cookies-botones .boton-cookie { flex: 1 1 9rem; }

/* Movimiento: solo si la persona no lo ha desactivado. Úsalo con mesura (un momento, no en cada sección). */
.js .reveal { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}