/* ═══════════════════════════════════════════════════════════════
   ES: Estilos de /contacto
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────── */
.ctc-hero {
  background: var(--navy, #0B1F33);
  padding-top: var(--nav-h, 72px);
}
.ctc-hero-inner {
  padding-top: var(--esp-64); padding-bottom: var(--esp-64);
  max-width: 660px;
}
.ctc-eyebrow {
  font: 600 .72rem/1 var(--font-body, Inter, sans-serif);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--coral); margin: 0 0 var(--esp-12); display: block;
}
.ctc-hero-title {
  font: 800 clamp(2rem, 4.5vw, 3rem)/1.1 var(--font-head, Archivo, sans-serif);
  color: #fff; margin: 0 0 var(--esp-16);
}
.ctc-hero-desc {
  font-size: clamp(.95rem, 2vw, 1.1rem); color: rgba(255,255,255,.7);
  line-height: 1.65; margin: 0 0 var(--esp-32);
}
.ctc-hero-btns { display: flex; gap: var(--esp-12); flex-wrap: wrap; }

.btn-ctc-phone {
  display: inline-flex; align-items: center; gap: var(--esp-10);
  background: #fff; color: var(--navy, #0B1F33); border-radius: 100px;
  padding: var(--esp-12) var(--esp-24); font: 700 1rem/1 var(--font-head, Archivo, sans-serif);
  text-decoration: none; transition: background .2s, transform .2s;
}
.btn-ctc-phone svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-ctc-phone:hover { background: #f0f0f0; transform: translateY(-2px); }

.btn-ctc-wa {
  display: inline-flex; align-items: center; gap: var(--esp-10);
  background: #25D366; color: #fff; border-radius: 100px;
  padding: var(--esp-12) var(--esp-24); font: 700 1rem/1 var(--font-head, Archivo, sans-serif);
  text-decoration: none; transition: background .2s, transform .2s;
}
.btn-ctc-wa svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-ctc-wa:hover { background: #1ebe58; transform: translateY(-2px); }

/* ── Sección principal ─────────────────────────────────────── */
.ctc-section { padding: 96px 0; }
.ctc-main-section { background: var(--cream, #F7F5F0); }

.ctc-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--esp-64); align-items: start;
}
.ctc-layout > *,
.ctc-form-col,
.ctc-form,
.ctc-form .form-row,
.ctc-form .form-group { min-width: 0; }

/* ── Formulario ─────────────────────────────────────────────── */
.ctc-col-eyebrow {
  font: 600 .7rem/1 var(--font-body, Inter, sans-serif);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--coral); margin: 0 0 var(--esp-10); display: block;
}
.ctc-col-title {
  font: 800 clamp(1.4rem, 3vw, 2rem)/1.2 var(--font-head, Archivo, sans-serif);
  color: var(--navy, #0B1F33); margin: 0 0 var(--esp-10);
}
.ctc-col-desc { font-size: .95rem; color: var(--gray, #8A94A6); margin: 0 0 var(--esp-24); line-height: 1.6; }

.ctc-form { display: flex; flex-direction: column; gap: 0; }

/* Reuse global form classes from inspecciones.css */
.ctc-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-16); margin-bottom: var(--esp-16); }
.ctc-form .form-row:has(.form-group:only-child) { grid-template-columns: 1fr; }
.ctc-form .form-group { display: flex; flex-direction: column; gap: var(--esp-6); }
.ctc-form label { font: 600 .82rem/1 var(--font-body, Inter, sans-serif); color: var(--navy, #0B1F33); }
.ctc-form label span { color: var(--coral); }
.ctc-form input,
.ctc-form select,
.ctc-form textarea {
  border: 1.5px solid #ddd9d2; border-radius: var(--radio-10);
  padding: var(--esp-12) var(--esp-12); font: .93rem/1.5 var(--font-body, Inter, sans-serif);
  color: var(--navy, #0B1F33); background: #fff;
  transition: border-color .2s, box-shadow .2s;
  width: 100%; box-sizing: border-box;
}
.ctc-form input:focus,
.ctc-form select:focus,
.ctc-form textarea:focus {
  outline: none; border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255,107,74,.12);
}
.ctc-form textarea { resize: vertical; min-height: 100px; }

.btn-ctc-submit {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--coral); color: #fff; border: none;
  border-radius: 100px; padding: 15px var(--esp-32);
  font: 700 1rem/1 var(--font-head, Archivo, sans-serif);
  cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s;
  margin-top: var(--esp-8); width: 100%;
}
.btn-ctc-submit:hover:not(:disabled) { background: #e85d3e; transform: translateY(-2px); box-shadow: 0 12px 36px rgba(255,107,74,.35); }
.btn-ctc-submit:disabled { opacity: .65; cursor: not-allowed; }

.ctc-form-note { font-size: .78rem; color: var(--gray, #8A94A6); text-align: center; margin: var(--esp-12) 0 0; }

.ctc-form-feedback {
  border-radius: var(--radio-10); padding: var(--esp-12) var(--esp-16); margin-top: var(--esp-16);
  font-size: .9rem; line-height: 1.5;
}
.ctc-form-feedback--success { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.ctc-form-feedback--error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

/* ── Datos de contacto ─────────────────────────────────────── */
.ctc-data-card {
  background: var(--navy, #0B1F33); border-radius: var(--radio-20);
  padding: var(--esp-32) var(--esp-24); position: sticky; top: calc(var(--nav-h, 72px) + 24px);
}
.ctc-data-title {
  font: 700 1.1rem/1.3 var(--font-head, Archivo, sans-serif);
  color: #fff; margin: 0 0 var(--esp-24);
  border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: var(--esp-16);
}
.ctc-data-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--esp-20);
}
.ctc-data-list li { display: flex; gap: var(--esp-12); align-items: flex-start; }
.ctc-data-list li > div:last-child { min-width: 0; }
.ctc-data-icon {
  flex-shrink: 0; width: 36px; height: 36px;
  border-radius: var(--radio-10); background: rgba(255,255,255,.08);
  display: grid; place-items: center;
}
.ctc-data-icon svg { width: 18px; height: 18px; stroke: rgba(255,255,255,.6); }
.ctc-data-icon--wa { background: rgba(37,211,102,.15); }
.ctc-data-icon--wa svg { fill: #25D366; stroke: none; }
.ctc-data-label { font-size: .72rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--esp-4); }
.ctc-data-value {
  font: 600 .9rem/1.4 var(--font-body, Inter, sans-serif);
  color: #fff; text-decoration: none;
  transition: color .2s;
  overflow-wrap: anywhere;
}
.ctc-data-value:hover { color: var(--coral); }
.ctc-data-value--plain { color: rgba(255,255,255,.75); }

/* ── Área de servicio: un eslogan y los condados en texto ───────
   ES: AQUÍ VIVÍA EL CSS DEL MAPA de Florida —silueta, chinchetas, etiquetas y
       leyenda— y se fue con él. Se retira entero a propósito: CSS huérfano es
       peso que nadie ve y que el siguiente que lea el archivo tiene que
       descartar a mano.
       Lo que queda está pensado MÓVIL PRIMERO: a 390 px el eslogan se lee de
       corrido y los condados van en una sola columna que no se parte. La
       versión de escritorio llega después, en su media query.
   EN: THE FLORIDA MAP'S CSS lived here and left with it. Orphan CSS is weight
       nobody sees. What remains is mobile-first: at 390 px the slogan reads
       straight through and the counties sit in one unbroken column. ── */
.ctc-zona-section { background: #fff; }
.ctc-zona-inner { max-width: 720px; }

.ctc-zona-eslogan {
  /* ES: grande, pero con `clamp` para que a 390 px no atropelle. */
  font: 800 clamp(1.45rem, 6vw, 2.4rem)/1.2 var(--font-head, Archivo, sans-serif);
  color: var(--navy, #0B1F33);
  margin: 0 0 var(--esp-20);
  text-wrap: balance;
}

.ctc-zona-condados {
  list-style: none; margin: 0 0 var(--esp-16); padding: 0;
  /* ES: SIN COLUMNAS A PROPÓSITO. Dos columnas a 390 px parten los nombres
         largos («Miami-Dade», «Palm Beach») y dejan una viuda suelta abajo.
         Una columna se lee y no se rompe nunca. */
  display: flex; flex-direction: column; gap: var(--esp-8);
}
.ctc-zona-condados li {
  font: 600 1rem/1.4 var(--font-body, Inter, sans-serif);
  color: var(--navy, #0B1F33);
  padding-left: var(--esp-12);
  border-left: 2px solid var(--coral, #FF6B4A);
}

.ctc-zona-nota {
  font: 400 .88rem/1.6 var(--font-body, Inter, sans-serif);
  color: var(--gray, #8A94A6);
  margin: 0;
}

@media (min-width: 768px) {
  /* ES: con sitio de sobra, los condados en filas de dos — nunca antes. */
  .ctc-zona-condados {
    flex-direction: row; flex-wrap: wrap;
    gap: var(--esp-10) var(--esp-24);
  }
  .ctc-zona-condados li { flex: 0 0 auto; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .ctc-layout { grid-template-columns: 1fr; gap: var(--esp-40); }
  .ctc-data-card { position: static; }
}
@media (max-width: 767px) {
  .ctc-section { padding: var(--esp-64) 0; }
  .ctc-hero-inner { padding-top: var(--esp-48); }
}
@media (max-width: 767px) {
  .ctc-form .form-row { grid-template-columns: 1fr; }
  .ctc-hero-btns { flex-direction: column; }
  .btn-ctc-phone, .btn-ctc-wa { width: 100%; justify-content: center; }
}

@media (max-width: 767px) {
  .ctc-hero-inner { padding-top: var(--esp-40); padding-bottom: var(--esp-48); }
  .ctc-section { padding: var(--esp-48) 0; }
  .ctc-data-card { padding: var(--esp-24) var(--esp-20); }
}

/* ── El formulario, protagonista y a prueba de dedo ──────────────
   ES: DOS ARREGLOS MEDIDOS EN UN iPHONE EMULADO A 390 px.

   1. LOS CAMPOS A 16 px. En `main.css` ya existe el guardián
      —`input,select,textarea{font-size:max(1rem,16px)}`— pero
      `.form-group input{font-size:.9375rem}` viene después y con
      más especificidad, así que ganaba y los campos medían 15.
      Un solo píxel de menos y iOS HACE ZOOM al tocar el campo: la
      página salta, el visitante pierde el sitio y muchos no
      vuelven. No es cosmético.
      Se acota A ESTA PÁGINA porque la orden es solo /contacto. El
      mismo defecto está en los otros once formularios del sitio y
      se arregla con una línea en `main.css` — pero eso es otra
      página y otra orden.

   2. LA MASCOTA NO SE ARREGLA DESDE AQUÍ, y queda dicho para que
      nadie lo vuelva a intentar. Aquí hubo un `padding-bottom` de
      168 px «para dejarle sitio». NO SERVÍA DE NADA: la burbuja es
      `position:fixed`, así que no está al final de la columna —
      está pegada a la PANTALLA—. Medido a siete alturas de scroll,
      tapaba algo en seis de ellas: el correo, el mensaje, la
      casilla y, en el peor momento, EL BOTÓN DE ENVIAR.
      Un hueco al final de una columna no puede apartar algo que
      flota sobre el cristal. El arreglo de verdad está en la
      burbuja —achicarla en móvil, o que se aparte mientras un
      campo tiene el foco—, y eso es terreno de la mascota, que
      está congelada esperando la ronda de Daniel.
   EN: TWO FIXES MEASURED ON A 390 px EMULATED iPHONE. Fields go to
      16 px —`.form-group input` at 15 px was defeating the global
      guard, and one pixel short makes iOS ZOOM on focus. And room
      is left for the mascot, which was sitting on top of the
      «Teléfono» field by a measured 53x45 px. ── */
.ctc-form-col .form-group input,
.ctc-form-col .form-group select,
.ctc-form-col .form-group textarea {
  font-size: max(1rem, 16px);
}

/* ── La puerta para los de fuera ─────────────────────────────────
   ES: el eslogan del área pasa a ser UNA LÍNEA de apoyo, no un
       titular: el titular de esta sección es la invitación a
       escribir aunque uno esté fuera de la zona. ── */
.ctc-zona-enlace {
  display: inline-block; margin-top: var(--esp-16);
  font: 700 1rem/1 var(--font-body, Inter, sans-serif);
  color: var(--coral, #FF6B4A); text-decoration: none;
  /* ES: 44 px de alto útil: es un enlace, pero se toca con el dedo. */
  padding: 14px 0;
}
.ctc-zona-enlace:hover { text-decoration: underline; }

/* ── Los cuatro campos, uno debajo del otro ──────────────────────
   ES: «Nombre» y «Teléfono» venían en una fila de dos y a 390 px
       cada uno medía 139 px — media palabra por caja. A ancho
       completo se leen y se rellenan de una pasada. Solo hasta
       767 px: en escritorio la fila de dos está bien. ── */
@media (max-width: 767px) {
  .ctc-form-col .form-row { display: block; }
  .ctc-form-col .form-row > * { width: 100%; }
}

/* ── Que el mensaje entre en pantalla ────────────────────────────
   ES: MEDIDO A 390x844. El héroe se comía media pantalla y la
       mitad de eso era aire debajo del texto; la sección del
       formulario abría con 64 px más de relleno; y entre el título
       y la tarjeta había otro hueco. Sumado, el campo de MENSAJE
       —que es a lo que se viene— quedaba a dos pantallas.
       SE RECORTA EL AIRE SOBRANTE, NUNCA LA RESPIRACIÓN DE LOS
       CAMPOS: la separación entre etiqueta y campo, la altura de
       dedo y los 16 px de letra no se tocan. Apretar un formulario
       es peor que hacer bajar un poco.
       Solo hasta 767 px: en escritorio el aire está bien.
   EN: MEASURED AT 390x844. The hero ate half the screen and half of
       that was empty air under the text. The air is trimmed; the
       fields' breathing —label gap, thumb height, 16 px type— is
       not. Cramping a form is worse than a short scroll. ── */
@media (max-width: 767px) {
  .ctc-hero-inner  { padding-top: var(--esp-32); padding-bottom: var(--esp-24); }
  .ctc-main-section { padding-top: var(--esp-32); padding-bottom: var(--esp-40); }
  .ctc-col-title    { margin-bottom: var(--esp-8); }
  .ctc-col-eyebrow  { margin-bottom: var(--esp-4); }
  .ctc-zona-section { padding: var(--esp-40) 0; }
}

/* ── La mascota se aparta del formulario ─────────────────────────
   ES: LA BURBUJA ES `position:fixed` — está pegada a la PANTALLA,
       no a la página—, así que ningún hueco en la columna la
       aparta: se comprobó a siete alturas de scroll y tapaba algo
       en seis, incluido el botón de enviar.
       Lo que SÍ funciona es apartarla en el momento en que estorba:
       en cuanto CUALQUIER campo del formulario tiene el foco, la
       burbuja se va —se apaga y deja de recibir toques—. Y vuelve
       sola al salir del campo.
       `:focus-within` lo resuelve sin una línea de JavaScript: es
       el navegador quien sabe dónde está el dedo.
       Y se achica en móvil: 85 px de ancho sobre una pantalla de
       390 es el 22 % del ancho tapado incluso sin tocar nada.
   EN: THE BUBBLE IS `position:fixed` — glued to the SCREEN, not the
       page — so no gap in the column moves it: measured at seven
       scroll heights, it covered something at six, the submit
       button among them. What works is standing aside exactly when
       it is in the way: the moment ANY form field takes focus, the
       bubble leaves and stops taking taps. `:focus-within` does it
       with no JavaScript at all. ── */
@media (max-width: 767px) {
  /* ES: SE ACHICA POR EL TOKEN, NO POR EL BOTÓN. Poner `width` al
         botón no encoge nada: el dibujo lleva `width:auto` y su
         altura sale de `--spgm-alto`, así que el SVG se salía del
         botón estrecho y seguía midiendo 143 px de alto. Bajando el
         token se encoge de verdad, y la ventana del chat lo sigue
         sola porque su `bottom` se calcula con el mismo token.
         96 px es el alto al que la figura deja de solaparse con el
         botón de enviar en la primera pantalla, medido a 390x844.
     EN: IT SHRINKS VIA THE TOKEN, NOT THE BUTTON. Setting `width` on
         the button shrinks nothing — the drawing is `width:auto` and
         its height comes from `--spgm-alto`, so the SVG simply
         overflowed the narrow button and stayed 143px tall. Lowering
         the token shrinks it for real, and the chat window follows
         by itself since its `bottom` is computed from that token. */
  /* ES: se declara en `body`, no en `:root`, y no es capricho: el
         token nace en un `<style>` EN LÍNEA del parcial de la
         burbuja, que va después de esta hoja y por orden ganaría.
         `body` está más cerca del botón en la cadena de herencia,
         así que gana sin depender de quién se cargue antes.
     EN: declared on `body`, not `:root`: the token is born in an
         INLINE `<style>` that comes after this sheet and would win
         on order. `body` sits closer in the inheritance chain. */
  body { --spgm-alto: 96px; }

  /* ES: MIENTRAS SE ESCRIBE, ELLA SE RECOGE — Y EL BOTÓN SE QUEDA.
         Aquí había `opacity: 0` y `pointer-events: none`, y esa pareja hacía lo
         contrario de lo que hay que hacer: BORRABA al asistente y lo volvía
         INTOCABLE **mientras el visitante rellena el formulario**, que es, con
         diferencia, el momento en que más probable es que tenga una duda. Se
         apagaba la ayuda justo cuando hacía falta.

         AHORA la figura se aparta del formulario, pero **el botón fijo de la
         esquina no se toca**: sigue ahí, entero y pulsable, con sus 44 px. No
         hay ni un instante sin acceso, y por eso esto puede ser suave sin ser
         peligroso.

         FUERA `pointer-events: none`, que es lo innegociable: si se ve, se
         pulsa. Atenuada sí; intocable, nunca.

     EN: WHILE TYPING SHE STEPS ASIDE — AND THE BUTTON STAYS. This used to be
         `opacity: 0` plus `pointer-events: none`, a pair that did the opposite
         of what is needed: it ERASED the assistant and made it UNTOUCHABLE
         exactly while the visitor fills in the form, by far the likeliest
         moment for a question. Now the figure steps away from the form, but the
         FIXED CORNER BUTTON is untouched: still there, whole and pressable, 44px
         of it. There is not one instant without access, which is what lets this
         be gentle without being dangerous. `pointer-events: none` is gone, and
         that is the non-negotiable part: if it shows, it presses. */
  .ctc-form-col:focus-within ~ * #spg-chat-burbuja,
  body:has(.ctc-form-col :focus) #spg-chat-burbuja {
    opacity: .4;
    transform: scale(.7);
    transform-origin: bottom right;
    transition: opacity .18s ease, transform .18s ease;
  }

  /* ES: y al buscarla vuelve entera, antes de que el dedo la suelte.
     EN: and reaching for her brings her back whole, before the finger lets go. */
  .ctc-form-col:focus-within ~ * #spg-chat-burbuja:hover,
  .ctc-form-col:focus-within ~ * #spg-chat-burbuja:focus-visible,
  body:has(.ctc-form-col :focus) #spg-chat-burbuja:hover,
  body:has(.ctc-form-col :focus) #spg-chat-burbuja:focus-visible {
    opacity: 1;
    transform: none;
  }
}

/* ═══ LAS TRES PANTALLAS, A 390×844 ═══════════════════════════════
   ES: Cada recorte de aquí sale de una regla, y de cada uno se dice
       cuánto ahorra. Nada se recorta «para que quepa»: se quita lo
       que sobra, y lo que se lee y se toca no se toca.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── REGLA 6 · SIN ADORNOS ─────────────────────────────────────
     ES: EL CEPO ANTISPAM SE ESTABA VIENDO. `.fl-hp` es la trampa
         para robots: un campo «Website» que una persona no debe ver
         siquiera. Ocupaba 44 px de pantalla y una etiqueta visible
         que además confunde a quien usa lector de pantalla.
         Se esconde como se esconde un cepo: fuera del flujo y fuera
         del alcance del dedo, pero SIN `display:none` —eso lo
         delataría ante el robot, que es justo a quien tiene que
         engañar—. AHORRA 44 px.
     EN: THE HONEYPOT WAS VISIBLE. 44 px of screen for a trap no
         human should see. Hidden out of flow and out of reach, but
         NOT with `display:none`, which would give it away to the
         very bot it is meant to fool. SAVES 44 px. */
  .ctc-form-col .fl-hp {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
  }

  /* ── REGLA 5 · AIRE DONDE SE LEE, CERO AIRE MUERTO ─────────────
     ES: el héroe llevaba 72 px de hueco por la barra fija, que mide
         44. Y 32 px de relleno arriba más 24 abajo. Se ajusta al
         alto real de la barra y se recorta el vacío de después del
         texto — NO la separación entre el título y su bajada.
         AHORRA 48 px. */
  .ctc-hero        { padding-top: 52px; }
  .ctc-hero-inner  { padding-top: var(--esp-20); padding-bottom: var(--esp-20); }
  .ctc-hero-desc   { margin-bottom: 0; }
  .ctc-main-section { padding-top: var(--esp-20); padding-bottom: var(--esp-24); }

  /* ── EL BOTÓN, ANTES DE LA LETRA CHICA ─────────────────────────
     ES: EL HALLAZGO QUE LO CAMBIA TODO. En el orden del documento,
         entre el último campo y el botón había 146 px de casilla de
         miembro; y detrás del botón, 124 px de letra legal. Es
         decir: el botón de enviar estaba a 270 px por debajo de
         donde acaba lo que hay que rellenar, y por eso no entraba
         en pantalla.
         El formulario ya es `display:flex`, así que basta con
         ordenarlo: campos → BOTÓN → letra chica. No se mueve ni un
         elemento del HTML —el envío, los nombres y el orden de
         tabulación siguen exactamente igual—, solo se pinta en el
         orden en que se usa.
         Y leído, se lee mejor: «Enviar» y debajo «al enviar,
         acepta…». La letra chica va donde va la letra chica.
         SACA 270 px de la primera pantalla.
     EN: THE FINDING THAT CHANGES EVERYTHING. In document order, 146
         px of membership box sat between the last field and the
         button, and 124 px of legal text after it — the submit
         button was 270 px below where the filling-in ends. The form
         is already flex, so it is enough to order it: fields →
         BUTTON → fine print. Not one element moves in the HTML, so
         submission, names and tab order are untouched; it is only
         painted in the order it is used. MOVES 270 px off screen 1. */
  .ctc-form-col form { display: flex; flex-direction: column; }
  .ctc-form-col .btn-form-submit  { order: 1; margin-top: var(--esp-8); }
  .ctc-form-col .fl-miembro       { order: 2; }
  .ctc-form-col .form-privacy-note { order: 3; }
  .ctc-form-col .form-error-msg   { order: 0; }

  /* ── REGLA 2 · NADA DE CAJAS DENTRO DE CAJAS ───────────────────
     ES: la casilla de miembro era una tarjeta de color dentro de la
         tarjeta del formulario, con su propio título y su «¿qué
         incluye?». Pasa a línea simple: su casilla, su frase legal,
         y nada más. Sin fondo, sin borde, sin sombra. */
  .ctc-form-col .fl-miembro {
    background: none; border: 0; box-shadow: none;
    padding: var(--esp-12) 0 0;
    border-top: 1px solid rgba(11,31,51,.10);   /* ES: regla 6 — separador de línea fina */
  }
  /* ES: EL TÍTULO CORTO SE QUEDA, y esconderlo fue un error mío con
         consecuencia visible: la casilla se quedó SIN frase al lado —su
         único texto era la línea legal larga— y al mandar esa línea abajo,
         el check quedó desnudo y sus letras sueltas al final. Eso es lo que
         Daniel vio.
         La orden decía «línea simple con su casilla»: la casilla necesita SU
         frase pegada. Lo que baja es solo el párrafo legal. */
  .ctc-form-col .fl-miembro-titulo {
    display: block; font: 600 .92rem/1.4 var(--font-body, Inter, sans-serif);
    color: var(--navy, #0B1F33);
  }
  .ctc-form-col .fl-miembro-incluye,
  .ctc-form-col .fl-miembro-lista { display: none; }

  /* ── REGLA 3 · EL NARANJA, SOLO PARA LA ACCIÓN ─────────────────
     ES: el botón de enviar se queda coral. Los rótulos y las
         viñetas pasan al gris de la casa: un color de acción usado
         en algo que no se toca enseña a no fiarse del color. */
  .ctc-form-col .req,
  .ctc-eyebrow { color: var(--gray, #8A94A6); }

  /* ── REGLA 5 · la separación entre campos, no la de etiqueta y campo
     ES: entre un campo y el siguiente había 25 px de margen. Se
         bajan a 16: sigue habiendo aire para el dedo, y la
         separación DENTRO del campo —etiqueta a caja, 6 px— no se
         toca, ni la altura de 47, ni los 16 px de letra.
         AHORRA 27 px. */
  .ctc-form-col .form-group,
  .ctc-form-col .form-row { margin-bottom: var(--esp-16); }
}

/* ── PANTALLA 1 · la casilla de miembro, a línea simple ──────────
   ES: se queda —es captación, y el correo es la llave— pero deja de
       ser un bloque de 146 px. Queda una casilla y una frase corta.
       LA LÍNEA LARGA DE PERMISOS NO SE BORRA: BAJA. Es el registro
       legal de lo que la persona acepta al marcar, así que esconderla
       sería pedir un consentimiento a ciegas. Se manda abajo, con la
       letra legal que ya existe, y allí se lee entera.
       `display:contents` en el envoltorio es lo que permite ordenar
       sus hijos por separado sin tocar el HTML: la casilla se queda
       arriba con su frase, y el texto de permisos se va al final.
   EN: THE MEMBER LINE STAYS —it is lead capture, and the email is the
       key— but stops being a 146 px block. THE LONG PERMISSION TEXT
       IS NOT DELETED, IT MOVES DOWN: it is the legal record of what
       is being agreed to, so hiding it would be asking for blind
       consent. It goes with the fine print that already exists. ── */
@media (max-width: 767px) {
  .ctc-form-col .fl-miembro { display: contents; }
  .ctc-form-col .fl-miembro .fl-check   { order: 2; padding-top: var(--esp-12);
                                          border-top: 1px solid rgba(11,31,51,.10); }
  .ctc-form-col .fl-miembro .fl-miembro-letra { order: 4; display: block;
                                          font-size: .78rem; color: var(--gray, #8A94A6);
                                          margin-top: var(--esp-8); }
  .ctc-form-col .fl-ventajas { display: none; }   /* ES: fuera el «¿qué incluye?» */
}

/* ── PANTALLA 3 · fuera la fila de sellos ────────────────────────
   ES: cinco insignias de confianza ocupando media pantalla del pie.
       Su información YA ESTÁ, y mejor, en las licencias con sus
       números: un sello dice «somos de fiar», una licencia con su
       número dice quién es y deja comprobarlo.
       LAS TRES LICENCIAS Y LA LÍNEA DEL BRÓKER NO SE TOCAN: son
       obligación de la publicidad inmobiliaria, no adorno.
   EN: five trust badges eating half a screen of footer. Their
       information is already there, and better, in the licences with
       their numbers: a badge says «trust us», a numbered licence says
       who you are and lets it be checked. ── */
@media (max-width: 767px) {
  .footer-badges { display: none; }
}

/* ═══ LAS OCHO CORRECCIONES DEL OJO DE DANIEL ═════════════════════ */
@media (max-width: 767px) {

  /* ── 1 · LA BARRA FIJA NO TAPA EL TÍTULO ───────────────────────
     ES: el héroe reservaba 52 px para una barra de 44 — ocho de
         aire, que no es aire: es un pelo. Y en un iPhone de verdad
         la barra del navegador se suma por encima, así que ese pelo
         desaparece y el título queda comido.
         Se reserva la altura real de la barra MÁS un respiro que se
         ve. `--nav-h` es la variable que ya usa la barra: se toma de
         ahí para que si la barra crece, el hueco crezca con ella y
         nadie tenga que acordarse. */
  .ctc-hero { padding-top: calc(var(--nav-h, 72px) + var(--esp-16)); }

  /* ── 2 · TODOS LOS HUECOS IGUALES ──────────────────────────────
     ES: entre campo y campo había 16 px, pero DENTRO de la fila de
         «Nombre + Teléfono» los dos campos llevaban su propio margen
         mayor. Resultado: dos huecos normales y dos grandes, que es
         lo que el ojo lee como «esto está desordenado».
         Un solo valor para todos, dicho una vez. */
  .ctc-form-col .form-row > .form-group { margin-bottom: var(--esp-16); }
  .ctc-form-col .form-row > .form-group:last-child { margin-bottom: 0; }

  /* ── 3 · LA MASCOTA NI SE ESCONDE NI TAPA: SE ACHICA ───────────
     ES: AQUÍ HUBO UN `#spg-chat{display:none}` Y ERA UN ERROR MÍO.
         El razonamiento iba bien hasta el final: la burbuja es
         `fixed` —pegada a la PANTALLA, no a la página—, así que
         ningún hueco en la columna la aparta; medido a siete
         alturas de scroll, tapaba algo en seis. De ahí saqué que
         sin esquina libre había que esconderla.
         DOS COSAS ESTABAN MAL.
         · La regla la escribí POR ANCHO (`max-width:767px`), y el
           ancho no mide si hay esquina libre. Al girar el teléfono
           el ancho pasa de 390 a 844, la regla deja de aplicar y la
           mascota REAPARECE — pero la esquina sigue igual de
           ocupada. Medía una cosa para decidir otra.
         · Y el remedio era peor que el mal: `/contacto` es la
           última página del sitio donde quitar al asistente. Quien
           entra aquí es justo el que quiere hablar.
         LO QUE SE HACE EN SU LUGAR: se queda, más pequeña, y se
         aparta sola cuando estorba de verdad —el bloque de abajo la
         apaga en cuanto un campo toma el foco—. Que una burbuja de
         chat se solape con el texto no es un defecto: es lo que es
         una burbuja de chat. Taparle el botón de enviar sí lo era,
         y de eso se encarga el `:focus-within`.
     EN: THERE WAS A `display:none` HERE AND IT WAS MY MISTAKE. The
         reasoning was right until the end — the bubble is `fixed`,
         so no gap in the column moves it — but the rule keyed on
         WIDTH, and width does not measure whether a corner is free:
         rotate the phone and the rule stops applying while the
         corner stays just as busy. And hiding the assistant on the
         contact page removes it from the one visitor who came to
         talk. It stays, smaller, and steps aside on focus. */

  /* ── 4 · LA FRASE DE PERMISOS, UNA SOLA VEZ Y EN LA LETRA LEGAL ─
     ES: se queda —es el registro de lo que se acepta al marcar la
         casilla, y sin ella el consentimiento sería a ciegas— pero
         deja de ser un párrafo suelto flotando entre la casilla y la
         nota legal. Se pega a la nota legal, en su mismo tamaño y su
         mismo gris: una sola letra chica al final, no dos. */
  .ctc-form-col .fl-miembro .fl-miembro-letra {
    margin-top: 0; padding-top: var(--esp-8);
    font-size: .74rem; line-height: 1.5;
  }
  .ctc-form-col .form-privacy-note { padding-bottom: 0; }
}

/* ── 2 (de verdad) · UN SOLO HUECO, Y MEDIDO ENTRE CAJAS ─────────
   ES: el detector bueno da los huecos REALES entre una caja y la
       etiqueta de la siguiente: 16 · 16 · 61 · 61. Los dos grandes
       no venían de ningún margen — venían del `gap` del formulario,
       que es flex y suma su separación ENCIMA de los márgenes. Entre
       hermanos directos del formulario se sumaban los dos; dentro de
       la fila de «Nombre + Teléfono», que es un bloque, solo el
       margen. De ahí «dos normales y dos grandes».
       Se apaga el `gap` y manda un solo margen. Un espacio se dice
       UNA vez: dos mecanismos para lo mismo siempre acaban peleados.
   EN: the real gaps were 16 · 16 · 61 · 61. The two large ones came
       from the form's flex `gap` stacking on top of the margins —
       between the form's direct children both applied, inside the
       name+phone row only the margin did. One mechanism, one value. */
@media (max-width: 767px) {
  /* ES: el `gap` se apaga en los DOS: el formulario y la fila de dentro.
         La fila tenía `gap:16` además de su margen, y ese era el sobrante que
         quedaba: 41 donde tocaban 16. Un espacio se dice una vez, y aquí se
         decía en tres sitios a la vez. */
  .ctc-form-col form,
  .ctc-form-col .form-row { gap: 0; }
  .ctc-form-col .form-row,
  .ctc-form-col .form-group { margin-bottom: var(--esp-16); }
  .ctc-form-col .form-row > .form-group { margin-bottom: var(--esp-16); }
  .ctc-form-col .form-row > .form-group:last-child { margin-bottom: 0; }
}

/* ── LOS HUECOS DESIGUALES: DOS AVISOS VACÍOS ────────────────────
   ES: CUATRO INTENTOS BUSCANDO UN MARGEN QUE NO EXISTÍA. Los huecos
       ENTRE grupos siempre fueron iguales —16, 16 y 16—. Lo que yo
       medía como 41 era el hueco MÁS algo dentro del propio grupo.
       Medido por fin donde tocaba —los hijos de cada grupo, no sus
       márgenes—: los grupos de Teléfono y Correo tienen un TERCER
       hijo que los otros dos no tienen:
         · `.fl-hint`          en Teléfono  → 16 px de alto, VACÍO
         · `.email-typo-hint`  en Correo    → 16 px de alto, VACÍO
       Son avisos que el JavaScript rellena cuando hace falta («¿quiso
       decir gmail.com?»), pero reservan su sitio aunque estén vacíos.
       De ahí los 25 px de más: 16 del aviso y 9 de su separación.
       VACÍOS NO OCUPAN. `:empty` es exactamente esa pregunta —«¿no
       tienes nada dentro?»— así que se esconden solos y reaparecen
       solos en cuanto el guion les mete texto. No hay que tocar el
       JavaScript ni acordarse de nada.
   EN: FOUR ATTEMPTS HUNTING A MARGIN THAT DID NOT EXIST. The gaps
       BETWEEN groups were always equal — 16, 16, 16. What I measured
       as 41 was the gap PLUS something inside the group itself.
       Measured where it belonged —each group's children, not its
       margins— Teléfono and Correo have a third child the others do
       not: two hint slots, 16 px tall and EMPTY, that reserve space
       for messages JavaScript fills in when needed. `:empty` asks
       exactly the right question, so they hide and reappear on their
       own. ── */
.ctc-form-col .fl-hint:empty,
.ctc-form-col .email-typo-hint:empty { display: none; }

/* ── LOS ÚLTIMOS 10 PX ───────────────────────────────────────────
   ES: de 60 quedaban 10, y salen de donde sobran: el bloque del
       final tenía 40 arriba y 40 abajo. Los 40 de abajo bajan a 30 —
       es el último bloque de la página y debajo empieza el pie, que
       ya trae su propio aire. Ni la letra ni los campos se tocan.
   EN: 10 px of the 60 remained, taken from the last block's bottom
       padding — the footer below brings its own air. ── */
@media (max-width: 767px) {
  .ctc-zona-section { padding-bottom: var(--esp-30, 30px); }
}