/* ROCCA Inmobiliaria — sitio público.
   Colores del manual de marca v1.0 (marcas/rocca/Manual_de_marca_ROCCA.md). Tipografía: Marcellus + Archivo (Instrument Serif solo en el perfil del fundador)
   (decisión de Guillo 22-sep-2026: Cormorant + Montserrat se veía "hecha con IA").
   carbón y marfil dominan, terracota solo para la acción principal, dorado casi nunca. */

:root {
  --carbon: #171717;
  --carbon-2: #232220;
  --marfil: #F2EFE7;
  --marfil-2: #E9E5DA;
  --papel: #FAF8F3;
  --terracota: #A95742;
  --terracota-osc: #8E4634;
  --verde: #24463E;
  --dorado: #C8A96B;
  --texto: #171717;
  --texto-2: #55524B;
  --texto-inv: #F2EFE7;
  --texto-inv-2: #C4BFB3;
  --linea: #D9D4C7;
  --linea-inv: #3A3834;

  --serif: 'Marcellus', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho: 1200px;
  --margen: clamp(16px, 5vw, 56px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--marfil);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

[hidden] { display: none !important; }

a { color: inherit; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }

.salto { position: absolute; left: -9999px; top: 0; }
.salto:focus { left: 16px; top: 16px; z-index: 100; background: var(--papel); padding: 12px 16px; }

:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }

/* ---------- Tipografía ---------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: 0.01em; }
h1 { font-size: clamp(40px, 7vw, 76px); }
h2 { font-size: clamp(32px, 4.6vw, 52px); }
h3 { font-size: clamp(24px, 2.6vw, 30px); }

.antetitulo {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin: 0 0 18px;
}
.oscuro .antetitulo { color: var(--texto-inv-2); }

.entradilla { font-size: clamp(16px, 1.6vw, 19px); color: var(--texto-2); max-width: 620px; margin: 20px 0 0; }
.oscuro .entradilla { color: var(--texto-inv-2); }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.boton-principal { background: var(--terracota); color: #FFFFFF; }
.boton-principal:hover { background: var(--terracota-osc); }
.boton-linea { border-color: currentColor; background: transparent; color: var(--texto); }
.boton-linea:hover { background: var(--carbon); color: var(--marfil); border-color: var(--carbon); }
.oscuro .boton-linea { color: var(--texto-inv); }
.oscuro .boton-linea:hover { background: var(--marfil); color: var(--carbon); border-color: var(--marfil); }

.grupo-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- Encabezado ---------- */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--carbon);
  color: var(--texto-inv);
  border-bottom: 1px solid var(--linea-inv);
}
.encabezado .contenedor { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; }

.logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.logo svg { width: 34px; height: 40px; flex-shrink: 0; }
.logo-texto { display: flex; flex-direction: column; gap: 5px; }
.logo-nombre { font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: 0.32em; line-height: 1; margin-right: -0.32em; }
.logo-descriptor { font-family: var(--sans); font-weight: 500; font-size: 8.5px; letter-spacing: 0.36em; line-height: 1; }

.menu { display: flex; align-items: center; gap: 32px; }
.menu a:not(.boton) { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-decoration: none; color: var(--texto-inv-2); }
.menu a:not(.boton):hover, .menu a[aria-current="page"] { color: var(--texto-inv); }
.menu .boton { min-height: 42px; padding: 0 20px; }

.boton-menu {
  display: none;
  background: none;
  border: 1px solid var(--linea-inv);
  color: var(--texto-inv);
  min-width: 48px;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 1000px) {
  .boton-menu { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; }
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--carbon);
    border-bottom: 1px solid var(--linea-inv);
    padding: 8px var(--margen) 24px;
  }
  .menu.abierto { display: flex; }
  .menu a:not(.boton) { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--linea-inv); font-size: 15px; }
  .menu .boton { margin-top: 16px; min-height: 48px; }
}

/* ---------- Secciones ---------- */

.seccion { padding: clamp(72px, 10vw, 128px) 0; }
.oscuro { background: var(--carbon); color: var(--texto-inv); }
.papel { background: var(--papel); }

.cabecera-seccion { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }

/* Portada */
.portada { padding: clamp(88px, 14vw, 168px) 0 clamp(72px, 10vw, 120px); position: relative; overflow: hidden; }
.portada h1 { max-width: 13ch; }
.portada-monograma {
  position: absolute;
  right: calc(var(--margen) * -0.5);
  bottom: -60px;
  width: min(46vw, 520px);
  color: var(--carbon-2);
  pointer-events: none;
}
.portada .contenedor { position: relative; }
.portada-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--linea-inv);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-inv-2);
}

/* Servicios */
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.tarjeta { background: var(--marfil); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.tarjeta p { margin: 0; color: var(--texto-2); }
.tarjeta ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tarjeta li { padding-left: 22px; position: relative; font-size: 15px; }
.tarjeta li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--terracota); }
.tarjeta .numero { font-family: var(--serif); font-size: 18px; color: var(--terracota); }
@media (max-width: 900px) { .rejilla-3 { grid-template-columns: minmax(0, 1fr); } }

/* Pasos */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; counter-reset: paso; margin: 0; padding: 0; list-style: none; }
.pasos li { border-top: 1px solid var(--linea-inv); padding-top: 24px; counter-increment: paso; }
.pasos li::before { content: '0' counter(paso); display: block; font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--dorado); margin-bottom: 20px; }
.pasos h3 { font-size: 26px; margin-bottom: 12px; }
.pasos p { margin: 0; color: var(--texto-inv-2); font-size: 15px; }
@media (max-width: 960px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pasos { grid-template-columns: minmax(0, 1fr); } }

/* Zonas */
.zonas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.zonas li { border: 1px solid var(--linea); padding: 12px 20px; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; background: var(--papel); }

/* ---------- Inmuebles ---------- */

.listado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
@media (max-width: 960px) { .listado { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .listado { grid-template-columns: minmax(0, 1fr); } }

.ficha-tarjeta { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.ficha-tarjeta:hover .foto img, .ficha-tarjeta:hover .foto .sin-foto { transform: scale(1.03); }
.foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--marfil-2); }
.foto img, .foto .sin-foto { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.sin-foto {
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background: linear-gradient(160deg, #DAD4C6, #C9C1B0);
  color: #4A463F;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.etiqueta {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--carbon);
  color: var(--marfil);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 11px;
}
.ficha-tarjeta .datos { padding-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.ficha-tarjeta h3 { font-size: 26px; }
.ficha-tarjeta .lugar { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2); }
.ficha-tarjeta .medidas { font-size: 14px; color: var(--texto-2); }
.ficha-tarjeta .precio { font-size: 17px; font-weight: 600; margin-top: 4px; }

.vacio {
  border: 1px solid var(--linea);
  background: var(--papel);
  padding: clamp(32px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.vacio p { margin: 0; color: var(--texto-2); max-width: 560px; }

/* Venta | Arriendo: dos botones grandes, siempre claro en cuál estás. */
.selector-operacion { display: inline-flex; border: 1px solid var(--carbon); margin-bottom: 28px; }
.selector-operacion a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 140px; padding: 0 28px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--texto); }
.selector-operacion a[aria-current="page"] { background: var(--carbon); color: var(--marfil); }
.selector-operacion a:not([aria-current]):hover { background: var(--marfil-2); }
@media (max-width: 480px) { .selector-operacion { display: flex; } .selector-operacion a { flex: 1; min-width: 0; } }

.nota-portada { margin: 20px 0 0; font-size: 15px; }
.nota-portada a { color: var(--texto-inv-2); text-underline-offset: 4px; }
.nota-portada a:hover { color: var(--texto-inv); }

/* Filtros */
.filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; padding: 24px; background: var(--papel); border: 1px solid var(--linea); }
@media (max-width: 860px) { .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .filtros { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Formularios ---------- */

.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo label, .campo .rotulo { font-size: 14px; font-weight: 500; color: var(--texto-2); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--linea);
  border-radius: 0;
  background: #FFFFFF;
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
}
.campo textarea { padding: 12px 14px; min-height: 110px; resize: vertical; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }

.captacion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .captacion { grid-template-columns: minmax(0, 1fr); } }
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; background: var(--papel); border: 1px solid var(--linea); padding: clamp(24px, 3vw, 40px); }
.formulario .ancho { grid-column: 1 / -1; }
@media (max-width: 520px) { .formulario { grid-template-columns: minmax(0, 1fr); } }
.consentimiento { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--texto-2); line-height: 1.5; }
.consentimiento input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--terracota); flex-shrink: 0; }
.nota { font-size: 13px; color: var(--texto-2); margin: 0; }
.error { color: #9A2F1E; font-size: 13px; margin: 0; min-height: 1em; }

.lista-captacion { margin: 32px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.lista-captacion li { display: flex; gap: 16px; align-items: baseline; }
.lista-captacion span { font-family: var(--serif); font-size: 22px; color: var(--terracota); min-width: 28px; }

/* ---------- Ficha de un inmueble ---------- */

.miga { font-size: 13px; letter-spacing: 0.06em; color: var(--texto-2); margin-bottom: 28px; }
.miga a { text-decoration: none; }
.miga a:hover { text-decoration: underline; }

.galeria { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; aspect-ratio: 16 / 8; }
.galeria button { padding: 0; border: 0; cursor: zoom-in; position: relative; overflow: hidden; background: var(--marfil-2); }
.galeria button:first-child { grid-row: 1 / 3; }
.galeria img, .galeria .sin-foto { width: 100%; height: 100%; object-fit: cover; }
.galeria .mas { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(23, 23, 23, .55); color: #FFFFFF; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 700px) {
  .galeria { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; aspect-ratio: auto; }
  .galeria button { aspect-ratio: 4 / 3; }
  .galeria button:first-child { grid-row: auto; }
  .galeria button:nth-child(n+2) { display: none; }
}
.leyenda-amoblada { position: absolute; left: 12px; bottom: 12px; background: rgba(23, 23, 23, .78); color: #FFFFFF; font-size: 11px; letter-spacing: 0.08em; padding: 6px 10px; }

.detalle { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); margin-top: 48px; align-items: start; }
@media (max-width: 900px) { .detalle { grid-template-columns: minmax(0, 1fr); } }
.detalle .precio-grande { font-size: clamp(24px, 3vw, 32px); font-weight: 600; margin: 16px 0 0; }
.detalle .descripcion { white-space: pre-line; color: var(--texto-2); font-size: 17px; margin-top: 32px; }
/* Ficha técnica: dato a la izquierda, cifra a la derecha, en la misma sans. */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 32px 0 0; border-top: 1px solid var(--carbon); }
.cifras div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.cifras dt { font-size: 15px; color: var(--texto-2); }
.cifras dd { margin: 0; font-family: var(--sans); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 560px) { .cifras { grid-template-columns: minmax(0, 1fr); } }
.caja-contacto { position: sticky; top: 100px; background: var(--carbon); color: var(--texto-inv); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.caja-contacto p { margin: 0; color: var(--texto-inv-2); font-size: 15px; }
.caja-contacto .codigo { font-size: 12px; letter-spacing: 0.2em; color: var(--texto-inv-2); }

/* Visor de fotos */
.visor { border: 0; padding: 0; background: rgba(12, 12, 12, .96); width: 100vw; height: 100vh; max-width: none; max-height: none; }
.visor::backdrop { background: rgba(12, 12, 12, .9); }
.visor-contenido { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 64px 16px; }
.visor img, .visor .sin-foto { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.visor .sin-foto { width: min(90vw, 900px); aspect-ratio: 4 / 3; height: auto; }
.visor button { position: absolute; background: none; border: 1px solid #5A5752; color: #FFFFFF; min-width: 48px; min-height: 48px; cursor: pointer; font-family: var(--sans); font-size: 13px; letter-spacing: 0.1em; }
.visor .cerrar { top: 12px; right: 12px; padding: 0 16px; }
.visor .anterior { left: 12px; top: 50%; transform: translateY(-50%); }
.visor .siguiente { right: 12px; top: 50%; transform: translateY(-50%); }
.visor .contador { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #C4BFB3; font-size: 13px; letter-spacing: 0.1em; }

/* ---------- Pie ---------- */

.pie { background: var(--carbon); color: var(--texto-inv-2); padding: 72px 0 40px; font-size: 14px; }
.pie .contenedor { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.pie .logo { color: var(--texto-inv); }
.pie h2 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto-inv); margin-bottom: 16px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--texto-inv); }
.pie .legal { grid-column: 1 / -1; border-top: 1px solid var(--linea-inv); padding-top: 24px; margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; }
@media (max-width: 760px) { .pie .contenedor { grid-template-columns: minmax(0, 1fr); } }

/* Botón flotante de WhatsApp */
.flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  background: var(--carbon);
  color: var(--marfil);
  border: 1px solid var(--linea-inv);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.flotante svg { width: 20px; height: 20px; }
.flotante:hover { background: var(--terracota); border-color: var(--terracota); }

.texto-legal { max-width: 760px; }
.texto-legal h2 { font-size: 30px; margin: 40px 0 12px; }
.texto-legal p, .texto-legal li { color: var(--texto-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Consignación en línea ---------- */

.angosto { max-width: 860px; }
.progreso { scroll-margin-top: 96px; list-style: none; margin: 40px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; counter-reset: p; }
.progreso li { counter-increment: p; font-size: 12px; color: var(--texto-2); border-top: 3px solid var(--linea); padding-top: 8px; }
.progreso li::before { content: counter(p) '. '; }
.progreso li.hecho { border-color: var(--carbon); color: var(--texto); }
.progreso li.actual { border-color: var(--terracota); color: var(--texto); font-weight: 600; }
@media (max-width: 600px) { .progreso li { font-size: 0; } .progreso li::before { font-size: 12px; } .progreso li.actual { font-size: 12px; } }

.paso { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.paso legend { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 8px; padding: 0; }
.paso legend:focus { outline: none; }
.subtitulo { font-family: var(--sans); font-size: 17px; font-weight: 600; margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--linea); }

.rejilla-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rejilla-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-campos .ancho { grid-column: 1 / -1; }
@media (max-width: 600px) { .rejilla-campos, .rejilla-campos.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .rejilla-campos { grid-template-columns: minmax(0, 1fr); } }
.angosto-campo { max-width: 260px; }

.opciones-grandes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .opciones-grandes { grid-template-columns: minmax(0, 1fr); } }
.opcion-grande { position: relative; cursor: pointer; }
.opcion-grande input { position: absolute; opacity: 0; }
.opcion-grande span { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px solid var(--linea); background: var(--papel); min-height: 120px; }
.opcion-grande strong { font-family: var(--serif); font-weight: 400; font-size: 28px; }
.opcion-grande small { font-size: 14px; color: var(--texto-2); }
.opcion-grande input:checked + span { border-color: var(--carbon); box-shadow: inset 0 0 0 1px var(--carbon); background: #FFFFFF; }
.opcion-grande input:focus-visible + span { outline: 2px solid var(--terracota); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--linea); background: #FFFFFF; font-size: 14px; }
.chip input:checked + span { background: var(--carbon); color: var(--marfil); border-color: var(--carbon); }
.chip input:focus-visible + span { outline: 2px solid var(--terracota); outline-offset: 2px; }

.casillas { display: flex; flex-direction: column; gap: 12px; }
.casilla { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; cursor: pointer; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--carbon); flex-shrink: 0; }
.casilla.destacada { background: var(--papel); border: 1px solid var(--linea); padding: 16px; }

.subir { position: relative; overflow: hidden; align-self: flex-start; }
.subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.subir:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.subir:has(input:disabled) input { cursor: not-allowed; }

.miniaturas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.mini { position: relative; aspect-ratio: 4 / 3; background: var(--marfil-2); overflow: hidden; }
.mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini.subiendo img { opacity: .5; }
.mini.error { outline: 2px solid #9A2F1E; }
.mini-vacia { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; color: var(--texto-2); }
.mini-estado { position: absolute; left: 6px; bottom: 6px; font-size: 11px; background: rgba(23, 23, 23, .75); color: #FFFFFF; padding: 2px 6px; }
.mini-estado:empty { display: none; }
.mini-quitar { position: absolute; top: 4px; right: 4px; border: 0; background: rgba(23, 23, 23, .75); color: #FFFFFF; font-family: var(--sans); font-size: 11px; padding: 6px 8px; cursor: pointer; }

.documentos { display: flex; flex-direction: column; gap: 10px; }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 16px; border: 1px solid var(--linea); background: #FFFFFF; }
.doc-titulo { font-weight: 500; }
.doc-estado { grid-row: 2; font-size: 13px; color: var(--texto-2); }
.doc .subir { grid-row: 1 / 3; grid-column: 2; }
.doc.ok { border-color: var(--verde); }
.doc.ok .doc-estado { color: var(--verde); font-weight: 600; }
.doc.mal .doc-estado { color: #9A2F1E; }
@media (max-width: 520px) { .doc { grid-template-columns: minmax(0, 1fr); } .doc .subir { grid-row: auto; grid-column: auto; } }

.contrato { max-height: 460px; overflow: auto; background: #FFFFFF; border: 1px solid var(--linea); padding: 24px; font-size: 14px; line-height: 1.6; }
.contrato-titulo { font-family: var(--sans); font-size: 15px; font-weight: 600; text-align: center; margin-bottom: 16px; }
.contrato-sub { font-family: var(--sans); font-size: 14px; font-weight: 600; margin: 20px 0 8px; }
.contrato-tabla { width: 100%; border-collapse: collapse; }
.contrato-tabla th, .contrato-tabla td { border: 1px solid var(--linea); padding: 8px 10px; text-align: left; vertical-align: top; }
.contrato-tabla th { width: 34%; background: var(--papel); font-weight: 600; }
.contrato-clausulas { padding-left: 20px; margin: 0; }
.contrato-clausulas li { margin-bottom: 8px; }
code { font-size: 13px; background: var(--marfil-2); padding: 2px 6px; }

.firma-caja { border: 1px solid var(--carbon); background: #FFFFFF; height: 180px; touch-action: none; }
.firma-caja canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.enlace { background: none; border: 0; padding: 8px 0; color: var(--terracota); font-family: var(--sans); font-size: 14px; cursor: pointer; text-decoration: underline; align-self: flex-start; }

.navegacion-pasos { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--linea); }
.navegacion-pasos .boton-principal { margin-left: auto; }
.navegacion-pasos button:disabled { opacity: .6; cursor: wait; }
.listo { padding: 48px 0; scroll-margin-top: 96px; }

/* ---------- Calculadoras ---------- */

.calc-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .calc-rejilla { grid-template-columns: minmax(0, 1fr); } }
.calc-form { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.avanzado summary { cursor: pointer; font-size: 14px; color: var(--texto-2); padding: 8px 0; }
.avanzado .rejilla-campos { margin-top: 12px; }
.calc-resultado { background: #FFFFFF; border: 1px solid var(--linea); padding: clamp(20px, 3vw, 32px); }
.calc-totales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--carbon); }
.calc-totales.uno { grid-template-columns: minmax(0, 1fr); }
.calc-totales span { display: block; font-size: 14px; color: var(--texto-2); }
.calc-totales strong { display: block; font-family: var(--sans); font-size: clamp(24px, 3vw, 32px); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
.calc-totales small { display: block; font-size: 13px; color: var(--texto-2); margin-top: 4px; }
.calc-tabla { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.calc-tabla th, .calc-tabla td { text-align: left; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--linea); vertical-align: top; font-weight: 400; }
.calc-tabla thead th { font-size: 13px; color: var(--texto-2); }
.calc-tabla td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.calc-tabla thead th:not(:first-child) { text-align: right; }
.calc-tabla .calc-grupo th { padding-top: 18px; font-weight: 600; border-bottom-color: var(--carbon); }
.calc-tabla tfoot th { font-weight: 600; }
.calc-tabla tfoot td { font-weight: 600; white-space: normal; }
.calc-notas { margin: 20px 0 0; padding-left: 18px; font-size: 13px; color: var(--texto-2); display: flex; flex-direction: column; gap: 6px; }
.aviso { background: var(--papel); border: 1px solid var(--terracota); padding: 12px 14px; font-size: 14px; margin: 16px 0 0; }
@media (max-width: 560px) {
  .calc-tabla thead { display: none; }
  .calc-tabla tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linea); padding: 8px 0; }
  .calc-tabla th, .calc-tabla td { border: 0; padding: 2px 0; }
  .calc-tabla tbody th { grid-column: 1 / -1; }
  .calc-tabla td { text-align: left; white-space: normal; }
  .calc-tabla td::before { content: attr(data-etiqueta); display: block; font-size: 12px; font-weight: 400; color: var(--texto-2); }
  .calc-tabla .calc-grupo { display: block; }
}
.info-seguro .tarjeta { background: var(--papel); }
.descargas { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--linea); }
.descargas li { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; border-bottom: 1px solid var(--linea); }
.descargas a { text-decoration: none; font-weight: 500; }
.descargas a:hover { text-decoration: underline; }
.descargas span { font-size: 12px; color: var(--texto-2); flex-shrink: 0; }
.calc-tabla .calc-elegido th, .calc-tabla .calc-elegido td { font-weight: 700; }
.campo .nota { font-size: 13px; }
.calc-tabla td[data-etiqueta=""]::before { display: none; }

/* ---------- Programa de compradores ---------- */

.anuncio { background: var(--terracota); color: #FFFFFF; padding: 40px 0; }
.anuncio .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.anuncio .antetitulo { color: #FFFFFF; margin-bottom: 10px; }
.anuncio h2 { font-size: clamp(28px, 3.6vw, 40px); }
.anuncio p { margin: 8px 0 0; }
.anuncio .boton-principal { background: var(--carbon); }
.anuncio .boton-principal:hover { background: #000000; }
.pasos.claro li { border-top-color: var(--linea); }
.pasos.claro p { color: var(--texto-2); }
.pasos.claro li::before { color: var(--terracota); }
.demanda { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.demanda li { background: #FFFFFF; border: 1px solid var(--linea); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.demanda strong { font-family: var(--sans); font-size: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
.demanda span { color: var(--texto-2); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Tarjeta del beneficio comprador (versión B) ---------- */

.tarjeta-rocca { position: relative; width: 100%; aspect-ratio: 85.6 / 53.98; border-radius: 3.7% / 5.9%; overflow: hidden; color: var(--marfil); container-type: inline-size;
  background: radial-gradient(120% 90% at 18% 0%, #2A2927 0%, #171717 55%, #0D0D0D 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 28px 56px rgba(0,0,0,.45), 0 8px 16px rgba(0,0,0,.3); }
.tarjeta-rocca::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.07) 47%, transparent 58%); pointer-events: none; }
.tarjeta-rocca .tr-relieve { position: absolute; right: -9cqw; top: -6cqw; width: 62cqw; height: 75cqw; color: #262523;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.08)) drop-shadow(0 -1px 0 rgba(0,0,0,.65)); }
.tarjeta-rocca .tr-palabra { position: absolute; left: 7.6cqw; top: 7.6cqw; font-family: var(--serif); font-size: 4.6cqw; letter-spacing: .34em; line-height: 1; }
.tarjeta-rocca .tr-chip { position: absolute; left: 7.6cqw; top: 20.5cqw; width: 12.8cqw; height: 9.9cqw; border-radius: 2cqw;
  background: linear-gradient(135deg, #E3CE9C, #B8945A 55%, #D9C08B); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.tarjeta-rocca .tr-nombre { position: absolute; left: 7.6cqw; bottom: 7.6cqw; font-size: 3.1cqw; letter-spacing: .16em; text-transform: uppercase; color: rgba(242,239,231,.88); line-height: 1; }
.tarjeta-rocca .tr-red { position: absolute; right: 7.6cqw; bottom: 7cqw; width: 19cqw; height: auto; display: block; }

.portada-dos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.portada-tarjeta { margin: 0; perspective: 1200px; }
.portada-tarjeta .tarjeta-rocca { transform: rotateY(-14deg) rotateX(6deg) rotate(-4deg); transition: transform .6s ease; }
.portada-tarjeta:hover .tarjeta-rocca { transform: rotateY(-4deg) rotateX(2deg) rotate(-1deg); }
.portada-tarjeta figcaption { margin-top: 28px; font-size: 12px; color: var(--texto-inv-2); text-align: center; }
@media (max-width: 900px) { .portada-dos { grid-template-columns: minmax(0, 1fr); } .portada-tarjeta { max-width: 420px; } }

.anuncio-accion { display: flex; align-items: center; gap: 28px; }
.anuncio-accion .tarjeta-rocca { width: 190px; transform: rotate(-6deg); flex-shrink: 0; }
@media (max-width: 700px) { .anuncio-accion { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .portada-tarjeta .tarjeta-rocca { transition: none; } }
.portada-dos h1 { max-width: none; font-size: clamp(40px, 5vw, 66px); }

.demanda-inicio { background: #FFFFFF; border: 1px solid var(--linea); padding: clamp(24px, 3vw, 40px); }
.demanda-inicio .demanda { margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demanda-inicio .demanda:empty { display: none; }
.rotulo-demanda { margin: 0; font-size: 14px; font-weight: 600; }
.nota-portada a + a { margin-left: 0; }

/* ---------- Estudio de precio: acceso verificado por WhatsApp ---------- */
.estudio-acceso .formulario[hidden] { display: none !important; }
.estudio-titulo { font-size: clamp(34px, 5vw, 52px); }
.estudio-pasos { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; font-size: 17px; color: var(--texto-2); }
.estudio-pasos li { display: flex; gap: 14px; align-items: center; }
.estudio-pasos b { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.estudio-pasos li.activo { color: var(--texto); font-weight: 600; }
.estudio-pasos li.activo b { background: var(--carbon); color: var(--marfil); border-color: var(--carbon); }
.estudio-pasos li.hecho b { background: #24463E; color: #fff; border-color: #24463E; }
.estudio-texto { font-size: 17px; line-height: 1.55; margin: 0; }
.estudio-acceso .campo input { font-size: 19px; }
.estudio-codigo { letter-spacing: .5em; font-variant-numeric: tabular-nums; text-align: center; font-size: 28px !important; }
.estudio-acceso .consentimiento { font-size: 15px; }

/* ---------- /cuanto-vale ---------- */
.cv .contenedor { max-width: 880px; }
.cv-resultado[hidden], .cv-form[hidden] { display: none !important; }
.cv-cabeza h1 { font-size: clamp(34px, 5vw, 52px); }
.cv-pasos { grid-template-columns: repeat(3, auto); justify-content: start; gap: 24px; margin-bottom: 32px; }
@media (max-width: 560px) { .cv-pasos { grid-template-columns: 1fr; gap: 10px; } }
.cv-form .campo input, .cv-form .campo select { font-size: 17px; }
.cv-resultado { display: grid; gap: 20px; font-size: 17px; }
.cv-resultado > * { margin: 0; }
.cv-principal { background: #24463E; color: #fff; border-radius: 16px; padding: 28px; text-align: center; }
.cv-principal span { font-size: 16px; opacity: .9; }
.cv-principal strong { display: block; font-size: clamp(44px, 9vw, 68px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 6px 0; }
.cv-principal p { margin: 0 auto; max-width: 560px; color: #E6EFEA; }
.cv-puesto { background: var(--carbon); color: var(--marfil); border-radius: 16px; padding: 24px 28px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
@media (max-width: 560px) { .cv-puesto { grid-template-columns: 1fr; text-align: center; gap: 12px; } }
.cv-grande { font-size: 54px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; line-height: 1; }
.cv-grande .de { color: #D98A73; } .cv-grande .a { color: #8FC3AE; } .cv-grande .flecha { color: #C4BFB3; font-size: 34px; margin: 0 10px; vertical-align: 8px; }
.cv-puesto p { margin: 0; color: #D9D4C7; line-height: 1.5; } .cv-puesto b { color: #fff; }
.cv-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cv-datos > div, .cv-arriendo { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 18px; text-align: center; }
.cv-datos span, .cv-arriendo span { display: block; font-size: 15px; color: var(--texto-2); font-weight: 600; }
.cv-datos b { display: block; font-size: 24px; margin: 4px 0; }
.cv-datos small, .cv-arriendo small { display: block; font-size: 14px; color: var(--texto-2); line-height: 1.45; }
.cv-arriendo { border-left: 4px solid #24374A; }
.cv-arriendo b { display: block; font-size: 28px; color: #24374A; margin: 4px 0; }
.decision { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 12px; }
.decision .op { border-radius: 14px; padding: 18px; text-align: center; }
.decision .op span { display: block; font-size: 15px; font-weight: 600; }
.decision .op b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 6px; }
.decision .op p { margin: 0; font-size: 15px; line-height: 1.45; }
.decision .buena { background: #E6EFEA; color: #1B3A32; }
.decision .mala { background: #F6E3DD; color: #6E2E20; }
.decision .costo { background: var(--carbon); color: #fff; } .decision .costo p { color: #D9D4C7; }
@media (max-width: 700px) { .decision { grid-template-columns: 1fr; } }
.cv-resultado .remate { text-align: center; font-size: 18px; font-weight: 700; }
.cv-cierre { background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; padding: 24px 28px; display: grid; gap: 16px; }
.cv-cierre h2 { font-size: 26px; margin: 0 0 6px; } .cv-cierre p { margin: 0; color: var(--texto-2); }
.cv-tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 28px; display: grid; gap: 16px; }
.cv-tarjeta h2 { margin: 0; }
.cv-resultado .nota { font-size: 14px; line-height: 1.5; }
.cv-pasos { scroll-margin-top: 110px; }
@media (max-width: 560px) { .cv-datos { grid-template-columns: 1fr; } .cv-principal, .cv-puesto, .cv-cierre, .cv-tarjeta { padding: 22px 18px; } }

/* ---------- Contacto: perfil del fundador ---------- */
.perfil { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: 20px; }
@media (max-width: 860px) { .perfil { grid-template-columns: minmax(0, 1fr); } }
.perfil-foto { margin: 0; position: sticky; top: 110px; }
@media (max-width: 860px) { .perfil-foto { position: static; max-width: 420px; } }
.perfil-foto img { width: 100%; height: auto; display: block; border-radius: 4px; filter: saturate(.92); }
.perfil-texto h2 { font-size: clamp(38px, 5vw, 58px); margin: 0; line-height: 1.05; }
.perfil-cargo { margin: 12px 0 0; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: #C8A96B; }
.perfil-frase { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid #C8A96B; max-width: 34ch; font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; color: var(--marfil); }
.perfil-cifras { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(242,239,231,.14); border: 1px solid rgba(242,239,231,.14); }
@media (max-width: 640px) { .perfil-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.perfil-cifras li { background: var(--carbon); padding: 18px 14px; }
.perfil-cifras b { display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; color: #fff; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.perfil-cifras span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: #C4BFB3; }
.perfil-trayectoria { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 22px; }
.perfil-trayectoria li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 18px; padding-top: 22px; border-top: 1px solid rgba(242,239,231,.14); }
@media (max-width: 520px) { .perfil-trayectoria li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.perfil-trayectoria .anos { font-size: 14px; color: #C8A96B; font-variant-numeric: tabular-nums; padding-top: 2px; }
.perfil-trayectoria b { font-size: 18px; font-weight: 600; color: #fff; }
.perfil-trayectoria p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.6; color: #D9D4C7; }
.contacto-cierre { margin-top: clamp(48px, 7vw, 88px); padding-top: 32px; border-top: 1px solid rgba(242,239,231,.18); display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.contacto-cierre h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 34px); margin: 0; }
.contacto-cierre p { margin: 8px 0 0; color: #C4BFB3; }
.perfil-cifras b { font-size: clamp(20px, 1.9vw, 26px); white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 861px) { .perfil-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Perfil: tipografía editorial (Instrument Serif, escogida 24-sep) y cifras sin recuadros */
.perfil-texto h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(44px, 6vw, 72px); letter-spacing: -.01em; }
.perfil-frase { font-family: 'Instrument Serif', serif; font-size: clamp(26px, 3vw, 38px); line-height: 1.18; max-width: 26ch; border-top: 0; padding-top: 0; }
.perfil-frase em { font-style: italic; color: #C8A96B; }
.perfil-cifras { background: none; border: 0; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; margin-top: 44px; }
.perfil-cifras li { background: none; padding: 0 22px; border-left: 1px solid rgba(200,169,107,.45); }
.perfil-cifras li:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.perfil-cifras b { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(38px, 4vw, 58px); line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.perfil-cifras b small { font-family: 'Archivo', sans-serif; font-size: 12px; letter-spacing: .08em; margin-left: 6px; color: #C8A96B; vertical-align: 6px; }
.perfil-cifras span { margin-top: 12px; font-size: 14px; }
@media (max-width: 1100px) and (min-width: 861px), (max-width: 640px) {
  .perfil-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perfil-cifras li:nth-child(3n+1) { padding-left: 22px; border-left: 1px solid rgba(200,169,107,.45); }
  .perfil-cifras li:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}
.perfil-nota { margin: 26px 0 0; font-size: 12.5px; line-height: 1.55; color: #8F897D; max-width: 62ch; }

/* Cambio de idioma en el menú */
.menu .idioma { font-size: 12px; letter-spacing: .18em; font-weight: 600; border: 1px solid currentColor; padding: 6px 10px; border-radius: 999px; }
.menu a { white-space: nowrap; }

/* ---------- Opiniones de clientes ---------- */
.opiniones { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .opiniones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .opiniones { grid-template-columns: minmax(0, 1fr); } }
.opinion { background: #fff; border: 1px solid var(--linea); padding: 28px 26px 24px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.opinion::before { content: '“'; position: absolute; top: 10px; right: 22px; font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--dorado); opacity: .55; }
.opinion blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texto); flex: 1; }
.opinion footer { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--linea); padding-top: 14px; }
.opinion footer b { font-weight: 600; font-size: 14px; }
.opinion footer span { font-size: 13px; color: var(--texto-2); }

/* Botón de dictado junto a los campos de texto largo */
.dictado { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--linea); background: #fff; color: var(--texto); font: inherit; font-size: 13px; cursor: pointer; border-radius: 999px; }
.dictado svg { width: 16px; height: 16px; }
.dictado.grabando { border-color: var(--terracota); color: var(--terracota); animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 50% { box-shadow: 0 0 0 6px rgba(169,87,66,.15); } }

/* Menú: con "Consignar inmueble" y el cambio de idioma, en pantallas medianas se aprieta */
@media (max-width: 1240px) and (min-width: 1001px) { .menu { gap: 18px; } .menu a { font-size: 13px; } }

/* ---------- Navegación por voz ---------- */
.voz { position: fixed; right: 24px; bottom: 84px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linea); background: var(--papel); color: var(--carbon); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.voz svg { width: 22px; height: 22px; }
.voz.grabando { background: var(--terracota); color: #fff; border-color: var(--terracota); animation: pulso 1.2s ease-in-out infinite; }
.voz-panel { position: fixed; right: 24px; bottom: 140px; z-index: 40; max-width: 320px; background: var(--carbon); color: var(--marfil); padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.voz-panel p { margin: 0; } .voz-panel .voz-sug { margin-top: 6px; font-size: 13px; color: #C4BFB3; }
@media (max-width: 600px) { .voz { right: 16px; bottom: 76px; width: 44px; height: 44px; } .voz-panel { right: 16px; left: 16px; max-width: none; bottom: 128px; } }