/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Los dos colores principales de dalpools.es. Las secciones alternan
     entre ellos: una sección de fondo blanco, la siguiente de fondo azul.
     Cuando el fondo es azul, texto y títulos van en blanco; cuando el
     fondo es blanco, texto y títulos van en azul. */
  --blue:       #0C3861;
  --white:      #FFFFFF;

  /* Acento claro — solo para highlights puntuales (hover, subrayados),
     nunca como fondo de sección. */
  --accent:     #BBD6EF;

  --bg:         var(--white);

  /* --text / --line son los tokens "de sección": por defecto (sección
     blanca) van en azul; dentro de .section-alt (sección azul) se
     redefinen a blanco. Todo lo que se apoya en estos tokens se adapta
     solo al cambiar de sección. */
  --text:       var(--blue);
  --text-soft:  rgba(12,56,97,0.75);
  --text-mute:  rgba(12,56,97,0.55);
  --line:       rgba(12,56,97,0.18);
  --line-soft:  rgba(12,56,97,0.10);

  /* --card-* son fijos: los usan las "tarjetas" (pillars, steps, segments,
     estén en la sección que estén, para que el texto nunca desaparezca. */
  --card-text:      var(--blue);
  --card-text-soft: rgba(12,56,97,0.75);
  --card-text-mute: rgba(12,56,97,0.55);
  --card-line:      rgba(12,56,97,0.14);

  /* Nombres de fuente propios y únicos (no "Questrial"/"DM Sans" a secas):
     el tema de WordPress ya tiene sus propias fuentes con esos mismos
     nombres cargadas en la página, y el navegador puede confundir cuál usar
     cuando dos @font-face declaran el mismo nombre. Con un nombre exclusivo
     de esta página no hay forma de que choquen. */
  --dp30-display: "DP30Questrial", "Segoe UI", Arial, sans-serif;
  --dp30-sans:    "DP30DMSans", "Segoe UI", Arial, sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-fast: cubic-bezier(0.4, 0, 0.2, 1);

  --radius: 3px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 1180px;
}

/* Fuentes autoalojadas (mismos ficheros que serviría Google Fonts, pero
   con nombre propio — ver nota en --display/--sans arriba). Subconjunto
   "latin" (cubre español: áéíóúñü) — es lo único que necesita esta página. */
@font-face {
  font-family: "DP30Questrial";
  src: url("lib/fonts/questrial-400.woff2") format("woff2");
  font-weight: 400; /* peso único real del archivo — declarar un rango aquí le
    diría al navegador que el archivo ya cubre 600 "de verdad" y dejaría de
    fingir la negrita (synthetic bold) que sí queremos ver en los títulos */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DP30DMSans";
  src: url("lib/fonts/dmsans-var.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
:where(#dp30) *, :where(#dp30) *::before, :where(#dp30) *::after { box-sizing: border-box; margin: 0; }
html, body { margin: 0; } /* body tiene un margen por defecto del navegador (~8px) que #dp30, por dentro, no puede quitarle */
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Nota: aquí va #dp30 directamente (sin descendiente) — html y body son
   contenedores de TODA la página, nunca algo "dentro de" #dp30, así que
   estas reglas se aplican al propio #dp30 en vez de a body. */
#dp30 {
  font-family: var(--dp30-sans) !important;
  font-size: 16px !important;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

/* Blindaje contra la tipografía global del tema de WordPress: el tema pone
   su propia fuente directamente en p, span, li... y eso pesa más que
   heredarlo de #dp30, así que se fuerza aquí explícitamente. El color NO
   se toca aquí: cada elemento ya tiene su color correcto puesto en su
   propia regla (var(--text), var(--card-text)...) en el resto de este
   fichero — forzarlo aquí también rompería esos colores ya correctos.
   Nota: sin :where() a propósito, para ganar en especificidad además de
   por !important — el tema puede tener sus propias reglas !important. */
#dp30 p, #dp30 span, #dp30 li, #dp30 label,
#dp30 button, #dp30 input, #dp30 textarea, #dp30 select,
#dp30 a {
  font-family: var(--dp30-sans) !important;
}

:where(#dp30) [hidden] { display: none !important; } /* gana siempre, aunque el elemento tenga display:flex/inline-flex propio */
:where(#dp30) img, :where(#dp30) svg, :where(#dp30) video { display: block; max-width: 100%; }
:where(#dp30) img { height: auto; }
:where(#dp30) button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
:where(#dp30) a { color: inherit; text-decoration: none; }
:where(#dp30) p { text-wrap: pretty; }
:where(#dp30) ul, :where(#dp30) ol { list-style: none; padding: 0; }
#dp30 h1, #dp30 h2, #dp30 h3, #dp30 h4 {
  font-family: var(--dp30-display) !important;
  font-weight: 600 !important;
  /* Questrial solo tiene un peso real — el "negrita sintética" del navegador
     para el peso 600 sale demasiado sutil con este archivo autoalojado, así
     que se refuerza el trazo directamente para que se vea como en el resto
     de dalpools.es. */
  -webkit-text-stroke: 1.1px currentColor;
  text-wrap: balance;
  line-height: 1.05 !important;
  letter-spacing: -0.01em;
  color: var(--text) !important;
}
:where(#dp30) ::selection { background: var(--accent); color: var(--blue); }

:where(#dp30) :focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
:where(#dp30) .skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .7rem 1.2rem; background: var(--blue); color: var(--white);
  z-index: 9999; border-radius: 2px; font-weight: 600;
  transition: top .25s var(--ease-out);
}
:where(#dp30) .skip-link:focus { top: 1rem; }

:where(#dp30) .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
:where(#dp30) .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:where(#dp30) .kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--dp30-sans); font-weight: 700; font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text);
}
:where(#dp30) .kicker::before {
  content: ""; width: 18px; height: 1px; background: currentColor;
}

:where(#dp30) .section-num {
  font-family: var(--dp30-display); font-size: .8rem; letter-spacing: .08em;
  color: var(--text-mute);
}

:where(#dp30) .section-head { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
#dp30 .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem) !important; margin-top: .6rem; }
#dp30 .section-head p { margin-top: .9rem; color: var(--text-soft) !important; font-size: 1.05rem !important; }

/* --- Cabecera de sección con foto al lado (Precio y plazo) --- */
:where(#dp30) .section-head-grid {
  display: grid; gap: clamp(1.75rem, 5vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}
:where(#dp30) .section-head-grid .section-head { max-width: none; margin-bottom: 0; }
@media (min-width: 960px) { :where(#dp30) .section-head-grid { grid-template-columns: 1.35fr .65fr; } }
:where(#dp30) .section-head-photo {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--card-line);
}
:where(#dp30) .section-head-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: saturate(1.04) contrast(1.02);
}
@media (max-width: 959px) { :where(#dp30) .section-head-photo img { aspect-ratio: 16 / 9; } }

/* --- Foto banner ancha entre la intro y el contenido (Qué incluye) --- */
:where(#dp30) .section-banner-photo {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--card-line);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
:where(#dp30) .section-banner-photo img {
  width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: center 30%;
  filter: saturate(1.04) contrast(1.02);
}
@media (max-width: 719px) { :where(#dp30) .section-banner-photo img { aspect-ratio: 4 / 3; } }

:where(#dp30) [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
}
:where(#dp30) [data-reveal].is-revealed { opacity: 1; transform: none; }

/* =============================================================
   4. Components
   ============================================================= */

/* --- Buttons --- */
:where(#dp30) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem;
  font-family: var(--dp30-sans); font-weight: 700; font-size: .95rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: background-color .15s var(--ease-fast), color .15s var(--ease-fast), border-color .15s var(--ease-fast), transform .2s var(--ease-out);
}
:where(#dp30) .btn:active { transform: translateY(1px); }
:where(#dp30) .btn:disabled, :where(#dp30) .btn-outline-blue:disabled {
  opacity: .45; cursor: not-allowed; transform: none;
}

#dp30 .btn-primary {
  background: var(--blue) !important; color: var(--white) !important; border-color: var(--blue) !important;
}
#dp30 .btn-primary:hover {
  background: var(--accent) !important; color: var(--blue) !important; border-color: var(--accent) !important;
}

:where(#dp30) .btn-block { width: 100%; }

:where(#dp30) .btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95rem 2rem;
  font-family: var(--dp30-sans); font-weight: 600; font-size: .95rem;
  color: var(--white) !important; background: transparent !important;
  border: 1px solid var(--white); border-radius: 0;
  transition: background-color .15s var(--ease-fast), color .15s var(--ease-fast);
}
#dp30 .btn-outline:hover { background: var(--accent) !important; color: var(--blue) !important; border-color: var(--accent) !important; }

/* --- Tarjetas: siempre fondo blanco, estén en la sección que estén --- */
:where(#dp30) .card {
  background: var(--white);
  color: var(--card-text);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
}

/* --- Forms --- */
:where(#dp30) .field { display: flex; flex-direction: column; gap: .4rem; }
:where(#dp30) .field label { font-size: .82rem; font-weight: 700; color: var(--card-text-soft); }
:where(#dp30) .field label .opt { font-weight: 400; color: var(--card-text-mute); }
#dp30 .field input, #dp30 .field select, #dp30 .field textarea {
  width: 100%; padding: .8rem .9rem;
  border: 1.5px solid var(--card-line); border-radius: var(--radius);
  background: var(--white) !important; color: var(--card-text) !important;
  font-family: var(--dp30-sans); font-size: .96rem;
  transition: border-color .2s var(--ease-fast);
}
:where(#dp30) .field input:focus, :where(#dp30) .field select:focus, :where(#dp30) .field textarea:focus {
  border-color: var(--blue); outline: none;
}
:where(#dp30) .field textarea { resize: vertical; min-height: 88px; }
:where(#dp30) .field-file {
  border: 1.5px dashed var(--card-line); border-radius: var(--radius);
  padding: 1rem; text-align: center; color: var(--card-text-mute); font-size: .88rem;
}
:where(#dp30) .field-file-status {
  display: block; margin-top: .4rem; font-size: .8rem; color: var(--card-text-mute);
}
:where(#dp30) .field-file-status.is-warn { color: #A02824; }

/* =============================================================
   5. Sections
   ============================================================= */

/* --- Hero — banner de página de servicio (mismo patrón que el resto de
   dalpools.es: fondo oscuro con foto, min-height 60vh, todo centrado,
   H1 blanco Questrial, subtítulo de una línea, un único botón outline). --- */
:where(#dp30) .page-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 9vw, 6em) clamp(2.5rem, 6vw, 3.5rem);
  background: #00061A;
  overflow: hidden;
  isolation: isolate;
}
:where(#dp30) .page-hero-media { position: absolute; inset: 0; z-index: -1; }
:where(#dp30) .page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
:where(#dp30) .page-hero-overlay { position: absolute; inset: 0; background: #00061A; opacity: .82; }
:where(#dp30) .page-hero-inner {
  position: relative; text-align: center;
  max-width: 46rem; margin-inline: auto;
}
#dp30 .page-hero-inner h1 {
  color: var(--white) !important;
  font-size: 30px !important;
}
@media (min-width: 720px) { #dp30 .page-hero-inner h1 { font-size: 40px !important; } }
@media (min-width: 960px) { #dp30 .page-hero-inner h1 { font-size: 60px !important; } }
:where(#dp30) .page-hero-inner p {
  margin-top: 1.2rem; color: rgba(255,255,255,0.86);
  font-size: 17px;
}
:where(#dp30) .page-hero-inner p u { text-decoration-color: var(--accent); text-underline-offset: 3px; }
:where(#dp30) .page-hero-inner .btn-outline { margin-top: 2rem; }

/* --- Generic section spacing + alternancia de color --- */
:where(#dp30) .section { padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--white); }
:where(#dp30) .section-alt {
  background: var(--blue);
  color: var(--white);
  --text: var(--white);
  --text-soft: rgba(255,255,255,0.85);
  --text-mute: rgba(255,255,255,0.62);
  --line: rgba(255,255,255,0.30);
  --line-soft: rgba(255,255,255,0.16);
}

/* --- Control: tabla + esquema técnico en dos columnas --- */
:where(#dp30) .control-layout {
  display: grid; gap: clamp(2rem, 5vw, 3rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  align-items: start;
}
@media (min-width: 960px) { :where(#dp30) .control-layout { grid-template-columns: 1.1fr .9fr; } }
:where(#dp30) .control-table { border-top: 1px solid var(--line); }
:where(#dp30) .control-row {
  display: grid; grid-template-columns: 1fr; gap: .3rem;
  padding: 1.2rem 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  :where(#dp30) .control-row { grid-template-columns: 1fr 2fr; align-items: baseline; gap: 1.5rem; }
}
#dp30 .control-row h3 { font-size: 1.02rem; color: var(--text) !important; }
:where(#dp30) .control-row p { font-size: .95rem; color: var(--text-soft); }

:where(#dp30) .control-visual {
  position: relative;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 2rem);
}
:where(#dp30) .control-visual svg { width: 100%; height: auto; }
:where(#dp30) .control-visual-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--card-line);
  font-size: .78rem; color: var(--card-text-mute); letter-spacing: .04em;
}
:where(#dp30) .control-visual-caption strong { color: var(--card-text); font-family: var(--dp30-display); font-size: 1.1rem; }

/* --- Plazo y precio --- */
:where(#dp30) .pillars {
  display: grid; gap: 1px; background: var(--card-line);
  border: 1px solid var(--card-line); border-radius: var(--radius); overflow: hidden;
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 720px) { :where(#dp30) .pillars { grid-template-columns: repeat(3, 1fr); } }
:where(#dp30) .pillar { background: var(--white); color: var(--card-text); padding: 1.6rem; }
#dp30 .pillar h3 { font-size: 1.05rem; margin-bottom: .5rem; color: var(--card-text) !important; }
:where(#dp30) .pillar p { font-size: .92rem; color: var(--card-text-soft); }

:where(#dp30) .payment-block { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
:where(#dp30) .payment-block-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; }
:where(#dp30) .payment-block-head h3 { font-size: 1.3rem; }
:where(#dp30) .payment-block-head p { color: var(--text-soft); }
:where(#dp30) .pay-rows { border-top: 1px solid var(--line); }
:where(#dp30) .pay-row {
  display: grid; align-items: center;
  grid-template-columns: 2rem 1fr auto; gap: .5rem 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line-soft);
}
:where(#dp30) .pay-row-num { font-family: var(--dp30-display); font-size: .85rem; color: var(--text-mute); }
:where(#dp30) .pay-row-label { font-size: .95rem; font-weight: 500; color: var(--text); }
:where(#dp30) .pay-row-bar {
  grid-column: 1 / -1;
  display: block; height: 8px; background: var(--line-soft); border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line-soft);
}
:where(#dp30) .pay-row-bar-fill { display: block; height: 100%; background: currentColor; color: var(--text); }
:where(#dp30) .pay-row-pct { font-family: var(--dp30-display); font-size: 1.05rem; color: var(--text); text-align: right; }
:where(#dp30) .pay-row-acc { grid-column: 1 / -1; font-size: .78rem; color: var(--text-mute); }
@media (min-width: 640px) {
  :where(#dp30) .pay-row { grid-template-columns: 2rem 1fr 6rem 9rem; }
  :where(#dp30) .pay-row-bar { grid-column: auto; order: 3; }
  :where(#dp30) .pay-row-pct { order: 4; }
  :where(#dp30) .pay-row-acc { grid-column: auto; order: 5; text-align: right; }
}

/* --- Callout "una piscina al 95% no está terminada" — tarjeta blanca fija,
   para que siempre contraste con la sección (esté en blanco o en azul). --- */
:where(#dp30) .callout {
  background: var(--white); color: var(--card-text);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.2rem);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: grid; gap: 1.5rem;
}
@media (min-width: 860px) { :where(#dp30) .callout { grid-template-columns: 1fr 1fr; align-items: center; } }
:where(#dp30) .callout-quote {
  font-family: var(--dp30-display); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.15; color: var(--card-text);
}
:where(#dp30) .callout p.callout-body { color: var(--card-text-soft); font-size: .98rem; }

/* --- Cómo funciona (numbered steps) — tarjetas blancas --- */
:where(#dp30) .steps { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: 1px; background: var(--card-line); border: 1px solid var(--card-line); }
@media (min-width: 720px) { :where(#dp30) .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { :where(#dp30) .steps { grid-template-columns: repeat(3, 1fr); } }
:where(#dp30) .step { padding: 1.6rem; background: var(--white); }
:where(#dp30) .step-num {
  font-family: var(--dp30-display); font-size: 2rem; display: block;
  color: transparent; -webkit-text-stroke: 1px var(--blue);
}
#dp30 .step h3 { font-size: 1.05rem; margin-top: .6rem; color: var(--card-text) !important; }
:where(#dp30) .step p { font-size: .9rem; color: var(--card-text-soft); margin-top: .4rem; }

/* --- Incluye / no incluye --- */
:where(#dp30) .include-grid { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: 2rem; }
@media (min-width: 860px) { :where(#dp30) .include-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
:where(#dp30) .include-col h3 { font-size: 1.1rem; margin-bottom: 1rem; }
#dp30 .include-col.is-yes h3 { color: var(--text) !important; }
#dp30 .include-col.is-no h3 { color: var(--text-mute) !important; }
:where(#dp30) .include-list { display: flex; flex-direction: column; gap: .6rem; }
:where(#dp30) .include-list li {
  font-size: .92rem; padding-left: 1.3rem; position: relative; color: var(--text-soft);
}
:where(#dp30) .include-col.is-yes .include-list li::before {
  content: "+"; position: absolute; left: 0; color: var(--text); font-weight: 700;
}
:where(#dp30) .include-col.is-no .include-list li::before {
  content: "–"; position: absolute; left: 0; color: var(--text-mute); font-weight: 700;
}

:where(#dp30) .control-note-grid {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid; gap: 1px; background: var(--card-line);
  border: 1px solid var(--card-line); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 860px) { :where(#dp30) .control-note-grid { grid-template-columns: repeat(3, 1fr); } }
:where(#dp30) .control-note { background: var(--white); padding: 1.5rem; }
#dp30 .control-note h4 { font-size: .98rem; color: var(--card-text) !important; margin-bottom: .5rem; }
:where(#dp30) .control-note p { font-size: .88rem; color: var(--card-text-soft); }

/* --- Galería --- */
:where(#dp30) .gallery { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: 1.2rem; }
@media (min-width: 720px) { :where(#dp30) .gallery { grid-template-columns: repeat(3, 1fr); } }
:where(#dp30) .gallery-item {
  background: var(--white);
  border: 1px solid var(--card-line); border-radius: var(--radius); overflow: hidden;
}
:where(#dp30) .gallery-item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(1.04) contrast(1.02);
  transition: transform .6s var(--ease-soft);
}
:where(#dp30) .gallery-item:hover img { transform: scale(1.045); }
:where(#dp30) .gallery-item figcaption {
  padding: .7rem .9rem; font-size: .82rem; color: var(--card-text-mute);
  border-top: 1px solid var(--card-line);
}

/* --- Para quién — tarjetas blancas --- */
:where(#dp30) .segments { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: 1.2rem; }
@media (min-width: 860px) { :where(#dp30) .segments { grid-template-columns: repeat(3, 1fr); } }
:where(#dp30) .segment { background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 1.6rem; }
#dp30 .segment h3 { font-size: 1.1rem; color: var(--card-text) !important; }
:where(#dp30) .segment p { font-size: .92rem; color: var(--card-text-soft); margin-top: .6rem; }

/* --- Tu terreno — mapa por satélite, tarjeta blanca --- */
:where(#dp30) .terrain-tool {
  margin-top: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--card-line); border-radius: var(--radius);
  padding: clamp(1.25rem, 3.5vw, 2rem);
  background: var(--white); color: var(--card-text);
}
:where(#dp30) .terrain-search { position: relative; z-index: 1; margin-bottom: 1rem; }
#dp30 .terrain-search input {
  width: 100%; padding: .8rem .9rem;
  border: 1.5px solid var(--card-line); border-radius: var(--radius);
  background: var(--white) !important; color: var(--card-text) !important;
  font-family: var(--dp30-sans); font-size: .96rem;
}
:where(#dp30) .terrain-search input:focus { border-color: var(--blue); outline: none; }
:where(#dp30) .terrain-suggestions {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(12,56,97,.14);
  max-height: 260px; overflow-y: auto;
}
:where(#dp30) .terrain-suggestions li button {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; text-align: left; padding: .85rem .9rem;
  font-size: .92rem; color: var(--card-text); cursor: pointer;
}
:where(#dp30) .terrain-suggestions li button::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px;
  background-color: var(--blue);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center / contain no-repeat;
}
:where(#dp30) .terrain-suggestions li button:hover,
:where(#dp30) .terrain-suggestions li button:focus-visible { background: var(--accent); }
:where(#dp30) .terrain-suggestions li + li { border-top: 1px solid var(--card-line); }
:where(#dp30) .terrain-suggestions-empty { padding: .8rem .9rem; font-size: .85rem; color: var(--card-text-mute); }

:where(#dp30) .terrain-map {
  position: relative; z-index: 0; /* aísla las capas internas del mapa (que usan números de capa muy altos) para que nunca puedan tapar nada de fuera, como la lista de sugerencias */
  height: 420px; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--card-line);
  background: var(--card-line);
}
:where(#dp30) .terrain-map .leaflet-container { font-family: var(--dp30-sans); }

:where(#dp30) .terrain-actions {
  margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
}
:where(#dp30) .terrain-hint { font-size: .85rem; color: var(--card-text-mute); }

:where(#dp30) .btn-outline-blue {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95rem 1.7rem;
  font-family: var(--dp30-sans); font-weight: 700; font-size: .95rem;
  color: var(--blue) !important; background: transparent !important;
  border: 1.5px solid var(--card-line); border-radius: var(--radius);
  transition: background-color .15s var(--ease-fast), border-color .15s var(--ease-fast);
}
#dp30 .btn-outline-blue:hover { background: var(--bg-tint, #F4F8FC) !important; border-color: var(--blue) !important; color: var(--blue) !important; }

:where(#dp30) .terrain-result {
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--card-line);
}
:where(#dp30) .terrain-result-value { font-family: var(--dp30-display); font-weight: 600; font-size: 1.5rem; color: var(--blue); }
:where(#dp30) .terrain-result-note { margin-top: .3rem; color: var(--card-text-mute); font-size: .85rem; }
:where(#dp30) .terrain-result .btn { margin-top: 1rem; }

/* Marcador y polígono dibujados — colores de marca en vez de los de Leaflet por defecto */
:where(#dp30) .terrain-pin { width: 26px; height: 26px; }
:where(#dp30) .leaflet-draw-tooltip { font-family: var(--dp30-sans); }
:where(#dp30) .leaflet-popup-content-wrapper, :where(#dp30) .leaflet-popup-tip { background: var(--white); color: var(--card-text); }

/* --- Calculadora — tarjeta blanca --- */
:where(#dp30) .calc-box {
  margin-top: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--card-line); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--white); color: var(--card-text);
}
:where(#dp30) .calc-grid { display: grid; gap: 1.1rem; }
@media (min-width: 720px) { :where(#dp30) .calc-grid { grid-template-columns: repeat(3, 1fr); } }
:where(#dp30) .calc-msg { font-size: .95rem; color: var(--card-text); }
:where(#dp30) .calc-msg-range { font-size: 1.15rem; }
:where(#dp30) .calc-msg-note, :where(#dp30) .calc-msg-warn { color: var(--card-text-mute); font-size: .85rem; margin-top: .4rem; }
:where(#dp30) [data-calc-result] { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--card-line); }
:where(#dp30) [data-calc-result][hidden] { display: none; }

/* --- Lead form — tarjeta blanca --- */
:where(#dp30) .lead-box {
  margin-top: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--card-line); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--white);
}
:where(#dp30) .lead-grid { display: grid; gap: 1.1rem; }
@media (min-width: 720px) { :where(#dp30) .lead-grid { grid-template-columns: repeat(2, 1fr); } }
:where(#dp30) .lead-grid .field-full { grid-column: 1 / -1; }
:where(#dp30) .lead-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; color: var(--card-text-mute); grid-column: 1 / -1; }
:where(#dp30) .lead-consent a { color: var(--card-text); text-decoration: underline; }
:where(#dp30) .lead-consent input { margin-top: .2rem; }
:where(#dp30) .lead-submit { margin-top: 1.4rem; }
:where(#dp30) .lead-success, :where(#dp30) .lead-error {
  background: var(--white);
  border: 1px solid var(--card-line); border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.6rem); text-align: center;
}
:where(#dp30) .lead-success[hidden], :where(#dp30) .lead-error[hidden] { display: none; }
#dp30 .lead-success h3 { font-size: 1.3rem; color: var(--card-text) !important; }
:where(#dp30) .lead-success p { margin-top: .6rem; color: var(--card-text-soft); }
#dp30 .lead-error h3 { font-size: 1.3rem; color: #A02824 !important; }
:where(#dp30) .lead-error p { margin-top: .6rem; color: var(--card-text-soft); }
:where(#dp30) .lead-error a { color: var(--card-text); text-decoration: underline; }
:where(#dp30) .lead-error .btn { margin-top: 1.2rem; }

/* --- FAQ --- */
:where(#dp30) .faq { margin-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--line); }
:where(#dp30) .faq details {
  border-bottom: 1px solid var(--line);
  padding: 1.2rem 0;
}
:where(#dp30) .faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--dp30-display); font-weight: 600; font-size: 1.05rem; color: var(--text);
}
:where(#dp30) .faq summary::-webkit-details-marker { display: none; }
:where(#dp30) .faq summary::after {
  content: "+"; font-size: 1.4rem; color: var(--text); flex-shrink: 0;
  transition: transform .25s var(--ease-out);
}
:where(#dp30) .faq details[open] summary::after { transform: rotate(45deg); }
:where(#dp30) .faq details p { margin-top: .8rem; color: var(--text-soft); font-size: .95rem; max-width: 68ch; }

/* --- Final CTA — foto real de fondo, mismo tratamiento que el hero --- */
:where(#dp30) .cta-final {
  position: relative;
  background: var(--blue); color: var(--white);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
:where(#dp30) .cta-final-media { position: absolute; inset: 0; z-index: -1; }
:where(#dp30) .cta-final-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
:where(#dp30) .cta-final-overlay { position: absolute; inset: 0; background: var(--blue); opacity: .84; }
:where(#dp30) .cta-final-inner { position: relative; }
#dp30 .cta-final h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--white) !important; max-width: 22ch; margin-inline: auto; }
:where(#dp30) .cta-final p { margin-top: 1rem; color: rgba(255,255,255,0.82); max-width: 52ch; margin-inline: auto; }
#dp30 .cta-final .btn-primary { margin-top: 2rem; background: var(--white) !important; color: var(--blue) !important; border-color: var(--white) !important; }
#dp30 .cta-final .btn-primary:hover { background: var(--accent) !important; color: var(--blue) !important; border-color: var(--accent) !important; }

/* =============================================================
   6. Reduced motion — only the truly intrusive
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  :where(#dp30) [data-reveal] { transition-duration: .25s; }
}