/* ==========================================================================
   AsturCode — Desarrollo Web Profesional
   Web corporativa del estudio. Concepto: "el taller a la vista".
   Azul marino profundo + azul marca + naranja de la Cruz de la Victoria,
   con capa de movimiento (partículas, código autoescrito, portfolio en vivo,
   proceso guiado por scroll y estimador interactivo).
   HTML + CSS + JS vanilla, sin frameworks ni build.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Marca — extraídos del logotipo */
  --azul-900: #04121f;
  --azul-800: #061a30;
  --azul-700: #0a2440;
  --azul-600: #0d6eb8;
  --azul-500: #1583c9;
  --azul-400: #3ba0e0;
  --azul-300: #7cc4f0;
  --naranja: #f09400;
  --naranja-claro: #ffb43d;
  --naranja-oscuro: #c97900;

  /* Tipografía */
  --tipo-titulo: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --tipo-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* El monoespaciado es el del sistema. Antes era JetBrains Mono, una tercera
     familia que había que descargar solo para cuatro etiquetas pequeñas. */
  --tipo-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --ancho: 1240px;
  --ancho-estrecho: 820px;
  --margen: clamp(1.15rem, 4vw, 3rem);
  --radio-s: 8px;
  --radio-m: 16px;
  --radio-l: 26px;
  --radio-pastilla: 999px;

  /* Movimiento */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --rapido: 0.2s;
  --medio: 0.4s;
  --lento: 0.8s;

  /* Cabecera */
  --alto-cabecera: 76px;
}

/* Tema oscuro (por defecto) */
:root,
[data-tema="oscuro"] {
  --fondo: #061a30;
  --fondo-alt: #04121f;
  --fondo-elev: #0b2645;
  --superficie: rgba(255, 255, 255, 0.045);
  --superficie-fuerte: rgba(255, 255, 255, 0.08);
  --borde: rgba(124, 196, 240, 0.16);
  --borde-fuerte: rgba(124, 196, 240, 0.3);
  --texto: #e9f2fb;
  --texto-suave: #9fb8d0;
  --texto-tenue: #6d88a3;
  --acento: var(--azul-400);
  --acento-fuerte: var(--azul-300);
  --sombra-s: 0 2px 12px rgba(0, 0, 0, 0.35);
  --sombra-m: 0 18px 44px rgba(0, 0, 0, 0.45);
  --sombra-l: 0 36px 90px rgba(0, 0, 0, 0.55);
  --brillo: rgba(21, 131, 201, 0.35);
  --cristal: rgba(6, 26, 48, 0.72);
  color-scheme: dark;
}

/* Tema claro */
[data-tema="claro"] {
  --fondo: #ffffff;
  --fondo-alt: #eef5fb;
  --fondo-elev: #ffffff;
  --superficie: rgba(13, 110, 184, 0.045);
  --superficie-fuerte: rgba(13, 110, 184, 0.09);
  --borde: rgba(6, 36, 63, 0.12);
  --borde-fuerte: rgba(6, 36, 63, 0.24);
  --texto: #06243f;
  --texto-suave: #47657f;
  --texto-tenue: #6b8298;
  --acento: var(--azul-600);
  --acento-fuerte: var(--azul-500);
  --sombra-s: 0 2px 10px rgba(6, 36, 63, 0.08);
  --sombra-m: 0 16px 40px rgba(6, 36, 63, 0.1);
  --sombra-l: 0 30px 70px rgba(6, 36, 63, 0.14);
  --brillo: rgba(21, 131, 201, 0.18);
  --cristal: rgba(255, 255, 255, 0.8);
  color-scheme: light;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--tipo-texto);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.7;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--medio) var(--curva-suave), color var(--medio) var(--curva-suave);
}

body.sin-scroll { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 1.4rem + 4.4vw, 4.5rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.9vw, 3.2rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--acento); text-decoration: none; transition: color var(--rapido) var(--curva-suave); }
a:hover { color: var(--acento-fuerte); }

img, svg, iframe { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 700; color: var(--texto); }

:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--azul-500); color: #fff; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}
.contenedor--estrecho { max-width: var(--ancho-estrecho); }

.saltar {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  background: var(--naranja);
  color: #0b1b2b;
  font-weight: 700;
  border-radius: var(--radio-s);
  transition: top var(--rapido) var(--curva);
}
.saltar:focus { top: 1rem; color: #0b1b2b; }

/* ==========================================================================
   3. Botones
   ========================================================================== */

.btn {
  --btn-fondo: transparent;
  --btn-color: var(--texto);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.82em 1.5em;
  border: 0;
  border-radius: var(--radio-pastilla);
  background: var(--btn-fondo);
  color: var(--btn-color);
  font-family: var(--tipo-texto);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--rapido) var(--curva),
              box-shadow var(--medio) var(--curva),
              background var(--rapido) var(--curva-suave),
              color var(--rapido) var(--curva-suave);
}
.btn svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn > span { white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--principal {
  --btn-fondo: linear-gradient(115deg, var(--azul-600), var(--azul-500) 55%, var(--azul-400));
  --btn-color: #fff;
  box-shadow: 0 10px 26px -10px rgba(13, 110, 184, 0.9);
}
.btn--principal::after {           /* barrido de brillo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--curva);
}
.btn--principal:hover { box-shadow: 0 16px 38px -12px rgba(21, 131, 201, 1); color: #fff; }
.btn--principal:hover::after { transform: translateX(130%); }

.btn--fantasma {
  --btn-color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  backdrop-filter: blur(8px);
}
.btn--fantasma:hover { background: var(--superficie-fuerte); border-color: var(--acento); color: var(--texto); }

.btn--naranja { --btn-fondo: linear-gradient(115deg, var(--naranja-oscuro), var(--naranja) 60%, var(--naranja-claro)); --btn-color: #22160a; }

.btn--whatsapp { --btn-fondo: #25d366; --btn-color: #06301a; box-shadow: 0 10px 26px -12px rgba(37, 211, 102, 0.9); }
.btn--whatsapp:hover { --btn-fondo: #1fbe5a; color: #06301a; }
.btn--whatsapp svg { fill: currentColor; stroke: none; width: 1.25em; height: 1.25em; }

.btn--grande { padding: 1.02em 1.9em; font-size: 1.02rem; }
.btn--bloque { width: 100%; }

/* ==========================================================================
   6. Cabecera
   ========================================================================== */

/* La cabecera se define entera en la sección 24 («cabecera flotante»): arriba
   va a lo ancho y transparente, y al bajar se recoge en una isla. Aquí solo
   queda lo que no cambia entre los dos estados. */
.cabecera__fila { gap: 1.5rem; }

.logo { display: flex; align-items: center; flex: none; }
.logo__img {
  height: 38px;
  width: auto;
  transition: transform var(--medio) var(--curva), filter var(--medio) var(--curva);
}
.logo:hover .logo__img { transform: scale(1.03); filter: drop-shadow(0 0 18px var(--brillo)); }
.logo__img--oscuro { display: none; }
[data-tema="claro"] .logo__img--claro { display: none; }
[data-tema="claro"] .logo__img--oscuro { display: block; }

.menu {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
}
.menu a {
  position: relative;
  padding: 0.5rem 0.85rem;
  color: var(--texto-suave);
  font-size: 0.94rem;
  font-weight: 500;
  border-radius: var(--radio-pastilla);
  transition: color var(--rapido) var(--curva-suave), background var(--rapido) var(--curva-suave);
}
.menu a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--naranja);
  transform: translateX(-50%);
  transition: width var(--medio) var(--curva);
}
.menu a:hover, .menu a.es-activo { color: var(--texto); }
.menu a:hover::after, .menu a.es-activo::after { width: 18px; }

.cabecera__acciones { display: flex; align-items: center; gap: 0.6rem; }

.tema {
  position: relative;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--superficie);
  color: var(--texto-suave);
  cursor: pointer;
  transition: color var(--rapido), border-color var(--rapido), transform var(--rapido) var(--curva);
}
.tema:hover { color: var(--naranja); border-color: var(--naranja); transform: rotate(-18deg); }
.tema svg {
  position: absolute;
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.tema__sol { opacity: 0; transform: scale(0.4) rotate(-90deg); }
[data-tema="claro"] .tema__luna { opacity: 0; transform: scale(0.4) rotate(90deg); }
[data-tema="claro"] .tema__sol { opacity: 1; transform: none; }

.hamburguesa {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--superficie);
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  width: 18px; height: 2px;
  margin: 3.5px auto;
  border-radius: 2px;
  background: var(--texto);
  transition: transform var(--medio) var(--curva), opacity var(--rapido);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* El WhatsApp de la cabecera. Nunca se pliega: en móvil se queda el icono
   solo, sin la palabra, y sigue siendo lo más grande que se puede tocar. */
.cabecera__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(37, 211, 102, 0.45);
  border-radius: var(--radio-pastilla);
  background: rgba(37, 211, 102, 0.12);
  color: #35d07f;
  font-family: var(--tipo-titulo);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.cabecera__wa:hover { background: #25d366; border-color: #25d366; color: #06301a; }
.cabecera__wa svg { width: 19px; height: 19px; fill: currentColor; stroke: none; flex: none; }
@media (max-width: 700px) {
  .cabecera__wa-texto { display: none; }
  .cabecera__wa { padding: 0.5rem 0.6rem; }
}

/* ==========================================================================
   7. Portada
   Corta y a lo que va. Se fueron el lienzo de partículas, la ventana de
   código que se tecleaba sola y el titular que se descifraba letra a letra:
   costaban hilo principal y batería, y le hablaban a un programador. Lo que
   queda es texto, precio, dos botones y el selector de sector.
   ========================================================================== */

.portada {
  position: relative;
  padding: calc(var(--alto-cabecera) + clamp(2.5rem, 5vw, 4.5rem)) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

.portada__rejilla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--borde) 1px, transparent 1px),
    linear-gradient(90deg, var(--borde) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 25%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 25%, #000 20%, transparent 78%);
  opacity: 0.5;
  pointer-events: none;
}

.portada__halo {
  position: absolute;
  top: -22%;
  left: 50%;
  width: min(1100px, 130%);
  aspect-ratio: 1.6;
  transform: translateX(-50%);
  background:
    radial-gradient(42% 52% at 32% 42%, color-mix(in srgb, var(--sec-a) 34%, transparent), transparent 70%),
    radial-gradient(40% 50% at 70% 34%, color-mix(in srgb, var(--azul-500) 30%, transparent), transparent 70%);
  filter: blur(34px);
  opacity: 0.6;
  pointer-events: none;
  transition: background var(--lento) var(--curva);
}

.portada__cuerpo { position: relative; max-width: 62rem; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.2rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--superficie);
  font-size: 0.83rem;
  color: var(--texto-suave);
}
.etiqueta__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35d07f;
  box-shadow: 0 0 0 4px rgba(53, 208, 127, 0.18);
  animation: latido 2.4s var(--curva-suave) infinite;
}
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 4px rgba(53, 208, 127, 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(53, 208, 127, 0.05); }
}

.portada__titulo {
  margin-bottom: 1.2rem;
  font-size: clamp(2.3rem, 1.3rem + 4vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
/* El remate va en su propia línea y NO cambia de longitud: cualquier texto
   que se anime ahí arriba mueve la página entera y eso se paga en CLS. */
.portada__remate {
  display: block;
  background: linear-gradient(96deg, var(--azul-300), var(--sec-a) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background var(--lento) var(--curva);
}
/* Sobre blanco, el azul claro del tema oscuro se queda sin contraste. */
[data-tema="claro"] .portada__remate {
  background: linear-gradient(96deg, var(--azul-600), var(--sec-a) 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

.portada__entrada {
  max-width: 54ch;
  margin-bottom: 1.6rem;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.14rem);
  color: var(--texto-suave);
}

/* La línea que contesta lo que de verdad se pregunta quien entra. */
.portada__prueba {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.6rem;
  margin: 0 0 1.9rem;
  padding: 0;
  list-style: none;
  font-size: 0.94rem;
  color: var(--texto-suave);
}
.portada__prueba li { display: flex; align-items: center; gap: 0.5rem; }
.portada__prueba li::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 50%;
  background: var(--superficie-fuerte);
  box-shadow: inset 0 0 0 1.5px var(--acento);
}
.portada__prueba b { color: var(--texto); }

.portada__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}

/* El selector de sector dentro de la portada: lo primero que se puede tocar. */
.portada__sectores { max-width: 58rem; }
.portada__sectores:empty { display: none; }
.portada__sectores::before {
  content: "¿A qué se dedica tu negocio? Tócalo y verás cómo cambia la página.";
  display: block;
  margin-bottom: 0.85rem;
  font-family: var(--tipo-titulo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--texto);
}
.portada__sectores .sector { padding: 0.75rem 0.5rem 0.65rem; gap: 0.45rem; }
.portada__sectores .sector__icono { width: 36px; height: 36px; border-radius: 16px; }
.portada__sectores .sector__icono svg { width: 20px; height: 20px; }
.portada__sectores .sector__nombre { font-size: 0.79rem; }

.portada__flecha {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 42px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
}
.portada__flecha span {
  display: block;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--acento);
  animation: rueda 1.8s var(--curva-suave) infinite;
}
@keyframes rueda {
  0% { transform: translateY(-6px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(7px); opacity: 0; }
}
@media (max-width: 900px) { .portada__flecha { display: none; } }

/* ==========================================================================
   9. Secciones y titulares
   ========================================================================== */

.seccion { position: relative; padding: clamp(4rem, 9vw, 7.5rem) 0; }
.seccion--alterna { background: var(--fondo-alt); }

.titular { max-width: 46rem; margin-bottom: clamp(2.4rem, 5vw, 3.8rem); }
.titular__ojo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  color: var(--naranja);
  font-family: var(--tipo-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.titular__ojo::before {
  content: "";
  width: 26px; height: 2px;
  border-radius: 2px;
  background: var(--naranja);
}
.titular__bajada { color: var(--texto-suave); font-size: 1.06rem; }

/* Revelado al hacer scroll */
[data-revelar] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--curva), transform 0.75s var(--curva);
  transition-delay: var(--retraso, 0ms);
}
[data-revelar].es-visible { opacity: 1; transform: none; }

/* ==========================================================================
   10. Servicios
   ========================================================================== */

.rejilla-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
}

.servicio {
  position: relative;
  padding: 1.9rem 1.7rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--superficie);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: border-color var(--medio) var(--curva),
              background var(--medio) var(--curva),
              box-shadow var(--medio) var(--curva),
              transform 0.25s var(--curva-suave);
}
.servicio::before {                     /* resplandor que sigue al ratón */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(21, 131, 201, 0.16), transparent 65%);
  opacity: 0;
  transition: opacity var(--medio) var(--curva-suave);
  pointer-events: none;
}
.servicio:hover { border-color: var(--borde-fuerte); background: var(--superficie-fuerte); box-shadow: var(--sombra-m); }
.servicio:hover::before { opacity: 1; }
.servicio--ancho { grid-column: span 2; }
.servicio--destacado {
  grid-column: span 2;
  border-color: rgba(240, 148, 0, 0.34);
  background: linear-gradient(150deg, rgba(240, 148, 0, 0.1), var(--superficie) 55%);
}
.servicio--destacado::before { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 148, 0, 0.18), transparent 65%); }

.servicio__sello {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radio-pastilla);
  background: var(--naranja);
  color: #22160a;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.servicio__icono {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: 1.15rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(21, 131, 201, 0.2), transparent);
  color: var(--azul-300);
  transition: transform var(--medio) var(--curva), color var(--medio) var(--curva-suave);
}
[data-tema="claro"] .servicio__icono { color: var(--azul-600); }
.servicio:hover .servicio__icono { transform: translateY(-3px) rotate(-6deg); color: var(--naranja); }
.servicio__icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.servicio h3 { margin-bottom: 0.5rem; position: relative; }
.servicio p { color: var(--texto-suave); font-size: 0.97rem; margin-bottom: 0; position: relative; }

.servicio__lista { margin-top: 1.1rem; display: grid; gap: 0.45rem; position: relative; }
.servicio__lista li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--texto-suave);
  font-size: 0.9rem;
}
.servicio__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--naranja);
  transform: rotate(45deg);
}

/* ==========================================================================
   11. Trabajos — visor en vivo
   ========================================================================== */

.proyecto {
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--superficie);
}

.proyecto__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.3rem;
}
.proyecto__nombre { margin-bottom: 0.2rem; }
.proyecto__meta { margin: 0; color: var(--texto-tenue); font-size: 0.88rem; }

.dispositivos {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--fondo);
}
.dispositivos__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 0;
  border-radius: var(--radio-pastilla);
  background: transparent;
  color: var(--texto-tenue);
  font-family: var(--tipo-texto);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--rapido) var(--curva-suave), color var(--rapido) var(--curva-suave);
}
.dispositivos__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dispositivos__btn:hover { color: var(--texto); }
.dispositivos__btn.es-activo { background: var(--azul-600); color: #fff; }

.visor { display: flex; justify-content: center; }

.visor__navegador {
  width: 100%;
  /* Tope explícito (no "none") para que la transición de max-width pueda
     interpolar también al pasar directamente de escritorio a móvil o
     viceversa: CSS no anima entre "none" y un valor en px, salta en seco. */
  max-width: var(--ancho);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-m);
  background: var(--fondo-elev);
  box-shadow: var(--sombra-l);
  overflow: hidden;
  transition: max-width 0.55s var(--curva), border-radius 0.55s var(--curva);
}
.visor[data-dispositivo="tablet"] .visor__navegador { max-width: 820px; }
.visor[data-dispositivo="movil"] .visor__navegador { max-width: 400px; border-radius: 30px; }

.visor__barra {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.visor__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--borde-fuerte); }
.visor__url {
  flex: 1;
  margin-inline: 0.6rem;
  padding: 0.28rem 0.85rem;
  border-radius: var(--radio-pastilla);
  background: var(--fondo);
  color: var(--texto-tenue);
  font-family: var(--tipo-mono);
  font-size: 0.72rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.visor__abrir {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  color: var(--texto-tenue);
  transition: background var(--rapido), color var(--rapido);
}
.visor__abrir:hover { background: var(--superficie-fuerte); color: var(--naranja); }
.visor__abrir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.visor__pantalla {
  position: relative;
  height: min(70vh, 620px);
  background: var(--fondo);
  transition: height 0.55s var(--curva);
}
.visor[data-dispositivo="movil"] .visor__pantalla { height: min(78vh, 700px); }

.visor__marco {
  width: 100%; height: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--curva);
}
.visor.es-cargado .visor__marco { opacity: 1; pointer-events: auto; }

.visor__cartel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: opacity 0.5s var(--curva), visibility 0.5s;
}
.visor.es-cargado .visor__cartel { opacity: 0; visibility: hidden; }
.visor__cartel-fondo {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--pa, #2a2019), var(--pb, #c1694f) 55%, var(--pc, #f8f2e9));
  opacity: 0.9;
  transition: background 0.6s var(--curva);
}
.visor__cartel-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 18, 31, 0.35), rgba(4, 18, 31, 0.75)),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 22px);
}
.visor__cartel-texto { position: relative; max-width: 30rem; display: grid; justify-items: center; gap: 0.5rem; }
.visor__cartel-texto h4 { color: #fff; margin: 0; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); }
.visor__cartel-texto p { color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; margin-bottom: 0.6rem; }
.visor__cartel-texto small { color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; }

.visor__cargando {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--fondo);
}
.visor.es-cargando .visor__cargando { display: flex; }
.visor__cargando i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--azul-400);
  animation: rebote 0.9s var(--curva-suave) infinite;
}
.visor__cargando i:nth-child(2) { animation-delay: 0.15s; }
.visor__cargando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes rebote { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-9px); opacity: 1; } }

.pestanas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.pestana {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--fondo);
  color: var(--texto-suave);
  font-family: var(--tipo-texto);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--rapido), transform var(--rapido) var(--curva), background var(--rapido);
}
.pestana:hover { transform: translateY(-3px); border-color: var(--borde-fuerte); }
.pestana.es-activa { border-color: var(--naranja); background: var(--superficie-fuerte); color: var(--texto); }
.pestana__num { font-family: var(--tipo-mono); font-size: 0.68rem; color: var(--texto-tenue); }
.pestana.es-activa .pestana__num { color: var(--naranja); }
.pestana__nombre { font-family: var(--tipo-titulo); font-size: 0.98rem; font-weight: 600; }
.pestana__muestra {
  height: 5px;
  margin-top: 0.25rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--a) 0 33%, var(--b) 33% 66%, var(--c) 66%);
}

.proyecto__nota {
  margin: 1.2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: 0.94rem;
}

/* ==========================================================================
   12. Proceso
   ========================================================================== */

.pasos__fila {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.pasos__panel {
  position: sticky;
  top: calc(var(--alto-cabecera) + 3rem);
  display: grid;
  gap: 1.4rem;
}
.pasos__contador { display: flex; align-items: baseline; gap: 0.4rem; }
.pasos__contador b {
  font-family: var(--tipo-titulo);
  font-size: clamp(3.4rem, 2rem + 5vw, 5.6rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(140deg, var(--azul-300), var(--naranja));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-tema="claro"] .pasos__contador b { background: linear-gradient(140deg, var(--azul-600), var(--naranja-oscuro)); -webkit-background-clip: text; background-clip: text; }
.pasos__contador span { color: var(--texto-tenue); font-family: var(--tipo-mono); font-size: 1rem; }

.pasos__riel { height: 3px; border-radius: 3px; background: var(--superficie-fuerte); overflow: hidden; }
.pasos__riel i {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--azul-500), var(--naranja));
  transition: width 0.5s var(--curva);
}

.pasos__indice { display: grid; gap: 0.55rem; }
.pasos__indice li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--texto-tenue);
  font-size: 0.94rem;
  transition: color var(--medio) var(--curva-suave), transform var(--medio) var(--curva);
}
.pasos__indice li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--borde-fuerte);
  transition: background var(--medio), box-shadow var(--medio), transform var(--medio) var(--curva);
}
.pasos__indice li.es-activo { color: var(--texto); transform: translateX(3px); }
.pasos__indice li.es-activo::before {
  background: var(--naranja);
  box-shadow: 0 0 0 5px rgba(240, 148, 0, 0.18);
  transform: scale(1.15);
}

.pasos__lista { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }

.paso {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--superficie);
  opacity: 0.45;
  transform: translateY(18px);
  transition: opacity 0.6s var(--curva), transform 0.6s var(--curva),
              border-color 0.6s var(--curva), background 0.6s var(--curva);
}
.paso.es-visible { opacity: 1; transform: none; }
.paso.es-activo { border-color: rgba(240, 148, 0, 0.4); background: var(--superficie-fuerte); }
.paso__num {
  position: absolute;
  top: 1.3rem; right: 1.5rem;
  font-family: var(--tipo-titulo);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--texto);
  opacity: 0.07;
}
.paso h3 { margin-bottom: 0.5rem; padding-right: 3rem; }
.paso p { color: var(--texto-suave); font-size: 0.98rem; margin-bottom: 0.9rem; }
.paso__tiempo {
  display: inline-block;
  padding: 0.24rem 0.8rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  color: var(--texto-tenue);
  font-family: var(--tipo-mono);
  font-size: 0.75rem;
}
.paso.es-activo .paso__tiempo { border-color: rgba(240, 148, 0, 0.4); color: var(--naranja); }

/* ==========================================================================
   13. Diferencia
   ========================================================================== */

.comparativa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.1rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.4rem);
}
.comparativa__col {
  padding: 1.8rem 1.7rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--fondo);
}
.comparativa__col h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
  font-size: 1.12rem;
}
.comparativa__col h3 svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.comparativa__col ul { display: grid; gap: 0.7rem; }
.comparativa__col li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  color: var(--texto-suave);
}
.comparativa__col li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
}

.comparativa__col--mal { opacity: 0.82; }
.comparativa__col--mal h3 svg { stroke: #ff7a6b; background: rgba(255, 122, 107, 0.14); }
.comparativa__col--mal li { text-decoration: line-through; text-decoration-color: rgba(255, 122, 107, 0.45); }
.comparativa__col--mal li::before { background: #ff7a6b; }

.comparativa__col--bien {
  border-color: var(--borde-fuerte);
  background: linear-gradient(155deg, rgba(21, 131, 201, 0.1), var(--fondo) 60%);
  box-shadow: var(--sombra-m);
}
.comparativa__col--bien h3 svg { stroke: #35d07f; background: rgba(53, 208, 127, 0.16); }
.comparativa__col--bien li { color: var(--texto); }
.comparativa__col--bien li::before { background: #35d07f; }

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.1rem;
}
.pilar {
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--superficie);
  transition: transform var(--medio) var(--curva), border-color var(--medio);
}
.pilar:hover { transform: translateY(-5px); border-color: var(--borde-fuerte); }
.pilar__icono {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 0.9rem;
  border-radius: 16px;
  background: rgba(240, 148, 0, 0.14);
  color: var(--naranja);
}
.pilar__icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pilar h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.pilar p { color: var(--texto-suave); font-size: 0.91rem; margin: 0; }

/* ==========================================================================
   14. Precio y estimador
   ========================================================================== */

.estimador {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: start;
}

.estimador__opciones { display: grid; gap: 1.6rem; }

.grupo { border: 0; margin: 0; padding: 0; }
.grupo legend {
  padding: 0;
  margin-bottom: 0.9rem;
  font-family: var(--tipo-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texto);
}

.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.6rem; }
.opciones--radio { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.opcion {
  position: relative;
  display: block;
  cursor: pointer;
}
.opcion input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.opcion__cuerpo {
  display: grid;
  gap: 0.15rem;
  height: 100%;
  padding: 0.85rem 1rem 0.9rem 2.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--superficie);
  transition: border-color var(--rapido), background var(--rapido), transform var(--rapido) var(--curva);
}
.opcion__cuerpo::before {                 /* marca de selección */
  content: "";
  position: absolute;
  left: 0.95rem; top: 1.1rem;
  width: 16px; height: 16px;
  border: 2px solid var(--borde-fuerte);
  border-radius: 8px;
  transition: background var(--rapido), border-color var(--rapido);
}
.opcion input[type="radio"] + .opcion__cuerpo::before { border-radius: 50%; }
.opcion__cuerpo::after {
  content: "";
  position: absolute;
  left: 1.28rem; top: 1.38rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--rapido);
}
.opcion:hover .opcion__cuerpo { border-color: var(--borde-fuerte); transform: translateY(-2px); }
.opcion input:checked + .opcion__cuerpo {
  border-color: var(--azul-500);
  background: linear-gradient(150deg, rgba(21, 131, 201, 0.16), var(--superficie));
}
.opcion input:checked + .opcion__cuerpo::before { background: var(--azul-500); border-color: var(--azul-500); }
.opcion input:checked + .opcion__cuerpo::after { opacity: 1; }
.opcion input:focus-visible + .opcion__cuerpo { outline: 3px solid var(--naranja); outline-offset: 2px; }
.opcion__cuerpo b { font-size: 0.95rem; font-weight: 600; }
.opcion__cuerpo small { color: var(--texto-tenue); font-size: 0.81rem; line-height: 1.45; }

.mantenimiento {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.2rem;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-m);
  background: var(--superficie);
  cursor: pointer;
  transition: border-color var(--rapido), background var(--rapido);
}
.mantenimiento:hover { border-color: var(--naranja); }
.mantenimiento input { width: 20px; height: 20px; margin-top: 0.2rem; accent-color: var(--naranja); flex: none; cursor: pointer; }
.mantenimiento span { display: grid; gap: 0.1rem; }
.mantenimiento small { color: var(--texto-tenue); font-size: 0.84rem; }

.ficha {
  position: sticky;
  top: calc(var(--alto-cabecera) + 1.5rem);
  padding: 1.8rem 1.7rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-l);
  background: linear-gradient(165deg, rgba(21, 131, 201, 0.12), var(--fondo-elev) 55%);
  box-shadow: var(--sombra-l);
}
.ficha__ojo {
  margin-bottom: 0.3rem;
  color: var(--texto-tenue);
  font-family: var(--tipo-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ficha__cifra {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  margin-bottom: 0.2rem;
  font-family: var(--tipo-titulo);
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ficha__cifra em { color: var(--texto-tenue); font-style: normal; font-weight: 500; }
.ficha__cifra [hidden] { display: none; }
.ficha__cifra i { color: var(--naranja); font-style: normal; }
.ficha__nota { margin: 0 0 0.4rem; color: var(--naranja); font-size: 0.9rem; font-weight: 600; }
.ficha__sub { margin: 0; color: var(--texto-tenue); font-size: 0.84rem; }
.ficha__sub b { color: var(--texto-suave); font-weight: 600; }

/* El «sin IVA» pegado a la cifra grande. Va ahí y no en la letra pequeña de
   abajo porque es justo la pregunta que se hace todo el mundo al ver el
   número, y si hay que buscarla ya has perdido la confianza. */
.ficha__iva {
  align-self: center;
  margin-left: 0.5rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-tenue);
  font-family: var(--tipo-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Y lo mismo arriba del formulario, para que nadie empiece a marcar casillas
   pensando que las cifras llevan impuestos dentro. */
.estimador__iva {
  justify-self: start;
  margin: 0;
  padding: 0.5rem 0.85rem;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-s);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 0.85rem;
}
.estimador__iva b { color: var(--texto); }

/* Cuotas recurrentes: cuota nuestra y suscripciones que paga el cliente */
.ficha__cuotas { display: grid; gap: 0.5rem; margin-top: 1rem; }
.ficha__cuotas li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--superficie);
  font-size: 0.88rem;
  color: var(--texto-suave);
}
.ficha__cuotas li[hidden] { display: none; }
.ficha__cuotas b {
  font-family: var(--tipo-titulo);
  font-size: 0.98rem;
  white-space: nowrap;
  color: var(--naranja);
  font-variant-numeric: tabular-nums;
}
.ficha__cuotas small { display: block; color: var(--texto-tenue); font-size: 0.78rem; }

.ficha__incluye {
  display: grid;
  gap: 0.42rem;
  margin: 1.3rem 0;
  padding: 1.2rem 0;
  border-block: 1px solid var(--borde);
}
.ficha__titulo {
  margin-bottom: 0.35rem;
  color: var(--texto);
  font-family: var(--tipo-titulo);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ficha__incluye li:not(.ficha__titulo) {
  position: relative;
  padding-left: 1.5rem;
  color: var(--texto-suave);
  font-size: 0.9rem;
}
.ficha__incluye li:not(.ficha__titulo)::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.5em;
  width: 9px; height: 5px;
  border-left: 2px solid #35d07f;
  border-bottom: 2px solid #35d07f;
  transform: rotate(-45deg);
}

.ficha__acciones { display: grid; gap: 0.6rem; }
.ficha__legal { margin: 1rem 0 0; color: var(--texto-tenue); font-size: 0.78rem; line-height: 1.55; }

/* ==========================================================================
   15. Cifras
   ========================================================================== */

.cifras {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-block: 1px solid var(--borde);
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(21, 131, 201, 0.14), transparent 70%),
    var(--fondo-alt);
}
.cifras__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.5rem;
  text-align: center;
}
.cifra b {
  display: block;
  font-family: var(--tipo-titulo);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  background: linear-gradient(140deg, var(--azul-300), var(--naranja));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
[data-tema="claro"] .cifra b { background: linear-gradient(140deg, var(--azul-600), var(--naranja-oscuro)); -webkit-background-clip: text; background-clip: text; }
.cifra span { color: var(--texto-suave); font-size: 0.9rem; }

/* ==========================================================================
   16. Quiénes somos y opiniones
   Fuera el carrusel: tres opiniones que se ven a la vez son más prueba social
   por pantalla y bastante menos código. Y como de momento no hay opiniones
   reales publicables, lo que hay son huecos que lo dicen.
   ========================================================================== */

.estudio {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 920px) {
  .estudio { grid-template-columns: 0.85fr 1.15fr; }
}

.estudio__visual { display: grid; gap: 0.8rem; }

/* Mientras no haya foto del equipo, la marca hace de retrato. En cuanto la
   tengáis, este bloque se sustituye por un <img class="estudio__foto">. */
.estudio__marca {
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: clamp(2rem, 5vw, 3.2rem) 1.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background:
    radial-gradient(70% 70% at 50% 30%, color-mix(in srgb, var(--sec-a) 16%, transparent), transparent 70%),
    var(--superficie);
  text-align: center;
}
.estudio__marca img { width: 92px; height: 92px; object-fit: contain; }
.estudio__marca p { margin: 0; display: grid; gap: 0.15rem; }
.estudio__marca b { font-family: var(--tipo-titulo); font-size: 1.05rem; color: var(--texto); }
.estudio__marca span { font-size: 0.88rem; color: var(--texto-tenue); }

.estudio__foto {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.estudio__datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.estudio__datos li {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 0.8rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--superficie);
  text-align: center;
}
.estudio__dato {
  font-family: var(--tipo-titulo);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--texto);
}
.estudio__pie { font-size: 0.76rem; line-height: 1.35; color: var(--texto-tenue); }
@media (max-width: 560px) {
  .estudio__datos { grid-template-columns: 1fr; }
  .estudio__datos li { text-align: left; }
}

.estudio__texto h2 { margin-bottom: 0.9rem; }
.estudio__texto > p { color: var(--texto-suave); }

.estudio__claves { display: grid; gap: 0.5rem; margin: 1.4rem 0 1.8rem; padding: 0; list-style: none; }
.estudio__claves li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.96rem;
  color: var(--texto-suave);
}
.estudio__claves li::before {
  content: "";
  margin-top: 0.42em;
  width: 12px;
  height: 7px;
  flex: none;
  border-left: 2px solid #35d07f;
  border-bottom: 2px solid #35d07f;
  transform: rotate(-45deg);
}

.estudio__acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* ── Opiniones ───────────────────────────────────────────────────────── */

.opiniones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.opinion {
  margin: 0;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--superficie);
}
.opinion__estrellas { margin-bottom: 1rem; color: var(--naranja); font-size: 1.1rem; letter-spacing: 0.18em; }
.opinion p { margin: 0; font-size: 0.96rem; color: var(--texto-suave); line-height: 1.65; }
.opinion footer { margin-top: 1.4rem; display: grid; gap: 0.1rem; }
.opinion footer b { font-size: 0.98rem; }
.opinion footer span { color: var(--texto-tenue); font-size: 0.85rem; }

/* El hueco reservado: se ve que está vacío a propósito, no roto. */
.opinion--vacia { border-style: dashed; border-color: var(--borde-fuerte); }
.opinion__sello {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.22rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--naranja) 45%, transparent);
  border-radius: var(--radio-pastilla);
  background: color-mix(in srgb, var(--naranja) 14%, transparent);
  color: var(--naranja-claro);
  font-family: var(--tipo-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
[data-tema="claro"] .opinion__sello { color: var(--naranja-oscuro); }

.opiniones__pie {
  margin: 1.6rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--texto-suave);
}

.opiniones__google {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.4rem auto 0;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--superficie);
  color: var(--texto);
  text-decoration: none;
}
.opiniones__google:hover { border-color: var(--acento); }
.opiniones__estrellas { color: var(--naranja); letter-spacing: 0.12em; }

/* ==========================================================================
   17. Preguntas frecuentes
   ========================================================================== */

.acordeon { display: grid; gap: 0.7rem; }

.pregunta {
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--fondo);
  overflow: hidden;
  transition: border-color var(--medio), background var(--medio);
}
.pregunta[open] { border-color: var(--borde-fuerte); background: var(--superficie); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--tipo-titulo);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary i {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  transition: background var(--rapido), border-color var(--rapido), transform var(--medio) var(--curva);
}
.pregunta summary i::before,
.pregunta summary i::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 2px;
  margin: -1px 0 0 -4.5px;
  border-radius: 2px;
  background: var(--texto-suave);
  transition: transform var(--medio) var(--curva), background var(--rapido);
}
.pregunta summary i::after { transform: rotate(90deg); }
.pregunta[open] summary i { background: var(--naranja); border-color: var(--naranja); transform: rotate(180deg); }
.pregunta[open] summary i::before,
.pregunta[open] summary i::after { background: #22160a; }
.pregunta[open] summary i::after { transform: rotate(0); }
.pregunta summary:hover i { border-color: var(--naranja); }

/* Mientras se pliega, el icono vuelve a "+" desde el primer momento en lugar de
   esperar a que termine la animación (el atributo open sigue puesto hasta el final). */
.pregunta.esta-cerrando summary i { background: transparent; border-color: var(--borde-fuerte); transform: none; }
.pregunta.esta-cerrando summary i::before,
.pregunta.esta-cerrando summary i::after { background: var(--texto-suave); }
.pregunta.esta-cerrando summary i::after { transform: rotate(90deg); }

/* La altura la anima el JS; aquí solo hace falta que no se desborde al plegarse. */
.pregunta__cuerpo {
  padding: 0 1.4rem 1.3rem;
  color: var(--texto-suave);
  font-size: 0.97rem;
  overflow: hidden;
}

/* ==========================================================================
   18. Contacto
   ========================================================================== */

.contacto { overflow: hidden; }
.contacto__halo {
  position: absolute;
  left: -8%; bottom: -25%;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 148, 0, 0.14), transparent 68%);
  filter: blur(52px);
  pointer-events: none;
}
.contacto__fila {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contacto__texto > p { color: var(--texto-suave); max-width: 30rem; }

.contacto__vias { display: grid; gap: 0.7rem; margin: 2rem 0 1.6rem; }
.contacto__vias a,
.contacto__vias-info {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--superficie);
  color: var(--texto);
  transition: border-color var(--rapido), transform var(--rapido) var(--curva), background var(--rapido);
}
.contacto__vias a:hover { border-color: var(--acento); background: var(--superficie-fuerte); transform: translateX(4px); color: var(--texto); }
.contacto__vias b { display: block; font-size: 0.95rem; }
.contacto__vias small { color: var(--texto-tenue); font-size: 0.87rem; }

.contacto__icono {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 16px;
  background: rgba(21, 131, 201, 0.16);
  color: var(--azul-300);
}
[data-tema="claro"] .contacto__icono { color: var(--azul-600); }
.contacto__icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contacto__icono--wa { background: rgba(37, 211, 102, 0.16); color: #35d07f; }
.contacto__icono--wa svg { fill: currentColor; stroke: none; width: 22px; height: 22px; }

.contacto__garantias { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.contacto__garantias span {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  color: var(--texto-tenue);
  font-size: 0.82rem;
}

/* --- Formulario --- */

.formulario {
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-l);
  background: var(--fondo-elev);
  box-shadow: var(--sombra-l);
}
[data-tema="oscuro"] .formulario { background: linear-gradient(165deg, rgba(21, 131, 201, 0.1), var(--fondo-elev) 55%); }

.formulario__progreso {
  height: 4px;
  margin-bottom: 0.7rem;
  border-radius: 3px;
  background: var(--superficie-fuerte);
  overflow: hidden;
}
.formulario__progreso i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--azul-500), var(--naranja));
  transition: width 0.5s var(--curva);
}
.formulario__contador { margin-bottom: 1.4rem; color: var(--texto-tenue); font-family: var(--tipo-mono); font-size: 0.78rem; }
.formulario__contador b { color: var(--naranja); }

.formulario__paso { display: none; border: 0; margin: 0; padding: 0; }
.formulario__paso.es-activo { display: grid; gap: 1.1rem; animation: entrarPaso 0.45s var(--curva); }
@keyframes entrarPaso { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.formulario__paso legend {
  padding: 0;
  margin-bottom: 0.2rem;
  font-family: var(--tipo-titulo);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--texto);
}

.formulario__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 0.89rem;
  font-weight: 500;
  transition: all var(--rapido) var(--curva-suave);
}
.chip:hover span { border-color: var(--borde-fuerte); color: var(--texto); }
.chip input:checked + span {
  border-color: var(--azul-500);
  background: var(--azul-600);
  color: #fff;
  transform: translateY(-1px);
}
.chip input:focus-visible + span { outline: 3px solid var(--naranja); outline-offset: 2px; }

.campo { display: grid; gap: 0.4rem; }
.campo__etiqueta { font-size: 0.89rem; font-weight: 600; color: var(--texto); }
.campo__etiqueta i { color: var(--texto-tenue); font-style: normal; font-weight: 400; }
.campo__control {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--tipo-texto);
  font-size: 0.97rem;
  transition: border-color var(--rapido), box-shadow var(--rapido), background var(--rapido);
}
.campo__control::placeholder { color: var(--texto-tenue); }
.campo__control:focus {
  outline: 0;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 4px rgba(21, 131, 201, 0.16);
}
select.campo__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
  cursor: pointer;
}
textarea.campo__control { resize: vertical; min-height: 96px; }

.campo__error {
  display: none;
  color: #ff8574;
  font-size: 0.83rem;
}
.campo.es-error .campo__control { border-color: #ff8574; box-shadow: 0 0 0 4px rgba(255, 133, 116, 0.14); }
.campo.es-error .campo__error,
.consentimiento.es-error .campo__error { display: block; }

.consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 0.75rem;
  align-items: start;
  font-size: 0.87rem;
  color: var(--texto-suave);
  cursor: pointer;
}
.consentimiento input { width: 19px; height: 19px; margin-top: 0.15rem; accent-color: var(--azul-500); cursor: pointer; }
.consentimiento .campo__error { grid-column: 2; }

.formulario__botones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; }
.formulario__botones--centro { justify-content: center; }
.formulario__alternativa { margin: 0.4rem 0 0; color: var(--texto-tenue); font-size: 0.86rem; }

.formulario__exito { display: grid; justify-items: center; gap: 0.4rem; text-align: center; padding: 1.5rem 0; }
.formulario__tick svg { width: 70px; height: 70px; fill: none; stroke: #35d07f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.formulario__tick circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: dibujar 0.7s var(--curva) forwards; }
.formulario__tick path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: dibujar 0.45s 0.5s var(--curva) forwards; }
.formulario__exito h3 { margin: 0.6rem 0 0.2rem; }
.formulario__exito p { color: var(--texto-suave); max-width: 26rem; }

/* ==========================================================================
   19. Pie
   ========================================================================== */

.pie {
  /* El hueco inferior deja sitio al botón flotante de WhatsApp */
  padding: clamp(3rem, 6vw, 4.5rem) 0 4.75rem;
  border-top: 1px solid var(--borde);
  background: var(--fondo-alt);
}
[data-tema="claro"] .pie { background: #06243f; }
[data-tema="claro"] .pie,
[data-tema="claro"] .pie a { color: #cfe0ee; }
[data-tema="claro"] .pie h3 { color: #fff; }
[data-tema="claro"] .pie a:hover { color: var(--naranja-claro); }
[data-tema="claro"] .pie__base { border-top-color: rgba(255, 255, 255, 0.12); }

.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
  margin-bottom: 2.5rem;
}
.pie__logo { height: 36px; width: auto; margin-bottom: 1.1rem; }
.pie__marca p { color: var(--texto-suave); font-size: 0.92rem; max-width: 26rem; }
[data-tema="claro"] .pie__marca p { color: #9db8cf; }

.pie__redes { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.pie__redes a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  color: var(--texto-suave);
  transition: all var(--rapido) var(--curva-suave);
}
[data-tema="claro"] .pie__redes a { border-color: rgba(255, 255, 255, 0.18); }
.pie__redes a:hover { border-color: var(--naranja); color: var(--naranja); transform: translateY(-3px); }
.pie__redes svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pie__redes a:first-child svg { fill: currentColor; stroke: none; width: 20px; height: 20px; }

.pie__col { display: grid; gap: 0.55rem; align-content: start; }
.pie__col h3 {
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texto);
}
.pie__col a { color: var(--texto-suave); font-size: 0.92rem; }
.pie__col a:hover { color: var(--naranja); }

.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--borde);
  color: var(--texto-tenue);
  font-size: 0.84rem;
}
.pie__base p { margin: 0; }
.pie__hecho span { color: var(--naranja); }

/* ==========================================================================
   19 bis. Páginas legales
   ========================================================================== */

.legal { padding: calc(var(--alto-cabecera) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(3rem, 7vw, 5rem); }
.legal__volver {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.6rem;
  color: var(--texto-suave);
  font-size: 0.9rem;
}
.legal__volver svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.legal__volver:hover { color: var(--naranja); }
.legal__fecha { color: var(--texto-tenue); font-family: var(--tipo-mono); font-size: 0.8rem; margin-bottom: 2rem; }

.legal h2 {
  margin-top: 2.6rem;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem);
}
.legal h3 { margin-top: 1.8rem; font-size: 1.08rem; }
.legal p, .legal li { color: var(--texto-suave); }
.legal ul { display: grid; gap: 0.5rem; margin: 0 0 1.1em; }
.legal ul li { position: relative; padding-left: 1.4rem; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--naranja);
  transform: rotate(45deg);
}
.legal__aviso {
  margin: 1.6rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px dashed var(--naranja);
  border-radius: var(--radio-m);
  background: rgba(240, 148, 0, 0.08);
  font-size: 0.92rem;
}
.legal__tabla { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: 0.9rem; }
.legal__tabla th, .legal__tabla td {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--borde);
  text-align: left;
  vertical-align: top;
  color: var(--texto-suave);
}
.legal__tabla th { background: var(--superficie); color: var(--texto); font-weight: 600; }
.legal__desliza { overflow-x: auto; }

/* ==========================================================================
   20. Elementos flotantes
   ========================================================================== */

.flotante-wa {
  position: fixed;
  left: 1.2rem; bottom: 1.2rem;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem;
  border-radius: var(--radio-pastilla);
  background: #25d366;
  color: #06301a;
  box-shadow: 0 12px 32px -8px rgba(37, 211, 102, 0.6);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.flotante-wa svg { width: 27px; height: 27px; fill: currentColor; flex: none; }
.flotante-wa__globo {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 700;
  transition: max-width var(--medio) var(--curva), padding var(--medio) var(--curva);
}
.flotante-wa {
  transition: transform var(--medio) var(--curva), opacity var(--medio) var(--curva),
              visibility var(--medio), box-shadow var(--medio) var(--curva);
}
.flotante-wa.es-oculto { opacity: 0; visibility: hidden; transform: translateY(12px); }

.flotante-wa:hover { transform: translateY(-3px) scale(1.03); color: #06301a; box-shadow: 0 18px 40px -10px rgba(37, 211, 102, 0.75); }
.flotante-wa:hover .flotante-wa__globo { max-width: 130px; padding-right: 0.5rem; }
.flotante-wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #25d366;
  animation: onda 2.6s var(--curva-suave) infinite;
  pointer-events: none;
}
@keyframes onda {
  0%   { transform: scale(1); opacity: 0.75; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.arriba {
  position: fixed;
  /* Apilado justo encima del de WhatsApp, en la misma columna izquierda.
     Los 5.4rem son la altura del de WhatsApp más su separación del borde. */
  left: 1.35rem; bottom: 5.4rem;
  z-index: 89;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  background: var(--cristal);
  backdrop-filter: blur(10px);
  color: var(--texto-suave);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--medio) var(--curva);
}
.arriba.es-visible { opacity: 1; visibility: visible; transform: none; }
.arriba:hover { color: var(--naranja); border-color: var(--naranja); }
.arriba svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.cookies {
  position: fixed;
  left: 1.2rem; bottom: 1.2rem;
  z-index: 95;
  max-width: 400px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-m);
  background: var(--cristal);
  backdrop-filter: blur(16px);
  box-shadow: var(--sombra-l);
  animation: subirCookies 0.6s 0.4s var(--curva) both;
}
.cookies[hidden] { display: none; }
@keyframes subirCookies { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.cookies p { margin: 0; font-size: 0.85rem; color: var(--texto-suave); }
.cookies .btn { padding: 0.6rem 1.3rem; font-size: 0.88rem; }

/* ==========================================================================
   21. Adaptación a pantallas
   ========================================================================== */

@media (max-width: 1080px) {
  .estimador { grid-template-columns: 1fr; }
  .ficha { position: static; }
  .contacto__fila { grid-template-columns: 1fr; }
  .pasos__fila { grid-template-columns: 1fr; }
  .pasos__panel { position: static; }
  .pasos__indice { display: none; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }

  /* En tablet real no tiene sentido simular escritorio en el visor de trabajos */
  .dispositivos__btn[data-dispositivo="escritorio"] { display: none; }
}

/* 980 y no 860: con la entrada nueva de «Tu sector» son seis enlaces más el
   botón de presupuesto, y por debajo de ese ancho se desbordaban por la
   derecha en vez de plegarse. */
@media (max-width: 980px) {
  :root { --alto-cabecera: 66px; }

  .hamburguesa { display: block; }
  .cabecera__cta { display: none; }

  /* El desplegable no se transparenta: es la misma isla de la cabecera pero
     más abajo. Con el cristal translúcido se leía el texto de la página por
     detrás de las opciones y era imposible de usar. */
  .menu {
    position: fixed;
    top: calc(var(--alto-cabecera) + 0.5rem);
    left: var(--margen);
    right: var(--margen);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.5rem 0.9rem 0.9rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-l);
    background: var(--fondo-elev);
    box-shadow: var(--sombra-l);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px) scale(0.97);
    transform-origin: top center;
    transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva), visibility var(--medio);
  }
  .menu.es-abierto { opacity: 1; visibility: visible; transform: none; }
  .menu a {
    padding: 0.9rem 0.5rem;
    border-bottom: 1px solid var(--borde);
    font-size: 1.05rem;
    white-space: nowrap;
  }
  .menu a:last-child { border-bottom: 0; }
  .menu a::after { display: none; }

  /* Cuando la cabecera está en modo isla, el desplegable la sigue: se pega
     justo debajo y con el mismo margen, para que se lean como una pieza. */
  .cabecera.es-isla .menu {
    top: calc(var(--alto-cabecera) + 1.1rem);
    left: calc(var(--margen) / 2);
    right: calc(var(--margen) / 2);
  }

  .servicio--ancho, .servicio--destacado { grid-column: span 1; }
  .visor__pantalla { height: min(62vh, 480px); }
  .cifras__rejilla { grid-template-columns: repeat(2, 1fr); }
  .cookies { left: 1rem; right: 1rem; max-width: none; bottom: 5.5rem; }
  .flotante-wa__globo { display: none; }
}

/* En móvil real (por debajo del ancho típico de un tablet en vertical, ~768px)
   solo tiene sentido simular móvil en el visor de trabajos. Breakpoint propio,
   no reutiliza los 860px de arriba porque un tablet real en vertical cae
   justo en esa franja y necesita seguir viendo la opción "Tablet". */
@media (max-width: 767px) {
  .dispositivos__btn[data-dispositivo="tablet"] { display: none; }
}

@media (max-width: 560px) {
  .portada__botones .btn { width: 100%; }
  .proyecto__cabecera { flex-direction: column; align-items: stretch; }
  .dispositivos { justify-content: center; }
  .dispositivos__btn span { display: none; }
  .dispositivos__btn { padding: 0.5rem 1.1rem; }
  .pestanas { grid-template-columns: repeat(2, 1fr); }
  .pie__rejilla { grid-template-columns: 1fr; }
  .opciones, .opciones--radio { grid-template-columns: 1fr; }
}

/* ==========================================================================
   21 bis. Tu sector — selector y página de muestra
   Traído de la v4 y adaptado a los tokens de esta versión. Al elegir sector
   cambia el acento (--sec-a / --sec-b), la maqueta de muestra, el texto del
   panel y qué trabajos se enseñan más abajo.
   ========================================================================== */

/* Acento por sector. El valor de partida está en :root para que la página
   pinte bien aunque el JavaScript no llegue a ejecutarse. */
:root {
  --sec-a: #c1694f;
  --sec-b: #e9b3a8;
  --sec-tinte: rgba(193, 105, 79, 0.12);
}
[data-sector="peluqueria"]  { --sec-a: #c1694f; --sec-b: #e9b3a8; --sec-tinte: rgba(193, 105, 79, 0.12); }
[data-sector="taller"]      { --sec-a: #3ba0e0; --sec-b: #8fbde4; --sec-tinte: rgba(59, 160, 224, 0.12); }
[data-sector="restaurante"] { --sec-a: #d98b3a; --sec-b: #e2a45e; --sec-tinte: rgba(217, 139, 58, 0.12); }
[data-sector="clinica"]     { --sec-a: #2fb3a6; --sec-b: #78cec5; --sec-tinte: rgba(47, 179, 166, 0.12); }
[data-sector="gimnasio"]    { --sec-a: #4fc07f; --sec-b: #8ad9ab; --sec-tinte: rgba(79, 192, 127, 0.12); }
[data-sector="oficios"]     { --sec-a: #e0b23c; --sec-b: #ecd07a; --sec-tinte: rgba(224, 178, 60, 0.12); }

/* En claro los acentos se oscurecen: los de arriba están pensados sobre
   fondo azul marino y sobre blanco no tendrían contraste suficiente. */
[data-tema="claro"][data-sector="peluqueria"]  { --sec-a: #a8503a; }
[data-tema="claro"][data-sector="taller"]      { --sec-a: #1f6ea8; }
[data-tema="claro"][data-sector="restaurante"] { --sec-a: #a45f16; }
[data-tema="claro"][data-sector="clinica"]     { --sec-a: #14776e; }
[data-tema="claro"][data-sector="gimnasio"]    { --sec-a: #1f7a4a; }
[data-tema="claro"][data-sector="oficios"]     { --sec-a: #8a6d12; }

/* ── El selector ─────────────────────────────────────────────────────── */

.sectores {
  padding: clamp(1.2rem, 2.5vw, 1.9rem);
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
}

.sectores__guia {
  margin: 0 0 1rem;
  font-family: var(--tipo-titulo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texto);
}

/* Seis sectores, así que las columnas van escritas a mano: con `auto-fit`
   quedaba una fila de cinco y uno suelto debajo, que se lee fatal. */
.sectores__pista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (min-width: 560px) { .sectores__pista { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 940px) { .sectores__pista { grid-template-columns: repeat(6, 1fr); } }

.sector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 0.6rem 0.85rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--fondo-elev);
  color: var(--texto-suave);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva),
              color var(--rapido) var(--curva),
              background-color var(--rapido) var(--curva),
              transform var(--rapido) var(--curva);
}
.sector:hover { transform: translateY(-2px); border-color: var(--borde-fuerte); color: var(--texto); }

.sector__icono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: var(--superficie-fuerte);
  color: var(--acento);
  transition: background-color var(--rapido), color var(--rapido);
}
.sector__icono svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.sector__nombre {
  font-family: var(--tipo-titulo);
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.25;
}

.sector.es-activo {
  border-color: var(--sec-a);
  background: var(--sec-tinte);
  color: var(--sec-a);
  box-shadow: 0 0 0 1px var(--sec-a);
}
.sector.es-activo .sector__icono { background: var(--sec-a); color: #08131f; }

.sectores__pie {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
  font-size: 0.9rem;
  color: var(--texto-tenue);
}

/* ── El panel: maqueta + explicación ─────────────────────────────────── */

.panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  align-items: start;
}
@media (min-width: 960px) {
  .panel { grid-template-columns: 1.1fr 0.9fr; gap: 2.8rem; align-items: center; }
}

.marco {
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--fondo-elev);
  box-shadow: var(--sombra-l);
  overflow: hidden;
}

.marco__barra {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.marco__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--borde-fuerte); flex: none; }
.marco__url {
  flex: 1;
  margin-left: 0.5rem;
  padding: 0.22rem 0.7rem;
  border-radius: var(--radio-pastilla);
  background: var(--fondo);
  border: 1px solid var(--borde);
  font-family: var(--tipo-mono);
  font-size: 0.72rem;
  color: var(--texto-tenue);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marco__lienzo {
  position: relative;
  aspect-ratio: 16 / 11;
  background: #fff;
  overflow: hidden;
}

/* ── Las maquetas ───────────────────────────────────────────────────────
   Seis planteamientos distintos, en puro CSS. Son bocetos, no capturas:
   los textos son barras a propósito, porque lo que se enseña aquí es
   dónde va cada cosa, no qué pone. Cada sector coloca las piezas en otro
   orden y ese es justo el argumento de la sección. */

.maqueta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 3.5%;
  gap: 3%;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  transition: opacity var(--medio) var(--curva),
              transform var(--medio) var(--curva),
              visibility var(--medio);
  font-size: 10px;
}
.maqueta.es-activa { opacity: 1; visibility: visible; transform: none; }

.mq-cab {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 0.7em;
  border-radius: 8px;
  background: #f2f2f2;
  flex: none;
}
.mq-cab--solida { background: var(--sec-a); }
.mq-cab--oscura { background: #1b1b1b; }
.mq-cab--solida .mq-marca, .mq-cab--oscura .mq-marca { background: rgba(255, 255, 255, 0.9); }
.mq-cab--solida .mq-nav, .mq-cab--oscura .mq-nav { background: rgba(255, 255, 255, 0.45); }

.mq-marca { width: 2.6em; height: 0.8em; border-radius: 2px; background: var(--sec-a); flex: none; }
.mq-nav { width: 1.5em; height: 0.4em; border-radius: 2px; background: #cfcfcf; flex: none; }

.mq-btn {
  margin-left: auto;
  padding: 0.32em 0.7em;
  border-radius: 99px;
  background: var(--sec-a);
  color: #fff;
  font-size: 0.62em;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}
.mq-btn--grande { margin-left: 0; align-self: flex-start; padding: 0.5em 1em; font-size: 0.7em; }
.mq-btn--fantasma { background: transparent; color: var(--sec-a); box-shadow: inset 0 0 0 1px var(--sec-a); }

.mq-t { display: block; height: 0.42em; border-radius: 3px; background: #d8d8d8; width: 60%; flex: none; }
.mq-t--s { width: 32%; background: var(--sec-a); height: 0.36em; }
.mq-t--m { width: 46%; }
.mq-t--l { width: 78%; }
.mq-t--xl { width: 88%; height: 0.9em; background: #3a3a3a; border-radius: 4px; }

.mq-precio { width: 2.2em; height: 0.42em; border-radius: 3px; background: var(--sec-a); flex: none; opacity: 0.75; }
.mq-ico { display: block; width: 1.5em; height: 1.5em; border-radius: 8px; background: color-mix(in srgb, var(--sec-a) 22%, transparent); }
.mq-ico--redondo { border-radius: 50%; }

/* Peluquería: foto grande y precios a la vista */
.maqueta--peluqueria .mq-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3%; flex: 1.5; }
.maqueta--peluqueria .mq-hero__foto { border-radius: 8px; background: linear-gradient(145deg, var(--sec-a), var(--sec-b)); }
.maqueta--peluqueria .mq-hero__texto { display: flex; flex-direction: column; justify-content: center; gap: 0.55em; }
.maqueta--peluqueria .mq-lista { display: flex; flex-direction: column; gap: 0.45em; flex: 1; justify-content: center; }
.maqueta--peluqueria .mq-fila {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 0.4em; border-bottom: 1px solid #ececec;
}

/* Taller: banda ancha con dos acciones y tres servicios */
.maqueta--taller .mq-banda {
  display: flex; flex-direction: column; justify-content: center; gap: 0.55em;
  padding: 1em; border-radius: 8px; flex: 1.5;
  background: linear-gradient(120deg, color-mix(in srgb, var(--sec-a) 12%, #fff), color-mix(in srgb, var(--sec-b) 26%, #fff));
}
.mq-acciones { display: flex; gap: 0.5em; margin-top: 0.3em; }
.maqueta--taller .mq-tejas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; flex: 1; }
.mq-teja {
  display: flex; flex-direction: column; gap: 0.4em; justify-content: center;
  padding: 0.7em; border-radius: 8px; background: #f6f6f6;
}

/* Restaurante: portada a sangre y carta a dos columnas */
.mq-portada-foto {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.4em;
  padding: 0.9em; border-radius: 8px; flex: 1.2;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sec-a) 88%, #000), var(--sec-b));
}
.mq-portada-foto .mq-t { background: rgba(255, 255, 255, 0.85); }
.mq-portada-foto .mq-t--xl { background: #fff; }
.mq-portada-foto--alta { flex: 1.8; justify-content: center; }
.mq-portada-foto--alta .mq-btn { background: #fff; color: var(--sec-a); }

.maqueta--restaurante .mq-carta { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; flex: 1.3; }
.maqueta--restaurante .mq-carta__col { display: flex; flex-direction: column; gap: 0.5em; }
.mq-plato { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }

/* Clínica: texto, formulario de cita y cuatro especialidades */
.maqueta--clinica .mq-dos { display: grid; grid-template-columns: 1fr 0.85fr; gap: 4%; flex: 1.6; }
.maqueta--clinica .mq-dos__texto { display: flex; flex-direction: column; justify-content: center; gap: 0.5em; }
.mq-ficha {
  display: flex; flex-direction: column; gap: 0.45em; justify-content: center;
  padding: 0.85em; border-radius: 8px;
  background: color-mix(in srgb, var(--sec-a) 8%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec-a) 22%, transparent);
}
.mq-campo { display: block; height: 1em; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px #e2e2e2; }
.maqueta--clinica .mq-tejas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3%; flex: 1; }
.maqueta--clinica .mq-teja { align-items: center; text-align: center; }
.maqueta--clinica .mq-teja .mq-t { width: 80%; }

/* Gimnasio: portada alta y cuadro semanal */
.maqueta--gimnasio .mq-cuadro {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3em; flex: 1.2; align-content: center;
}
.mq-dia { height: 0.5em; border-radius: 2px; background: #d6d6d6; }
.mq-clase { height: 0.9em; border-radius: 3px; background: color-mix(in srgb, var(--sec-a) 16%, transparent); }
.mq-clase--b { background: var(--sec-a); opacity: 0.85; }

/* Oficios: barra de urgencias arriba del todo y teléfono enorme */
.mq-urgencia {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.4em 0.7em; border-radius: 8px; flex: none;
  background: var(--sec-a);
}
.mq-urgencia .mq-t { background: rgba(255, 255, 255, 0.9); width: 55%; }
.mq-punto-vivo { width: 0.5em; height: 0.5em; border-radius: 50%; background: #fff; flex: none; }
.maqueta--oficios .mq-banda {
  display: flex; flex-direction: column; justify-content: center; gap: 0.5em;
  padding: 1em; border-radius: 8px; flex: 1.4;
  background: linear-gradient(120deg, color-mix(in srgb, var(--sec-b) 30%, #fff), #fff);
}
.maqueta--oficios .mq-zonas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; flex: 1; align-content: center; }
.mq-zona { height: 1.4em; border-radius: 8px; background: #f2f2f2; box-shadow: inset 0 0 0 1px #e6e6e6; }

/* ── La columna de texto del panel ───────────────────────────────────── */

.panel__pie {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--texto-tenue);
  line-height: 1.5;
}

.panel__rotulo {
  margin: 0 0 0.5rem;
  font-family: var(--tipo-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sec-a);
}

.panel__texto h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.95rem); margin-bottom: 0.7rem; }
.panel__texto > p { color: var(--texto-suave); }

.panel__claves { display: grid; gap: 0.5rem; margin: 1.2rem 0 1.6rem; padding: 0; list-style: none; }
.panel__claves li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--texto-suave);
}
.panel__claves li::before {
  content: "";
  margin-top: 0.45em;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 2px;
  background: var(--sec-a);
  transform: rotate(45deg);
}

.panel__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ==========================================================================
   21 ter. Trabajos por sector — clientes, propuestas y estado vacío
   ========================================================================== */

/* `hidden` tiene que ganar siempre. Sin esta regla, cualquier `display`
   posterior lo pisa y se quedan a la vista el proyecto y el estado vacío a
   la vez, o los seis grupos de propuestas apilados. */
[hidden] { display: none !important; }

/* El selector de sector clonado, pegado a los trabajos. */
.trabajos__sectores { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.trabajos__sectores:empty { display: none; }
.trabajos__sectores .sector { padding: 0.7rem 0.5rem 0.6rem; gap: 0.4rem; }
.trabajos__sectores .sector__icono { width: 34px; height: 34px; border-radius: 16px; }
.trabajos__sectores .sector__icono svg { width: 19px; height: 19px; }
.trabajos__sectores .sector__nombre { font-size: 0.78rem; }

/* ── Pestañas de cliente ─────────────────────────────────────────────────
   Solo aparecen cuando el sector tiene más de un cliente. Hoy no ocurre con
   ninguno, pero la sección está montada para el día que sí. */

.clientes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.cliente {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--superficie);
  color: var(--texto-suave);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva),
              background-color var(--rapido) var(--curva),
              color var(--rapido) var(--curva);
}
.cliente:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.cliente.es-activo {
  border-color: var(--sec-a);
  background: var(--sec-tinte);
  color: var(--texto);
}
.cliente__nombre { font-family: var(--tipo-titulo); font-size: 0.94rem; font-weight: 700; }
.cliente__lugar { font-size: 0.78rem; color: var(--texto-tenue); }

/* ── Grupos de propuestas ────────────────────────────────────────────────
   Mismo aspecto que `.pestanas` de siempre; lo único que cambia es que hay
   un grupo por cliente y solo se ve el del cliente activo. */

.propuestas__grupo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-top: 1.1rem;
}

/* ── Sector sin trabajos publicados ─────────────────────────────────────
   Se dice claro. Enseñar una demo inventada como si fuera un encargo
   entregado es exactamente lo que no queremos vender. */

.sin-trabajos {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-l);
  background: var(--superficie);
  max-width: 60rem;
}

.sin-trabajos__sello {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.24rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--naranja) 45%, transparent);
  border-radius: var(--radio-pastilla);
  background: color-mix(in srgb, var(--naranja) 16%, transparent);
  color: var(--naranja-claro);
  font-family: var(--tipo-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-tema="claro"] .sin-trabajos__sello { color: var(--naranja-oscuro); }

.sin-trabajos h3 { margin-bottom: 0.6rem; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem); }
.sin-trabajos p { color: var(--texto-suave); max-width: 54ch; }
/* El gancho del estado vacío: escasez real y honesta, no un contador falso. */
.sin-trabajos__oferta {
  margin-top: 1.4rem;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--naranja);
  border-radius: 0 var(--radio-m) var(--radio-m) 0;
  background: color-mix(in srgb, var(--naranja) 10%, transparent);
}
.sin-trabajos__gancho {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--tipo-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--naranja-claro);
}
[data-tema="claro"] .sin-trabajos__gancho { color: var(--naranja-oscuro); }
.sin-trabajos__oferta p { margin: 0; font-size: 0.95rem; color: var(--texto-suave); max-width: 58ch; }

.sin-trabajos__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }

/* ==========================================================================
   21 quater. El asistente de IA de esta misma web
   Va apilado encima del botón de WhatsApp, no en su sitio: el de WhatsApp
   lleva a una persona y ese no se toca.
   ========================================================================== */

/* Etiquetas que solo existen para los lectores de pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.chat-lanzador {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem 0.7rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--fondo-elev);
  color: var(--texto);
  font-family: var(--tipo-titulo);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sombra-m);
  transition: transform var(--medio) var(--curva),
              opacity var(--medio) var(--curva),
              border-color var(--rapido) var(--curva);
}
.chat-lanzador:hover { transform: translateY(-3px); border-color: var(--acento); }
.chat-lanzador.es-oculto { opacity: 0; visibility: hidden; transform: translateY(12px); }

.chat-lanzador__icono {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--naranja);
  color: #241500;
}
.chat-lanzador__icono svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 560px) {
  .chat-lanzador__texto { display: none; }
  .chat-lanzador { padding: 0.6rem; }
}

/* ── El panel ────────────────────────────────────────────────────────── */

.chat {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 96;
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 2.4rem));
  height: min(600px, calc(100vh - 2.6rem));
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--fondo);
  box-shadow: var(--sombra-l);
  overflow: hidden;
  transform-origin: bottom right;

  /* El estado de reposo es el de cerrado, y la transición escrita AQUÍ es la
     que se ve al CERRAR: más corta y con salida seca, que un adiós lento
     molesta. La de abrir va en `.es-visible`, un poco más larga y con la
     curva elástica de la casa. El JavaScript quita `hidden` primero y añade
     la clase un fotograma después, que si no el navegador no ve de dónde
     sale y no hay transición ninguna. */
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 180ms ease-in, transform 180ms ease-in;
}
.chat.es-visible {
  opacity: 1;
  transform: none;
  transition: opacity 260ms var(--curva), transform 300ms var(--curva);
}

.chat__cabecera {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  flex: none;
  background: var(--fondo-elev);
  border-bottom: 1px solid var(--borde);
}
.chat__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 16px;
  background: var(--naranja);
  color: #241500;
}
.chat__avatar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat__titulo { flex: 1; min-width: 0; }
.chat__titulo b { display: block; font-family: var(--tipo-titulo); font-size: 0.95rem; color: var(--texto); }
.chat__titulo small { font-size: 0.75rem; color: var(--texto-tenue); }
.chat__cerrar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--texto-suave);
  cursor: pointer;
}
.chat__cerrar:hover { background: var(--superficie-fuerte); color: var(--texto); }
.chat__cerrar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.chat__hilo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--fondo-alt);
}

.chat__msg { max-width: 88%; }
.chat__msg p {
  margin: 0;
  padding: 0.7rem 0.95rem;
  border-radius: 16px;
  font-size: 0.92rem;
  line-height: 1.55;
}
.chat__msg--bot { align-self: flex-start; }
.chat__msg--bot p {
  background: var(--fondo-elev);
  border: 1px solid var(--borde);
  border-bottom-left-radius: 5px;
  color: var(--texto);
}
.chat__msg--yo { align-self: flex-end; }
.chat__msg--yo p {
  background: var(--azul-600);
  border-bottom-right-radius: 5px;
  color: #fff;
}
.chat__msg ul { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; }
.chat__msg li { display: flex; gap: 0.4rem; font-size: 0.9rem; }
.chat__msg li::before { content: "·"; font-weight: 700; color: var(--acento); }

.chat__escribiendo { display: flex; gap: 4px; padding: 0.85rem 1rem; }
.chat__escribiendo i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--texto-tenue);
  animation: latir 1.1s infinite ease-in-out;
}
.chat__escribiendo i:nth-child(2) { animation-delay: 0.15s; }
.chat__escribiendo i:nth-child(3) { animation-delay: 0.3s; }
@keyframes latir {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.chat__acciones { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.chat__acciones .btn { padding: 0.5rem 0.9rem; font-size: 0.84rem; }

/* Mini formulario de contacto dentro del propio chat */
.chat__lead {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding: 0.85rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--fondo-elev);
}
.chat__lead input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--fondo);
  color: var(--texto);
  font-size: 0.9rem;
}
.chat__lead input:focus { outline: none; border-color: var(--acento); }
.chat__lead .btn { justify-content: center; }
.chat__lead small { font-size: 0.74rem; color: var(--texto-tenue); line-height: 1.45; }

.chat__sugerencias {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  flex: none;
  overflow-x: auto;
  border-top: 1px solid var(--borde);
  background: var(--fondo);
  scrollbar-width: none;
}
.chat__sugerencias::-webkit-scrollbar { display: none; }
.chat__sugerencias button {
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--rapido), color var(--rapido);
}
.chat__sugerencias button:hover { border-color: var(--acento); color: var(--texto); }
.chat__sugerencias.es-oculto { display: none; }

.chat__pie {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  flex: none;
  border-top: 1px solid var(--borde);
  background: var(--fondo);
}
.chat__pie input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--superficie);
  color: var(--texto);
  font-size: 0.92rem;
}
.chat__pie input:focus { outline: none; border-color: var(--acento); }
.chat__pie button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--azul-600);
  color: #fff;
  cursor: pointer;
}
.chat__pie button:hover { background: var(--azul-500); }
.chat__pie button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

.chat__legal {
  margin: 0;
  padding: 0.5rem 0.9rem 0.7rem;
  flex: none;
  background: var(--fondo);
  font-size: 0.72rem;
  color: var(--texto-tenue);
  text-align: center;
}

/* Con el chat abierto solo estorban en pantalla pequeña, que es donde el
   panel ocupa casi todo el ancho. En escritorio están en la esquina de
   enfrente, así que se quedan: si alguien prefiere hablar con una persona a
   mitad de conversación, tiene el WhatsApp a mano. */
@media (max-width: 620px) {
  body.chat-abierto .flotante-wa,
  body.chat-abierto .arriba { display: none; }
}

/* ==========================================================================
   22. Impresión y accesibilidad
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
  .maqueta.es-activa { opacity: 1; visibility: visible; transform: none; }
  .paso { opacity: 1; transform: none; }
}

@media print {
  .cabecera, .flotante-wa, .arriba, .cookies, .visor, .dispositivos,
  .chat, .chat-lanzador, .portada__flecha { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   23. Fondo, cinta y cursor — lo que vuelve de la v2
   ========================================================================== */

/* El lienzo de constelaciones de la portada. El JavaScript lo para cuando la
   portada sale de pantalla y cuando la pestaña se oculta, así que no gasta
   batería de fondo. Con «movimiento reducido» ni se arranca. */

/* ── La cinta infinita ───────────────────────────────────────────────── */

.cinta {
  overflow: hidden;
  padding: 0.85rem 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
  /* Se difumina por los lados para que no corte en seco */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta__pista { display: flex; width: max-content; animation: desfile 38s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__grupo { display: flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; }
.cinta__grupo span {
  font-family: var(--tipo-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
}
.cinta__grupo i { color: var(--naranja); font-size: 0.55rem; font-style: normal; }
@keyframes desfile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── El cursor propio ────────────────────────────────────────────────── */

.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  /* La flecha del sistema solo se esconde una vez que el círculo está en
     marcha: si el script fallara, nunca te quedas sin puntero. Dentro de los
     iframes del portfolio se recupera, porque el círculo no puede seguir al
     ratón fuera de nuestro documento. */
  .cursor-propio, .cursor-propio * { cursor: none !important; }
  .cursor-propio iframe { cursor: auto !important; }

  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 400;
    display: block;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--medio);
    will-change: transform;
  }
  .cursor.es-visible { opacity: 1; }

  /* El anillo. Se deforma con la velocidad desde el JavaScript, que le pasa
     el ángulo y el estirón en --giro y --estiron. El seguimiento NO cambia:
     sigue siendo el mismo 0.18 de siempre. */
  .cursor b {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 1.5px solid var(--acento);
    border-radius: 50%;
    transform: rotate(var(--giro, 0deg)) scale(calc(1 + var(--estiron, 0)), calc(1 - var(--estiron, 0) * 0.7));
    transition: width 0.25s var(--curva), height 0.25s var(--curva),
                margin 0.25s var(--curva), background-color 0.25s var(--curva-suave),
                border-color 0.25s;
  }

  /* El punto del centro se queda quieto: es el que da la sensación de que el
     anillo «adelanta» al frenar. */
  .cursor i {
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--naranja);
    transition: transform 0.25s var(--curva), background-color 0.25s;
  }

  /* Sobre algo que se puede tocar: el anillo se abre y el punto desaparece. */
  .cursor.es-activo b {
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    background: color-mix(in srgb, var(--sec-a) 16%, transparent);
    border-color: var(--sec-a);
  }
  .cursor.es-activo i { transform: scale(0); }

  /* Al pulsar, el anillo se encoge de golpe. */
  .cursor.es-pulsando b { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
}

/* ==========================================================================
   24. La cabecera flotante
   Arriba del todo va a lo ancho y transparente; en cuanto bajas se recoge en
   una isla con borde y fondo difuminado. La transición es de las medidas, no
   de `position`, así que no salta.
   ========================================================================== */

.cabecera {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-top: 0;
  transition: padding var(--medio) var(--curva);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--alto-cabecera);
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: max-width var(--medio) var(--curva),
              padding var(--medio) var(--curva),
              border-radius var(--medio) var(--curva),
              border-color var(--medio) var(--curva),
              background-color var(--medio) var(--curva),
              box-shadow var(--medio) var(--curva),
              min-height var(--medio) var(--curva);
}

/* El estado «isla»: se estrecha, se redondea y aparece el cristal. */
.cabecera.es-isla { padding-top: 0.9rem; }
.cabecera.es-isla .cabecera__fila {
  max-width: min(1180px, calc(100% - var(--margen)));
  min-height: 62px;
  padding-inline: 1.1rem;
  border-radius: var(--radio-pastilla);
  border-color: var(--borde);
  /* Bastante opaca a propósito: con el cristal muy transparente, el botón
     verde de WhatsApp de la portada se transparentaba por detrás y la isla
     se veía manchada de verde al bajar. */
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--sombra-m);
}
/* Sin `backdrop-filter` (Firefox con la opción desactivada) tiene que ser opaca
   del todo o se lee lo de detrás. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecera.es-isla .cabecera__fila { background: var(--fondo); }
}

/* Ni una entrada del menú puede partirse en dos líneas: dentro de la isla el
   sitio es justo y «Tu sector» se rompía. */
.menu a { white-space: nowrap; }

@media (max-width: 620px) {
  .cabecera.es-isla { padding-top: 0.5rem; }
  .cabecera.es-isla .cabecera__fila { padding-inline: 0.9rem; border-radius: var(--radio-l); }
}

/* ==========================================================================
   25. El selector de sector — entrada, relleno e iconos
   ========================================================================== */

/* Cada sector lleva su color encima, también cuando no está elegido: es el
   que usa el relleno y el que se asoma al pasar el ratón. */
.sector[data-sector="peluqueria"]  { --mio: #c1694f; }
.sector[data-sector="taller"]      { --mio: #3ba0e0; }
.sector[data-sector="restaurante"] { --mio: #d98b3a; }
.sector[data-sector="clinica"]     { --mio: #2fb3a6; }
.sector[data-sector="gimnasio"]    { --mio: #4fc07f; }
.sector[data-sector="oficios"]     { --mio: #e0b23c; }

.sector {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


/* El icono: se levanta y se inclina al pasar por encima. */
.sector__icono {
  transition: background-color var(--rapido), color var(--rapido),
              transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sector:hover .sector__icono { transform: translateY(-4px) rotate(-6deg) scale(1.08); }
.sector.es-activo .sector__icono { transform: translateY(-2px); }

/* Entrada: salen todos apilados en el centro y se colocan en su sitio. El
   JavaScript mide el desplazamiento de cada uno y lo suelta escalonado. */
/* Durante el montón los botones se VEN: antes estaban a `opacity: 0` y por
   eso la pila era invisible y parecía que aparecían de la nada al ordenarse.
   Lo único que se apaga aquí es la transición, para que el montón se coloque
   de golpe y no se vea viajar hasta el centro. */
.sectores__pista.va-a-entrar .sector {
  opacity: 1;
  transition: none;
}
.sectores__pista.entrando .sector {
  opacity: 1;
  transform: none;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.5s ease-out;
  transition-delay: var(--retraso, 0ms);
}

/* ==========================================================================
   26. La lista de «lo de siempre», tachándose sola
   ========================================================================== */

.comparativa__col--mal li,
.comparativa li.se-tacha {
  position: relative;
  transition: color 0.5s var(--curva-suave), opacity 0.5s var(--curva-suave);
}
.comparativa li.se-tacha::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--rojo, #e2564d);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.comparativa li.se-tacha.es-tachada::after { transform: scaleX(1); }
.comparativa li.se-tacha.es-tachada { color: var(--texto-tenue); opacity: 0.62; }

/* ==========================================================================
   27. El estimador: lo elegido entra en la lista
   ========================================================================== */

.ficha__elegido {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.ficha__elegido:empty { display: none; }
.ficha__elegido li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radio-s);
  background: color-mix(in srgb, var(--acento) 10%, transparent);
  font-size: 0.85rem;
  color: var(--texto);
  overflow: hidden;
}
.ficha__elegido li::before {
  content: "+";
  flex: none;
  font-weight: 700;
  color: var(--acento);
}
/* Entra desplegándose, no apareciendo de golpe. */
.ficha__elegido li.entra {
  animation: entraElegido 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes entraElegido {
  from { opacity: 0; transform: translateX(-10px); max-height: 0; padding-block: 0; }
  to { opacity: 1; transform: none; max-height: 4rem; padding-block: 0.4rem; }
}
.ficha__elegido li.sale {
  animation: saleElegido 0.3s ease-in forwards;
}
@keyframes saleElegido {
  from { opacity: 1; max-height: 4rem; }
  to { opacity: 0; transform: translateX(10px); max-height: 0; padding-block: 0; margin-top: -0.35rem; }
}

/* La cifra pega un salto cuando cambia. */
.ficha__cifra.es-nueva { animation: saltoCifra 0.42s var(--curva); }
@keyframes saltoCifra {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   28. Opiniones dispersas
   Tarjetas a distintas alturas, como notas puestas sobre la mesa. Cada una
   entra por su lado cuando le toca.
   ========================================================================== */



.opinion__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.opinion__google {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: 0.75;
}

.opinion__autor { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.3rem; }
.opinion__cara {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--superficie-fuerte);
  color: var(--texto-suave);
  font-family: var(--tipo-titulo);
  font-size: 0.9rem;
  font-weight: 700;
  overflow: hidden;
}
.opinion__cara img { width: 100%; height: 100%; object-fit: cover; }
.opinion__quien { display: grid; gap: 0.05rem; min-width: 0; }
.opinion__quien b { font-size: 0.92rem; }
.opinion__quien span {
  font-family: var(--tipo-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* ==========================================================================
   29. El pie
   ========================================================================== */

.pie { position: relative; overflow: hidden; }

/* La marca de agua gigante detrás de todo. Se recorta al ancho del pie y
   nunca provoca scroll horizontal. */
.pie__marcaAgua {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  font-family: var(--tipo-titulo);
  font-size: clamp(5rem, 17vw, 15rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  color: var(--texto);
  opacity: 0.035;
  pointer-events: none;
  user-select: none;
}

.pie__rejilla { position: relative; }

.pie__nombre {
  display: block;
  font-family: var(--tipo-titulo);
  font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--texto);
}
.pie__punto { color: var(--acento); }

.pie__lema {
  margin: 0.5rem 0 1.1rem;
  font-family: var(--tipo-texto);
  font-style: italic;
  font-size: 1.05rem;
  color: #35d07f;
}

.pie__texto { max-width: 38ch; font-size: 0.9rem; color: var(--texto-suave); }

.pie__col h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.pie__pip {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #35d07f;
}
.pie__pip--dos { background: var(--acento); }
.pie__pip--tres { background: var(--naranja); }

.pie__dato { display: block; padding: 0.24rem 0; font-size: 0.88rem; color: var(--texto-tenue); }

.pie__legales { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.pie__legales a { color: var(--texto-tenue); font-size: 0.83rem; text-decoration: none; }
.pie__legales a:hover { color: var(--texto); }

/* ==========================================================================
   30. Movimiento reducido — lo nuevo también se apaga
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cinta__pista { animation: none; }
  .portada__lienzo { display: none; }
  .cursor { display: none !important; }
  .sectores__pista.va-a-entrar .sector { opacity: 1; transform: none; }
  .opinion { opacity: 1; transform: none; }
  .comparativa li.se-tacha::after { transition: none; }
  .ficha__elegido li.entra, .ficha__elegido li.sale, .ficha__cifra.es-nueva { animation: none; }
  .sector::before, .sector::after { transition: none; }
}

/* ==========================================================================
   31. El agua de los sectores, con oleaje
   --------------------------------------------------------------------------
   Antes esto eran dos pseudoelementos y la «línea de flotación» se quedaba
   pegada abajo del botón: es la raya de color que se veía al elegir un sector.
   Ahora el agua es un elemento de verdad (`.sector__agua`) con dos lóbulos
   girando en su borde superior — el truco de siempre para hacer olas en CSS —
   y la línea de flotación es el borde de arriba de ese elemento, así que sube
   con el agua y no puede quedarse suelta en ningún sitio.
   ========================================================================== */

.sector__agua {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Más alta que el botón: así, cuando termina de subir, la superficie queda
     POR ENCIMA del borde de arriba y el color llega hasta el final. La ola se
     ve mientras sube; al llegar arriba se sale del recorte y lo que queda es
     el botón lleno de color de arriba abajo. */
  height: calc(100% + 26px);
  z-index: -1;
  pointer-events: none;
  /* Su propio recorte, y esto NO es opcional: los lóbulos de la ola son
     circunferencias enormes y sin recortarlas aquí se salían por arriba del
     agua y teñían de color los seis botones a la vez, estuvieran elegidos o
     no. Recortadas contra esta caja, lo único que asoma es su borde: la ola. */
  overflow: hidden;
  transform: translateY(101%);
  /* Al llenar, la curva se pasa un pelín y vuelve: es el chapoteo de cuando
     el agua llega al borde del vaso. */
  transition: transform 0.88s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.sector.es-activo .sector__agua { transform: translateY(0); }

/* El cuerpo del agua, por debajo de la superficie. */
.sector__agua::before {
  content: "";
  position: absolute;
  inset: 16px 0 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mio) 34%, transparent),
    color-mix(in srgb, var(--mio) 15%, transparent));
}

/* La línea de flotación: es el borde de arriba del agua, así que sube con
   ella y no puede quedarse una raya suelta abajo. */
.sector__agua::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--mio);
  opacity: 0.75;
}

/* ── La ola ──────────────────────────────────────────────────────────────
   Dos lóbulos girando a distinta velocidad y en sentido contrario. Al estar
   recortados contra el agua, lo único que se ve de ellos es su borde: la
   superficie. Y como giran desacompasados, no repite nunca el mismo dibujo. */
.sector__agua i {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 260%;
  aspect-ratio: 1;
  border-radius: 41% 47% 43% 49%;
  background: color-mix(in srgb, var(--mio) 26%, transparent);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: oleaje 9s linear infinite;
}
.sector__agua i:nth-child(2) {
  border-radius: 48% 42% 49% 44%;
  background: color-mix(in srgb, var(--mio) 36%, transparent);
  animation-duration: 13s;
  animation-direction: reverse;
}

@keyframes oleaje {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Quieto mientras no esté elegido: seis bucles girando a la vez sería tirar
   batería para nada. */
.sector:not(.es-activo) .sector__agua i { animation-play-state: paused; }

/* ── Mientras se está llenando ───────────────────────────────────────────
   El chorro entra fuerte: la ola corre mucho más deprisa y se agita, y salen
   burbujas. Cuando el vaso está lleno vuelve a su balanceo tranquilo. La
   clase la pone y la quita el JavaScript. */
.sector.esta-llenando .sector__agua i {
  animation-duration: 1.6s;
  animation-timing-function: linear;
}
.sector.esta-llenando .sector__agua i:nth-child(2) { animation-duration: 2.3s; }

.sector.esta-llenando .sector__agua::before { animation: chapoteo 0.95s var(--curva); }
@keyframes chapoteo {
  0% { transform: translateY(6px) scaleY(1.06); }
  55% { transform: translateY(-3px) scaleY(0.98); }
  100% { transform: none; }
}

/* Las burbujas. Solo existen mientras entra el agua. */
.sector__agua u {
  position: absolute;
  bottom: -14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mio) 55%, #fff);
  opacity: 0;
}
.sector__agua u:nth-of-type(1) { left: 26%; width: 5px; height: 5px; }
.sector__agua u:nth-of-type(2) { left: 52%; }
.sector__agua u:nth-of-type(3) { left: 73%; width: 4px; height: 4px; }

.sector.esta-llenando .sector__agua u { animation: burbuja 0.95s ease-out; }
.sector.esta-llenando .sector__agua u:nth-of-type(2) { animation-delay: 0.14s; }
.sector.esta-llenando .sector__agua u:nth-of-type(3) { animation-delay: 0.26s; }

@keyframes burbuja {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  18% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-105px) scale(1.15); }
}

/* ==========================================================================
   32. Cada icono, su gesto
   Seis animaciones distintas, una por oficio. Se disparan al pasar el ratón
   y al elegir el sector.
   ========================================================================== */

.sector__icono svg { transform-origin: 50% 50%; }

.sector[data-sector="peluqueria"]:hover .sector__icono svg,
.sector[data-sector="peluqueria"].es-activo .sector__icono svg { animation: gestoTijeras 0.7s var(--curva); }
.sector[data-sector="taller"]:hover .sector__icono svg,
.sector[data-sector="taller"].es-activo .sector__icono svg { animation: gestoCoche 0.75s var(--curva); }
.sector[data-sector="restaurante"]:hover .sector__icono svg,
.sector[data-sector="restaurante"].es-activo .sector__icono svg { animation: gestoCubiertos 0.8s var(--curva); }
.sector[data-sector="clinica"]:hover .sector__icono svg,
.sector[data-sector="clinica"].es-activo .sector__icono svg { animation: gestoLatido 0.9s var(--curva-suave); }
.sector[data-sector="gimnasio"]:hover .sector__icono svg,
.sector[data-sector="gimnasio"].es-activo .sector__icono svg { animation: gestoPesa 0.85s var(--curva); }
.sector[data-sector="oficios"]:hover .sector__icono svg,
.sector[data-sector="oficios"].es-activo .sector__icono svg { animation: gestoLlave 0.85s var(--curva); }

/* Tijeras: dos cortes secos. */
@keyframes gestoTijeras {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(6deg); }
  60% { transform: rotate(-9deg); }
  80% { transform: rotate(3deg); }
}
/* Coche: bota sobre la suspensión y se aplasta al caer. */
@keyframes gestoCoche {
  0%, 100% { transform: translateY(0) scaleY(1); }
  25% { transform: translateY(-5px) scaleY(1.04); }
  50% { transform: translateY(0) scaleY(0.9); }
  72% { transform: translateY(-2px) scaleY(1.02); }
}
/* Cubiertos: el brindis, un vaivén de lado a lado. */
@keyframes gestoCubiertos {
  0%, 100% { transform: rotate(0deg); }
  22% { transform: rotate(11deg); }
  50% { transform: rotate(-9deg); }
  75% { transform: rotate(5deg); }
}
/* Clínica: pulso doble, como un latido de verdad. */
@keyframes gestoLatido {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.2); }
  28% { transform: scale(1); }
  42% { transform: scale(1.16); }
  60% { transform: scale(1); }
}
/* Gimnasio: levanta la pesa dos veces. */
@keyframes gestoPesa {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-6px) rotate(-4deg); }
  40% { transform: translateY(0) rotate(0deg); }
  60% { transform: translateY(-6px) rotate(4deg); }
  80% { transform: translateY(0) rotate(0deg); }
}
/* Llave inglesa: aprieta y afloja. */
@keyframes gestoLlave {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-32deg); }
  55% { transform: rotate(-18deg); }
  80% { transform: rotate(-38deg); }
}

/* El latido genérico de antes se va: cada uno tiene ya el suyo. */
.sector:hover .sector__icono svg { animation-name: inherit; }

/* ==========================================================================
   33. El WhatsApp de la cabecera
   ========================================================================== */

.cabecera__wa {
  position: relative;
  overflow: hidden;
  transition: background-color 0.32s var(--curva), color 0.32s var(--curva),
              border-color 0.32s var(--curva), transform 0.32s var(--curva),
              box-shadow 0.32s var(--curva);
}
/* Un barrido de luz que cruza el botón al pasar por encima. */
.cabecera__wa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform 0.62s var(--curva);
}
.cabecera__wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(37, 211, 102, 0.85);
}
.cabecera__wa:hover::after { transform: translateX(130%); }
.cabecera__wa:active { transform: translateY(0) scale(0.97); }
.cabecera__wa svg { transition: transform 0.32s var(--curva); }
.cabecera__wa:hover svg { transform: rotate(-10deg) scale(1.12); }

/* ==========================================================================
   34. El lienzo de constelaciones, ahora también en el pie
   ========================================================================== */

.lienzo-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.portada .lienzo-fondo { opacity: 0.9; }
.pie .lienzo-fondo { opacity: 0.55; }
[data-tema="claro"] .portada .lienzo-fondo { opacity: 0.55; }
[data-tema="claro"] .pie .lienzo-fondo { opacity: 0.4; }

/* Todo el contenido del pie tiene que quedar por encima del lienzo. */
.pie__rejilla, .pie__base { position: relative; z-index: 1; }
.pie__marcaAgua { z-index: 0; }

/* ==========================================================================
   35. Las reseñas, como cartas sobre la mesa
   Cada tarjeta se coloca en una «pose»: una inclinación y un desplazamiento
   propios, y su altura en la pila. Las poses las reparte el JavaScript, así
   que da igual que haya dos reseñas o las ocho.
   ========================================================================== */

.opiniones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
  align-items: start;
}
@media (min-width: 900px) {
  .opiniones { grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.2rem; }
}

.opinion {
  --giro: 0deg;
  --sube: 0px;
  --lado: 0px;
  position: relative;
  z-index: var(--capa, 1);
  margin: 0;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  /* Opaca de verdad: si se solapan y son translúcidas, se lee lo de debajo. */
  background: var(--fondo-elev);
  box-shadow: var(--sombra-m);
  transform: translate(var(--lado), calc(var(--sube) + 26px)) rotate(var(--giro));
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s ease-out,
              box-shadow 0.3s var(--curva),
              border-color 0.3s var(--curva);
  transition-delay: var(--retraso, 0ms);
}
.opinion.es-dentro {
  transform: translate(var(--lado), var(--sube)) rotate(var(--giro));
  opacity: 1;
}

/* Al pasar por encima se endereza y sube al frente: es la carta que coges. */
.opinion:hover {
  z-index: 20;
  transform: translate(var(--lado), calc(var(--sube) - 6px)) rotate(0deg) scale(1.02);
  box-shadow: var(--sombra-l);
  border-color: var(--borde-fuerte);
  transition-delay: 0ms;
}

/* En pantalla estrecha las cartas se enderezan: inclinadas y solapadas en un
   móvil se leen fatal. */
@media (max-width: 899px) {
  .opinion { --giro: 0deg !important; --lado: 0px !important; --sube: 0px !important; }
}

/* ==========================================================================
   36. Movimiento reducido — los retoques nuevos también
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sector__agua i { animation: none !important; }
  .sector__icono svg { animation: none !important; }
  .cabecera__wa::after { display: none; }
  .lienzo-fondo { display: none; }
  .opinion { transform: none !important; opacity: 1; }
}

/* ==========================================================================
   v9 — Rediseño
   Portada en dos columnas con una maqueta (web + conversación de WhatsApp),
   más aire entre secciones, tarjetas con relieve y un aviso de cookies que ya
   no tapa los botones. Todo es una capa encima: borrar este bloque devuelve
   la v8.
   ========================================================================== */

/* — Portada — */
.portada__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}
.portada__cuerpo { max-width: none; }
.portada__grid .portada__botones { margin-bottom: 0; }
.portada__titulo { font-size: clamp(2.1rem, 1.1rem + 3vw, 3.3rem); }
.portada { padding-top: calc(var(--alto-cabecera) + clamp(1.5rem, 3vw, 2.5rem)); }
.portada__entrada { font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem); color: var(--texto); opacity: 0.82; }
.portada__prueba li::before { content: "✓"; display: grid; place-items: center; font-size: 0.62rem; font-weight: 800; color: #fff; background: var(--acento); box-shadow: none; }
.portada__sectores { max-width: none; }

.portada__visual { position: relative; padding: 1rem 0 4.2rem 0; }

.navegador {
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-m);
  background: var(--fondo-elev);
  box-shadow: var(--sombra-l);
  overflow: hidden;
  transform: rotate(1.6deg);
}
.navegador__barra { display: flex; align-items: center; gap: 6px; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--borde); background: var(--superficie); }
.navegador__barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--borde-fuerte); }
.navegador__barra i:first-child { background: #ff6b5e; }
.navegador__barra i:nth-child(2) { background: #ffbd3d; }
.navegador__barra i:nth-child(3) { background: #35d07f; }
.navegador__barra span { margin-left: 0.7rem; padding: 0.15rem 0.9rem; border-radius: var(--radio-pastilla); background: var(--fondo); font-size: 0.74rem; color: var(--texto-tenue); }
.navegador__pagina { display: grid; gap: 1rem; padding: 1.1rem 1.2rem 1.4rem; }
.navegador__menu { display: flex; align-items: center; gap: 0.7rem; }
.navegador__menu b { width: 70px; height: 14px; border-radius: 4px; background: var(--acento); margin-right: auto; }
.navegador__menu span { width: 34px; height: 7px; border-radius: 4px; background: var(--borde-fuerte); }
.navegador__hero { display: grid; gap: 0.5rem; padding: 1.6rem 1.3rem; border-radius: var(--radio-s); background: linear-gradient(135deg, color-mix(in srgb, var(--sec-a) 28%, var(--fondo-elev)), color-mix(in srgb, var(--azul-500) 18%, var(--fondo-elev))); transition: background var(--lento) var(--curva); }
.navegador__hero u { display: block; height: 14px; width: 82%; border-radius: 8px; background: var(--texto); opacity: 0.85; text-decoration: none; }
.navegador__hero u.corto { width: 52%; }
.navegador__hero em { display: block; margin-top: 0.5rem; width: 96px; height: 28px; border-radius: var(--radio-pastilla); background: var(--naranja); }
.navegador__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.navegador__fotos span { aspect-ratio: 4 / 3; border-radius: 8px; background: var(--superficie-fuerte); border: 1px solid var(--borde); }

.pv-chat {
  position: absolute;
  left: -1.8rem;
  bottom: 0;
  width: min(21rem, 86%);
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-m);
  background: var(--cristal);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sombra-m);
}
.pv-chat p { margin: 0; padding: 0.55rem 0.8rem; border-radius: 16px; font-size: 0.86rem; line-height: 1.4; max-width: 90%; }
.pv-chat__yo { justify-self: end; background: #d9fdd3; color: #0b2a1a; border-bottom-right-radius: 4px !important; }
.pv-chat__nos { background: var(--fondo-elev); color: var(--texto); border: 1px solid var(--borde); border-bottom-left-radius: 4px !important; }

.pv-chip {
  position: absolute;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
  background: var(--fondo-elev);
  box-shadow: var(--sombra-m);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto);
}
.pv-chip--a { top: -1.1rem; left: 1.6rem; z-index: 2; }
.pv-chip--b { right: -0.6rem; bottom: 2.2rem; background: var(--naranja); border-color: transparent; color: #22160a; }
@media (prefers-reduced-motion: no-preference) {
  .pv-chip--a { animation: flota 6s ease-in-out infinite; }
  .pv-chip--b { animation: flota 7s ease-in-out -2s infinite; }
}
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (max-width: 960px) {
  .portada__grid { grid-template-columns: 1fr; }
  .portada__visual { max-width: 30rem; margin: 0 auto; width: 100%; padding-bottom: 5.5rem; }
  .pv-chat { left: 0; }
  .pv-chip--b { right: 0; }
}
@media (max-width: 520px) {
  .portada__visual { display: none; }   /* en móvil manda el texto y el botón */
}

/* — Ritmo, tarjetas y titulares — */
.seccion { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.titular h2 { letter-spacing: -0.035em; }
.titular__ojo { font-weight: 700; }
.btn--principal, .btn--whatsapp { font-weight: 700; }
.btn--grande { box-shadow: var(--sombra-m); }
[data-tema="claro"] .seccion--alterna { background: linear-gradient(180deg, #f2f8fd, #eaf3fb); }

/* — Aviso de cookies: franja baja y estrecha, que no tape botones — */
.cookies { left: 1rem; right: auto; bottom: 1rem; max-width: 24rem; padding: 0.75rem 0.9rem; gap: 0.6rem; display: flex; align-items: center; flex-wrap: wrap; }
@media (max-width: 520px) {
  .cookies { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; max-width: none; }
}

/* — Promesas — */
.promesas { padding: clamp(2.5rem, 5vw, 3.8rem) 0; border-block: 1px solid var(--borde); background: var(--fondo); }
.promesas__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.6rem 2rem; }
.promesa { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; row-gap: 0.15rem; align-items: start; }
.promesa svg { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 16px; background: var(--superficie-fuerte); color: var(--acento); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background var(--medio), color var(--medio); }
.promesa:hover svg { background: var(--naranja); color: #22160a; }
.promesa b { font-family: var(--tipo-titulo); font-size: 1.05rem; line-height: 1.3; }
.promesa span { font-size: 0.9rem; color: var(--texto-suave); line-height: 1.5; }

/* — Tarifas de partida — */
.tarifas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 0.9rem; }
.tarifa { position: relative; display: grid; gap: 0.25rem; padding: 1.5rem 1.4rem 1.3rem; border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--fondo-elev); color: var(--texto); text-decoration: none; box-shadow: var(--sombra-s); transition: transform var(--medio) var(--curva), border-color var(--medio), box-shadow var(--medio); }
.tarifa:hover { transform: translateY(-5px); border-color: var(--acento); box-shadow: var(--sombra-m); color: var(--texto); }
.tarifa__nombre { font-weight: 700; font-size: 0.98rem; }
.tarifa__precio { font-family: var(--tipo-titulo); font-size: 2.3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.tarifa small { color: var(--texto-suave); font-size: 0.85rem; line-height: 1.45; }
.tarifa--pop { border-color: var(--naranja); box-shadow: 0 18px 44px -20px var(--naranja); }
.tarifa--pop em { position: absolute; top: -0.7rem; right: 1.1rem; padding: 0.15rem 0.7rem; border-radius: var(--radio-pastilla); background: var(--naranja); color: #22160a; font-style: normal; font-size: 0.72rem; font-weight: 800; }
.tarifas__nota { margin: 0 0 clamp(2rem, 4vw, 3rem); font-size: 0.9rem; color: var(--texto-suave); }

/* — Banda final — */
.banda-final { padding: clamp(3rem, 6vw, 4.5rem) 0; background: linear-gradient(120deg, var(--azul-700), var(--azul-600) 70%, var(--azul-500)); color: #fff; position: relative; overflow: hidden; }
.banda-final::after { content: ""; position: absolute; right: -8%; top: -60%; width: 460px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(240,148,0,0.45), transparent 68%); pointer-events: none; }
.banda-final__cuerpo { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 3rem; }
.banda-final h2 { margin-bottom: 0.4rem; font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); color: #fff; }
.banda-final p { max-width: 46ch; margin: 0; color: rgba(255,255,255,0.86); }
.banda-final__botones { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.banda-final .btn--fantasma { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }
.banda-final .btn--fantasma:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* — Más relieve en tarjetas de servicio y pasos — */
.servicio:hover { transform: translateY(-4px); }
.contacto .tarjeta-contacto, .contacto a[class*="dato"] { transition: transform var(--medio) var(--curva); }

.banda-final__cuerpo > div:first-child { flex: 1 1 26rem; }
.banda-final__botones { flex: none; }

/* ==========================================================================
   v9 — Animaciones
   Todo con transform y opacity (nada que fuerce layout) y todo apagado con
   «movimiento reducido».
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* Portada: entra por piezas, en cascada, en vez de aparecer de golpe */
  @keyframes entra { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes entraLado { from { opacity: 0; transform: translateX(34px) rotate(4deg); } to { opacity: 1; transform: rotate(0); } }
  @keyframes entraBurbuja { from { opacity: 0; transform: translateY(12px) scale(0.92); } to { opacity: 1; transform: none; } }

  .portada__cuerpo > * { animation: entra 0.8s var(--curva) both; }
  .portada__cuerpo > :nth-child(1) { animation-delay: 0.05s; }
  .portada__cuerpo > :nth-child(2) { animation-delay: 0.14s; }
  .portada__cuerpo > :nth-child(3) { animation-delay: 0.24s; }
  .portada__cuerpo > :nth-child(4) { animation-delay: 0.34s; }
  .portada__cuerpo > :nth-child(5) { animation-delay: 0.44s; }
  .portada__visual .navegador { animation: entraLado 1s 0.25s var(--curva) both; }
  .pv-chat { animation: entra 0.7s 0.8s var(--curva) both; }
  .pv-chat p { animation: entraBurbuja 0.5s var(--curva) both; }
  .pv-chat p:nth-child(1) { animation-delay: 1.1s; }
  .pv-chat p:nth-child(2) { animation-delay: 1.9s; }
  .pv-chat p:nth-child(3) { animation-delay: 2.7s; }

  /* El remate del titular respira: el degradado se desplaza despacio */
  .portada__remate { background-size: 200% 100%; animation: degradado 7s ease-in-out infinite alternate; }
  @keyframes degradado { to { background-position: 100% 0; } }

  /* Revelado al hacer scroll: sube, se enfoca y entra en cascada */
  [data-revelar] { filter: blur(5px); transition: opacity 0.8s var(--curva), transform 0.8s var(--curva), filter 0.8s var(--curva); }
  [data-revelar].es-visible { filter: none; }
  .rejilla-servicios > [data-revelar]:nth-child(2), .tarifas > :nth-child(2) { --retraso: 90ms; }
  .rejilla-servicios > [data-revelar]:nth-child(3), .tarifas > :nth-child(3) { --retraso: 180ms; }
  .rejilla-servicios > [data-revelar]:nth-child(4), .tarifas > :nth-child(4) { --retraso: 270ms; }
  .rejilla-servicios > [data-revelar]:nth-child(5) { --retraso: 360ms; }
  .rejilla-servicios > [data-revelar]:nth-child(6) { --retraso: 450ms; }

  /* Botones: respuesta al pulsar y brillo en el principal */
  .btn { transition: transform 0.25s var(--curva), box-shadow 0.25s var(--curva), background 0.25s, border-color 0.25s, color 0.25s; }
  .btn:active { transform: translateY(1px) scale(0.97); }
  .btn svg:last-child { transition: transform 0.3s var(--curva); }
  .btn:hover svg:last-child { transform: translateX(4px); }
  .btn--whatsapp { animation: pulsoWa 3.2s 2s ease-out infinite; }
  @keyframes pulsoWa { 0% { box-shadow: 0 10px 26px -12px rgba(37,211,102,0.9), 0 0 0 0 rgba(37,211,102,0.45); } 70%, 100% { box-shadow: 0 10px 26px -12px rgba(37,211,102,0.9), 0 0 0 16px rgba(37,211,102,0); } }

  /* Menú: el subrayado se dibuja de izquierda a derecha */
  .menu a { background: linear-gradient(var(--naranja), var(--naranja)) no-repeat 0 calc(100% - 4px) / 0 2px; transition: background-size 0.35s var(--curva), color 0.2s; }
  .menu a:hover { background-size: 100% 2px; }

  /* Tarjetas de precio y promesas */
  .tarifa__precio { transition: transform 0.4s var(--curva); transform-origin: left; }
  .tarifa:hover .tarifa__precio { transform: scale(1.07); }
  .promesa svg { transition: transform 0.4s var(--curva), background 0.3s, color 0.3s; }
  .promesa:hover svg { transform: translateY(-3px) rotate(-8deg); }

  /* Asistente: el lanzador flota y el icono late; el panel abre con rebote suave */
  .chat-lanzador__icono { animation: latidoChat 2.8s ease-in-out infinite; }
  @keyframes latidoChat { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.18); } 80% { transform: scale(1); } 90% { transform: scale(1.1); } }
  .chat.es-visible { transition: opacity 260ms var(--curva), transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1); }
  .chat__msg { animation: entraBurbuja 0.4s var(--curva) both; }
}

/* Sin movimiento: nada se esconde esperando una animación */
@media (prefers-reduced-motion: reduce) {
  [data-revelar] { filter: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   v9 — Revisión (auditoría escritorio + móvil)
   ========================================================================== */

/* El nombre del pie era del color del texto: en tema claro, azul marino sobre
   el fondo marino del pie, o sea, invisible. */
.pie__nombre { color: #fff; }

/* Opiniones: mientras no haya reseñas reales no ocupamos una pantalla entera
   con tres huecos. Se quedan dos, compactos, y la sección respira menos. */
#opiniones { padding-block: clamp(3rem, 6vw, 4.5rem); }
#opiniones .titular { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
#opiniones .titular h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
.opiniones[data-estado="huecos"] { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.opiniones[data-estado="huecos"] .opinion--vacia:nth-child(2) { display: none; }

/* Zonas táctiles de al menos 40 px */
.dispositivos__btn { min-height: 40px; }
.visor__abrir { min-width: 40px; min-height: 40px; }

@media (max-width: 700px) {
  .seccion { padding: clamp(3.2rem, 11vw, 4rem) 0; }

  /* Tres botones flotantes eran demasiados: se queda WhatsApp (izquierda) y el
     asistente (derecha). «Volver arriba» sobra en un móvil. */
  .arriba { display: none; }
  .portada__flecha { display: none; }
  .flotante-wa__globo { display: none; }

  /* Las cuatro tarifas, en 2×2 y no en una columna de 600 px */
  .tarifas { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .tarifa { padding: 1.1rem 0.95rem 1rem; }
  .tarifa__precio { font-size: 1.65rem; }
  .tarifa small { font-size: 0.78rem; }
  .tarifa--pop em { right: 0.6rem; font-size: 0.66rem; }

  /* Con un solo dispositivo disponible, el selector sobra */
  .dispositivos { display: none; }
}

/* ==========================================================================
   v9 — Oficio
   Sustituye la estética de «plantilla tecnológica» (degradados en el texto,
   partículas, cristal, brillos, cuadraditos con icono, etiquetas en mono) por
   la de un estudio que trabaja con las manos: papel, tinta, serifa, esquinas
   más rectas, sombras casi nulas y un único acento naranja.
   ========================================================================== */

:root {
  --tipo-titulo: "Outfit", "Instrument Sans", system-ui, sans-serif;
  --tipo-mono: var(--tipo-texto);
  --tipo-texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio-s: 8px;
  --radio-m: 16px;
  --radio-l: 26px;
  --radio-pastilla: 999px;
}

[data-tema="claro"] {
  --fondo: #f7f2e8;
  --fondo-alt: #eee6d5;
  --fondo-elev: #fffcf5;
  --superficie: rgba(22, 36, 58, 0.035);
  --superficie-fuerte: rgba(22, 36, 58, 0.07);
  --borde: rgba(22, 36, 58, 0.16);
  --borde-fuerte: rgba(22, 36, 58, 0.32);
  --texto: #16243a;
  --texto-suave: #46536a;
  --texto-tenue: #6a7385;
  --sombra-s: 0 1px 0 rgba(22, 36, 58, 0.06);
  --sombra-m: 0 10px 24px -18px rgba(22, 36, 58, 0.45);
  --sombra-l: 0 22px 40px -26px rgba(22, 36, 58, 0.5);
  --cristal: #fffcf5;
}
[data-tema="oscuro"], :root:not([data-tema]) {
  --sombra-m: 0 10px 24px -16px rgba(0, 0, 0, 0.6);
  --sombra-l: 0 22px 40px -22px rgba(0, 0, 0, 0.7);
}
[data-tema="claro"] .seccion--alterna { background: var(--fondo-alt); }

/* — Tipografía — */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
h1 { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
.portada__titulo { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.1rem); line-height: 1.04; letter-spacing: -0.025em; }
.tarifa__precio, .presupuesto dd, .presupuesto__total b { font-family: var(--tipo-titulo); letter-spacing: -0.02em; }

/* Se acabó el texto con degradado: una marca de rotulador debajo y ya está */
.portada__remate {
  display: inline;
  color: inherit;
  background: linear-gradient(transparent 64%, rgba(240, 148, 0, 0.42) 64% 90%, transparent 90%);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: none;
}
[data-tema="claro"] .portada__remate { background: linear-gradient(transparent 64%, rgba(240, 148, 0, 0.42) 64% 90%, transparent 90%); }
[data-tema="oscuro"] .portada__remate { background: linear-gradient(transparent 64%, rgba(240, 148, 0, 0.5) 64% 90%, transparent 90%); }

/* Etiquetas de sección: una frase en cursiva, no un rótulo de terminal */
.titular__ojo {
  font-family: var(--tipo-titulo);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--naranja-oscuro);
}
.titular__ojo::before { display: none; }
[data-tema="oscuro"] .titular__ojo { color: var(--naranja-claro); }

/* — Portada: fuera cuadrícula, halo y partículas — */

/* — Presupuesto de ejemplo (sustituye a la maqueta de web + chat) — */
.portada__visual { padding: 1.5rem 0.5rem 1rem; }
.presupuesto {
  position: relative;
  margin: 0;
  padding: 2.1rem 1.9rem 1.7rem;
  max-width: 25rem;
  margin-inline: auto;
  background:
    repeating-linear-gradient(transparent 0 31px, rgba(22, 36, 58, 0.07) 31px 32px),
    #fffdf6;
  border: 1px solid rgba(22, 36, 58, 0.18);
  border-radius: 16px;
  color: #16243a;
  box-shadow: 0 1px 0 rgba(22, 36, 58, 0.08), 0 26px 38px -28px rgba(22, 36, 58, 0.55);
  transform: rotate(1.8deg);
}
.presupuesto__cinta {
  position: absolute;
  top: -14px; left: 50%;
  width: 96px; height: 28px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(240, 190, 90, 0.62);
  border-inline: 1px dashed rgba(0, 0, 0, 0.12);
}
.presupuesto figcaption { margin-bottom: 1rem; font-family: var(--tipo-titulo); font-style: italic; font-size: 1.05rem; color: #46536a; }
.presupuesto dl { margin: 0; display: grid; gap: 0.2rem; }
.presupuesto dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dotted rgba(22, 36, 58, 0.4); }
.presupuesto dt { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.presupuesto dt small { display: block; font-weight: 400; font-size: 0.78rem; color: #5a6578; }
.presupuesto dd { margin: 0; font-size: 1.05rem; font-weight: 600; white-space: nowrap; }
.presupuesto__total { display: flex; justify-content: space-between; align-items: baseline; margin: 1.1rem 0 0.2rem; }
.presupuesto__total span { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: #46536a; }
.presupuesto__total b { font-size: 2.2rem; line-height: 1; }
.presupuesto__total i { font-style: normal; font-size: 0.95rem; font-weight: 600; font-family: var(--tipo-texto); color: #46536a; }
.presupuesto__nota { margin: 0.5rem 0 0; font-family: var(--tipo-titulo); font-style: italic; font-size: 1rem; color: #8a4a00; transform: rotate(-1.5deg); }
.presupuesto__sello {
  position: absolute;
  right: -0.9rem; bottom: 1.1rem;
  padding: 0.35rem 0.8rem;
  border: 2.5px solid #c0392b;
  border-radius: 4px;
  color: #c0392b;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-11deg);
  opacity: 0.88;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: no-preference) {
  .presupuesto { animation: papel 0.9s 0.3s var(--curva) both; }
  .presupuesto__sello { animation: sello 0.5s 1.2s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
  @keyframes papel { from { opacity: 0; transform: translateY(24px) rotate(4deg); } to { opacity: 1; transform: rotate(1.8deg); } }
  @keyframes sello { from { opacity: 0; transform: rotate(-11deg) scale(1.9); } to { opacity: 0.88; transform: rotate(-11deg) scale(1); } }
}
@media (max-width: 960px) { .presupuesto { transform: rotate(0.8deg); } }

/* — Botones: planos, sin brillo ni barrido — */
.btn { letter-spacing: 0; }
.btn--principal { --btn-fondo: var(--azul-600); box-shadow: none; }
.btn--principal::after { display: none; }
.btn--principal:hover { background: var(--azul-700); box-shadow: none; }
.btn--whatsapp { box-shadow: none; animation: none !important; }
.btn--grande { box-shadow: none; }
.btn--fantasma { background: transparent; }

/* — Promesas — */
.promesas { padding: clamp(2.5rem, 5vw, 3.8rem) 0; border-block: 1px solid var(--borde); background: var(--fondo); }
.promesas__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.6rem 2rem; }
.promesa { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; row-gap: 0.15rem; align-items: start; }
.promesa svg { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 16px; background: var(--superficie-fuerte); color: var(--acento); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background var(--medio), color var(--medio); }
.promesa:hover svg { background: var(--naranja); color: #22160a; }
.promesa b { font-family: var(--tipo-titulo); font-size: 1.05rem; line-height: 1.3; }
.promesa span { font-size: 0.9rem; color: var(--texto-suave); line-height: 1.5; }

/* — Tarifas de partida — */
.tarifas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 0.9rem; }
.tarifa { position: relative; display: grid; gap: 0.25rem; padding: 1.5rem 1.4rem 1.3rem; border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--fondo-elev); color: var(--texto); text-decoration: none; box-shadow: var(--sombra-s); transition: transform var(--medio) var(--curva), border-color var(--medio), box-shadow var(--medio); }
.tarifa:hover { transform: translateY(-5px); border-color: var(--acento); box-shadow: var(--sombra-m); color: var(--texto); }
.tarifa__nombre { font-weight: 700; font-size: 0.98rem; }
.tarifa__precio { font-family: var(--tipo-titulo); font-size: 2.3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.tarifa small { color: var(--texto-suave); font-size: 0.85rem; line-height: 1.45; }
.tarifa--pop { border-color: var(--naranja); box-shadow: 0 18px 44px -20px var(--naranja); }
.tarifa--pop em { position: absolute; top: -0.7rem; right: 1.1rem; padding: 0.15rem 0.7rem; border-radius: var(--radio-pastilla); background: var(--naranja); color: #22160a; font-style: normal; font-size: 0.72rem; font-weight: 800; }
.tarifas__nota { margin: 0 0 clamp(2rem, 4vw, 3rem); font-size: 0.9rem; color: var(--texto-suave); }

/* — Banda final — */
.banda-final { padding: clamp(3rem, 6vw, 4.5rem) 0; background: linear-gradient(120deg, var(--azul-700), var(--azul-600) 70%, var(--azul-500)); color: #fff; position: relative; overflow: hidden; }
.banda-final::after { content: ""; position: absolute; right: -8%; top: -60%; width: 460px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(240,148,0,0.45), transparent 68%); pointer-events: none; }
.banda-final__cuerpo { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 3rem; }
.banda-final h2 { margin-bottom: 0.4rem; font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); color: #fff; }
.banda-final p { max-width: 46ch; margin: 0; color: rgba(255,255,255,0.86); }
.banda-final__botones { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.banda-final .btn--fantasma { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }
.banda-final .btn--fantasma:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* — Más relieve en tarjetas de servicio y pasos — */
.servicio:hover { transform: translateY(-4px); }
.contacto .tarjeta-contacto, .contacto a[class*="dato"] { transition: transform var(--medio) var(--curva); }

.banda-final__cuerpo > div:first-child { flex: 1 1 26rem; }
.banda-final__botones { flex: none; }

/* ==========================================================================
   v9 — Animaciones
   Todo con transform y opacity (nada que fuerce layout) y todo apagado con
   «movimiento reducido».
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* Portada: entra por piezas, en cascada, en vez de aparecer de golpe */
  @keyframes entra { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes entraLado { from { opacity: 0; transform: translateX(34px) rotate(4deg); } to { opacity: 1; transform: rotate(0); } }
  @keyframes entraBurbuja { from { opacity: 0; transform: translateY(12px) scale(0.92); } to { opacity: 1; transform: none; } }

  .portada__cuerpo > * { animation: entra 0.8s var(--curva) both; }
  .portada__cuerpo > :nth-child(1) { animation-delay: 0.05s; }
  .portada__cuerpo > :nth-child(2) { animation-delay: 0.14s; }
  .portada__cuerpo > :nth-child(3) { animation-delay: 0.24s; }
  .portada__cuerpo > :nth-child(4) { animation-delay: 0.34s; }
  .portada__cuerpo > :nth-child(5) { animation-delay: 0.44s; }
  .portada__visual .navegador { animation: entraLado 1s 0.25s var(--curva) both; }
  .pv-chat { animation: entra 0.7s 0.8s var(--curva) both; }
  .pv-chat p { animation: entraBurbuja 0.5s var(--curva) both; }
  .pv-chat p:nth-child(1) { animation-delay: 1.1s; }
  .pv-chat p:nth-child(2) { animation-delay: 1.9s; }
  .pv-chat p:nth-child(3) { animation-delay: 2.7s; }

  /* El remate del titular respira: el degradado se desplaza despacio */
  .portada__remate { background-size: 200% 100%; animation: degradado 7s ease-in-out infinite alternate; }
  @keyframes degradado { to { background-position: 100% 0; } }

  /* Revelado al hacer scroll: sube, se enfoca y entra en cascada */
  [data-revelar] { filter: blur(5px); transition: opacity 0.8s var(--curva), transform 0.8s var(--curva), filter 0.8s var(--curva); }
  [data-revelar].es-visible { filter: none; }
  .rejilla-servicios > [data-revelar]:nth-child(2), .tarifas > :nth-child(2) { --retraso: 90ms; }
  .rejilla-servicios > [data-revelar]:nth-child(3), .tarifas > :nth-child(3) { --retraso: 180ms; }
  .rejilla-servicios > [data-revelar]:nth-child(4), .tarifas > :nth-child(4) { --retraso: 270ms; }
  .rejilla-servicios > [data-revelar]:nth-child(5) { --retraso: 360ms; }
  .rejilla-servicios > [data-revelar]:nth-child(6) { --retraso: 450ms; }

  /* Botones: respuesta al pulsar y brillo en el principal */
  .btn { transition: transform 0.25s var(--curva), box-shadow 0.25s var(--curva), background 0.25s, border-color 0.25s, color 0.25s; }
  .btn:active { transform: translateY(1px) scale(0.97); }
  .btn svg:last-child { transition: transform 0.3s var(--curva); }
  .btn:hover svg:last-child { transform: translateX(4px); }
  .btn--whatsapp { animation: pulsoWa 3.2s 2s ease-out infinite; }
  @keyframes pulsoWa { 0% { box-shadow: 0 10px 26px -12px rgba(37,211,102,0.9), 0 0 0 0 rgba(37,211,102,0.45); } 70%, 100% { box-shadow: 0 10px 26px -12px rgba(37,211,102,0.9), 0 0 0 16px rgba(37,211,102,0); } }

  /* Menú: el subrayado se dibuja de izquierda a derecha */
  .menu a { background: linear-gradient(var(--naranja), var(--naranja)) no-repeat 0 calc(100% - 4px) / 0 2px; transition: background-size 0.35s var(--curva), color 0.2s; }
  .menu a:hover { background-size: 100% 2px; }

  /* Tarjetas de precio y promesas */
  .tarifa__precio { transition: transform 0.4s var(--curva); transform-origin: left; }
  .tarifa:hover .tarifa__precio { transform: scale(1.07); }
  .promesa svg { transition: transform 0.4s var(--curva), background 0.3s, color 0.3s; }
  .promesa:hover svg { transform: translateY(-3px) rotate(-8deg); }

  /* Asistente: el lanzador flota y el icono late; el panel abre con rebote suave */
  .chat-lanzador__icono { animation: latidoChat 2.8s ease-in-out infinite; }
  @keyframes latidoChat { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.18); } 80% { transform: scale(1); } 90% { transform: scale(1.1); } }
  .chat.es-visible { transition: opacity 260ms var(--curva), transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1); }
  .chat__msg { animation: entraBurbuja 0.4s var(--curva) both; }
}

/* Sin movimiento: nada se esconde esperando una animación */
@media (prefers-reduced-motion: reduce) {
  [data-revelar] { filter: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   v9 — Revisión (auditoría escritorio + móvil)
   ========================================================================== */

/* El nombre del pie era del color del texto: en tema claro, azul marino sobre
   el fondo marino del pie, o sea, invisible. */
.pie__nombre { color: #fff; }

/* Opiniones: mientras no haya reseñas reales no ocupamos una pantalla entera
   con tres huecos. Se quedan dos, compactos, y la sección respira menos. */
#opiniones { padding-block: clamp(3rem, 6vw, 4.5rem); }
#opiniones .titular { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
#opiniones .titular h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
.opiniones[data-estado="huecos"] { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.opiniones[data-estado="huecos"] .opinion--vacia:nth-child(2) { display: none; }

/* Zonas táctiles de al menos 40 px */
.dispositivos__btn { min-height: 40px; }
.visor__abrir { min-width: 40px; min-height: 40px; }

@media (max-width: 700px) {
  .seccion { padding: clamp(3.2rem, 11vw, 4rem) 0; }

  /* Tres botones flotantes eran demasiados: se queda WhatsApp (izquierda) y el
     asistente (derecha). «Volver arriba» sobra en un móvil. */
  .arriba { display: none; }
  .portada__flecha { display: none; }
  .flotante-wa__globo { display: none; }

  /* Las cuatro tarifas, en 2×2 y no en una columna de 600 px */
  .tarifas { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .tarifa { padding: 1.1rem 0.95rem 1rem; }
  .tarifa__precio { font-size: 1.65rem; }
  .tarifa small { font-size: 0.78rem; }
  .tarifa--pop em { right: 0.6rem; font-size: 0.66rem; }

  /* Con un solo dispositivo disponible, el selector sobra */
  .dispositivos { display: none; }
}

/* ==========================================================================
   v9 — Oficio
   Sustituye la estética de «plantilla tecnológica» (degradados en el texto,
   partículas, cristal, brillos, cuadraditos con icono, etiquetas en mono) por
   la de un estudio que trabaja con las manos: papel, tinta, serifa, esquinas
   más rectas, sombras casi nulas y un único acento naranja.
   ========================================================================== */

:root {
  --tipo-titulo: "Outfit", "Instrument Sans", system-ui, sans-serif;
  --tipo-texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio-s: 8px;
  --radio-m: 16px;
  --radio-l: 26px;
  --radio-pastilla: 999px;
}

[data-tema="claro"] {
  --fondo: #f7f2e8;
  --fondo-alt: #eee6d5;
  --fondo-elev: #fffcf5;
  --superficie: rgba(22, 36, 58, 0.035);
  --superficie-fuerte: rgba(22, 36, 58, 0.07);
  --borde: rgba(22, 36, 58, 0.16);
  --borde-fuerte: rgba(22, 36, 58, 0.32);
  --texto: #16243a;
  --texto-suave: #46536a;
  --texto-tenue: #6a7385;
  --sombra-s: 0 1px 0 rgba(22, 36, 58, 0.06);
  --sombra-m: 0 10px 24px -18px rgba(22, 36, 58, 0.45);
  --sombra-l: 0 22px 40px -26px rgba(22, 36, 58, 0.5);
  --cristal: #fffcf5;
}
[data-tema="oscuro"], :root:not([data-tema]) {
  --sombra-m: 0 10px 24px -16px rgba(0, 0, 0, 0.6);
  --sombra-l: 0 22px 40px -22px rgba(0, 0, 0, 0.7);
}
[data-tema="claro"] .seccion--alterna { background: var(--fondo-alt); }

/* — Tipografía — */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
h1 { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
.portada__titulo { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.1rem); line-height: 1.04; letter-spacing: -0.025em; }
.tarifa__precio, .presupuesto dd, .presupuesto__total b { font-family: var(--tipo-titulo); letter-spacing: -0.02em; }

/* Se acabó el texto con degradado: una marca de rotulador debajo y ya está */
.portada__remate {
  display: inline;
  color: inherit;
  background: linear-gradient(transparent 64%, rgba(240, 148, 0, 0.42) 64% 90%, transparent 90%);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: none;
}
[data-tema="claro"] .portada__remate { background: linear-gradient(transparent 64%, rgba(240, 148, 0, 0.42) 64% 90%, transparent 90%); }
[data-tema="oscuro"] .portada__remate { background: linear-gradient(transparent 64%, rgba(240, 148, 0, 0.5) 64% 90%, transparent 90%); }

/* Etiquetas de sección: una frase en cursiva, no un rótulo de terminal */
.titular__ojo {
  font-family: var(--tipo-titulo);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--naranja-oscuro);
}
.titular__ojo::before { display: none; }
[data-tema="oscuro"] .titular__ojo { color: var(--naranja-claro); }

/* — Portada: fuera cuadrícula, halo y partículas — */

/* — Presupuesto de ejemplo (sustituye a la maqueta de web + chat) — */
.portada__visual { padding: 1.5rem 0.5rem 1rem; }
.presupuesto {
  position: relative;
  margin: 0;
  padding: 2.1rem 1.9rem 1.7rem;
  max-width: 25rem;
  margin-inline: auto;
  background:
    repeating-linear-gradient(transparent 0 31px, rgba(22, 36, 58, 0.07) 31px 32px),
    #fffdf6;
  border: 1px solid rgba(22, 36, 58, 0.18);
  border-radius: 3px;
  color: #16243a;
  box-shadow: 0 1px 0 rgba(22, 36, 58, 0.08), 0 26px 38px -28px rgba(22, 36, 58, 0.55);
  transform: rotate(1.8deg);
}
.presupuesto__cinta {
  position: absolute;
  top: -14px; left: 50%;
  width: 96px; height: 28px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(240, 190, 90, 0.62);
  border-inline: 1px dashed rgba(0, 0, 0, 0.12);
}
.presupuesto figcaption { margin-bottom: 1rem; font-family: var(--tipo-titulo); font-style: italic; font-size: 1.05rem; color: #46536a; }
.presupuesto dl { margin: 0; display: grid; gap: 0.2rem; }
.presupuesto dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dotted rgba(22, 36, 58, 0.4); }
.presupuesto dt { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.presupuesto dt small { display: block; font-weight: 400; font-size: 0.78rem; color: #5a6578; }
.presupuesto dd { margin: 0; font-size: 1.05rem; font-weight: 600; white-space: nowrap; }
.presupuesto__total { display: flex; justify-content: space-between; align-items: baseline; margin: 1.1rem 0 0.2rem; }
.presupuesto__total span { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: #46536a; }
.presupuesto__total b { font-size: 2.2rem; line-height: 1; }
.presupuesto__total i { font-style: normal; font-size: 0.95rem; font-weight: 600; font-family: var(--tipo-texto); color: #46536a; }
.presupuesto__nota { margin: 0.5rem 0 0; font-family: var(--tipo-titulo); font-style: italic; font-size: 1rem; color: #8a4a00; transform: rotate(-1.5deg); }
.presupuesto__sello {
  position: absolute;
  right: -0.9rem; bottom: 1.1rem;
  padding: 0.35rem 0.8rem;
  border: 2.5px solid #c0392b;
  border-radius: 4px;
  color: #c0392b;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-11deg);
  opacity: 0.88;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: no-preference) {
  .presupuesto { animation: papel 0.9s 0.3s var(--curva) both; }
  .presupuesto__sello { animation: sello 0.5s 1.2s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
  @keyframes papel { from { opacity: 0; transform: translateY(24px) rotate(4deg); } to { opacity: 1; transform: rotate(1.8deg); } }
  @keyframes sello { from { opacity: 0; transform: rotate(-11deg) scale(1.9); } to { opacity: 0.88; transform: rotate(-11deg) scale(1); } }
}
@media (max-width: 960px) { .presupuesto { transform: rotate(0.8deg); } }

/* — Botones: planos, sin brillo ni barrido — */
.btn { border-radius: var(--radio-m); letter-spacing: 0; }
.btn--principal { --btn-fondo: var(--azul-600); box-shadow: none; }
.btn--principal::after { display: none; }
.btn--principal:hover { background: var(--azul-700); box-shadow: none; }
.btn--whatsapp { box-shadow: none; animation: none !important; }
.btn--grande { box-shadow: none; }
.btn--fantasma { background: transparent; }


/* — Promesas: texto y filetes, sin cuadraditos con icono — */
.promesas { background: var(--fondo); }
.promesas__rejilla { gap: 0; }
.promesa { display: block; padding: 0.4rem 1.6rem; border-left: 1px solid var(--borde); }
.promesa:first-child { padding-left: 0; border-left: 0; }
.promesa svg { display: none; }
.promesa b { display: block; margin-bottom: 0.25rem; font-family: var(--tipo-titulo); font-size: 1.3rem; font-weight: 600; }
@media (max-width: 700px) {
  .promesa { padding: 0.9rem 0; border-left: 0; border-top: 1px solid var(--borde); }
  .promesa:first-child { border-top: 0; }
}

/* — Servicios: tarjetas redondeadas, sin resplandor que sigue al ratón — */
.servicio { background: var(--fondo-elev); border: 1px solid var(--borde); border-radius: var(--radio-l); padding: 1.9rem 1.7rem; box-shadow: none; }
.servicio::before { display: none; }
.servicio:hover { background: var(--fondo-elev); box-shadow: var(--sombra-m); border-color: var(--borde-fuerte); }
.servicio--destacado { background: var(--superficie); }
.servicio__icono { color: var(--texto); }
.servicio h3 { font-size: 1.45rem; }

/* — Tarifas, banda final y demás: sin brillos — */
.tarifa { box-shadow: none; background: var(--fondo-elev); }
.tarifa:hover { transform: translateY(-2px); box-shadow: none; }
.tarifa--pop { border: 2px solid var(--texto); box-shadow: none; }
.tarifa--pop em { border-radius: 999px; background: var(--texto); color: var(--fondo); }
.tarifa:hover .tarifa__precio { transform: none; }
.banda-final { background: var(--texto); }
.banda-final::after { display: none; }
[data-tema="oscuro"] .banda-final { background: #0b2645; }
.banda-final h2, .banda-final p { color: #f7f2e8; }

/* — Revelado: una subida corta y ya; sin desenfoque — */
@media (prefers-reduced-motion: no-preference) {
  [data-revelar] { filter: none !important; transform: translateY(14px); transition: opacity 0.6s var(--curva), transform 0.6s var(--curva); }
  [data-revelar].es-visible { transform: none; }
  .chat-lanzador__icono { animation: none; }
  .promesa svg { transition: none; }
}
.portada__remate { white-space: nowrap; }
.cabecera__wa, .cabecera__wa-texto, .tema { font-family: var(--tipo-texto); }

/* Los demás degradados en texto, fuera */
.pasos__contador b, .cifra b,
[data-tema="claro"] .pasos__contador b, [data-tema="claro"] .cifra b {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--texto);
  font-family: var(--tipo-titulo);
}
/* El total del presupuesto es papel en cualquier tema: tinta siempre */
.presupuesto__total b { color: #16243a; }
/* Pasos: tarjeta de papel, no gris con borde de color */
.paso { background: var(--fondo-elev); border-radius: var(--radio-m); box-shadow: none; }
.paso.es-activo, .paso.es-actual { background: var(--fondo-elev); border-color: var(--texto); }
.etiqueta { white-space: normal; }

/* ==========================================================================
   v9 — Coherencia
   Una sola familia para títulos (Outfit) y otra para texto (Instrument Sans),
   nada de mono ni de serifa, controles de formulario con la fuente de la
   página, y una escala de esquinas: 8 · 16 · 26 · pastilla.
   ========================================================================== */
button, input, select, textarea, summary, legend, label { font-family: inherit; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.025em; }
.cinta { font-family: var(--tipo-texto); }
.cinta span { font-family: var(--tipo-texto); letter-spacing: 0.04em; }
.titular__ojo, .presupuesto figcaption, .presupuesto__nota { font-family: var(--tipo-texto); font-style: italic; }

/* Etiquetas de sección: solo en tres sitios (una cada tres secciones) */
.titular__ojo { display: none; }
#sector .titular__ojo, #precio .titular__ojo, #estudio .titular__ojo { display: inline-flex; }

/* Un solo bloque oscuro (el pie): la banda final pasa a papel */
.banda-final { background: var(--fondo-alt); color: var(--texto); border-block: 1px solid var(--borde); }
.banda-final h2 { color: var(--texto); }
.banda-final p { color: var(--texto-suave); }
.banda-final .btn--fantasma { color: var(--texto); border: 1px solid var(--borde-fuerte); background: transparent; }
.banda-final .btn--fantasma:hover { background: var(--superficie-fuerte); color: var(--texto); }
[data-tema="oscuro"] .banda-final { background: var(--fondo-elev); }

/* Con la lista de ventajas fuera, el hero respira */
.portada__entrada { max-width: 34ch; margin-bottom: 1.8rem; }
.portada__botones { margin-bottom: clamp(2rem, 4vw, 3rem); }
.portada__titulo { font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.4rem); }

/* Iconos de servicio: siempre centrados dentro de su cuadro redondeado, en claro y en oscuro */
.servicio__icono {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.15rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 16px;
  background: var(--superficie-fuerte);
  color: var(--acento);
}
.servicio__icono svg { width: 26px; height: 26px; stroke-width: 1.7; }
.servicio:hover .servicio__icono { color: var(--naranja); }

/* ==========================================================================
   v9 — Portada con propuestas reales
   Tres capturas de las propuestas para Raquel R. Castaño, en teléfonos en
   abanico. Sustituye al presupuesto de ejemplo.
   ========================================================================== */
.portada__visual { padding: 1rem 0 0; }
.abanico { position: relative; display: block; height: clamp(400px, 38vw, 520px); max-width: 30rem; margin-inline: auto; }
.abanico__tel {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(170px, 15vw, 220px);
  height: auto;
  aspect-ratio: 520 / 893;
  object-fit: cover;
  object-position: top;
  border: 7px solid #0d1a2b;
  border-radius: 30px;
  background: #0d1a2b;
  box-shadow: 0 30px 50px -28px rgba(13, 26, 43, 0.6), 0 2px 0 rgba(255, 255, 255, 0.06) inset;
  transition: transform 0.5s var(--curva);
}
.abanico__tel--izq { transform: translate(-108%, -46%) rotate(-9deg); }
.abanico__tel--der { transform: translate(8%, -46%) rotate(9deg); }
.abanico__tel--centro { z-index: 2; transform: translate(-50%, -52%); }
.abanico:hover .abanico__tel--izq { transform: translate(-118%, -47%) rotate(-12deg); }
.abanico:hover .abanico__tel--der { transform: translate(18%, -47%) rotate(12deg); }
.abanico:hover .abanico__tel--centro { transform: translate(-50%, -55%); }
.abanico__pie { margin: 0.6rem auto 0; max-width: 30rem; text-align: center; font-size: 0.86rem; color: var(--texto-suave); }
.abanico__pie a { color: var(--acento); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .abanico__tel { animation: entraTel 0.9s var(--curva) both; }
  .abanico__tel--izq { animation-delay: 0.25s; }
  .abanico__tel--der { animation-delay: 0.4s; }
  .abanico__tel--centro { animation-delay: 0.1s; }
  @keyframes entraTel { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 960px) { .abanico { height: 440px; } }

/* Enlaces a las páginas de sector */
.sectores-enlaces { margin: 1.6rem 0 0; font-size: 0.95rem; color: var(--texto-suave); }
.sectores-enlaces a { color: var(--acento); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* La cinta: el JavaScript la frena con suavidad; esto quita la pausa en seco */
.cinta:hover .cinta__pista { animation-play-state: running; }

/* Contraste AA (informe de PageSpeed, octubre de 2026)
   El texto tenue, la cinta y los enlaces de sector se quedaban en 3,3 a 4,3 sobre
   4,5. Solo cambian estos colores; la jerarquía sigue igual. */
:root, [data-tema="oscuro"] { --texto-tenue: #8aa3bd; }
[data-tema="claro"] { --texto-tenue: #596273; }
[data-tema="claro"] .cinta__grupo i { color: #8a5200; }
[data-tema="claro"] .sectores-enlaces a { color: #0a5a9c; }
[data-tema="oscuro"] .sectores-enlaces a { color: #7cc4f0; }
/* El pie del tema claro es oscuro: ahí el texto tenue tiene que ser claro */
[data-tema="claro"] .pie__dato,
[data-tema="claro"] .pie__base p { color: #b4c8da; }
[data-tema="claro"] .pie__punto { color: #4aa8e8; }

/* El pie lleva una columna más (Zonas). Solo en pantalla ancha: debajo de 1080 px
   mandan las reglas de siempre (2 columnas, luego 1). */
@media (min-width: 1081px) {
  .pie__rejilla { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
}