/* ============================================================
   Leak detection Mallorca — diseño A («estilo Samsung/Apple»)
   Pensado primero para móvil. Sin frameworks, sin nada externo.
   ============================================================ */

/* Tipografía alojada en la propia web (licencia libre OFL, ver fonts/OFL-PlusJakartaSans.txt) */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans[wght].woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* ============================================================
   COLORES — ÚNICO SITIO DONDE SE CAMBIAN
   Para cambiar toda la web de color basta con tocar estos valores.
   Hay tres paletas preparadas: la 1 es la activa por defecto; la 2 y la 3
   se activan poniendo "paleta": 2 o 3 en config.json (se ven en /diseños/colores/).
   ============================================================ */
:root {
  /* --- PALETA 1: marrón-negro con luz cálida (la del diseño A original) --- */
  --fondo-oscuro: #14100d;        /* fondo del bloque grande de portada y de la banda de contacto del final */
  --fondo-oscuro-2: #1b1511;      /* tono un poco más claro del mismo fondo (arriba del degradado) */
  --luz: 255, 190, 110;           /* color del haz de luz en diagonal (tres números RGB, sin #) */
  --texto-sobre-oscuro: #ffffff;  /* titulares y texto sobre el fondo oscuro */
  --texto-sobre-oscuro-suave: rgba(255,255,255,.78); /* subtítulos sobre el fondo oscuro */

  --fondo: #ffffff;               /* fondo general de las páginas */
  --texto: #111111;               /* texto principal, titulares en páginas claras */
  --texto-suave: #4a4a4f;         /* texto secundario, subtítulos, pie */
  --gris: #f3f3f5;                /* fondo de las tarjetas grandes y de los bloques destacados */
  --gris-linea: #e8e8ec;          /* líneas finas: cabecera, bordes, separadores de preguntas */
  --hueco-foto: #d9d9df;          /* fondo de los huecos donde irán las fotos */

  --boton: #111111;               /* botón negro (píldora), subrayado del menú activo */
  --boton-texto: #ffffff;         /* texto del botón negro */
  --boton-claro: #ffffff;         /* botón blanco (píldora) sobre fondo oscuro */
  --boton-claro-texto: #111111;   /* texto del botón blanco */
  --acento: #111111;              /* color de acento (botón de WhatsApp, números de los pasos, subrayados). En la paleta 2 es el naranja del logo */
  --acento-texto: #ffffff;        /* texto sobre el color de acento */

  --whatsapp: #25d366;            /* verde de WhatsApp (botón fijo de móvil); mejor no cambiarlo */
  --aviso-fondo: #fff7e0;         /* fondo del recuadro «para ser sinceros» */
  --aviso-borde: #f0d890;         /* borde de ese recuadro */

  --equipo-cuerpo: #2a221d;       /* silueta del equipo en portada: cuerpo del aparato */
  --equipo-borde: #7a6757;        /* silueta del equipo: contornos */
  --equipo-pantalla: #2a6f9e;     /* silueta del equipo: pantalla */

  /* medidas (no son colores, pero también se cambian aquí) */
  --radio: 32px;                  /* redondeo de las tarjetas grandes */
  --ancho: 1200px;                /* ancho máximo del contenido en pantallas grandes */
}

/* --- PALETA 2: azul noche con luz azul agua --- */
html[data-paleta="2"] {
  /* Desde el 02-11-2026, los colores de la marca LeakHunter Mallorca: azul noche #0B1F3B y azul técnico #00AEEF */
  --fondo-oscuro: #0B1F3B;
  --fondo-oscuro-2: #132a4e;
  --luz: 0, 174, 239;
  --gris: #f1f4f8;
  --gris-linea: #dfe5ee;
  --hueco-foto: #d3dbe6;
  --texto: #0f1722;
  --texto-suave: #4b5563;
  --boton: #0B1F3B;
  --acento: #FF690B;              /* naranja del logo oficial (desde 1.3.0, diseño C) */
  --acento-texto: #0B1F3B;        /* azul noche sobre naranja: el blanco sobre este naranja no cumple el contraste mínimo */
  --equipo-cuerpo: #1c2638;
  --equipo-borde: #6b7f9e;
  --equipo-pantalla: #00AEEF;
  --aviso-fondo: #eef5ff;
  --aviso-borde: #bcd4f0;
}

/* --- PALETA 3: verde petróleo con luz verde agua --- */
html[data-paleta="3"] {
  --fondo-oscuro: #072a2c;
  --fondo-oscuro-2: #0b3b3d;
  --luz: 111, 227, 207;
  --gris: #f0f6f5;
  --gris-linea: #dceae7;
  --hueco-foto: #cfe0dc;
  --texto: #10292a;
  --texto-suave: #4c6263;
  --boton: #0b3b3d;
  --equipo-cuerpo: #15302f;
  --equipo-borde: #5e8c86;
  --equipo-pantalla: #3fbfae;
  --aviso-fondo: #eefaf7;
  --aviso-borde: #b8e6dc;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px; line-height: 1.6; color: var(--texto); background: var(--fondo);
  padding-bottom: 112px; /* sitio para los botones fijos de WhatsApp y «↑» en móvil */
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; font-weight: 700; margin: 0; color: var(--texto); }
h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 .5em; }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); margin: 2em 0 .6em; }
h3 { font-size: 1.2rem; margin: 1.4em 0 .4em; }
p, ul, ol { margin: 0 0 1em; }
.lead, p.lead { font-size: 1.2rem; color: var(--texto-suave); max-width: 60ch; }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
main > .contenedor { padding-top: 48px; }
main > .contenedor > h1:first-child { margin-top: 0; }

/* ============================================================
   BOTONES (píldoras)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 1.05rem;
  transition: transform .2s, box-shadow .2s; line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
.btn-tel { background: var(--boton); color: var(--boton-texto); }
.btn-wa { background: var(--acento); color: var(--acento-texto); border: 0; }
.btn-mail { background: var(--gris); color: var(--texto); }
.botones { display: grid; gap: 10px; margin: 1.4em 0; }
/* En el bloque oscuro de portada, los colores de los botones se invierten */
.hero .btn-wa { background: var(--acento); color: var(--acento-texto); border: 0; }
.hero .btn-tel { background: transparent; color: var(--texto-sobre-oscuro); border: 1.5px solid rgba(255,255,255,.45); box-shadow: none; }
.hero .btn-tel:hover { background: rgba(255,255,255,.08); }

/* ============================================================
   CABECERA blanca y fina
   ============================================================ */
.cabecera { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--gris-linea); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; flex-wrap: wrap; }
/* Logo oficial de la marca en la cabecera (desde 1.3.0 el mismo horizontal en móvil y en ordenador) */
.logo-enlace { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.logo-enlace svg { display: block; height: 42px; width: auto; }
.logo-enlace .logo-h { display: block; }
.logo-enlace .logo-c { display: none; }
.idiomas { display: flex; gap: 4px; }
.idiomas a { text-decoration: none; font-size: .8rem; padding: 4px 7px; border-radius: 999px; color: var(--texto-suave); font-weight: 600; }
.idiomas a.activo { background: var(--boton); color: var(--boton-texto); }
.menu-toggle { display: none; }
.menu-boton { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px 6px; cursor: pointer; }
.menu-boton i { display: block; width: 22px; height: 2px; background: var(--texto); border-radius: 2px; }
.nav { display: none; flex-basis: 100%; }
.nav ul { list-style: none; margin: 0; padding: 6px 0 12px; }
.nav li a { display: block; padding: 11px 2px; text-decoration: none; color: var(--texto-suave); font-weight: 500; border-bottom: 1px solid var(--gris-linea); }
.nav li a:hover { color: var(--texto); }
.menu-toggle:checked ~ .nav { display: block; }

/* ============================================================
   PORTADA: bloque oscuro con haz de luz + silueta del equipo
   ============================================================ */
.hero {
  position: relative; overflow: hidden; color: var(--texto-sobre-oscuro);
  background-color: var(--fondo-oscuro);
  background-image:
    linear-gradient(115deg, rgba(var(--luz), 0) 38%, rgba(var(--luz), .28) 50%, rgba(var(--luz), .08) 58%, rgba(0,0,0,0) 66%),
    radial-gradient(900px 600px at 78% 45%, rgba(var(--luz), .28), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, var(--fondo-oscuro-2) 0%, var(--fondo-oscuro) 100%);
}
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 500px at 50% 110%, rgba(0,0,0,.55), transparent 70%); pointer-events: none; }
.hero .contenedor { position: relative; z-index: 1; display: grid; gap: 36px; padding-top: 56px; padding-bottom: 64px; }
.hero h1 { color: var(--texto-sobre-oscuro); font-size: clamp(2.4rem, 7.5vw, 4.6rem); }
.hero p.lead { color: var(--texto-sobre-oscuro-suave); font-size: 1.22rem; max-width: 36ch; }
.hero .botones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero .nota { font-size: .88rem; color: rgba(255,255,255,.75); margin: 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* texto solo para lectores de pantalla */
.producto { position: relative; text-align: center; padding-bottom: 18px; }
.producto svg { width: min(78vw, 440px); height: auto; filter: drop-shadow(0 30px 60px rgba(var(--luz), .25)); }
.producto .hueco { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); border: 1px dashed rgba(255,255,255,.3); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.eq-cuerpo { fill: var(--equipo-cuerpo); stroke: var(--equipo-borde); stroke-width: 2.5; }
.eq-borde { fill: none; stroke: var(--equipo-borde); stroke-width: 5; stroke-linecap: round; }
.eq-detalle { fill: var(--equipo-borde); }
.eq-pantalla { fill: var(--equipo-pantalla); }
.eq-luz { fill: rgba(var(--luz), .32); }
.eq-linea { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }

/* ============================================================
   FILA DE SERVICIOS con iconos de línea fina (portada)
   ============================================================ */
/* Desde 1.3.6: cuatro BOTONES iguales (icono azul + nombre + flecha), 2 × 2 en móvil y 4 en fila a partir de 768 px.
   Comparten estilo con los botones de técnicas de la portada (ver .boton-tarjeta más abajo). */
.servicios ul { list-style: none; margin: 0 auto; padding: 18px 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 920px; }
.servicios li { min-width: 0; }
.servicios a svg { stroke: var(--boton); }
.servicios a.activo { border-color: var(--boton); background: var(--gris); }

/* ============================================================
   BLOQUES DE CONTENIDO
   ============================================================ */
.tarjetas { display: grid; gap: 20px; margin: 1.2em 0 2em; }
.tarjeta { background: var(--gris); border-radius: var(--radio); padding: 30px 26px; }
.tarjeta h3 { margin-top: 0; font-size: 1.45rem; }
.tarjeta p { color: var(--texto-suave); }
.tarjeta a.mas { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px; background: var(--boton); color: var(--boton-texto); text-decoration: none; font-weight: 600; font-size: .95rem; margin-top: 4px; }
.destacado { background: var(--gris); border-radius: 24px; padding: 22px 26px; margin: 1.6em 0; }
.destacado p:last-child { margin: 0; }
.aviso { background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); padding: 18px 24px; border-radius: 20px; margin: 1.6em 0; font-size: .98rem; }
.aviso p:last-child { margin: 0; }
.lista-check { list-style: none; padding: 0; }
.lista-check li { padding-left: 2em; position: relative; margin-bottom: .7em; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--acento); color: var(--acento-texto); font-size: .8em; display: flex; align-items: center; justify-content: center; margin-top: .25em; }
ol { padding-left: 1.3em; }
ol li { margin-bottom: .5em; }
address { font-style: normal; }
.hueco-foto { aspect-ratio: 4/3; border-radius: 24px; background: linear-gradient(135deg, var(--gris), var(--hueco-foto)); border: 1px dashed var(--hueco-foto); display: flex; align-items: center; justify-content: center; color: var(--texto-suave); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }

/* Tabla de precios */
.precios { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1em 0 1.6em; background: var(--gris); border-radius: 24px; overflow: hidden; }
.precios th, .precios td { text-align: left; padding: 16px 18px; vertical-align: top; border-bottom: 1px solid var(--fondo); }
.precios th { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); font-weight: 600; }
.precios tr:last-child td { border-bottom: 0; }
.precios td.precio { white-space: nowrap; font-weight: 800; font-size: 1.1rem; }

/* En móvil, cada fila de la tabla de precios se apila como una ficha */
@media (max-width: 899px) {
  .precios thead { display: none; }
  .precios tr { display: block; padding: 14px 0 6px; border-bottom: 1px solid var(--fondo); }
  .precios tr:last-child { border-bottom: 0; }
  .precios td { display: block; border: 0; padding: 2px 18px; }
  .precios td:first-child { font-size: 1.1rem; }
  .precios td.precio { font-size: 1.25rem; padding-bottom: 10px; white-space: normal; }
}

/* Preguntas frecuentes */
details.faq { border-bottom: 1px solid var(--gris-linea); }
details.faq summary { list-style: none; cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 1.1rem; display: flex; justify-content: space-between; gap: 16px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--texto-suave); flex: 0 0 auto; }
details.faq[open] summary::after { content: "–"; }
details.faq > div { padding: 0 0 18px; color: var(--texto-suave); }

/* ============================================================
   BANDA DE CONTACTO (final de cada página) y PIE
   ============================================================ */
#contacto-rapido { margin-top: 56px; }
#contacto-rapido .banda { background: var(--fondo-oscuro); color: var(--texto-sobre-oscuro); border-radius: var(--radio); padding: 44px 24px; text-align: center; }
#contacto-rapido h2 { color: var(--texto-sobre-oscuro); margin: 0 0 .4em; font-size: clamp(1.7rem, 5vw, 2.6rem); }
#contacto-rapido p { color: var(--texto-sobre-oscuro-suave); max-width: 50ch; margin: 0 auto 1.4em; }
#contacto-rapido .botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
#contacto-rapido .btn-wa { background: var(--acento); color: var(--acento-texto); border: 0; }
#contacto-rapido .btn-tel, #contacto-rapido .btn-mail { background: transparent; color: var(--texto-sobre-oscuro); border: 1.5px solid rgba(255,255,255,.45); }
/* Pie: azul noche con el logo en blanco */
.pie { padding: 40px 0 48px; color: rgba(255,255,255,.78); font-size: .9rem; background: var(--fondo-oscuro); margin-top: 24px; }
.pie ul { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie a { color: #fff; text-decoration: none; font-weight: 500; }
.pie address { font-style: normal; }
.pie address a { text-decoration: underline; text-underline-offset: 3px; }
.logo-pie-enlace { display: inline-block; margin-bottom: 22px; }
.logo-pie { display: block; height: 44px; width: auto; }
.pie .version { color: rgba(255,255,255,.6); }

/* Distintivo de versión (pie, a la derecha) y aviso de versión nueva */
.version { text-align: right; font-size: .78rem; color: var(--texto-suave); margin: 10px 0 0; }
.selector .version { text-align: center; color: var(--texto-sobre-oscuro-suave); margin-top: 24px; }
.aviso-version { position: fixed; left: 16px; right: 16px; top: 70px; z-index: 50; background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); color: var(--texto); padding: 12px 16px; border-radius: 14px; font-size: .95rem; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.aviso-version a { font-weight: 700; }

/* ============================================================
   BOTÓN FIJO DE WHATSAPP (solo móvil)
   ============================================================ */
/* Desde 1.3.3: botón redondo y discreto abajo a la derecha, en el naranja de la marca, solo con el icono
   (el texto queda para los lectores de pantalla). Se oculta mientras la banda de contacto o el pie están a la vista
   (lo hace site.js poniendo la clase «contacto-a-la-vista» en body), para no duplicar el botón ni tapar el pie. */
.btn-fijo-wa { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--acento); color: var(--acento-texto); text-decoration: none; font-size: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: opacity .25s, transform .25s; }
.btn-fijo-wa svg { width: 28px; height: 28px; }
body.contacto-a-la-vista .btn-fijo-wa { opacity: 0; transform: scale(.6); pointer-events: none; }
/* 1.3.8: mientras se baja por la página el botón de WhatsApp se esconde (así no tapa botones ni textos);
   reaparece al parar o al subir. Lo controla site.js con la clase «bajando» en body. */
body.bajando .btn-fijo-wa { opacity: 0; transform: translateY(80px); pointer-events: none; }

/* Botón «↑» para volver arriba (1.3.8): redondo, encima del de WhatsApp, aparece al bajar más de una pantalla */
.arriba { position: fixed; right: 16px; bottom: 84px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; background: var(--boton); color: var(--boton-texto); text-decoration: none; font-size: 1.4rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.22); opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .25s, transform .25s; }
body.lejos-de-arriba .arriba { opacity: 1; transform: none; pointer-events: auto; }
body.lejos-de-arriba.bajando .arriba { opacity: 0; transform: translateY(80px); pointer-events: none; }
/* Enlaces «← Zurück» al final de las explicaciones y de las páginas de servicio */
.volver { margin: 1.4em 0 0; }
.volver a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--gris-linea); text-decoration: none; font-weight: 700; color: var(--texto); background: #fff; }
.volver a:hover { border-color: var(--acento); }

/* ============================================================
   RAÍZ (selector de idioma) y 404
   ============================================================ */
.selector { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px 20px; background: var(--fondo-oscuro); color: var(--texto-sobre-oscuro);
  background-image: linear-gradient(115deg, rgba(var(--luz),0) 38%, rgba(var(--luz),.25) 50%, rgba(0,0,0,0) 66%), linear-gradient(180deg, var(--fondo-oscuro-2), var(--fondo-oscuro)); }
.selector .caja { max-width: 460px; width: 100%; }
.selector h1 { color: var(--texto-sobre-oscuro); font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 0 0 28px; }
.selector .marca-raiz { color: var(--texto-sobre-oscuro-suave); font-weight: 600; margin: 0 0 8px; }
.selector .btn { display: flex; margin: 10px 0; background: var(--boton-claro); color: var(--boton-claro-texto); }

/* ============================================================
   ANIMACIÓN SUAVE AL BAJAR (se desactiva si el sistema pide menos movimiento)
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   PORTADA (diseño C «Equilibrada», desde 1.3.0): tres fotos arriba, logo y titular debajo,
   tres técnicas, bloque «nos encargamos de todo» y fotos de los equipos.
   Las fotos de arriba son recortes CSS de las imágenes completas: el contenedor fija la proporción
   del recorte y la imagen se desplaza con --iw (ancho de la imagen / ancho del recorte),
   --ix y --iy (desplazamiento / ancho del recorte).
   ============================================================ */
/* Desde 1.3.6 las fotos de arriba son imágenes ya recortadas (hechas con _SCRIPTS/recortar_png.py), cuadradas y del mismo
   tamaño entre sí: 1 de espaldas ante la villa · 2 aparato en la mano · 3 cuerpo entero ante la casa blanca. Se muestran enteras
   (sin recorte CSS), así ninguna corta cabezas en ningún ancho. En móvil se ve solo la primera, en su versión apaisada. */
.portada-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; }
/* 1.3.12: sin altura fija ni recorte: las fotos ya son cuadradas (archivos recortados) y se muestran a su proporción real */
.portada-fotos .foto-cuad { display: block; width: 100%; height: auto; border-radius: 14px; }
/* 1.3.11: la primera foto es un <picture> que NUNCA se oculta: el navegador elige la versión apaisada en móvil
   (por <source media>) y la cuadrada en tableta y ordenador. Las otras dos se ocultan en móvil y aparecen en equipos. */
.portada-fotos picture { display: block; min-width: 0; }
.portada-fotos picture img { display: block; width: 100%; height: auto; border-radius: 14px; }
.portada-marca { text-align: center; padding-top: 36px; }
.portada-marca .logo-grande { display: none; width: min(78vw, 360px); height: auto; margin: 0 auto 18px; } /* en móvil no se repite el logo (ya está en la cabecera); en ordenador sí (1.3.3) */
.portada-marca h1 { font-size: clamp(1.9rem, 5.6vw, 3.3rem); max-width: 22ch; margin: 0 auto .5em; }
.portada-marca .botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 1.2em 0 .6em; }
.portada-marca .nota { font-size: .9rem; color: var(--texto-suave); margin: 0; }
.tecnicas { list-style: none; margin: 1.6em auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 720px; }
.tecnicas li { display: block; min-width: 0; }
/* BOTONES-TARJETA (1.3.6): técnicas (icono naranja) y servicios (icono azul). Mismo alto fijo para que sean todos
   exactamente iguales en cada ancho; borde visible, sombra ligera, flecha abajo y cambio de color al pulsar. */
.tecnicas a, .servicios a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 128px; padding: 10px 8px; border-radius: 18px; background: #fff; border: 1.5px solid var(--gris-linea); box-shadow: 0 4px 14px rgba(11,31,59,.08); color: var(--texto); text-decoration: none; font-weight: 700; font-size: .88rem; line-height: 1.2; text-align: center; min-width: 0; transition: background .15s, border-color .15s, transform .15s; }
.tecnicas a { white-space: nowrap; }
.tecnicas a:hover, .servicios a:hover { border-color: var(--acento); transform: translateY(-2px); }
.tecnicas a:active, .servicios a:active { background: #ffe9db; border-color: var(--acento); transform: none; }
.tecnicas svg, .servicios a svg { width: 38px; height: 38px; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tecnicas svg { stroke: var(--acento); }
/* Bloque «si lo desea, nos encargamos de todo»: propio, separado y con letra más pequeña */
.todo { margin: 2.6em 0; padding: 24px 24px 20px; border-radius: 24px; background: var(--gris); border-left: 6px solid var(--acento); font-size: .95rem; }
.todo h2 { font-size: 1.35rem; margin: 0 0 .6em; }
.todo ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: paso; }
.todo li { position: relative; padding-left: 44px; margin: 0; counter-increment: paso; }
.todo li::before { content: counter(paso); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--acento); color: var(--acento-texto); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
/* Fotos de los equipos */
.equipos-fotos { display: grid; gap: 16px; margin: 1em 0 2em; }
.equipos-fotos figure { margin: 0; background: var(--gris); border-radius: 24px; overflow: hidden; }
/* 1.3.12: la caja no tiene altura fija ni fondo: toma la proporción REAL de cada foto; la foto ocupa todo el ancho,
   con las esquinas redondeadas en la propia foto, y el texto va justo debajo. Nada se recorta ni se rellena. */
.equipos-fotos .foto { display: block; line-height: 0; }
.equipos-fotos .foto picture { display: block; }
.equipos-fotos .foto img { display: block; width: 100%; height: auto; border-radius: 24px 24px 0 0; }
.equipos-fotos figcaption { padding: 14px 18px; font-size: .95rem; color: var(--texto-suave); }
.equipos-fotos figcaption strong { color: var(--texto); }
/* Piezas que solo existen en móvil (1.3.4): frase corta bajo el titular y las dos fotos pequeñas de la portada
   repetidas en la sección de equipos (arriba se ocultan en móvil, así cada foto se ve una sola vez). */
.portada-marca .sub-movil { display: none; font-size: 1.08rem; color: var(--texto-suave); max-width: 34ch; margin: 0 auto .4em; }
.equipos-fotos .solo-movil { display: none; }

/* ============================================================
   MÓVIL (menos de 768 px, 1.3.4): cabecera con el logo grande; titular, frase y WhatsApp;
   tres técnicas; UNA foto grande (de espaldas con el logo junto a la piscina). Las otras dos fotos
   bajan a la sección de equipos. Tableta y ordenador no cambian.
   ============================================================ */
@media (max-width: 767px) {
  .logo-enlace svg { height: 58px; }
  .cabecera .contenedor { min-height: 72px; }
  .aviso-version { top: 86px; }
  .portada { display: flex; flex-direction: column; }
  .portada-marca { order: 1; padding-top: 28px; }
  .portada-marca .sub-movil { display: block; }
  .portada-marca .btn-tel, .portada-marca .nota { display: none; }
  .portada-marca .botones { margin: .6em 0 .4em; }
  .portada-fotos { order: 2; display: block; padding: 22px 20px 0; }
  .portada-fotos .foto-cuad { display: none; }
  /* en móvil la primera foto es la versión apaisada ya recortada (portada-villa-movil.png), entera, a su proporción natural */
  .portada-fotos picture img { border-radius: 22px; }
  .equipos-fotos .solo-movil { display: block; }
  .tecnicas a, .servicios a { font-size: .82rem; height: 120px; }
}
/* A partir de 768 px (tableta y ordenador): los cuatro servicios en una fila */
@media (min-width: 768px) {
  .servicios ul { grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 24px 0 10px; }
}

/* ============================================================
   PANTALLAS GRANDES
   ============================================================ */
@media (min-width: 900px) {
  body { padding-bottom: 0; font-size: 19px; }
  .btn-fijo-wa { display: none; }
  .arriba { bottom: 24px; right: 24px; }
  .menu-boton { display: none; }
  .nav { display: block; flex-basis: auto; }
  .logo-enlace { flex: 0 0 auto; }
  .logo-enlace svg { height: 50px; }
  .logo-pie { height: 56px; }
  .cabecera .contenedor { gap: 14px; }
  .nav ul { display: flex; gap: 2px; padding: 0; }
  .nav li a { border: 0; padding: 8px 11px; font-size: .95rem; }
  .cabecera .contenedor { flex-wrap: nowrap; }
  main > .contenedor { padding-top: 72px; }
  .botones { grid-template-columns: repeat(3, auto); justify-content: start; }
  .hero .contenedor { grid-template-columns: 1.1fr .9fr; align-items: center; padding-top: 96px; padding-bottom: 104px; gap: 40px; }
  .tarjetas { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .tarjetas.dos { grid-template-columns: repeat(2, 1fr); }
  .tarjeta { padding: 40px 36px; }
  #contacto-rapido .banda { padding: 64px 40px; }
  #contacto-rapido { margin-top: 88px; }
  .portada-marca { padding-top: 48px; }
  .portada-marca .logo-grande { display: block; width: 420px; }
  .tecnicas a { font-size: .92rem; }
  .todo { padding: 32px 36px 28px; }
  .todo ol { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .equipos-fotos { grid-template-columns: 1fr 1fr; gap: 24px; }
}