/* ============================================================
   SEREMI.CSS — Sección "Cumplimiento SEREMI"
   CuponPass

   Se apoya en los tokens de main.css (colores, tipografía, espaciado,
   radios) y no redefine ninguno de los globales. Todo lo de aquí lleva
   el prefijo .sm- para que esta hoja no pueda tocar nada del resto del
   sitio ni al revés.

   POR QUÉ NO USA .btn NI .card DEL SITIO
   Esta página se sirve sola, sin el resto de la aplicación, para que
   cargue rápido: quien llega desde un anuncio paga la espera con
   dinero. Solo trae main.css. Los botones y las tarjetas se definen
   aquí, copiando las medidas del sistema (ver tokens.md) y corrigiendo
   dos cosas a propósito:
     · alto mínimo de 48px — el .btn del sitio mide 40 y no llega a los
       44 que hacen falta para pulsar cómodo con el pulgar;
     · un solo color de acción en toda la página.

   EL COLOR DE ACCIÓN
   Es el azul de la línea de salud del sitio (--color-dental, #0ea5e9).
   Ese tono NO se puede usar como fondo de botón con letra blanca: da
   2,77 de contraste. Así que se parte en dos:
     --sm-accent        #0ea5e9  marca: filetes, íconos, fondos tenues
     --sm-accent-fuerte #0369a1  lo que hay que LEER: botón sólido, texto
   Es el mismo tono, dos pasos más oscuro; no es un color nuevo.
   ============================================================ */

.sm-page {
  /* Los tokens propios van en el contenedor, no en :root, para que esta
     hoja no pueda pisar nada del sitio si algún día se carga junto al
     resto de la aplicación. */
  --sm-accent:        #0ea5e9;
  --sm-accent-fuerte: #0369a1;
  --sm-accent-bg:     rgba(14,165,233,0.08);
  --sm-accent-border: rgba(14,165,233,0.28);
  --sm-wa:            #128c7e;
  --sm-wa-hover:      #0e6b60;
  --sm-max:           1080px;

  background: var(--color-bg-2);
  color: var(--color-text);
  min-height: 100vh;
}

/* Tema oscuro. Un alias con var() se resuelve una sola vez, así que los
   valores se repiten enteros en vez de heredarse. Es la regla del
   proyecto: si añades un token arriba, añádelo también aquí.
   Hoy esta página se sirve siempre en claro (no carga el interruptor de
   tema), pero el bloque queda escrito para que embeberla en el sitio no
   deje texto invisible. */
[data-theme="dark"] .sm-page,
body[data-theme="cyber"] .sm-page {
  --sm-accent:        #38bdf8;
  --sm-accent-fuerte: #7dd3fc;
  --sm-accent-bg:     rgba(56,189,248,0.10);
  --sm-accent-border: rgba(56,189,248,0.32);
  --sm-wa:            #25d366;
  --sm-wa-hover:      #1ebe5b;
}

/* El atributo `hidden` tiene que ganar SIEMPRE.
   Su valor por defecto es display:none, pero cualquier regla nuestra que
   diga display:flex o display:grid lo pisa —la especificidad de una clase
   gana a la del navegador— y el elemento sigue a la vista. Pasó con las
   casillas del banner de cookies: nacían abiertas aunque nadie hubiera
   pulsado "Elegir". Aquí se usa `hidden` en el banner, en las casillas y
   en el bloque de residuos del formulario; si alguna vez se añade otro,
   esta regla ya lo cubre. */
.sm-page [hidden],
.sm-page[hidden] { display: none !important; }

.sm-container {
  max-width: var(--sm-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ══════════════════════════════════════════
   1. ENCABEZADO REDUCIDO

   Solo el logo y una salida a WhatsApp. Sin menú: quien llega desde un
   anuncio no debe tener por dónde irse a otra parte del sitio.
   ══════════════════════════════════════════ */
.sm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border-2);
}
.sm-header__inner {
  max-width: var(--sm-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.sm-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  /* 44px de alto para que el logo también sea un destino cómodo */
  min-height: 44px;
}
.sm-logo__marca { color: #f59e0b; }
.sm-logo svg { flex-shrink: 0; display: block; }

/* El botón de la barra va un punto por debajo del de la portada.
   A tamaño completo, el verde de arriba pesaba más que "Solicitar una
   revisión", que es la acción principal de la página: se leía primero el
   atajo y después la oferta. Sigue siendo cómodo de pulsar (44px). */
.sm-header .sm-btn {
  min-height: 44px;
  padding: 10px 18px;
  font-size: var(--font-sm);
}
.sm-header .sm-btn svg { width: 18px; height: 18px; }

/* ══════════════════════════════════════════
   2. BOTONES
   ══════════════════════════════════════════ */
.sm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}
.sm-btn svg { flex-shrink: 0; }

.sm-btn--solido {
  background: var(--sm-accent-fuerte);
  color: #fff;
}
.sm-btn--solido:hover { background: #075985; }

.sm-btn--borde {
  background: transparent;
  color: var(--sm-accent-fuerte);
  border-color: var(--sm-accent-border);
}
.sm-btn--borde:hover {
  background: var(--sm-accent-bg);
  border-color: var(--sm-accent-fuerte);
}

/* Verde de WhatsApp. Es el ÚNICO sitio donde entra un color que no es el
   de acción, porque identifica un canal de otra marca. El tono es el
   oscuro de WhatsApp, no el claro: con el claro la letra blanca se queda
   en 1,98 de contraste. Ver tokens.md. */
.sm-btn--wa {
  background: var(--sm-wa);
  color: #fff;
}
.sm-btn--wa:hover { background: var(--sm-wa-hover); }

/* Salida discreta al pie de una tarjeta */
.sm-enlace-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 0 0;
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--sm-accent-fuerte);
  border-bottom: none;
}
.sm-enlace-wa:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   3. RITMO DE SECCIONES
   Alterna blanco y tintado. Sin sombras entre bloques: el cambio de
   fondo ya separa.
   ══════════════════════════════════════════ */
.sm-seccion {
  padding: var(--space-20) 0;
  background: var(--color-bg-2);
}
.sm-seccion--tinta { background: var(--color-bg-3); }

.sm-seccion__cabeza {
  max-width: 660px;
  margin: 0 auto var(--space-12);
  text-align: center;
}

/* Etiqueta chica encima del título. Da jerarquía y ritmo sin añadir una
   frase más que leer.

   Va en minúscula con las letras separadas, no en versalitas: el brief
   prohíbe las mayúsculas sostenidas y esa regla no tiene una excepción
   para "cuando queda bonito". La separación sola ya la hace leerse como
   etiqueta. */
.sm-etiqueta {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--font-sm);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--sm-accent-fuerte);
}

.sm-titulo {
  font-size: clamp(1.65rem, 4vw, var(--font-4xl));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.18;
  margin-bottom: var(--space-4);
  text-wrap: balance;   /* reparte las líneas del titular en vez de dejar una huérfana */
}
.sm-bajada {
  font-size: var(--font-lg);
  line-height: 1.7;
  color: var(--color-text-2);
  text-wrap: pretty;
}

/* ══════════════════════════════════════════
   4. HERO
   ══════════════════════════════════════════ */
.sm-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-20) 0;
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border-2);
}

/* Un velo de color detrás del titular, muy tenue. Le quita a la página el
   aire de documento en blanco sin meter una imagen que haya que cargar —y
   esta es la primera pantalla, la que decide el tiempo de carga que se
   paga por clic. Es el mismo recurso que usa el hero del sitio. */
.sm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, var(--sm-accent-bg), transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 110%, var(--sm-accent-bg), transparent 70%);
}

.sm-hero__inner {
  position: relative;   /* por encima del velo */
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

/* Tira de cobertura bajo los botones: los cuatro frentes, de un vistazo.
   No promete nada — nombra lo que la propia página explica más abajo. */
.sm-hero__cubre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  max-width: 640px;
  margin: var(--space-12) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-2);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text-2);
}
.sm-hero__cubre span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sm-hero__cubre svg { color: var(--sm-accent-fuerte); flex-shrink: 0; }
.sm-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 16px;
  margin-bottom: var(--space-6);
  border: 1px solid var(--sm-accent-border);
  border-radius: var(--radius-full);
  background: var(--sm-accent-bg);
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--sm-accent-fuerte);
}
.sm-hero__titulo {
  font-size: clamp(2rem, 5.5vw, var(--font-5xl));
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-5);
}
.sm-hero__texto {
  /* Más estrecho que el titular a propósito. A todo el ancho del hero la
     línea pasaba de los noventa caracteres y el ojo se pierde al saltar de
     renglón. Unos sesenta y cinco es donde se lee cómodo. */
  max-width: 620px;
  margin: 0 auto var(--space-8);
  font-size: var(--font-lg);
  line-height: 1.75;
  color: var(--color-text-2);
  text-wrap: pretty;
}
.sm-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ══════════════════════════════════════════
   FOTOGRAFÍAS

   TRES REGLAS QUE NO SE TOCAN

   1. Cada <img> lleva width y height en el HTML, y aquí un aspect-ratio
      que coincide. Sin eso el navegador no sabe cuánto sitio reservar: la
      foto llega tarde, empuja el texto hacia abajo y quien estaba leyendo
      pierde el renglón. Google lo mide y lo penaliza.

   2. Todas van con loading="lazy" MENOS la del encabezado. Esa se ve al
      instante, así que esperar a que "entre en pantalla" solo la retrasa.

   3. Si una foto no está en el servidor, su bloque entero desaparece (lo
      hace el onerror de js/seremi/pagina.js). Antes que un recuadro roto
      en la página que reciben los anuncios, mejor que no esté.
   ══════════════════════════════════════════ */
.sm-figura {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-lg);
  /* Un fondo mientras la foto viaja: así el hueco reservado se ve como un
     panel a medio cargar y no como un agujero blanco. */
  background: var(--sm-accent-bg);
}
.sm-figura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dos proporciones, y las dos elegidas por lo que son las fotos de verdad,
   no al revés. Si mañana se cambia una foto por otra de distinta forma,
   se ajusta aquí: el recorte va por el centro (object-fit: cover), así que
   una proporción que no coincida se come justo lo que importa. */
.sm-figura--ancha { aspect-ratio: 16 / 9; }
.sm-figura--alta  { aspect-ratio: 4 / 3; }

/* "Imagen referencial", abajo a la derecha.
   Va en TODAS las fotos de la página y no es un adorno legal: son
   imágenes de referencia, no fotos de trabajos hechos. Decirlo evita que
   alguien las lea como "así quedó la clínica de fulano" —eso sería un
   caso de éxito inventado, que es justo lo que el encargo prohíbe. */
.sm-figura__nota {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Encabezado en dos columnas cuando hay foto ──
   Si la foto falta, el JavaScript quita la clase y el encabezado vuelve a
   ser el de antes: una columna centrada. No se rompe nada. */
.sm-hero--media .sm-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12);
  align-items: center;
  max-width: var(--sm-max);
  text-align: left;
}
.sm-hero--media .sm-hero__texto { margin-left: 0; max-width: none; }
.sm-hero--media .sm-hero__acciones { justify-content: flex-start; }
.sm-hero--media .sm-hero__cubre {
  margin-left: 0;
  justify-content: flex-start;
  max-width: none;
}
.sm-hero--media .sm-figura { aspect-ratio: 4 / 5; }

/* ── Antes y después ── */
.sm-comparativa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  max-width: 920px;
  margin: 0 auto;
}
.sm-comparativa__lado { display: flex; flex-direction: column; gap: var(--space-3); }
.sm-comparativa__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  font-weight: 700;
}
.sm-comparativa__etiqueta--antes {
  background: var(--color-bg-4);
  color: var(--color-text-2);
  /* Borde transparente, no ausente: la etiqueta de "después" sí lleva uno,
     y sin este las dos pastillas se diferencian en 2px de alto. Basta para
     que las dos fotos arranquen a distinta altura y la comparación se vea
     torcida, que es justo lo contrario de lo que el bloque quiere hacer. */
  border: 1px solid transparent;
}
.sm-comparativa__etiqueta--despues {
  background: var(--sm-accent-bg);
  color: var(--sm-accent-fuerte);
  border: 1px solid var(--sm-accent-border);
}
.sm-comparativa__pie {
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-text-2);
}

/* ── Banda de medio ambiente ── */
.sm-verde {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-12);
  align-items: center;
}
/* Si la foto del camión no está, el texto se queda solo: sin esto
   ocuparía la primera columna de dos y dejaría medio bloque vacío a la
   derecha. En un navegador sin :has (ninguno actual) se ve como antes,
   así que no hace falta respaldo. */
.sm-verde:has(> [hidden]) { grid-template-columns: 1fr; }
.sm-verde__lista {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.sm-verde__lista li {
  position: relative;
  padding-left: 34px;
  margin-bottom: var(--space-4);
  font-size: var(--font-md);
  line-height: 1.65;
  color: var(--color-text-2);
}
.sm-verde__lista svg {
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--sm-accent-fuerte);
}
/* En esta banda el título no va centrado: comparte fila con la foto. */
.sm-verde .sm-titulo,
.sm-verde .sm-bajada,
.sm-verde .sm-etiqueta { text-align: left; }
.sm-verde .sm-bajada { font-size: var(--font-md); }

/* ── Rombos de transporte ──
   Fondo blanco fijo y trazo #0f172a fijo: la señalización tiene sus
   colores definidos por norma y no se adapta al tema de nadie. Por eso
   aquí NO se usan los tokens. */
.sm-rombos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-2);
}
.sm-rombo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sm-rombo svg { flex-shrink: 0; }
.sm-rombo__pie {
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text-2);
}

/* ══════════════════════════════════════════
   5. TARJETAS
   Borde fino antes que sombra, como el resto del sitio.
   ══════════════════════════════════════════ */
.sm-grid {
  display: grid;
  gap: var(--space-5);
}
.sm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sm-grid--4 { grid-template-columns: repeat(4, 1fr); }

.sm-tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-2);
  border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-base);
}
.sm-seccion--tinta .sm-tarjeta { background: var(--color-bg-2); }
.sm-tarjeta:hover { border-color: var(--sm-accent-border); }

.sm-tarjeta__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--sm-accent-bg);
  color: var(--sm-accent-fuerte);
}
.sm-tarjeta__titulo {
  font-size: var(--font-lg);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-2);
}
.sm-tarjeta__texto {
  font-size: var(--font-md);
  line-height: 1.65;
  color: var(--color-text-2);
  /* Empuja la salida de WhatsApp al pie, para que todas las tarjetas de
     una fila la tengan a la misma altura. */
  flex: 1;
}

/* ── Tarjeta ancha: el ícono al lado, no encima ──
   Para los bloques con texto de verdad. En cuatro columnas esos títulos
   se partían en dos líneas ("Capacitación del / equipo") y las tarjetas
   quedaban estrechas y apretadas. En dos columnas y en horizontal el
   texto respira y la página se lee como una presentación, no como una
   rejilla de iconitos. */
.sm-tarjeta--ancha {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-5);
}
.sm-tarjeta--ancha .sm-tarjeta__icono {
  margin-bottom: 0;
  width: 48px;
  height: 48px;
}
.sm-tarjeta__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* min-width:0 evita que una palabra larga estire la columna y desborde
     la tarjeta: sin esto, un elemento flex no se deja encoger por debajo
     de su contenido. */
  min-width: 0;
}

/* ══════════════════════════════════════════
   PASOS NUMERADOS

   "Cómo acompañamos" es una secuencia, no cuatro cosas sueltas.
   Numerarla lo dice sin escribir una palabra más.
   ══════════════════════════════════════════ */
.sm-paso {
  padding: var(--space-6);
  border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-lg);
  background: var(--color-bg-2);
  transition: border-color var(--transition-base);
}
.sm-paso:hover { border-color: var(--sm-accent-border); }
.sm-paso__num {
  display: block;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--sm-accent);
  width: 34px;
  font-size: var(--font-lg);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sm-accent-fuerte);
}
.sm-paso__titulo {
  font-size: var(--font-lg);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-2);
}
.sm-paso__texto {
  font-size: var(--font-md);
  line-height: 1.65;
  color: var(--color-text-2);
}

/* Los dos caminos: tarjetas grandes, una decisión cada una */
.sm-camino {
  padding: var(--space-8);
  border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-lg);
  background: var(--color-bg-2);
}
.sm-camino__titulo {
  font-size: var(--font-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.sm-camino ul {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.sm-camino li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--space-3);
  font-size: var(--font-md);
  line-height: 1.6;
  color: var(--color-text-2);
}
.sm-camino li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--sm-accent);
}

/* Para quiénes: rejilla de seis, ícono + nombre */
.sm-publico {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-4);
  border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-md);
  background: var(--color-bg-2);
  font-size: var(--font-md);
  font-weight: 600;
}
.sm-publico svg { color: var(--sm-accent-fuerte); flex-shrink: 0; }

/* ══════════════════════════════════════════
   6. BLOQUE DE SOLO RETIRO
   ══════════════════════════════════════════ */
.sm-retiro {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-8);
  border: 1.5px solid var(--sm-accent-border);
  border-radius: var(--radius-lg);
  background: var(--sm-accent-bg);
  text-align: center;
}
.sm-retiro__titulo {
  font-size: var(--font-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.sm-retiro p {
  font-size: var(--font-md);
  line-height: 1.7;
  color: var(--color-text-2);
  margin-bottom: var(--space-6);
}
.sm-retiro__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ══════════════════════════════════════════
   7. FORMULARIO
   ══════════════════════════════════════════ */
/* El formulario va dentro de una tarjeta blanca sobre el fondo tintado.
   Suelto sobre la tinta parecía el final de la página; enmarcado se lee
   como lo que es: el sitio donde se hace algo. */
.sm-form {
  max-width: 620px;
  margin: 0 auto;
  padding: var(--space-10);
  background: var(--color-bg-2);
  border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-xl);
}
.sm-form .sm-campo__control { background: var(--color-bg-3); }
.sm-form .sm-campo__control:focus { background: var(--color-bg-2); }
.sm-campo { margin-bottom: var(--space-5); }
.sm-campo__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--color-text-2);
  letter-spacing: 0.01em;
}
.sm-campo__control {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--color-bg-2);
  border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  /* 16px exactos: por debajo, Safari de iPhone hace zoom al tocar el
     campo y descoloca la página entera. */
  font-size: var(--font-md);
  font-family: var(--font-family);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
textarea.sm-campo__control { min-height: 120px; resize: vertical; line-height: 1.6; }
.sm-campo__control:focus {
  outline: none;
  border-color: var(--sm-accent-fuerte);
  box-shadow: 0 0 0 3px var(--sm-accent-bg);
}
.sm-campo__control::placeholder { color: var(--color-text-3); }

.sm-campo--error .sm-campo__control { border-color: var(--color-red); }
.sm-campo__error {
  display: none;
  margin-top: 6px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-red-text);
}
.sm-campo--error .sm-campo__error { display: block; }

/* Casillas de residuos: cada una es su propio destino de 48px */
.sm-casillas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.sm-casilla {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-md);
  background: var(--color-bg-2);
  font-size: var(--font-md);
  cursor: pointer;
}
.sm-casilla input {
  width: 20px;
  height: 20px;
  accent-color: var(--sm-accent-fuerte);
  cursor: pointer;
}

/* El campo trampa. Fuera de la pantalla en vez de display:none, porque
   varios robots saben saltarse lo que está oculto y este tiene que
   parecerles un campo normal. Una persona no llega a él: el tabulador lo
   salta (tabindex="-1") y el lector de pantalla también (aria-hidden). */
.sm-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sm-form__aviso {
  margin-top: var(--space-4);
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-text-3);
}
/* Los enlaces que van DENTRO de una frase no pueden medir 48px de alto sin
   descuadrar el párrafo, y la propia norma los exime por eso. El relleno
   vertical sí se puede: agranda la zona que responde al dedo sin mover ni
   una línea de texto, porque un elemento en línea no empuja el renglón. */
.sm-form__aviso a,
.sm-cookies__texto a {
  padding: 8px 2px;
  color: var(--sm-accent-fuerte);
  font-weight: 700;
  text-decoration: underline;
}

/* Respuesta del envío. Nace oculta y el JavaScript la muestra. */
.sm-form__resultado {
  display: none;
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  border: 1.5px solid var(--sm-accent-border);
  border-radius: var(--radius-lg);
  background: var(--sm-accent-bg);
  text-align: center;
}
.sm-form__resultado.visible { display: block; }

/* Cuando el correo no salió. Ámbar y no rojo: no es un error de quien
   escribió, es un problema nuestro, y el rojo haría sentir que hizo algo
   mal. El tono es el mismo --color-amber-text que usa el resto del sitio
   para los avisos que se tienen que leer sobre fondo claro. */
.sm-form__resultado--fallo {
  border-color: rgba(245, 158, 11, 0.45);
  background: #fffbeb;
}
.sm-form__resultado--fallo h3 { color: var(--color-amber-text); }
.sm-form__resultado h3 {
  font-size: var(--font-xl);
  font-weight: 800;
  margin-bottom: var(--space-2);
}
.sm-form__resultado p {
  font-size: var(--font-md);
  line-height: 1.65;
  color: var(--color-text-2);
  margin-bottom: var(--space-5);
}

/* ══════════════════════════════════════════
   8. PIE PROPIO
   Más corto que el del sitio: contacto y los dos documentos legales.
   ══════════════════════════════════════════ */
.sm-footer {
  padding: var(--space-12) 0 var(--space-10);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-2);
}
.sm-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}
.sm-footer__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--font-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.sm-footer__marca svg { flex-shrink: 0; display: block; }
.sm-footer__nota {
  max-width: 300px;
  font-size: var(--font-sm);
  line-height: 1.7;
  color: var(--color-text-2);
}
/* Mismo trato que .sm-etiqueta, y por el mismo motivo: sin versalitas.
   El brief prohíbe las mayúsculas sostenidas y esa regla no tiene una
   excepción para los títulos del pie. Las letras separadas ya hacen que
   se lean como encabezado. */
.sm-footer h4 {
  font-size: var(--font-sm);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--color-text-2);
  margin-bottom: var(--space-4);
}
.sm-footer__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.sm-footer__lista a,
.sm-footer__lista span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--font-md);
  color: var(--color-text-2);
}
.sm-footer__lista a:hover { color: var(--sm-accent-fuerte); }
.sm-footer__legal {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-2);
  font-size: var(--font-sm);
  line-height: 1.7;
  color: var(--color-text-3);
}
.sm-footer__legal a { color: var(--color-text-2); text-decoration: underline; }

/* ══════════════════════════════════════════
   9. BOTÓN FLOTANTE
   Mismas medidas que el .whatsapp-float del sitio, pero sin depender de
   components.css ni del arrastre de app.js, que aquí no se cargan.
   ══════════════════════════════════════════ */
.sm-flotante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 24px;
  border-radius: var(--radius-full);
  background: var(--sm-wa);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(15,23,42,0.18);
  transition: background-color var(--transition-base);
}
.sm-flotante:hover { background: var(--sm-wa-hover); }
.sm-flotante svg { width: 30px; height: 30px; }

/* ══════════════════════════════════════════
   10. BANNER DE COOKIES

   Los tres botones llevan la MISMA clase a propósito: mismo tamaño,
   mismo color, mismo borde. Si "Aceptar" estuviera resaltado y
   "Rechazar" apagado, el consentimiento dejaría de ser libre y no
   valdría nada. No conviertas ninguno en sm-btn--solido.
   ══════════════════════════════════════════ */
.sm-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;          /* por encima del flotante: decidir siempre se puede pulsar */
  background: var(--color-bg-2);
  border-top: 1.5px solid var(--color-border-2);
  box-shadow: 0 -4px 16px rgba(15,23,42,0.08);
}
.sm-cookies__inner {
  max-width: var(--sm-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.sm-cookies__texto {
  flex: 1 1 320px;
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-text-2);
  margin: 0;
}
.sm-cookies__elegir {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sm-cookies__botones {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sm-cookies__botones .sm-btn {
  min-height: 44px;
  padding: 10px 18px;
  font-size: var(--font-sm);
}

/* Cuando el banner está abierto, el flotante sube para no quedar debajo. */
.sm-cookies:not([hidden]) ~ .sm-flotante,
body:has(.sm-cookies:not([hidden])) .sm-flotante { bottom: 140px; }

@media (max-width: 640px) {
  .sm-cookies__inner { padding: var(--space-4); }
  .sm-cookies__botones { width: 100%; }
  .sm-cookies__botones .sm-btn { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════
   11. FOCO DE TECLADO
   Un anillo grueso y del color de acción, visible sobre fondo blanco y
   sobre el tintado. Va al final para ganar a cualquier regla de arriba.
   ══════════════════════════════════════════ */
.sm-page a:focus-visible,
.sm-page button:focus-visible,
.sm-page input:focus-visible,
.sm-page select:focus-visible,
.sm-page textarea:focus-visible,
.sm-page label:focus-within {
  outline: 3px solid var(--sm-accent-fuerte);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════
   12. PANTALLAS CHICAS
   Máximo dos columnas, y en el teléfono los botones ocupan el ancho.
   ══════════════════════════════════════════ */
@media (max-width: 900px) {
  .sm-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .sm-grid--3 { grid-template-columns: repeat(2, 1fr); }

  /* El encabezado vuelve a una columna, con la foto debajo del texto y no
     al lado: en una tablet, dos columnas dejan el titular en cuatro
     líneas y la foto en un sello diminuto. */
  .sm-hero--media .sm-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    max-width: 720px;
    text-align: center;
  }
  .sm-hero--media .sm-hero__texto { margin-left: auto; margin-right: auto; max-width: 620px; }
  .sm-hero--media .sm-hero__acciones,
  .sm-hero--media .sm-hero__cubre { justify-content: center; }
  .sm-hero--media .sm-hero__cubre { margin-left: auto; margin-right: auto; }
  /* Menos vertical, pero no apaisada del todo. Debajo del texto, un retrato
     4:5 ocupa media pantalla y empuja el resto fuera de la vista; pero con
     16:9 el recorte central de una foto vertical deja una franja tan
     estrecha que se pierden las manos y los documentos, que son la mitad de
     lo que la foto cuenta. 4:3 conserva las caras y el papel. */
  .sm-hero--media .sm-figura { aspect-ratio: 4 / 3; }

  .sm-verde { grid-template-columns: 1fr; gap: var(--space-8); }
  .sm-seccion, .sm-hero { padding: var(--space-16) 0; }
  .sm-footer__grid { grid-template-columns: 1fr 1fr; }
  .sm-footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .sm-seccion, .sm-hero { padding: var(--space-12) 0; }
  .sm-container, .sm-header__inner { padding-left: var(--space-4); padding-right: var(--space-4); }

  .sm-grid--2, .sm-grid--3, .sm-grid--4 { grid-template-columns: 1fr; }

  /* Antes y después, uno debajo del otro. En dos columnas de 160px no se
     distingue qué cambió, que es lo único que el bloque tiene que
     mostrar. */
  .sm-comparativa { grid-template-columns: 1fr; gap: var(--space-8); }
  .sm-rombos { gap: var(--space-4); }
  .sm-rombo__pie { font-size: var(--font-xs); }
  .sm-casillas { grid-template-columns: 1fr; }
  .sm-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }

  .sm-hero__acciones .sm-btn,
  .sm-retiro__acciones .sm-btn { width: 100%; }

  .sm-camino, .sm-retiro, .sm-form { padding: var(--space-6); }

  /* El ícono vuelve a ponerse encima del texto: al lado, en 375px, deja la
     columna de texto en unos 250px y las palabras empiezan a partirse. */
  .sm-tarjeta--ancha { flex-direction: column; gap: 0; }
  .sm-tarjeta--ancha .sm-tarjeta__icono { margin-bottom: var(--space-4); }

  .sm-hero__cubre {
    margin-top: var(--space-8);
    justify-content: flex-start;
    text-align: left;
  }

  /* El botón flotante se queda solo con el ícono: con el texto tapaba
     medio formulario en una pantalla de teléfono. */
  .sm-flotante {
    right: 16px;
    bottom: 16px;
    width: 60px;
    height: 60px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .sm-flotante__texto { display: none; }

  /* El botón de WhatsApp del encabezado se queda sin texto: en 360px de
     ancho competía con el logo y los dos quedaban apretados. */
  .sm-header .sm-btn { padding: 10px 14px; }
  .sm-header .sm-btn span { display: none; }
}

/* ══════════════════════════════════════════
   13. MOVIMIENTO
   En esta página el movimiento solo responde a algo que hace la
   persona: pasar por encima de una tarjeta, pulsar un botón. No hay
   nada que se anime al aparecer. Aun así, quien pidió menos movimiento
   en su sistema no ve ni eso.
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sm-page *,
  .sm-page *::before,
  .sm-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}