/* ============ Fuentes (alojadas en el sitio, licencia OFL) ============ */
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/pretendard-latin.woff2') format('woff2');
  font-weight: 45 920;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

/* ============ Identidad (cambiar acá para cambiar todo el sitio) ============ */
/* Tema claro, el de siempre. El oscuro se activa con data-tema="oscuro" en <html> (botón del sol del encabezado). */
:root {
  --fondo: #F6F6F2;
  --superficie: #FFFFFF;
  --superficie-2: #EFF0EA;
  --borde: #E2E3DC;
  --borde-fuerte: #C9CBC1;
  --texto: #0D0E12;
  --texto-suave: #575A64;
  --acento: #C8F04A;
  --acento-hover: #B9E33A;
  --sobre-acento: #0D0E12;
  /* El acento como texto, borde o foco sobre el fondo: el lima no se lee sobre blanco, así que va un verde oliva */
  --acento-texto: #4F6B00;
  --acento-borde: rgba(79, 107, 0, 0.45);
  --acento-tenue: rgba(200, 240, 74, 0.3);
  --anillo-foco: rgba(79, 107, 0, 0.2);
  --peligro: #B42318;
  --peligro-borde: rgba(180, 35, 24, 0.4);
  --error-texto: #A3271E;
  --aviso-texto: #8A5300;
  --aviso-borde: rgba(138, 83, 0, 0.4);
  --info-texto: #0B5C99;
  --fondo-translucido: rgba(246, 246, 242, 0.85);
  --fondo-translucido-fuerte: rgba(246, 246, 242, 0.94);
  --sombra: 0 12px 32px rgba(13, 14, 18, 0.12);
  --boton-claro-hover: #2A2C36;
  --borde-google: #C9CBC1;
  /* Logo: la V y el punto */
  --logo-v: #0D0E12;
  --logo-punto: #4F6B00;
  /* Cielo estrellado del fondo */
  --estrella: #0D0E12;
  --estrella-acento: #4F6B00;
  --opacidad-cielo: 0.45;

  --fuente-titulos: 'Pretendard', 'Poppins', system-ui, sans-serif;
  --fuente-texto: 'Poppins', system-ui, sans-serif;
  --fuente-marca: 'Jost', 'Poppins', system-ui, sans-serif;

  --radio: 16px;
  --radio-chico: 10px;
  --ancho: 1200px;
  --margen: 16px;
  --alto-encabezado: 72px;

  color-scheme: light;
}
@media (min-width: 720px) {
  :root { --margen: 32px; }
}

/* Tema oscuro ("Nocturno"): mismos nombres, otros valores. */
:root[data-tema="oscuro"] {
  --fondo: #0D0E12;
  --superficie: #17181F;
  --superficie-2: #1E2029;
  --borde: #2A2C36;
  --borde-fuerte: #3A3D4A;
  --texto: #F2F2F4;
  --texto-suave: #A0A3AE;
  --acento: #C8F04A;
  --acento-hover: #D6F57A;
  --sobre-acento: #0D0E12;
  --acento-texto: #C8F04A;
  --acento-borde: rgba(200, 240, 74, 0.45);
  --acento-tenue: rgba(200, 240, 74, 0.13);
  --anillo-foco: rgba(200, 240, 74, 0.18);
  --peligro: #FF8A7A;
  --peligro-borde: rgba(255, 138, 122, 0.45);
  --error-texto: #FFB4A9;
  --aviso-texto: #FFD38A;
  --aviso-borde: rgba(255, 211, 138, 0.5);
  --info-texto: #9FD8FF;
  --fondo-translucido: rgba(13, 14, 18, 0.85);
  --fondo-translucido-fuerte: rgba(13, 14, 18, 0.92);
  --sombra: 0 12px 32px rgba(0, 0, 0, 0.4);
  --boton-claro-hover: #FFFFFF;
  --borde-google: transparent;
  --logo-v: #F2F2F4;
  --logo-punto: #C8F04A;
  --estrella: #F2F2F4;
  --estrella-acento: #C8F04A;
  --opacidad-cielo: 1;
  color-scheme: dark;
}


/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-encabezado) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html { background: var(--fondo); }
body {
  margin: 0;
  background: transparent;
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 3px; border-radius: 4px; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--acento); color: var(--sobre-acento);
  padding: 10px 16px; border-radius: var(--radio-chico); font-weight: 600;
}
.saltar:focus { top: 12px; }
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

/* ============ Botones ============ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--fuente-titulos); font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.boton--primario { background: var(--acento); color: var(--sobre-acento); }
.boton--primario:hover { background: var(--acento-hover); }
.boton--secundario { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); }
.boton--secundario:hover { border-color: var(--texto-suave); }
.boton--claro { background: var(--texto); color: var(--fondo); }
.boton--claro:hover { background: var(--boton-claro-hover); }
.boton--fantasma { background: transparent; color: var(--texto); padding-inline: 14px; }
.boton--fantasma:hover { color: var(--acento-texto); }
.boton--chico { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.boton--bloque { width: 100%; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }
.botones--centro { justify-content: center; }

/* ============ Encabezado ============ */
.encabezado {
  position: sticky; top: 0; z-index: 50;
  background: var(--fondo-translucido);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.encabezado__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--alto-encabezado); }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--fuente-titulos); font-size: 19px; font-weight: 750; letter-spacing: -0.01em; }
.marca svg { flex-shrink: 0; }
.marca__nombre { font-family: var(--fuente-marca); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { text-decoration: none; font-family: var(--fuente-titulos); font-weight: 500; font-size: 15px; padding: 10px 12px; border-radius: 999px; color: var(--texto-suave); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--texto); }
.encabezado__acciones { display: flex; align-items: center; gap: 8px; }
.menu-boton {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: transparent; border: 1px solid var(--borde-fuerte); color: var(--texto); cursor: pointer;
}
.menu-movil { display: none; }
.encabezado__derecha { display: flex; align-items: center; gap: 8px; }
/* Botón del sol: cambia entre el tema claro y el oscuro */
.tema-boton {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 999px;
  background: transparent; border: 1px solid var(--borde-fuerte); color: var(--texto); cursor: pointer;
}
.tema-boton:hover { border-color: var(--texto-suave); }
.tema-boton[aria-pressed="true"] { color: var(--acento-texto); }

/* Con seis enlaces en el menú, el encabezado completo necesita más ancho que el resto del diseño. */
@media (max-width: 1199px) {
  .nav, .encabezado__acciones { display: none; }
  .menu-boton { display: inline-flex; }
  .menu-movil[data-abierto="true"] {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px var(--margen) 20px; border-top: 1px solid var(--borde);
  }
  .menu-movil a:not(.boton) { text-decoration: none; font-family: var(--fuente-titulos); font-weight: 500; padding: 12px 0; border-bottom: 1px solid var(--borde); }
  .menu-movil .botones { margin-top: 12px; }
  .menu-movil .boton { flex: 1; }
}

/* ============ Etiquetas y textos de sección ============ */
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fuente-titulos); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto-suave); border: 1px solid var(--borde); border-radius: 999px; padding: 6px 14px;
}
.etiqueta--acento { color: var(--acento-texto); border-color: var(--acento-borde); }
.seccion { padding-block: 88px; border-top: 1px solid var(--borde); }
.seccion--sin-borde { border-top: 0; }
.seccion__cabecera { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; max-width: 760px; }
.seccion__cabecera--centro { align-items: center; text-align: center; margin-inline: auto; }
.seccion__cabecera > .etiqueta { align-self: flex-start; }
.seccion__cabecera--centro > .etiqueta { align-self: center; }
.seccion__titulo { font-size: clamp(32px, 5vw, 52px); font-weight: 750; letter-spacing: -0.03em; }
.seccion__bajada { font-size: 18px; color: var(--texto-suave); max-width: 640px; }
.acento { color: var(--acento-texto); }

/* ============ Hero ============ */
.hero { padding-block: 72px 88px; text-align: center; }
.hero__contenido { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero__titulo { font-size: clamp(42px, 8vw, 84px); font-weight: 800; line-height: 1.0; letter-spacing: -0.04em; max-width: 1000px; }
.hero__bajada { font-size: clamp(17px, 2.2vw, 20px); color: var(--texto-suave); max-width: 640px; }
.eleccion { display: grid; gap: 14px; width: 100%; max-width: 680px; margin-top: 8px; }
@media (min-width: 560px) { .eleccion { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eleccion__opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; text-decoration: none;
  background: var(--superficie); border: 1.5px solid var(--borde-fuerte); border-radius: 18px; padding: 18px 20px;
  transition: border-color .15s, background-color .15s;
}
.eleccion__opcion:hover { border-color: var(--texto-suave); background: var(--superficie-2); }
.eleccion__opcion--marca { border-color: var(--acento-texto); }
.eleccion__opcion--marca:hover { border-color: var(--acento-texto); }
.eleccion__opcion--marca svg { color: var(--acento-texto); }
.eleccion__opcion svg { flex-shrink: 0; transition: transform .15s; }
.eleccion__opcion:hover svg { transform: translateX(3px); }
.eleccion__texto { display: flex; flex-direction: column; gap: 4px; }
.eleccion__titulo { font-family: var(--fuente-titulos); font-weight: 700; font-size: 21px; color: var(--texto); }
.eleccion__detalle { font-size: 14px; color: var(--texto-suave); }
@media (prefers-reduced-motion: reduce) { .eleccion__opcion svg { transition: none; } .eleccion__opcion:hover svg { transform: none; } }
.hero__formatos { display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 2.5vw, 24px); margin-top: 40px; }
.formato { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.formato figcaption { font-size: 13px; color: var(--texto-suave); text-align: center; }
.formato__marco { width: clamp(96px, 22vw, 170px); }
.formato--4x5 .formato__marco { aspect-ratio: 4 / 5; }
.formato--9x16 .formato__marco { aspect-ratio: 9 / 16; }
.formato--1x1 .formato__marco { aspect-ratio: 1 / 1; }

/* Espacio para imagen: se reemplaza por <img> cuando haya material propio */
.media-vacia {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie); border: 1.5px dashed var(--borde-fuerte); border-radius: var(--radio);
  color: var(--texto-suave); font-size: 12px;
}
.media-vacia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============ Trabajos ============ */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filtro {
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  background: transparent; color: var(--texto-suave); border: 1px solid var(--borde-fuerte);
  font-family: var(--fuente-titulos); font-size: 15px; font-weight: 500; cursor: pointer;
}
.filtro:hover { color: var(--texto); }
.filtro[aria-pressed="true"] { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.galeria { columns: 2; column-gap: 12px; }
@media (min-width: 720px) { .galeria { columns: 4; column-gap: 16px; } }
.obra { break-inside: avoid; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.obra[hidden] { display: none; }
.obra .media-vacia { width: 100%; }
.obra[data-formato="carrusel"] .media-vacia { aspect-ratio: 4 / 5; }
.obra[data-formato="video"] .media-vacia { aspect-ratio: 9 / 16; }
.obra[data-formato="producto"] .media-vacia { aspect-ratio: 1 / 1; }
.obra figcaption { font-size: 13px; color: var(--texto-suave); }
.galeria__vacia { color: var(--texto-suave); }

/* ============ Por qué ============ */
.dos-columnas { display: grid; gap: 40px; align-items: center; }
.dos-columnas > * { min-width: 0; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
.dos-columnas:has(> .texto-guia) { align-items: start; }
.lista-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.lista-check svg { flex-shrink: 0; margin-top: 4px; color: var(--acento-texto); }
.comparacion { display: grid; gap: 12px; }
@media (min-width: 560px) { .comparacion { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.comparacion__col { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.comparacion__col--destacada { border-color: var(--acento-borde); }
.comparacion__col h3 { font-size: 18px; font-weight: 700; }
.comparacion__col ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--texto-suave); font-size: 15px; }
.comparacion__col--destacada ol { color: var(--texto); }

/* ============ Una campaña, tres formatos ============ */
.una-campania { margin-top: 56px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 24px; padding: clamp(24px, 4vw, 40px); }
.una-campania__titulo { font-size: 15px; font-weight: 600; color: var(--texto-suave); margin-bottom: 24px; font-family: var(--fuente-titulos); }
.una-campania .hero__formatos { margin-top: 0; }

/* ============ Cómo funciona ============ */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 24px; padding: 24px; }
.brief { display: flex; flex-direction: column; gap: 18px; }
.brief__fila { display: flex; flex-direction: column; gap: 6px; }
.brief__dato { font-size: 13px; color: var(--texto-suave); }
.brief__valor { font-family: var(--fuente-titulos); font-size: 18px; font-weight: 650; }
.brief__referencias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.brief__referencias .media-vacia { aspect-ratio: 1 / 1; border-radius: 12px; }
.estado { align-self: flex-start; font-size: 12px; font-weight: 600; font-family: var(--fuente-titulos); color: var(--sobre-acento); background: var(--acento); border-radius: 999px; padding: 4px 10px; }
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: paso; }
.paso { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }
.paso__numero {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--superficie-2); border: 1px solid var(--borde-fuerte);
  font-family: var(--fuente-titulos); font-weight: 700; color: var(--acento-texto);
}
.paso h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.paso p { color: var(--texto-suave); font-size: 15px; }

/* ============ Precios ============ */
.precios { display: grid; gap: 16px; }
@media (min-width: 820px) { .precios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { display: flex; flex-direction: column; gap: 20px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 24px; padding: clamp(24px, 4vw, 36px); }
.plan__para { font-family: var(--fuente-titulos); font-size: 15px; font-weight: 600; color: var(--texto-suave); }
.plan__monto { font-family: var(--fuente-titulos); font-size: clamp(30px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em; }
.plan__detalle { color: var(--texto-suave); font-size: 15px; margin-top: -12px; }
.plan .lista-check li { font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.chip { font-size: 14px; font-weight: 500; border: 1px solid var(--borde-fuerte); border-radius: 999px; padding: 6px 14px; color: var(--texto); }
.nota { margin-top: 20px; font-size: 13px; color: var(--texto-suave); text-align: center; }

/* ============ Puertas: marca / creador ============ */
.puertas { display: grid; gap: 16px; }
@media (min-width: 820px) { .puertas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.puerta { display: flex; flex-direction: column; gap: 24px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 24px; padding: clamp(24px, 4vw, 36px); }
.puerta h3 { font-size: 28px; font-weight: 750; }
.puerta .lista-check { flex: 1; }
.puerta .lista-check li { font-size: 15px; }
.puerta__mas { align-self: center; font-size: 14px; color: var(--texto-suave); }
.puerta__mas:hover { color: var(--texto); }
.muestra { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); }
.muestra__titulo { font-family: var(--fuente-titulos); font-size: 13px; font-weight: 600; color: var(--texto-suave); margin-bottom: 4px; }
.muestra__item { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.muestra__item + .muestra__item { border-top: 1px solid var(--borde); }
.muestra__avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 999px; border: 1.5px dashed var(--borde-fuerte); background: var(--superficie); }
.muestra__texto { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.muestra__texto strong { font-family: var(--fuente-titulos); font-weight: 650; }
.muestra__texto span { color: var(--texto-suave); font-size: 13px; }
.muestra__nuevo { font-family: var(--fuente-titulos); font-size: 11px; font-weight: 700; color: var(--sobre-acento); background: var(--acento); border-radius: 999px; padding: 2px 8px; }

/* ============ WhatsApp ============ */
.whatsapp-banda {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 16px; padding: 24px clamp(24px, 4vw, 36px);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 24px;
}
.whatsapp-banda strong { display: block; font-family: var(--fuente-titulos); font-size: 20px; font-weight: 700; }
.whatsapp-banda span { color: var(--texto-suave); }

/* ============ Preguntas frecuentes ============ */
.faq { max-width: 860px; display: flex; flex-direction: column; }
.faq--centro { margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--fuente-titulos); font-size: 18px; font-weight: 650;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 24px; font-weight: 400; color: var(--texto-suave); line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding-bottom: 22px; color: var(--texto-suave); max-width: 720px; }
.faq__grupo { margin-top: 48px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--acento-texto); }
.faq__grupo:first-child { margin-top: 0; }
.faq__mas { margin-top: 32px; }

/* ============ Llamado final ============ */
.cta-final { text-align: center; padding-block: 104px; border-top: 1px solid var(--borde); }
.cta-final h2 { font-size: clamp(34px, 6vw, 64px); font-weight: 800; letter-spacing: -0.035em; max-width: 880px; margin: 0 auto 32px; }

/* ============ Pie ============ */
.pie { border-top: 1px solid var(--borde); padding-block: 56px 120px; color: var(--texto-suave); font-size: 14px; }
@media (min-width: 861px) { .pie { padding-bottom: 56px; } }
.pie__grilla { display: grid; gap: 32px; }
@media (min-width: 720px) { .pie__grilla { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); } }
.pie__marca p { margin-top: 12px; max-width: 320px; }
.pie h2 { font-size: 14px; font-weight: 600; color: var(--texto); margin-bottom: 12px; letter-spacing: 0; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pie a, .pie .enlace-boton { text-decoration: none; color: var(--texto-suave); display: inline-block; padding: 6px 0; }
.pie a:hover, .pie .enlace-boton:hover { color: var(--texto); }
.enlace-boton { background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.pie__legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* ============ Barra fija en celular ============ */
.barra-movil {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  gap: 8px; padding: 12px var(--margen) calc(12px + env(safe-area-inset-bottom));
  background: var(--fondo-translucido-fuerte); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--borde);
}
.barra-movil .boton { flex: 1; padding-inline: 12px; font-size: 15px; }
@media (max-width: 860px) { .barra-movil { display: flex; } }

/* ============ Aviso (próximamente) ============ */
.aviso {
  position: fixed; left: 50%; bottom: 96px; z-index: 60; transform: translate(-50%, 16px);
  max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 14px;
  background: var(--texto); color: var(--fondo); font-weight: 500; font-size: 15px;
  box-shadow: var(--sombra);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.aviso[data-visible="true"] { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 861px) { .aviso { bottom: 32px; } }

/* ============ Páginas internas ============ */
.pagina-cabecera { padding-block: 72px 56px; }
.pagina-cabecera h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 800; letter-spacing: -0.035em; max-width: 900px; }
.pagina-cabecera p { margin-top: 20px; font-size: 18px; color: var(--texto-suave); max-width: 680px; }
.migas { font-size: 14px; color: var(--texto-suave); margin-bottom: 24px; }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.migas li + li::before { content: '/'; margin-right: 8px; color: var(--borde-fuerte); }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--texto); }
.indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.indice a { text-decoration: none; font-size: 14px; font-weight: 500; border: 1px solid var(--borde-fuerte); border-radius: 999px; padding: 10px 16px; color: var(--texto-suave); }
.indice a:hover { color: var(--texto); border-color: var(--texto-suave); }

.linea-tiempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .linea-tiempo { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.linea-tiempo li { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.linea-tiempo h3 { font-size: 17px; font-weight: 700; }
.linea-tiempo p { font-size: 14px; color: var(--texto-suave); }
.linea-tiempo .paso__numero { width: 32px; height: 32px; font-size: 14px; }

.texto-guia { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.texto-guia h3 { font-size: 20px; font-weight: 700; margin-top: 16px; }
.texto-guia p, .texto-guia li { color: var(--texto-suave); }
.texto-guia strong { color: var(--texto); font-weight: 600; }
.texto-guia ul, .texto-guia ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }

.tabla-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
.tabla--chica { min-width: 0; }
.tabla th, .tabla td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.tabla th { font-family: var(--fuente-titulos); font-weight: 650; color: var(--texto-suave); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--superficie); }
.tabla tr:last-child td { border-bottom: 0; }

.checklist { display: grid; gap: 12px; }
@media (min-width: 720px) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checklist > div { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; }
.checklist h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.checklist p { font-size: 14px; color: var(--texto-suave); }

.error-404 { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; padding-block: 96px; }
.error-404 .codigo { font-family: var(--fuente-titulos); font-size: clamp(80px, 18vw, 160px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--acento-texto); }

/* =====================================================================
   Etapa 2: cuentas, paneles y perfiles
   ===================================================================== */
[hidden] { display: none !important; }

/* ============ Formularios ============ */
.formulario { display: flex; flex-direction: column; gap: 20px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo > label, .campo > legend, .grupo > legend { font-family: var(--fuente-titulos); font-size: 15px; font-weight: 600; }
.campo__ayuda { font-size: 13px; color: var(--texto-suave); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="password"], .campo input[type="url"],
.campo input[type="number"], .campo input[type="date"], .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  font: inherit; font-size: 16px;
}
.campo textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento-texto); box-shadow: 0 0 0 3px var(--anillo-foco); }
.campo input[aria-invalid="true"] { border-color: var(--peligro); }
.campo input[type="file"] { font: inherit; font-size: 14px; color: var(--texto-suave); }
.campo input[type="file"]::file-selector-button {
  margin-right: 12px; min-height: 44px; padding: 10px 16px; cursor: pointer;
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: 999px; font: inherit;
}
.fila-campos { display: grid; gap: 16px; }
@media (min-width: 640px) { .fila-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grupo { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; cursor: pointer;
  border: 1px solid var(--borde-fuerte); border-radius: 999px; color: var(--texto-suave); font-size: 15px;
}
.opcion input:checked + span { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.opcion input:focus-visible + span { outline: 2px solid var(--acento-texto); outline-offset: 3px; }
.opcion input:disabled + span { opacity: 0.4; cursor: not-allowed; }
.roles { display: grid; gap: 12px; }
@media (min-width: 560px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rol { position: relative; }
.rol input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rol span { display: flex; flex-direction: column; gap: 4px; padding: 18px; cursor: pointer; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); height: 100%; }
.rol strong { font-family: var(--fuente-titulos); font-size: 18px; }
.rol small { color: var(--texto-suave); font-size: 14px; }
.rol input:checked + span { border-color: var(--acento-texto); box-shadow: inset 0 0 0 1px var(--acento-texto); }
.rol input:focus-visible + span { outline: 2px solid var(--acento-texto); outline-offset: 3px; }
.separador { display: flex; align-items: center; gap: 12px; color: var(--texto-suave); font-size: 13px; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--borde); }
.boton--google { background: #FFFFFF; color: #1F1F1F; border-color: var(--borde-google); }
.boton--google:hover { background: #F2F2F2; }
.boton[disabled], .boton[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.enlace { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.boton--peligro { background: transparent; color: var(--peligro); border-color: var(--peligro-borde); }
.boton--peligro:hover { border-color: var(--peligro); }

/* ============ Alertas y estados ============ */
.alerta { padding: 14px 16px; border-radius: var(--radio-chico); border: 1px solid var(--borde-fuerte); background: var(--superficie); font-size: 15px; }
.alerta[data-tipo="error"] { border-color: var(--peligro-borde); color: var(--error-texto); }
.alerta[data-tipo="ok"] { border-color: var(--acento-borde); color: var(--acento-texto); }
.alerta[data-tipo="info"] { color: var(--texto); }
.insignia { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fuente-titulos); font-size: 12px; font-weight: 650; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--borde-fuerte); color: var(--texto-suave); white-space: nowrap; }
.insignia[data-estado="activo"], .insignia[data-estado="abierto"], .insignia[data-estado="aprobada"] { color: var(--sobre-acento); background: var(--acento); border-color: var(--acento); }
.insignia[data-estado="pendiente"] { color: var(--aviso-texto); border-color: var(--aviso-borde); }
.insignia[data-estado="rechazado"] { color: var(--error-texto); border-color: var(--peligro-borde); }
.cargando { color: var(--texto-suave); padding-block: 32px; }
.vacio { color: var(--texto-suave); padding: 32px; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); text-align: center; }

/* ============ Página de cuenta (ingresar) ============ */
.cuenta { display: grid; place-items: start center; padding-block: 56px 96px; }
.cuenta__caja { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 24px; }
.cuenta__caja h1 { font-size: clamp(32px, 5vw, 44px); font-weight: 800; letter-spacing: -0.03em; }
.pestanas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; }
.pestanas button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--texto-suave); font-family: var(--fuente-titulos); font-size: 15px; font-weight: 600; cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--texto); color: var(--fondo); }

/* ============ Paneles ============ */
.panel { padding-block: 48px 96px; display: flex; flex-direction: column; gap: 32px; }
.panel__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.panel__cabecera h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; letter-spacing: -0.03em; }
.panel__cabecera p { color: var(--texto-suave); margin-top: 8px; }
.bloque { background: var(--superficie); border: 1px solid var(--borde); border-radius: 24px; padding: clamp(20px, 4vw, 32px); display: flex; flex-direction: column; gap: 20px; }
.bloque__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bloque h2 { font-size: 22px; font-weight: 750; }
.bloque__bajada { color: var(--texto-suave); font-size: 15px; }
.estado-perfil { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }
.lista__item h3 { font-size: 17px; font-weight: 700; }
.lista__item p { color: var(--texto-suave); font-size: 14px; }
.lista__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.lista__texto { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* ============ Portfolio ============ */
.portfolio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .portfolio { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pieza { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pieza__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radio); background: var(--superficie-2); border: 1px solid var(--borde); }
.pieza__media img, .pieza__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pieza__media .insignia { position: absolute; top: 8px; left: 8px; background: var(--fondo-translucido); }
.pieza__media .insignia[data-estado="aprobada"] { background: var(--acento); }
.pieza figcaption { font-size: 13px; color: var(--texto-suave); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.limites { font-size: 14px; color: var(--texto-suave); }

/* ============ Creadores públicos ============ */
.filtros-barra { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.filtros-barra .campo { flex: 1 1 200px; }
.tarjetas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tarjeta-creador { display: flex; flex-direction: column; gap: 12px; text-decoration: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; padding: 12px 12px 18px; transition: border-color .15s; }
.tarjeta-creador:hover { border-color: var(--borde-fuerte); }
.tarjeta-creador__media { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--superficie-2); }
.tarjeta-creador__media img, .tarjeta-creador__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-creador h2 { font-size: 19px; font-weight: 750; padding-inline: 6px; }
.tarjeta-creador p { font-size: 14px; color: var(--texto-suave); padding-inline: 6px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; padding-inline: 6px; }
.etiquetas span { font-size: 12px; border: 1px solid var(--borde-fuerte); border-radius: 999px; padding: 3px 10px; color: var(--texto-suave); }
.perfil-cabecera { display: flex; flex-direction: column; gap: 16px; padding-block: 56px 40px; }
.perfil-cabecera h1 { font-size: clamp(38px, 7vw, 68px); font-weight: 800; letter-spacing: -0.035em; }
.perfil-cabecera p { color: var(--texto-suave); max-width: 720px; font-size: 17px; white-space: pre-line; }
.perfil-cabecera .etiquetas { padding-inline: 0; }

/* ============ Briefs ============ */
.brief-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.brief-tarjeta h2 { font-size: 22px; font-weight: 750; }
.brief-tarjeta__marca { color: var(--texto-suave); font-size: 14px; }
.brief-tarjeta__datos { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.brief-tarjeta__datos dt { color: var(--texto-suave); }
.brief-tarjeta__datos div { display: flex; gap: 6px; }
.brief-tarjeta__datos dd { margin: 0; font-weight: 500; }
.brief-tarjeta details summary { cursor: pointer; font-family: var(--fuente-titulos); font-weight: 600; color: var(--acento-texto); min-height: 44px; display: flex; align-items: center; }
.brief-tarjeta details dl { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 0; }
.brief-tarjeta details dt { font-family: var(--fuente-titulos); font-weight: 650; font-size: 14px; }
.brief-tarjeta details dd { margin: 4px 0 0; color: var(--texto-suave); white-space: pre-line; }
.lista-briefs { display: flex; flex-direction: column; gap: 16px; }

/* ============ Administración ============ */
.revision { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.revision h3 { font-size: 19px; font-weight: 750; }
.revision p, .revision dd { color: var(--texto-suave); font-size: 14px; white-space: pre-line; }
.revision dl { margin: 0; display: grid; gap: 10px; }
.revision dt { font-family: var(--fuente-titulos); font-weight: 650; font-size: 13px; }
.revision dd { margin: 2px 0 0; }
.revision__acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.revision__acciones .campo { flex: 1 1 260px; }

.listado { padding-bottom: 88px; }

/* ============ Logos en movimiento ============ */
.cinta {
  overflow: hidden; padding-block: 8px 56px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.cinta__pista { display: flex; width: max-content; animation: cinta-desplazar 90s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__grupo { display: flex; align-items: center; gap: 48px; margin: 0; padding: 0 48px 0 0; list-style: none; }
/* Si los logos llegan sin difuminar, subir este valor (ej.: 3px). */
.cinta { --difuminado-logos: 0px; }
.cinta img { display: block; height: 40px; width: auto; max-width: 160px; object-fit: contain; opacity: 0.75; filter: grayscale(1) brightness(1.6) blur(var(--difuminado-logos)); }
.logo-hueco { display: block; width: 140px; height: 48px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borde); }
@keyframes cinta-desplazar { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cinta__pista { animation: none; }
  .cinta { overflow-x: auto; }
}

/* ============ Testimonios ============ */
.testimonios__cabecera { margin-bottom: 32px; }
.testimonios { columns: 1; column-gap: 16px; }
@media (min-width: 720px) { .testimonios { columns: 2; } }
@media (min-width: 1024px) { .testimonios { columns: 3; } }
.testimonio { break-inside: avoid; margin: 0 0 16px; display: flex; flex-direction: column; gap: 14px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; padding: 24px; }
.estrellas { display: flex; gap: 2px; color: var(--acento-texto); }
.estrellas svg { fill: currentColor; }
.testimonio blockquote { margin: 0; font-size: 16px; line-height: 1.6; }
.testimonio figcaption { display: flex; flex-direction: column; font-size: 14px; }
.testimonio figcaption strong { font-family: var(--fuente-titulos); font-weight: 650; }
.testimonio figcaption span { color: var(--texto-suave); }
.cinta__grupo:has(.cinta__rubro) { gap: 12px; padding-right: 12px; }
.cinta__rubro { white-space: nowrap; font-family: var(--fuente-titulos); font-size: 16px; font-weight: 600; color: var(--texto-suave); border: 1px solid var(--borde-fuerte); border-radius: 999px; padding: 10px 20px; }

/* Espacios con material cargado: sin borde punteado */
.media-vacia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-vacia:has(img, video) { border: 0; background: var(--superficie-2); }

/* ============ Cielo estrellado (detrás de todo el contenido) ============ */
.cielo { position: fixed; inset: 0; z-index: -1; pointer-events: none; color: var(--estrella); opacity: var(--opacidad-cielo); }
.cielo svg { width: 100%; height: 100%; display: block; }
.cielo circle { fill: currentColor; }
.cielo .cielo__destello { fill: var(--estrella-acento); animation: cielo-titilar 3.2s ease-in-out infinite; }
.cielo .cielo__destello:nth-of-type(3n) { animation-delay: -1.1s; }
.cielo .cielo__destello:nth-of-type(3n+1) { animation-delay: -2.2s; }
@keyframes cielo-titilar { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .cielo .cielo__destello { animation: none; opacity: 0.8; } }

/* ============ Propuestas ============ */
.insignia[data-estado="enviada"] { color: var(--texto); }
.insignia[data-estado="elegida"], .insignia[data-estado="asignado"], .insignia[data-estado="nueva"] { color: var(--sobre-acento); background: var(--acento); border-color: var(--acento); }
.insignia[data-estado="no_elegida"], .insignia[data-estado="retirada"], .insignia[data-estado="cerrado"] { opacity: 0.75; }

.campo-con-boton { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.campo-con-boton input { flex: 1 1 160px; min-width: 0; }
.comparacion { font-size: 14px; color: var(--texto-suave); min-height: 1.4em; }
.comparacion[data-tipo="igual"] { color: var(--acento-texto); }
.comparacion[data-tipo="arriba"] { color: var(--aviso-texto); }
.comparacion[data-tipo="abajo"] { color: var(--info-texto); }

/* Creador: ficha del proyecto + formulario */
.propuesta-grilla { display: grid; gap: 20px; align-items: start; }
@media (min-width: 980px) { .propuesta-grilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.propuesta-columna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.presupuesto-marca { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--radio); background: var(--fondo); border: 1px solid var(--borde); }
.presupuesto-marca span { font-size: 13px; color: var(--texto-suave); }
.presupuesto-marca strong { font-family: var(--fuente-titulos); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.ficha { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ficha dt { font-family: var(--fuente-titulos); font-weight: 650; font-size: 14px; }
.ficha dd { margin: 4px 0 0; color: var(--texto-suave); white-space: pre-line; overflow-wrap: anywhere; }

.ejemplos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.ejemplo { position: relative; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.ejemplo input { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; accent-color: var(--acento); z-index: 1; }
.ejemplo__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radio-chico); border: 2px solid var(--borde); background: var(--superficie-2); }
.ejemplo__media img, .ejemplo__media video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ejemplo input:checked ~ .ejemplo__media { border-color: var(--acento-texto); }
.ejemplo input:disabled ~ .ejemplo__media { opacity: 0.4; }
.ejemplo input:focus-visible ~ .ejemplo__media { outline: 2px solid var(--acento-texto); outline-offset: 2px; }
.ejemplo__texto { font-size: 13px; color: var(--texto-suave); }

/* Marca: comparar propuestas */
.propuestas { display: grid; gap: 16px; }
@media (min-width: 900px) { .propuestas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.propuesta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.propuesta[data-estado="elegida"] { border-color: var(--acento-texto); }
.propuesta__cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.propuesta__cabecera h2 { font-size: 21px; font-weight: 750; }
.propuesta__cabecera h2 a { text-decoration: none; }
.propuesta__cabecera h2 a:hover { text-decoration: underline; }
.propuesta__creador { color: var(--texto-suave); font-size: 14px; margin-top: 4px; }
.propuesta__insignias { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.propuesta__precio { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.propuesta__precio strong { font-family: var(--fuente-titulos); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.propuesta__datos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 14px; }
.propuesta__datos dt { color: var(--texto-suave); }
.propuesta__datos dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.propuesta__incluye { grid-column: 1 / -1; }
.propuesta__mensaje { white-space: pre-line; overflow-wrap: anywhere; color: var(--texto); font-size: 15px; padding: 14px 16px; border-radius: var(--radio-chico); background: var(--fondo); border: 1px solid var(--borde); }
.propuesta__ejemplos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.propuesta__fecha { font-size: 13px; color: var(--texto-suave); }
.propuestas-descartadas summary { cursor: pointer; font-family: var(--fuente-titulos); font-weight: 600; color: var(--texto-suave); min-height: 44px; display: flex; align-items: center; }
.propuestas-descartadas .propuestas { margin-top: 12px; }
.propuestas-descartadas .propuesta { opacity: 0.8; }
.lista__propuestas { font-weight: 500; }
.lista__propuestas[data-nuevas="true"] { color: var(--acento-texto) !important; }

/* Precio final */
.precio-final { border-color: var(--acento-texto); }
.precio-final__estado { font-family: var(--fuente-titulos); font-weight: 650; font-size: 17px; }
.precio-final__estado[data-acordado="true"] { color: var(--acento-texto); }
.precio-final__montos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.precio-final__montos div { padding: 12px 14px; border-radius: var(--radio-chico); background: var(--fondo); border: 1px solid var(--borde); }
.precio-final__montos dt { font-size: 13px; color: var(--texto-suave); }
.precio-final__montos dd { margin: 4px 0 0; font-family: var(--fuente-titulos); font-size: 20px; font-weight: 750; }

/* ============ Chat ============ */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Lista de conversaciones de los paneles */
.conversaciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.conversacion { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); text-decoration: none; color: inherit; min-width: 0; }
.conversacion:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.conversacion[data-sin-leer="true"] { border-color: var(--acento-borde); }
.conversacion__cabecera, .conversacion__pie { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.conversacion__pie { align-items: center; }
.conversacion__con { font-family: var(--fuente-titulos); font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversacion__cuando { flex-shrink: 0; font-size: 13px; color: var(--texto-suave); }
.conversacion[data-sin-leer="true"] .conversacion__cuando { color: var(--acento-texto); }
.conversacion__proyecto { font-size: 13px; color: var(--texto-suave); overflow-wrap: anywhere; }
.conversacion__ultimo { min-width: 0; font-size: 14px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversacion[data-sin-leer="true"] .conversacion__ultimo { color: var(--texto); font-weight: 500; }
.conversacion__sin-leer {
  flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acento); color: var(--sobre-acento); font-family: var(--fuente-titulos); font-size: 12px; font-weight: 700;
}

/* Acceso al chat desde la propuesta del creador */
.acceso-chat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--radio); background: var(--fondo); border: 1px solid var(--borde); }
.acceso-chat p { flex: 1 1 220px; font-size: 14px; color: var(--texto-suave); }

/* Conversación */
.panel--chat { gap: 20px; padding-top: 32px; }
.panel--chat .migas { margin-bottom: 0; }
.panel--chat .panel__cabecera h1 { font-size: clamp(24px, 4vw, 40px); }
.panel--chat .panel__cabecera p { margin-top: 6px; }
.enlace-cabecera { margin-left: 12px; color: var(--acento-texto); font-weight: 600; white-space: nowrap; }
@media (max-width: 719px) {
  .panel--chat { gap: 14px; padding-top: 20px; }
  .chat { border-radius: 18px; }
  .chat__regla { padding: 10px 14px; font-size: 12px; }
}
.chat { display: flex; flex-direction: column; overflow: hidden; background: var(--superficie); border: 1px solid var(--borde); border-radius: 24px; }
.chat__regla { padding: 12px 20px; border-bottom: 1px solid var(--borde); font-size: 13px; color: var(--texto-suave); }
.chat__mensajes {
  list-style: none; margin: 0; padding: 20px clamp(12px, 3vw, 24px);
  display: flex; flex-direction: column; gap: 6px;
  height: clamp(280px, calc(100dvh - 400px), 720px); overflow-y: auto; overscroll-behavior: contain;
}
.chat__mensajes:focus-visible { outline-offset: -3px; border-radius: 0; }
.chat__dia {
  align-self: center; margin-block: 10px 4px; padding: 4px 12px; border-radius: 999px;
  background: var(--fondo); font-family: var(--fuente-titulos); font-size: 12px; font-weight: 600; color: var(--texto-suave);
}
.chat__dia::first-letter { text-transform: uppercase; }
.chat__vacio { margin: auto; max-width: 420px; text-align: center; font-size: 15px; color: var(--texto-suave); }
.mensaje { display: flex; flex-direction: column; gap: 4px; max-width: min(82%, 560px); padding: 10px 14px; border-radius: 18px; }
.mensaje--otro { align-self: flex-start; background: var(--superficie-2); border: 1px solid var(--borde-fuerte); border-bottom-left-radius: 6px; }
.mensaje--propio { align-self: flex-end; background: var(--acento-tenue); border: 1px solid var(--acento-borde); border-bottom-right-radius: 6px; }
.mensaje--aviso { align-self: center; max-width: min(94%, 600px); margin-block: 6px; padding: 8px 14px; text-align: center; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-chico); }
.mensaje__autor { font-family: var(--fuente-titulos); font-size: 12px; font-weight: 700; color: var(--texto-suave); }
.mensaje__texto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; }
.mensaje--aviso .mensaje__texto { font-size: 14px; color: var(--texto-suave); }
.mensaje__meta { align-self: flex-end; display: flex; gap: 8px; font-size: 11px; color: var(--texto-suave); }
.mensaje--aviso .mensaje__meta { align-self: center; }
.mensaje__visto { color: var(--acento-texto); font-weight: 600; }
.chat__cerrado { padding: 16px 20px; border-top: 1px solid var(--borde); background: var(--fondo); font-size: 15px; color: var(--texto-suave); }
.chat__form { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--borde); background: var(--fondo); }
.chat__escribir { display: flex; align-items: flex-end; gap: 10px; }
.chat__escribir textarea {
  flex: 1 1 auto; min-width: 0; min-height: 48px; max-height: 200px; resize: none;
  padding: 12px 14px; border-radius: var(--radio-chico); border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto); font: inherit; font-size: 16px; line-height: 1.4;
}
.chat__escribir textarea:focus { outline: none; border-color: var(--acento-texto); box-shadow: 0 0 0 3px var(--anillo-foco); }
.chat__escribir .boton { flex-shrink: 0; min-height: 48px; }
.chat__pie { display: flex; justify-content: space-between; gap: 12px; }
.chat__ayuda { display: none; }
@media (pointer: fine) { .chat__ayuda { display: inline; } }

/* ============ Contrato ============ */
.contrato-pagina { display: flex; flex-direction: column; gap: 20px; max-width: 860px; }
.situacion[data-tono="accion"] { border-color: var(--acento-texto); }
.situacion .botones:empty { display: none; }
.documento { gap: 24px; }
.documento__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.documento__meta { font-size: 14px; color: var(--texto-suave); }
.documento__resumen { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .documento__resumen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.documento__resumen div { padding: 12px 14px; border-radius: var(--radio-chico); background: var(--fondo); border: 1px solid var(--borde); min-width: 0; }
.documento__resumen dt { font-size: 13px; color: var(--texto-suave); }
.documento__resumen dd { margin: 4px 0 0; font-family: var(--fuente-titulos); font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.documento__clausulas { margin: 0; padding: 0; list-style: none; counter-reset: clausula; display: flex; flex-direction: column; gap: 18px; }
.documento__clausulas li { counter-increment: clausula; display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--borde); }
.documento__clausulas li:first-child { padding-top: 0; border-top: 0; }
.documento__clausulas h3 { font-size: 16px; font-weight: 700; }
.documento__clausulas h3::before { content: counter(clausula) ". "; color: var(--acento-texto); }
.documento__clausulas p { color: var(--texto-suave); line-height: 1.6; overflow-wrap: anywhere; }
.aceptaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .aceptaciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aceptaciones li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--radio-chico); background: var(--fondo); border: 1px solid var(--borde); min-width: 0; }
.aceptaciones li[data-aceptado="true"] { border-color: var(--acento-borde); }
.aceptaciones strong { font-family: var(--fuente-titulos); font-size: 15px; overflow-wrap: anywhere; }
.aceptaciones span { font-size: 14px; color: var(--texto-suave); }
.aceptaciones li[data-aceptado="true"] span { color: var(--acento-texto); }
.aceptar { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 600; }
.aceptar input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--acento); }

/* ============ Logo ============ */
/* El SVG trae los colores del tema oscuro; acá se adaptan al tema activo. */
.marca svg path { stroke: var(--logo-v); }
.marca svg circle { fill: var(--logo-punto); }