/* Tokens extraídos del diseño aprobado. Contados por frecuencia de uso.
   Prohibido escribir un hex crudo fuera de este bloque. */
:root {
  --marca: #E11FA6;
  --marca-clara: #FF63C6;
  --fondo: #0E0E10;
  --fondo-alt: #141417;
  --superficie: #17171B;
  --superficie-alta: #1D1A1F;
  --tinta: #F7F5F6;
  --tinta-media: #C6C0C4;
  --tinta-apagada: #A9A3A8;
  /* #7C767B no llega al 4.5:1 de AA (spec §10.5) contra los tres fondos
     donde se usa (pie__derechos y .clientes .etiqueta-seccion sobre
     --fondo, marquesina__grupo sobre --fondo-alt, ciudad__rol sobre
     --superficie, el peor caso: 4.03:1). #847E83 sube la luminancia
     (HSL L 47.45% -> 50.59%) conservando el matiz violaceo exacto (H=310°,
     misma S) y da 4.51:1 contra --superficie, el fondo mas exigente; ver
     el calculo completo en .superpowers/sdd/briefs/contraste-report.md. */
  --tinta-tenue: #847E83;
  /* Blanco puro: solo el texto de los botones, el chip flotante del hero y las
     tarjetas de los logos de clientes, que vienen en JPG con fondo blanco. */
  --blanco: #FFFFFF;
  --borde: rgba(255, 255, 255, .08);
  --borde-fuerte: rgba(255, 255, 255, .16);
  --titular: 'Bricolage Grotesque', system-ui, sans-serif;
  --texto: 'Manrope', system-ui, sans-serif;
  --margen: clamp(16px, 4vw, 56px);
}

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

/* El [hidden] del navegador es `display:none` con especificidad de hoja de usuario:
   cualquier regla de autor que fije display se lo come. Así el formulario seguía
   visible bajo el "¡Mensaje enviado!" pese a que el JS lo marcaba hidden, porque
   .form declara display:grid. Esto lo zanja para todo el sitio de una vez. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marca); text-decoration: none; }
a:hover { color: var(--marca-clara); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

img { display: block; max-width: 100%; }
input, textarea, select, button { font: inherit; }
html { scroll-behavior: smooth; }

/* <picture> es un mecanismo de selección de fuente (webp vs. respaldo), no una
   caja de layout: los grids y flex de las secciones tratan a la <img> de
   adentro como si <picture> no existiera. Patrón que se repite en todas las
   tareas que siguen. */
picture { display: contents; }
/* display:contents en <picture> vuelve a TODOS sus hijos ítems del grid/flex
   del padre, <source> incluido. Chrome no le da display:none al <source> ahí
   (lo blockifica a display:block), así que cada uno reserva una celda real y
   empuja a la <img> fuera de su lugar. No borrar aunque parezca redundante:
   sin esto, cualquier <picture> con <source> dentro de un grid queda roto. */
source { display: none; }

.lienzo { max-width: 1440px; margin: 0 auto; overflow-x: clip; }

/* ===== Cabecera ===== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  border-bottom: 1px solid var(--borde);
}
.cabecera__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--margen);
}
.cabecera__enlaces {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cabecera__enlace {
  color: var(--tinta);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
}
.cabecera__enlace:hover { color: var(--marca); }

.marca { display: flex; align-items: center; gap: 10px; color: var(--tinta); }
/* Sin esto, el a:hover general (más específico que .marca solo) teñiría el
   wordmark de --marca-clara al pasar el mouse; el diseño no lo contempla. */
.marca:hover { color: var(--tinta); }
.marca__signo { height: 38px; width: 38px; object-fit: contain; }
/* El wordmark va como texto vivo: escala, se lee siempre y no depende de un
   archivo que en el diseño quedaba en 4px de alto (spec §7.2). */
.marca__nombre {
  font-family: var(--titular);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  line-height: 1;
}

/* ===== Botones (reutilizados por las tareas 7, 9 y 10) ===== */
.boton {
  display: inline-block;
  border-radius: 999px;
  font-weight: 700;
  padding: 11px 20px;
  font-size: 14px;
  transition: background-color .18s, color .18s, border-color .18s;
}
.boton--grande { padding: 15px 28px; font-size: 15px; }
/* El CTA "Consultar por mi ciudad" de Cobertura mide 14px 26px/15px en el diseño
   (línea 454 del template): ni el tamaño base (11px 20px/14px) ni --grande
   (15px 28px/15px) calzan. Hallazgo de revisión 10-sep-2026: sin este modificador
   el botón salía 21% más angosto que el aprobado. */
.boton--mediano { padding: 14px 26px; font-size: 15px; }
.boton--primario { background: var(--marca); color: var(--fondo); }
.boton--primario:hover { background: var(--marca-clara); color: var(--fondo); }
/* El diseño usa rgba(255,255,255,.25) en los dos botones fantasma reales del
   documento (este y el "Enviar otro" del formulario); --borde-fuerte (.16) es
   un valor distinto que en el diseño solo usan los chips de atributos de la
   sección Paula, no los botones. */
.boton--fantasma {
  /* Sin esto, un <a> se ve bien por accidente (los enlaces no traen fondo de
     por sí) pero un <button> real —como "Enviar otro"— hereda el gris del
     user-agent y ninguna otra regla de esta clase lo pisaba: texto claro
     sobre fondo claro, 1,06:1 medido en vivo contra el 4,5:1 del proyecto.
     Explícito acá para que no vuelva a pasar con el próximo botón (no <a>)
     que use esta clase. */
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--blanco) 25%, transparent);
  color: var(--tinta);
}
.boton--fantasma:hover { border-color: var(--marca); color: var(--marca); }

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: clamp(48px, 7vw, 90px) var(--margen) clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.hero__glow {
  position: absolute;
  top: -120px;
  left: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--marca) 35%, transparent), transparent 68%);
  pointer-events: none;
}
.hero__principal { position: relative; min-width: 0; }

.hero__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--blanco) 18%, transparent);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta);
}
.hero__etiqueta-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marca);
}

.hero__titulo {
  font-family: var(--titular);
  font-weight: 800;
  font-size: clamp(44px, 6.6vw, 92px);
  line-height: .95;
  letter-spacing: -.03em;
  margin: 22px 0 0;
  text-wrap: balance;
}
.hero__titulo-marca { color: var(--marca); }

.hero__descripcion {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--tinta-media);
  max-width: 520px;
  margin: 22px 0 0;
  text-wrap: pretty;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* Franja de cifras del hero: no se instancia hoy porque las tres entradas de
   datos.cifras siguen en null (spec §7.3, no publicar sin confirmar con el
   cliente). .cifra (el ítem) y .hero__cifras (el envoltorio que los agrupa)
   quedan listos para cuando el cliente las confirme. */
.hero__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 44px);
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--blanco) 10%, transparent);
}
.cifra { display: flex; flex-direction: column; }
.cifra strong {
  font-family: var(--titular);
  font-size: 34px;
  font-weight: 800;
  color: var(--blanco);
  line-height: 1;
}
.cifra span {
  font-size: 13px;
  color: var(--tinta-apagada);
  margin-top: 4px;
}

.hero__collage {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}
.hero__foto {
  width: 100%;
  height: clamp(130px, 15vw, 190px);
  object-fit: cover;
  border-radius: 20px;
}
.hero__foto--grande {
  grid-column: 1 / 3;
  height: clamp(240px, 30vw, 380px);
  border-radius: 26px;
}
.hero__chip {
  position: absolute;
  right: -10px;
  bottom: -26px;
  background: var(--marca);
  color: var(--fondo);
  font-family: var(--titular);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
  padding: 16px 22px;
  border-radius: 18px;
  animation: scfloat 5s ease-in-out infinite;
}
@keyframes scfloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ===== Marquesina ===== */
.marquesina {
  overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--blanco) 9%, transparent);
  background: var(--fondo-alt);
  padding: 18px 0;
}
.marquesina__pista {
  display: flex;
  width: max-content;
  gap: 56px;
  animation: scmarquee 26s linear infinite;
}
.marquesina__grupo {
  display: flex;
  align-items: center;
  gap: 56px;
  font-family: var(--titular);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  white-space: nowrap;
}
.marquesina__separador { color: var(--marca-clara); }
@keyframes scmarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== Servicios ===== */
.servicios { padding: clamp(56px, 7vw, 110px) var(--margen); }
.servicios__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.servicios__titulos { min-width: 0; }
/* Clase compartida para etiquetas de sección (usada en múltiples secciones) */
.etiqueta-seccion {
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
}

.servicios .etiqueta-seccion {
  color: var(--marca);
}
.servicios__titulo {
  font-family: var(--titular);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 12px 0 0;
  max-width: 16ch;
  text-wrap: balance;
}
.servicios__resumen {
  color: var(--tinta-apagada);
  font-size: 16px;
  line-height: 1.6;
  max-width: 380px;
  margin: 0;
  text-wrap: pretty;
}
.servicios__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 24px;
  padding: 30px;
  transition: background-color .18s, border-color .18s;
}
.tarjeta:hover { background: var(--superficie-alta); border-color: var(--marca); }
.tarjeta__numero {
  font-family: var(--titular);
  font-size: 13px;
  font-weight: 800;
  color: var(--marca-clara);
  letter-spacing: .1em;
}
.tarjeta h3 {
  font-family: var(--titular);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.015em;
  margin: 14px 0 10px;
}
.tarjeta p {
  color: var(--tinta-apagada);
  font-size: 15px;
  line-height: 1.62;
  margin: 0;
}

/* ===== Trabajos (galería rearmada, spec §7.1) ===== */
.trabajos {
  padding: clamp(56px, 7vw, 110px) var(--margen);
  background: var(--fondo-alt);
  border-block: 1px solid var(--borde);
}
.trabajos .etiqueta-seccion {
  color: var(--marca-clara);
}
.trabajos__titulo {
  font-family: var(--titular);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 12px 0 clamp(28px, 4vw, 48px);
  max-width: 18ch;
  text-wrap: balance;
}
/* Mosaico de celdas chicas: las 8 fotos nuevas son thumbnails de 300px del
   sitio antiguo (spec §7.1, docs/PENDIENTES.md), y a ese tamaño de celda no
   se nota. Celdas grandes sí lo notarían. */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.galeria figure { position: relative; margin: 0; border-radius: 22px; overflow: hidden; }
.galeria img { width: 100%; height: clamp(200px, 22vw, 260px); object-fit: cover; }
.galeria figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--fondo) 92%, transparent));
  font-weight: 700;
  font-size: 14px;
}

/* ===== Marcas que confían ===== */
.clientes { padding: clamp(48px, 6vw, 86px) var(--margen); }
.clientes .etiqueta-seccion {
  color: var(--tinta-tenue);
  text-align: center;
  margin-bottom: 34px;
}
/* Los 14 logos son JPG en escala de grises con fondo blanco: sobre el fondo
   oscuro del sitio quedarían con un recuadro, así que van sobre tarjeta
   blanca (spec §7.1). */
.marcas {
  display: grid;
  /* auto-fill, NO auto-fit: auto-fit colapsa las pistas vacías de la última
     fila y estira sus logos al doble que los demás. Con 14 marcas y este
     mínimo, en escritorio caben 7 por fila, o sea dos filas parejas. */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  align-items: center;
}
.marcas__caja {
  background: var(--blanco);
  border-radius: 14px;
  padding: 14px 18px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Limitado por ancho Y por alto. Antes solo por alto: en una caja de 120px el
   logo quedaba en 54px, con más de la mitad del ancho desperdiciado al lado. */
.marcas__caja img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ===== Paula / Quiénes somos ===== */
.paula {
  padding: clamp(56px, 7vw, 110px) var(--margen);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  background: var(--fondo-alt);
  border-top: 1px solid var(--borde);
}
.paula .etiqueta-seccion { color: var(--marca-clara); }

.paula__medios { position: relative; min-width: 0; }
.paula__fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.paula__foto {
  width: 100%;
  height: clamp(130px, 15vw, 190px);
  object-fit: cover;
  border-radius: 20px;
}
.paula__foto--grande {
  grid-column: 1 / 3;
  height: clamp(320px, 42vw, 520px);
  border-radius: 28px;
}
/* El diseño trae rgba(255,255,255,.12) para este borde puntual: no es --borde (.08)
   ni --borde-fuerte (.16), así que sigue el patrón de .boton--fantasma/.hero__etiqueta
   para un valor de alfa que no tiene token propio. */
.paula__insignia {
  position: absolute;
  left: -8px;
  bottom: -18px;
  background: var(--fondo);
  border: 1px solid color-mix(in srgb, var(--blanco) 12%, transparent);
  border-radius: 18px;
  padding: 16px 20px;
}
.paula__nombre {
  font-family: var(--titular);
  font-weight: 800;
  font-size: 18px;
}
.paula__cargo {
  font-size: 13px;
  color: var(--marca);
  margin-top: 3px;
  font-weight: 700;
}

.paula__texto { min-width: 0; }
.paula__titulo {
  font-family: var(--titular);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 12px 0 18px;
  text-wrap: balance;
}
.paula__parrafo {
  font-size: 16.5px;
  color: var(--tinta-media);
  line-height: 1.65;
  margin: 0 0 14px;
  text-wrap: pretty;
}
.paula__parrafo--apagada {
  font-size: 16px;
  color: var(--tinta-apagada);
  margin: 0 0 26px;
}
.paula__atributos { display: flex; flex-wrap: wrap; gap: 10px; }
/* Reutilizable: mismo chip que usa esta sección para "Lúdicos", "Cercanos", etc. */
.atributo {
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13.5px;
  color: var(--tinta);
}

/* ===== Cobertura =====
   La 7ª tarjeta del diseño (la nota promocional sobre armar equipo en otra ciudad)
   no se porta: spec §7.3 la lista junto a las cifras del hero como dato "sin
   verificar", con la misma resolución (no publicar sin confirmación del cliente);
   _comun.md blinda esa omisión bajo "datos de relleno retirados (§7.3)". Las
   ciudades que se publican NO son las 6 del diseño original: el dueño confirmó el
   10-sep-2026 la ubicación real de la agencia — casa matriz en La Ligua, equipo
   local en Santiago, Viña del Mar y La Serena — 4 tarjetas, con test que exige
   exactamente 4. */
.cobertura { padding: clamp(56px, 7vw, 110px) var(--margen); }
.cobertura .etiqueta-seccion { color: var(--marca); }
.cobertura__cuerpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 60px);
}
.cobertura__intro { min-width: 0; }
.cobertura__titulo {
  font-family: var(--titular);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 12px 0 18px;
  text-wrap: balance;
}
.cobertura__resumen {
  color: var(--tinta-apagada);
  font-size: 16px;
  line-height: 1.65;
  max-width: 460px;
  margin: 0 0 24px;
  text-wrap: pretty;
}
.cobertura__ciudades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  min-width: 0;
}
.ciudad {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 18px;
  padding: 20px;
}
.ciudad__nombre { font-family: var(--titular); font-weight: 800; font-size: 19px; }
.ciudad__rol { font-size: 13px; color: var(--tinta-tenue); margin-top: 4px; }

/* ===== Contacto =====
   El fondo (Fondo-Contacto.jpg, ver assets/inventario.json) y el velo van
   absolutos dentro de .contacto, que por eso necesita position:relative.
   .contacto__cuerpo también lleva position:relative: los dos absolutos van
   antes en el DOM, y sin esto pintarían ENCIMA del contenido normal en vez de
   debajo (un elemento posicionado pinta sobre el flujo normal salvo que este
   también esté posicionado, sea cual sea su orden de aparición). */
.contacto {
  position: relative;
  padding: clamp(56px, 7vw, 110px) var(--margen);
  border-top: 1px solid var(--borde);
}
.contacto__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .22;
}
.contacto__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fondo) 90%, transparent),
    color-mix(in srgb, var(--fondo) 97%, transparent));
}
.contacto__cuerpo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.contacto__datos { min-width: 0; }
.contacto .etiqueta-seccion { color: var(--marca); }
.contacto__titulo {
  font-family: var(--titular);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 12px 0 18px;
  text-wrap: balance;
}
.contacto__resumen {
  color: var(--tinta-media);
  font-size: 16px;
  line-height: 1.65;
  max-width: 420px;
  margin: 0 0 30px;
  text-wrap: pretty;
}
.contacto__lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 30px;
}
.contacto__enlace { color: var(--tinta); font-size: 16px; font-weight: 700; }
.contacto__enlace:hover { color: var(--marca); }
.contacto__direccion { color: var(--tinta-apagada); font-size: 15px; }

/* Fila de redes: contenedor listo para Instagram/Facebook/LinkedIn (spec §7.3),
   mismo patrón que .hero__cifras/.cifra (Tarea 4) para datos aún no confirmados.
   El botón de WhatsApp NO comparte este contenedor: cuando exista el número usa
   .boton (Tarea 4), no este pill de .redes — es la diferencia admitida en
   _comun.md, spec §8, y el diseño tampoco lo pensaba como una red social más. */
.redes { display: flex; gap: 10px; flex-wrap: wrap; }
.redes a {
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--blanco) 20%, transparent);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta);
}
.redes a:hover {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--blanco);
}

.contacto__formulario {
  background: var(--superficie);
  border: 1px solid color-mix(in srgb, var(--blanco) 10%, transparent);
  border-radius: 26px;
  padding: clamp(22px, 3vw, 34px);
  min-width: 0;
}

/* ===== Formulario de contacto (Tarea 9) =====
   Grid tal cual el diseño: columnas auto-fit de 180px, nombre/empresa/email/
   teléfono a media fila, servicio/mensaje/botón a fila completa. */
.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

/* Fuera de la vista pero presente en el DOM: el bot lo llena, la persona no.
   No usa display:none/visibility:hidden -- un bot que scrapea el HTML crudo
   los detecta y los evita; este patrón sobrevive a esa evasión. */
.form__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  color: var(--tinta-apagada);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.form__campo--ancho { grid-column: 1 / -1; }

/* text-transform/letter-spacing en :none/0 porque el input hereda el
   uppercase/tracking de .form__campo (es su <label> padre) y el texto que
   escribe la persona no debería salir en mayúsculas. */
.form__control {
  background: var(--fondo);
  border: 1px solid color-mix(in srgb, var(--blanco) 14%, transparent);
  border-radius: 12px;
  padding: 13px 15px;
  color: var(--tinta);
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  resize: vertical;
}
.form__control::placeholder { color: var(--tinta-apagada); opacity: 1; }
.form__control:focus-visible { border-color: var(--marca); }

.form__enviar { grid-column: 1 / -1; padding: 16px; font-size: 15.5px; }

/* Sin fondo propio (queda transparente, hereda el --superficie de
   .contacto__formulario) para que el test de contraste mida el color real
   compuesto en vez de una mezcla con "transparent" que ese mismo test no
   sabe recomponer contra lo que hay detrás. El borde --marca no necesita
   ese cuidado: no es texto. */
.form__error {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid var(--marca);
  border-radius: 12px;
  color: var(--tinta);
  font-size: 14px;
  line-height: 1.5;
}
.form__error p { margin: 0 0 6px; }
.form__error a {
  color: var(--marca-clara);
  font-weight: 700;
  text-decoration: underline;
}

/* Sin display:flex a propósito: un display puesto en la clase pisaría al
   [hidden] del propio navegador (misma especificidad, y el autor siempre
   gana sobre la hoja del user agent), así que el acuse quedaría visible
   aunque el JS lo marque hidden. Bloque simple + text-align hace lo mismo
   sin ese riesgo. */
.form__ok { text-align: center; padding: 20px 0; }
.form__ok h3 {
  font-family: var(--titular);
  font-weight: 800;
  font-size: 26px;
  color: var(--marca);
  margin: 0 0 12px;
}
/* El diseño (línea 492 de template.html) no le pone max-width a este párrafo:
   ocupa el ancho del contenedor. El max-width que traía acá lo recortaba a
   340px contra los 565px del diseño a 1440px, con más quiebres de línea de
   los que el diseño pide. */
.form__ok p {
  color: var(--tinta-media);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
}
.form__reenviar { margin-top: 20px; padding: 11px 22px; }

/* ===== Pie de página =====
   El diseño repite el logo cuadrado a 30px de alto: mismo problema que la
   cabecera (spec §7.2, Tarea 4), ilegible a ese tamaño. Mismo tratamiento
   (signo recortado + nombre en texto vivo), a una escala menor acorde al
   resto del pie — 13.5px es el tamaño que ya usan el copyright y los
   enlaces de al lado, así que el wordmark no desentona con sus vecinos. */
.pie {
  padding: clamp(34px, 4vw, 56px) var(--margen);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--borde);
}
.pie__marca { display: flex; align-items: center; gap: 10px; }
.pie__signo { height: 30px; width: 30px; object-fit: contain; }
.pie__nombre {
  font-family: var(--titular);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: -.01em;
  line-height: 1;
}
.pie__derechos { font-size: 13.5px; color: var(--tinta-tenue); }
/* Crédito del estudio: presente pero discreto, no compite con la marca del cliente. */
.pie__credito {
  font-size: 13px;
  color: var(--tinta-tenue);
}
.pie__credito a {
  color: var(--tinta-apagada);
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.pie__credito a:hover {
  color: var(--marca-clara);
  border-bottom-color: var(--marca-clara);
}
.pie__corazon { color: var(--marca); }

.pie__enlaces { display: flex; gap: 18px; font-size: 13.5px; }
.pie__enlace { color: var(--tinta-apagada); }
.pie__enlace:hover { color: var(--marca); }

/* El diseño anima la marquesina y el chip del hero. Quien pide menos movimiento
   no recibe ninguno: el diseño original no contemplaba esto. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Sin JavaScript el formulario no puede acusar recibo ni avisar un error, y un
   POST a secas devolvería JSON crudo. Se esconde y se ofrece el correo. */
.form-sin-js { display: none; }
.sin-js .form-sin-js {
  display: block; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 18px; padding: 20px; color: var(--tinta-apagada);
  font-size: 15px; line-height: 1.6; margin: 0;
}
.sin-js .form { display: none; }