/* =========================================================
   Rafa Zaragoza · Estilos comunes
   Idea: las salinas de Santa Pola vistas desde el aire.
   Cada servicio es una balsa; los diques son las líneas finas.
   ========================================================= */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

/* ---------- Colores (modo claro) ---------- */
:root {
  /* Colores del logo */
  --marino: #172A3A;       /* azul marino: textos, cabecera, fondos oscuros */
  --verde: #0D7A6F;        /* verde mar: botones y enlaces */
  --flamenco: #D9667E;     /* rosa flamenco: solo detalles pequeños */

  --sal: #F5F7F4;          /* fondo claro */
  --sal-pura: #FFFFFF;     /* balsa blanca */
  --tinta: #172A3A;        /* textos */
  --tinta-2: #4A5B68;      /* texto secundario (marino aclarado) */
  --mar: #172A3A;          /* balsa honda: marino */
  --balsa: #0D7A6F;        /* balsa media: verde mar */
  --agua: #C4E2DC;         /* balsa clara: verde mar muy suave */
  --salmuera: #DCE4EA;     /* balsa neblina: marino muy suave */
  --dique: #C5CED5;        /* líneas entre balsas */
  --dique-suave: #E2E7EA;
  --enlace: #0D7A6F;
  --sobre-claro: #172A3A;  /* texto sobre balsas claras (fijo) */
  --sobre-oscuro: #F5F7F4; /* texto sobre balsas oscuras (fijo) */
  --foco: #D9667E;

  --fuente: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 40px);
  --gap-dique: 6px;
  color-scheme: light;
}

/* ---------- Modo oscuro: la salina de noche ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sal: #0E1A24;
    --sal-pura: #1A2D3D;
    --tinta: #E9EEF1;
    --tinta-2: #A9B8C3;
    --mar: #22394D;
    --balsa: #0D7A6F;
    --agua: #8CCABF;
    --salmuera: #A9BBCA;
    --dique: #2E4457;
    --dique-suave: #1D3142;
    --enlace: #5FC6B5;
    --foco: #E8899D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sal: #0E1A24;
  --sal-pura: #1A2D3D;
  --tinta: #E9EEF1;
  --tinta-2: #A9B8C3;
  --mar: #22394D;
  --balsa: #0D7A6F;
  --agua: #8CCABF;
  --salmuera: #A9BBCA;
  --dique: #2E4457;
  --dique-suave: #1D3142;
  --enlace: #5FC6B5;
  --foco: #E8899D;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--sal);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.55;
  padding-bottom: 88px; /* sitio para el botón fijo de WhatsApp */
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
h1, h2, h3 { line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::selection { background: var(--flamenco); color: #172A3A; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
html { scrollbar-color: var(--dique) var(--sal); }

.saltar {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--tinta); color: var(--sal); padding: 12px 16px; font-weight: 700;
}
.saltar:focus { top: 8px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* ---------- Cabecera ---------- */
.cabecera { border-bottom: 1px solid var(--dique-suave); background: var(--sal); position: relative; z-index: 20; }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; }
.marca svg, .marca img { width: 34px; height: 34px; flex: none; }
.acciones { display: flex; align-items: center; gap: 4px; }

.boton-icono {
  appearance: none; border: 0; background: transparent; color: var(--tinta);
  min-width: 44px; height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.boton-icono svg { width: 22px; height: 22px; }
.icono-sol { display: none; }
[data-theme-actual="dark"] .icono-sol { display: block; }
[data-theme-actual="dark"] .icono-luna { display: none; }

.nav { display: none; }
.nav ul { list-style: none; padding: 0; }
.nav a { text-decoration: none; font-weight: 600; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

/* Menú móvil desplegado */
.nav.abierta {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--sal); border-bottom: 6px solid var(--dique);
}
.nav.abierta ul { padding: 8px var(--margen) 20px; }
.nav.abierta li + li { border-top: 1px solid var(--dique-suave); }
.nav.abierta a { display: block; padding: 14px 0; font-size: 1.25rem; }

@media (min-width: 1040px) {
  .boton-menu { display: none; }
  .nav { display: block; }
  .nav > ul { display: flex; gap: 22px; }
  .nav a { font-size: 0.9375rem; }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 10px 26px; text-decoration: none; font-weight: 800; font-size: 1.125rem; text-align: center; line-height: 1.2;
  background: var(--verde); color: #FFFFFF; border: 2px solid var(--verde);
  transition: background-color .2s ease-out, color .2s ease-out;
}
.boton svg { width: 24px; height: 24px; flex: none; }
.boton--ancho { width: 100%; }
@media (max-width: 899px) { .boton--ancho-movil { width: 100%; } }
.boton--claro { background: #FFFFFF; color: #172A3A; border-color: #FFFFFF; }
.enlace-flecha { font-weight: 700; text-decoration: underline; }

/* ---------- Portada ---------- */
.portada { padding-block: 28px 56px; }
.portada .contenedor { display: grid; gap: 28px; }
.portada h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem); max-width: 14ch; }
.portada .entradilla { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); color: var(--tinta-2); max-width: 36ch; margin-top: 16px; }
.portada .llamada { display: grid; gap: 12px; margin-top: 28px; }
.portada .nota { font-size: 0.9375rem; color: var(--tinta-2); }
@media (min-width: 900px) {
  .portada { padding-block: 64px 96px; }
  .portada .contenedor { grid-template-columns: 5fr 7fr; gap: 48px; align-items: end; }
  .portada .llamada { justify-items: start; }
}

/* ---------- El plano de balsas ---------- */
.plano {
  display: grid; gap: var(--gap-dique); padding: var(--gap-dique); background: var(--dique);
  list-style: none; margin: 0;
}
.balsa { padding: 14px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; position: relative; min-width: 0; }
.balsa b { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.balsa .precio { font-variant-numeric: tabular-nums; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin-top: auto; }
.balsa .precio small { font-size: max(0.875rem, 0.45em); font-weight: 700; letter-spacing: 0; }
.balsa .detalle { font-size: 0.875rem; font-weight: 600; }
a.balsa { transition: filter .2s ease-out; }

.balsa--mar { background: var(--mar); color: var(--sobre-oscuro); }
.balsa--balsa { background: var(--balsa); color: var(--sobre-oscuro); }
.balsa--agua { background: var(--agua); color: var(--sobre-claro); }
.balsa--salmuera { background: var(--salmuera); color: var(--sobre-claro); }
.balsa--sal { background: var(--sal-pura); color: var(--tinta); }

.plano--portada {
  grid-template-columns: 1.25fr 1fr;
  grid-template-areas: "web google" "admin numeros" "salida salida";
  grid-template-rows: minmax(132px, auto) minmax(112px, auto) auto;
}
.plano--portada .a-web { grid-area: web; }
.plano--portada .a-google { grid-area: google; }
.plano--portada .a-admin { grid-area: admin; }
.plano--portada .a-numeros { grid-area: numeros; }
.plano--portada .a-salida { grid-area: salida; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.plano--portada .a-salida b { font-size: 0.9375rem; }
.plano--portada .a-salida span { font-size: 0.8125rem; font-weight: 600; color: var(--tinta-2); text-align: right; }
@media (min-width: 900px) {
  .plano--portada {
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-areas: "web web google" "admin numeros google" "salida salida salida";
    grid-template-rows: minmax(200px, auto) minmax(170px, auto) auto;
  }
  .balsa { padding: 20px; }
  .balsa b { font-size: 1.125rem; }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(64px, 8vw, 120px); }
.seccion--pausa { padding-block: clamp(48px, 10vw, 140px); }
.cabeza { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.cabeza p { max-width: 56ch; }
.cabeza h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.cabeza p { color: var(--tinta-2); font-size: 1.125rem; }

/* Servicios: balsas que se abren */
.servicios { grid-template-columns: 1fr; }
@media (min-width: 700px) { .servicios { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .servicios { grid-template-columns: 1.3fr 1fr 1fr; } .servicios > :first-child { grid-row: span 2; } }
.servicios .balsa { padding: 22px; gap: 12px; }
.servicios h3 { font-size: 1.5rem; }
.servicios .verdad { font-size: 1rem; line-height: 1.45; max-width: 34ch; }
.servicios .precio { margin-top: 8px; }
.servicios details { border-top: 1px solid currentColor; margin-top: 6px; }
.servicios summary {
  list-style: none; cursor: pointer; padding: 12px 0 4px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; min-height: 44px;
}
.servicios summary::-webkit-details-marker { display: none; }
.servicios details ul { padding: 4px 0 4px 1.1em; display: grid; gap: 6px; font-size: 0.9375rem; }
.servicios .mas { font-weight: 700; font-size: 0.9375rem; margin-top: 4px; }

/* Garantías: campo drenado en verde mar */
.garantias { background: var(--mar); color: var(--sobre-oscuro); }
.garantias .cabeza p { color: #C3CED8; }
.garantias ol { list-style: none; padding: 0; display: grid; border-top: 1px solid rgba(245,247,244,.35); }
.garantias li { display: grid; gap: 6px; padding-block: 22px; border-bottom: 1px solid rgba(245,247,244,.35); }
.garantias li strong { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem); letter-spacing: -0.02em; line-height: 1.1; }
.garantias li span { color: #C3CED8; max-width: 52ch; }
@media (min-width: 900px) {
  .garantias ol { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .garantias li { padding-block: 28px; }
}

/* Proceso: de agua de mar a sal */
.proceso { list-style: none; padding: 0; display: grid; gap: var(--gap-dique); background: var(--dique); padding: var(--gap-dique); counter-reset: paso; }
.proceso li { padding: 22px; display: grid; gap: 8px; align-content: start; counter-increment: paso; min-height: 150px; }
.proceso li::before { content: "Paso " counter(paso); font-size: 0.875rem; font-weight: 700; }
.proceso h3 { font-size: 1.375rem; }
.proceso p { font-size: 0.9875rem; }
.proceso li:nth-child(1) { background: var(--mar); color: var(--sobre-oscuro); }
.proceso li:nth-child(2) { background: var(--balsa); color: var(--sobre-oscuro); }
.proceso li:nth-child(3) { background: var(--agua); color: var(--sobre-claro); }
.proceso li:nth-child(4) { background: var(--sal-pura); color: var(--tinta); }
@media (min-width: 900px) { .proceso { grid-template-columns: repeat(4, 1fr); } .proceso li { min-height: 260px; } }

/* Para quién */
.para-quien { grid-template-columns: 1fr; }
@media (min-width: 700px) { .para-quien { grid-template-columns: 1fr 1fr; } }
.para-quien .balsa { padding: 24px; gap: 12px; min-height: 220px; }
.para-quien h3 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.para-quien p { max-width: 38ch; }
.para-quien .enlace-flecha { margin-top: auto; }

/* No somos una gestoría: dos columnas comparadas */
.reparto { display: grid; gap: var(--gap-dique); background: var(--dique); padding: var(--gap-dique); }
.reparto > div { padding: 22px; background: var(--sal-pura); }
.reparto > div:first-child { background: var(--agua); color: var(--sobre-claro); }
.reparto h3, .reparto .h3 { font-size: 1.375rem; margin-bottom: 12px; }
.reparto ul { padding-left: 1.1em; display: grid; gap: 6px; }
@media (min-width: 800px) { .reparto { grid-template-columns: 1.2fr 1fr; } }

/* Quién está detrás */
.fundador { display: grid; gap: 28px; }
@media (min-width: 800px) { .fundador { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } }
.retrato { margin: 0; }
.retrato .hueco {
  aspect-ratio: 4 / 5; background: var(--dique-suave); display: grid; place-items: center; text-align: center;
  color: var(--tinta-2); font-size: 0.9375rem; padding: 24px; border: 6px solid var(--dique);
}
.retrato img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.retrato figcaption { border-top: 2px solid var(--tinta); margin-top: 12px; padding-top: 10px; font-size: 0.9375rem; display: grid; gap: 2px; }
.retrato figcaption b { font-size: 1.0625rem; }
.fundador .texto { display: grid; gap: 16px; max-width: 60ch; }
.fundador .texto h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }

/* Preguntas frecuentes */
.faq { border-top: 2px solid var(--tinta); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--dique); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-weight: 700; font-size: 1.1875rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { position: absolute; right: 6px; }
.faq details > div { padding: 0 0 22px; color: var(--tinta-2); max-width: 64ch; display: grid; gap: 10px; }

/* Cierre */
.cierre { background: #172A3A; color: #F5F7F4; }
.cierre h2::before { content: ""; display: block; width: 64px; height: 8px; border-radius: 4px; background: var(--flamenco); margin-bottom: 22px; }
.cierre .contenedor { display: grid; gap: 22px; }
.cierre h2 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4.25rem); max-width: 16ch; }
.cierre p { font-size: 1.125rem; max-width: 46ch; }
.cierre .boton { justify-self: start; }
.cierre .contacto-alt { font-size: 1rem; }

/* ---------- Pie ---------- */
.pie { background: var(--sal); border-top: 6px solid var(--dique); padding-block: 48px 32px; font-size: 0.9375rem; }
.pie .contenedor { display: grid; gap: 32px; }
.pie h2 { font-size: 1.125rem; letter-spacing: -0.01em; margin-bottom: 12px; }
.pie ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.pie a { text-decoration: none; }
.pie .legal { border-top: 1px solid var(--dique-suave); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--tinta-2); }
@media (min-width: 800px) { .pie .columnas { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; } }
.pie .columnas { display: grid; gap: 28px; }

/* ---------- Botón fijo de WhatsApp ---------- */
.whatsapp-fijo {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 16px;
  background: var(--verde); color: #FFFFFF; text-decoration: none; font-weight: 800; font-size: 1rem;
  box-shadow: 0 8px 24px rgba(10, 20, 30, .28), 0 2px 6px rgba(10, 20, 30, .2);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s;
}
.whatsapp-fijo svg { width: 26px; height: 26px; }

/* Portada: cada balsa es un enlace */
.plano--portada > li:not(.balsa) { display: grid; min-width: 0; }
.plano--portada > li > a.balsa { min-height: 100%; }
.plano--portada .detalle { line-height: 1.3; }

/* Inicio: las cuatro áreas */
.servicios--areas { grid-template-columns: 1fr; }
@media (min-width: 760px) { .servicios--areas { grid-template-columns: 1fr 1fr; } .servicios--areas > :first-child { grid-row: auto; } }
.ejemplos { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 0.9875rem; }
.ejemplos li { position: relative; padding-left: 20px; }
.ejemplos li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: currentColor; opacity: .6; }
.servicios--areas .mas { margin-top: 2px; }
.nota-precios { margin-top: 18px; color: var(--tinta-2); max-width: 70ch; }

/* Menú: desplegable de Servicios */
.nav__abrir {
  appearance: none; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; padding: 0;
}
.nav__abrir svg { width: 16px; height: 16px; transition: transform 240ms var(--ease-out); }
.nav__abrir[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__sub { display: none; }
.nav__sub.abierto { display: grid; }
.nav__sub a[aria-current="page"] { text-decoration: underline; }
@media (max-width: 1039px) {
  .nav.abierta .nav__abrir { width: 100%; justify-content: space-between; padding: 14px 0; font-size: 1.25rem; }
  .nav.abierta .nav__sub { padding: 0 0 12px 16px; border-left: 1px solid var(--dique); margin-left: 2px; }
  .nav.abierta .nav__sub li + li { border-top: 0; }
  .nav.abierta .nav__sub a { padding: 9px 0; font-size: 1.0625rem; }
}
@media (min-width: 1040px) {
  .nav ul { align-items: center; }
  .nav__grupo { position: relative; }
  .nav__abrir { font-size: 0.9375rem; min-height: 44px; }
  .nav__sub {
    position: absolute; top: calc(100% + 12px); left: -18px; z-index: 30; min-width: 250px;
    background: var(--sal-pura); border: var(--gap-dique) solid var(--dique); padding: 8px 0;
    box-shadow: 0 12px 32px rgba(10, 20, 30, .14), 0 2px 6px rgba(10, 20, 30, .08);
    transform-origin: top left;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  }
  @starting-style { .nav__sub.abierto { opacity: 0; transform: translateY(-4px) scale(.97); } }
  .nav__sub li { display: block; }
  .nav__sub a { display: block; padding: 10px 18px; font-size: 0.9875rem; }
  @media (hover: hover) { .nav__sub a:hover { background: var(--dique-suave); text-decoration: none; } }
}

/* Catálogo de servicios (Consultoría y Tecnología) */
.catalogo { grid-template-columns: 1fr; }
@media (min-width: 700px) { .catalogo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .catalogo { grid-template-columns: repeat(3, 1fr); } .catalogo .ancha { grid-column: span 2; } }
.catalogo .balsa { padding: 22px; gap: 10px; min-height: 260px; }
.catalogo h3 { font-size: 1.375rem; line-height: 1.1; }
.catalogo .verdad { font-size: 0.9875rem; line-height: 1.45; }
.catalogo .precio { margin-top: auto; padding-top: 8px; }
.catalogo .precio-extra { font-size: 0.875rem; font-weight: 700; }
.consulta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 0.9375rem;
  text-decoration: underline; text-underline-offset: .2em; align-self: start;
}
.consulta svg { width: 20px; height: 20px; flex: none; }
.aviso-grande {
  background: var(--sal-pura); border: var(--gap-dique) solid var(--dique); padding: clamp(22px, 3vw, 36px);
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; max-width: 860px;
}
.aviso-grande p + p { margin-top: 10px; font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: 0; }

/* ---------- Páginas interiores ---------- */
.portada--interior { padding-block: 28px 48px; }
.portada--interior h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); max-width: 18ch; }
.portada--interior .entradilla { max-width: 52ch; }
@media (min-width: 900px) {
  .portada--interior { padding-block: 56px 80px; }
  .portada--interior .contenedor { grid-template-columns: 5fr 7fr; align-items: end; }
}

/* Índice de servicios: un plano pequeño de balsas que llevan a cada sección */
.indice { grid-template-columns: 1fr 1fr; }
.indice li { display: grid; }
.indice .balsa { min-height: 104px; }
.indice .balsa b { font-size: 0.9375rem; }
.indice .balsa .precio { font-size: 1.375rem; }
@media (min-width: 700px) { .indice { grid-template-columns: repeat(3, 1fr); } .indice .balsa { min-height: 128px; } }

/* Una sección por servicio: la balsa con los precios y el texto al lado */
.servicio { padding-block: clamp(48px, 7vw, 104px); scroll-margin-top: 8px; }
.servicio + .servicio { border-top: 1px solid var(--dique-suave); }
.servicio .contenedor { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .servicio .contenedor { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .servicio__balsa { position: sticky; top: 24px; }
}
.servicio__balsa { padding: clamp(22px, 3vw, 34px); border: var(--gap-dique) solid var(--dique); display: grid; gap: 14px; }
.servicio__balsa h2 { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.875rem); }
.servicio__balsa > p:first-of-type { font-size: 1.0625rem; max-width: 36ch; }
.tarifa { margin: 6px 0 0; display: grid; }
.tarifa > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 12px; border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.tarifa dt { font-weight: 600; font-size: 0.9875rem; }
.tarifa dd { margin: 0; font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarifa dd small { font-size: max(0.875rem, 0.45em); font-weight: 700; letter-spacing: 0; }
.letra { font-size: 0.875rem; font-weight: 600; }

.servicio__texto { display: grid; gap: 12px; max-width: 62ch; }
.servicio__texto h3 { font-size: 1.375rem; margin-top: 18px; }
.servicio__texto h3:first-child { margin-top: 0; }
.lista { list-style: none; padding: 0; display: grid; gap: 10px; }
.lista li { position: relative; padding-left: 26px; }
.lista li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 11px; height: 11px; background: var(--flamenco); }
.aviso { background: var(--sal-pura); border: 1px solid var(--dique); padding: 14px 16px; font-size: 0.9875rem; font-weight: 600; }
.servicio__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 18px; }
@media (max-width: 599px) { .servicio__acciones .boton { width: 100%; } }

/* =========================================================
   Movimiento e interacción
   Principios: curvas ease-out fuertes, duraciones cortas (<300 ms
   en la interfaz), solo transform/opacity/clip-path, respuesta al
   pulsar, hover solo en dispositivos con ratón y respeto total a
   "reducir movimiento".
   ========================================================= */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --rapido: 160ms;
  --medio: 240ms;
}
html { -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Subrayados que se asientan en vez de saltar */
a { transition: text-decoration-color var(--rapido) var(--ease-out), text-decoration-thickness var(--rapido) var(--ease-out); }

/* Botones: responden al dedo (escala 0.97 al pulsar) */
.boton, .boton-icono, .whatsapp-fijo, .servicios summary, .faq summary {
  transition: transform var(--rapido) var(--ease-out), background-color var(--medio) var(--ease-out),
              border-color var(--medio) var(--ease-out), color var(--medio) var(--ease-out),
              opacity var(--medio) var(--ease-out);
}
.boton:active, .boton-icono:active { transform: scale(0.97); }
.whatsapp-fijo:active { transform: scale(0.96); }

/* Hover solo donde hay ratón: en el móvil no se queda "pegado" */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
  .boton-icono:hover { background: var(--dique-suave); }
  .boton:hover { background: #0A635A; border-color: #0A635A; color: #FFFFFF; text-decoration: none; }
  .boton--claro:hover { background: #C4E2DC; border-color: #C4E2DC; color: #172A3A; }
  a.balsa:hover { filter: brightness(1.06); }
  .pie a:hover { text-decoration: underline; }
  .whatsapp-fijo:hover { background: #0A635A; transform: translateY(-2px); }
  .servicios summary:hover, .faq summary:hover { opacity: .8; }
}

/* Icono del tema: se cruzan con giro y desenfoque */
.boton-icono[data-cambiar-tema] { position: relative; }
.boton-icono[data-cambiar-tema] svg {
  transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-out), filter 200ms var(--ease-out);
}
.icono-sol, [data-theme-actual="dark"] .icono-sol { display: block; }
.icono-luna, [data-theme-actual="dark"] .icono-luna { display: block; }
.icono-sol { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); filter: blur(2px); }
[data-theme-actual="dark"] .icono-sol { opacity: 1; transform: none; filter: none; }
[data-theme-actual="dark"] .icono-luna { opacity: 0; transform: rotate(90deg) scale(.6); filter: blur(2px); }

/* Menú móvil: baja desde la cabecera, no aparece de golpe */
@media (max-width: 1039px) {
  .nav.abierta {
    transition: opacity var(--medio) var(--ease-out), transform var(--medio) var(--ease-drawer), clip-path 300ms var(--ease-drawer);
    clip-path: inset(0 0 0 0);
  }
  @starting-style {
    .nav.abierta { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 100% 0); }
  }
  .nav.abierta li { animation: entra-item 360ms var(--ease-out) both; }
  .nav.abierta li:nth-child(2) { animation-delay: 25ms; }
  .nav.abierta li:nth-child(3) { animation-delay: 50ms; }
  .nav.abierta li:nth-child(4) { animation-delay: 75ms; }
  .nav.abierta li:nth-child(5) { animation-delay: 100ms; }
  .nav.abierta li:nth-child(6) { animation-delay: 125ms; }
  .nav.abierta li:nth-child(7) { animation-delay: 150ms; }
  .nav.abierta li:nth-child(8) { animation-delay: 175ms; }
}
@keyframes entra-item { from { opacity: 0; transform: translateY(-6px); } }

/* Desplegables (Qué incluye, preguntas): se abren con altura real */
:root { interpolate-size: allow-keywords; }
details::details-content {
  block-size: 0; overflow: clip;
  transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete;
}
details[open]::details-content { block-size: auto; }

/* El "+" es un dibujo que gira hasta "×" */
.servicios summary::after, .faq summary::after,
.servicios details[open] summary::after, .faq details[open] summary::after {
  content: ""; width: 14px; height: 14px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 300ms var(--ease-out);
}
.faq summary::after { top: 26px; }
.servicios details[open] summary::after, .faq details[open] summary::after { transform: rotate(45deg); }

/* Momento firma: las balsas se llenan una a una al cargar, como el agua entrando en la salina */
@media (prefers-reduced-motion: no-preference) {
  .plano--portada .balsa { animation: llena-balsa 700ms var(--ease-out) both; }
  .plano--portada .balsa > * { animation: aparece 500ms var(--ease-out) both; }
  .plano--portada .a-web .balsa, .plano--portada .a-web .balsa > * { animation-delay: 80ms; }
  .plano--portada .a-google .balsa, .plano--portada .a-google .balsa > * { animation-delay: 150ms; }
  .plano--portada .a-admin .balsa, .plano--portada .a-admin .balsa > * { animation-delay: 220ms; }
  .plano--portada .a-numeros .balsa, .plano--portada .a-numeros .balsa > * { animation-delay: 290ms; }
  .plano--portada .a-salida, .plano--portada .a-salida > * { animation-delay: 380ms; }
}
@keyframes llena-balsa { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } }

/* Botón fijo de WhatsApp: entra una vez y se aparta cuando ya hay otro botón de WhatsApp a la vista */
.whatsapp-fijo { transition: transform var(--medio) var(--ease-out), opacity var(--medio) var(--ease-out), background-color var(--medio) var(--ease-out); }
@starting-style { .whatsapp-fijo { opacity: 0; transform: translateY(12px) scale(.96); } }
.whatsapp-fijo.apartado { opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none; }

/* Reducir movimiento: sin desplazamientos; solo cambios de opacidad o nada */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-property: opacity, background-color, color, border-color !important; }
  details::details-content { transition: none; }
  .whatsapp-fijo.apartado { transform: none; }
}
.nav__abrir.actual { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
@media (min-width: 1040px) { .indice { grid-template-columns: repeat(4, 1fr); } }
.tarifa--texto { margin-top: 0; }
.tarifa--texto > div:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.tarifa--texto dd { font-size: 1.25rem; }
.tarifa--texto dt { font-size: 1rem; }

/* Cómo trabajamos: seis pasos, del agua de mar a la sal */
.proceso--seis h3 { font-size: 1.25rem; line-height: 1.15; }
.proceso--seis li:nth-child(4) { background: var(--salmuera); color: var(--sobre-claro); }
.proceso--seis li:nth-child(5), .proceso--seis li:nth-child(6) { background: var(--sal-pura); color: var(--tinta); }
@media (min-width: 900px) { .proceso--seis { grid-template-columns: repeat(3, 1fr); } .proceso--seis li { min-height: 220px; } }

/* Compromisos en bloques */
.compromisos { list-style: none; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .compromisos { grid-template-columns: repeat(4, 1fr); } }
.compromisos .balsa { padding: 18px; min-height: 128px; justify-content: flex-end; }
.compromisos h3 { font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); line-height: 1.15; }
.compromisos p { font-size: 0.9375rem; }
.aviso-grande .h3 { font-size: 1rem; letter-spacing: 0; margin-bottom: 8px; }

/* Precios: un bloque por área, con línea de puntos entre servicio y precio */
.bloques-precios { grid-template-columns: 1fr; }
@media (min-width: 900px) { .bloques-precios { grid-template-columns: 1fr 1fr; } }
.bloques-precios > .balsa { padding: clamp(22px, 3vw, 32px); gap: 14px; justify-content: flex-start; }
.bloques-precios h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
.tarifa--puntos > div { border-top: 0; padding-block: 8px; }
.tarifa--puntos dt { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; font-size: 1rem; }
.tarifa--puntos dt::after { content: ""; flex: 1 0 24px; border-bottom: 2px dotted currentColor; opacity: .45; transform: translateY(-0.3em); }
.tarifa--puntos dd { font-size: 1.25rem; }
.matiz { font-size: 0.875rem; font-weight: 500; }
.tarifa--puntos > div { flex-wrap: wrap; }
.tarifa--puntos dt { flex-wrap: nowrap; }
.tarifa--puntos dd.matiz { flex-basis: 100%; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; margin-top: -2px; white-space: normal; }
.compromisos h3 { hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 899px) { .compromisos h3 { font-size: 1rem; } .compromisos .balsa { padding: 14px; } }

/* Contacto */
.contacto-vias { list-style: none; grid-template-columns: 1fr; }
@media (min-width: 700px) { .contacto-vias { grid-template-columns: 1fr 1fr; } }
.contacto-vias .balsa { padding: clamp(20px, 3vw, 30px); gap: 10px; }
.contacto-vias h2 { font-size: 1.25rem; letter-spacing: -0.01em; }
.contacto-vias .correo { font-weight: 800; font-size: clamp(1rem, .9rem + .4vw, 1.125rem); overflow-wrap: break-word; }
.contacto-vias .boton { margin-top: 8px; width: 100%; }
.fundador__linea { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }

/* Textos legales */
.texto-legal { max-width: 72ch; display: grid; gap: 14px; }
.texto-legal h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); margin-top: 28px; letter-spacing: -0.02em; }
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal ul { padding-left: 1.2em; display: grid; gap: 8px; }
.datos-legales { margin: 0; border-top: 2px solid var(--tinta); }
.datos-legales > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding-block: 12px; border-bottom: 1px solid var(--dique); }
@media (min-width: 600px) { .datos-legales > div { grid-template-columns: 9rem 1fr; gap: 16px; } }
.datos-legales dt { font-weight: 700; }
.datos-legales dd { margin: 0; overflow-wrap: break-word; }
.pendiente { background: #F7D6DD; box-shadow: inset 0 -3px 0 var(--flamenco); color: #172A3A; padding: 0 4px; font-weight: 700; }
dd.pendiente { justify-self: start; }
.actualizado { margin-top: 24px; color: var(--tinta-2); font-size: 0.9375rem; }

/* Enlaces de texto en verde mar (sobre fondo claro) */
.enlace-flecha, .texto-legal a, .faq a, .servicio__texto a, .nota-precios a, .portada .nota a, .datos-legales a { color: var(--enlace); }
.cierre .enlace-flecha, .cierre a { color: inherit; }
/* El icono marino del logo, visible también sobre el fondo oscuro */
[data-theme-actual="dark"] .marca img { outline: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; }
/* Dentro de una balsa de color, los enlaces toman el color del texto de la balsa */
.balsa a, .balsa .enlace-flecha, .servicio__balsa a { color: inherit; }