/* =========================================================
   ESTILOS COMPARTIDOS — GRUPO INVIERTO
   Los colores y fuentes vienen de css/tema.css.
   Aquí: base, botones, encabezado, secciones, tarjeta de
   propiedad, formularios, pie, flotantes y asistente.
   Cada página tiene además su propio archivo (inicio.css, propiedad.css).
   ========================================================= */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--fuente-texto); font-size: 16px; line-height: 1.6;
  color: var(--color-tinta); background: var(--color-fondo);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.sin-scroll { overflow: hidden; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--fuente-titulo); line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
/* Palabras resaltadas en títulos: índigo sobre claro, menta sobre oscuro */
em { font-style: normal; color: var(--color-acento); }
.seccion--oscura em, .pie em { color: var(--color-destaque-oscuro); }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.icono-relleno { fill: currentColor; stroke: none; }
:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- Utilidades ---------- */
.contenedor { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--margen-lateral); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Etiqueta de sección con el símbolo de la flecha delante */
.etiqueta { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-acento); margin-bottom: 14px; }
.etiqueta::before { content: ""; flex: none; width: 13px; height: 14px; background: url("../media/marca/simbolo-color.svg") center / contain no-repeat; }
.etiqueta--clara::before, .seccion--oscura .etiqueta::before { background-image: url("../media/marca/simbolo-sobre-oscuro.svg"); }
.seccion--oscura .etiqueta { color: var(--color-destaque-oscuro); }
.etiqueta--clara { color: var(--color-sobre-oscuro); opacity: .8; }
.nota { font-size: 13px; color: var(--color-tinta-suave); }
.opcional { color: var(--color-tinta-suave); font-weight: 400; }
.foto-respaldo { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, #2a2d31, #4a4e54); color: rgba(255,255,255,.6); font-size: 13px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: background .25s var(--transicion), transform .25s var(--transicion), border-color .25s, color .25s;
}
.boton:active { transform: scale(.97); }
.boton--acento { background: var(--color-acento); color: var(--color-sobre-acento); }
.boton--acento:hover { background: var(--color-acento-hover); }
.boton--borde { border-color: var(--color-borde); background: var(--color-superficie); }
.boton--borde:hover { border-color: var(--color-tinta); }
.boton--whatsapp { background: var(--color-whatsapp); color: #fff; }
.boton--whatsapp:hover { filter: brightness(.94); }
.boton--vidrio { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.boton--vidrio:hover { background: rgba(255,255,255,.26); }
.boton--pequeno { min-height: 40px; padding: 0 18px; font-size: 14px; }
.boton--ancho { width: 100%; }
.boton svg { width: 18px; height: 18px; }
.boton.favorito.activo svg { fill: #D6453D; stroke: #D6453D; }

.boton-icono {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: transparent; border: 1px solid var(--color-borde);
  transition: background .2s, border-color .2s;
}
.boton-icono:hover { background: var(--color-superficie-2); }

/* Segmentado con indicador deslizante (Comprar / Rentar, Fotos / Video / Dron) */
.segmentado { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--color-superficie-2); flex: none; }
.segmentado button {
  position: relative; z-index: 1; border: 0; background: transparent; padding: 10px 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; color: var(--color-tinta-suave); transition: color .35s var(--transicion);
}
.segmentado button[aria-pressed="true"], .segmentado button[aria-selected="true"] { color: var(--color-fondo); }
.segmentado button small { font-size: 12px; opacity: .7; margin-left: 4px; }
.segmentado__indicador {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; border-radius: 999px;
  background: var(--color-tinta); transition: transform .45s var(--transicion), width .45s var(--transicion);
}

.chip {
  flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--color-borde);
  background: var(--color-superficie); font-size: 14px; font-weight: 500; transition: all .25s var(--transicion);
}
.chip:hover { border-color: var(--color-tinta); }
.chip.activo { background: var(--color-tinta); color: var(--color-fondo); border-color: var(--color-tinta); }

.pildoras { display: flex; gap: 6px; flex-wrap: wrap; }
.pildoras button {
  min-width: 46px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-borde);
  background: var(--color-superficie); font-size: 14px; font-weight: 500; transition: all .2s;
}
.pildoras button:hover { border-color: var(--color-tinta); }
.pildoras button[aria-pressed="true"] { background: var(--color-tinta); color: var(--color-fondo); border-color: var(--color-tinta); }

/* ---------- Encabezado ---------- */
.encabezado {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px); color: var(--color-sobre-oscuro);
  transition: background .35s var(--transicion), color .35s, box-shadow .35s;
}
.encabezado .boton-icono { border-color: rgba(255,255,255,.28); }
.encabezado .boton-icono:hover { background: rgba(255,255,255,.12); }
.encabezado.solido {
  background: color-mix(in srgb, var(--color-fondo) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  color: var(--color-tinta); box-shadow: 0 1px 0 var(--color-borde);
}
.encabezado.solido .boton-icono { border-color: var(--color-borde); }
.encabezado.solido .boton-icono:hover { background: var(--color-superficie-2); }
.encabezado__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.encabezado__acciones { display: flex; align-items: center; gap: 10px; }

/* Logo: versión blanca sobre la portada, versión a color cuando el encabezado es claro */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo__img { display: block; height: 38px; width: auto; }
.logo__img--color { display: none; }
.encabezado.solido .logo__img--blanco { display: none; }
.encabezado.solido .logo__img--color { display: block; }
.pie .logo__img { height: 58px; }

.menu { display: flex; gap: 28px; font-size: 15px; }
.menu a { text-decoration: none; opacity: .85; transition: opacity .2s; }
.menu a:hover { opacity: 1; }

.contador-favoritos {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--color-acento); color: var(--color-sobre-acento);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(72px, 10vw, 128px); }
/* Secciones oscuras: azul noche con el símbolo de la marca como marca de agua */
.seccion--oscura { position: relative; overflow: hidden; isolation: isolate; background: var(--color-oscuro); color: var(--color-sobre-oscuro); }
.seccion--oscura::before { content: ""; position: absolute; z-index: -1; right: -6%; top: -8%; width: min(46vw, 560px); aspect-ratio: 252 / 266; background: url("../media/marca/simbolo-sobre-oscuro.svg") center / contain no-repeat; opacity: .07; pointer-events: none; }
.seccion--oscura .nota { color: color-mix(in srgb, var(--color-sobre-oscuro) 65%, transparent); }
.seccion--suave { background: var(--color-superficie-2); }
.seccion__cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.seccion__titulo { font-size: clamp(32px, 4.6vw, 56px); font-weight: 600; max-width: 18ch; }
.seccion__bajada { margin-top: 16px; max-width: 58ch; color: var(--color-tinta-suave); font-size: 17px; }
.seccion--oscura .seccion__bajada { color: color-mix(in srgb, var(--color-sobre-oscuro) 72%, transparent); }

/* Revelado al hacer scroll */
.js .revelar { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--transicion), transform .8s var(--transicion); }
.js .revelar.visible { opacity: 1; transform: none; }

/* Revelado con recorte (tarjetas y fotos): la imagen "sube" dentro de su marco */
.js .revelar-recorte { clip-path: inset(18% 0 0 0 round var(--radio-lg)); opacity: .001; transition: clip-path 1.1s var(--transicion), opacity .6s var(--transicion); }
.js .revelar-recorte img { transform: scale(1.18); transition: transform 1.4s var(--transicion); }
.js .revelar-recorte.visible { clip-path: inset(0 0 0 0 round var(--radio-lg)); opacity: 1; }
.js .revelar-recorte.visible img { transform: scale(1.02); }

/* =========================================================
   TARJETA DE PROPIEDAD
   La foto ocupa toda la tarjeta. La información va en un panel
   de vidrio translúcido. Al pasar el cursor (o al quedar centrada
   en el celular: clase .enfocada) el panel se oscurece, el texto
   pasa a blanco y se despliegan los datos.
   ========================================================= */
.tarjeta {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  border-radius: var(--radio-lg); background: var(--color-oscuro); color: #fff;
}
.tarjeta__media { position: absolute; inset: 0; z-index: -1; }
.tarjeta__media img, .tarjeta__media .foto-respaldo { width: 100%; height: 100%; object-fit: cover; }
.js .tarjeta.visible .tarjeta__media img, .tarjeta__media img { transition: transform 1.4s var(--transicion), filter .8s; }
.tarjeta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,5,75,.32) 0%, rgba(6,5,75,0) 28%, rgba(6,5,75,0) 48%, rgba(6,5,75,.55) 100%);
}
.tarjeta__enlace { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tarjeta__enlace:focus-visible { outline-offset: -4px; outline-color: #fff; }

.tarjeta__insignias { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.insignia {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.88); color: var(--color-tinta);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.insignia svg { width: 12px; height: 12px; }
.insignia--acento { background: var(--color-acento); color: var(--color-sobre-acento); }
.insignia--reservada { background: var(--color-alerta); color: #fff; }

.tarjeta__acciones { position: absolute; right: 14px; top: 14px; z-index: 3; display: flex; gap: 6px; }
.tarjeta__acciones button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center;
  background: rgba(6,5,75,.28); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .2s, background .2s;
}
.tarjeta__acciones button:hover { background: rgba(20,22,25,.55); }
.tarjeta__acciones button:active { transform: scale(.9); }
.tarjeta__acciones svg { width: 18px; height: 18px; }
.favorito.activo svg { fill: #FF5A52; stroke: #FF5A52; }

.tarjeta__panel {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; pointer-events: none;
  padding: 16px 18px; border-radius: 16px;
  background: rgba(6,5,75,.24); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  transition: background .55s var(--transicion), border-color .55s, transform .65s var(--transicion);
}
.tarjeta__zona { display: block; font-size: 12.5px; letter-spacing: .02em; color: rgba(255,255,255,.72); transition: color .4s; }
.tarjeta__titulo {
  margin-top: 4px; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
  color: rgba(255,255,255,.84); transition: color .4s, transform .6s var(--transicion);
}
.tarjeta__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.tarjeta__precio { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tarjeta__precio small { font-size: 13px; font-weight: 500; opacity: .75; }
.tarjeta__renta { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--color-menta); color: var(--color-noche); white-space: nowrap; }
.tarjeta__extra { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--transicion), opacity .45s var(--transicion); }
.tarjeta__extra > div { overflow: hidden; }
.tarjeta__datos { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 12px; margin-top: 12px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13.5px; color: rgba(255,255,255,.85); }
.tarjeta__ver { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 600; }
.tarjeta__ver svg { width: 16px; height: 16px; transition: transform .4s var(--transicion); }

/* Estado activo: cursor encima, foco con teclado o centrada en el celular */
.tarjeta:hover .tarjeta__media img, .tarjeta.enfocada .tarjeta__media img, .tarjeta:focus-within .tarjeta__media img { transform: scale(1.08); }
.tarjeta:hover .tarjeta__panel, .tarjeta.enfocada .tarjeta__panel, .tarjeta:focus-within .tarjeta__panel {
  background: rgba(6,5,75,.72); border-color: rgba(97,233,135,.45); transform: translateY(-4px);
}
.tarjeta:hover .tarjeta__titulo, .tarjeta.enfocada .tarjeta__titulo, .tarjeta:focus-within .tarjeta__titulo { color: #fff; }
.tarjeta:hover .tarjeta__zona, .tarjeta.enfocada .tarjeta__zona, .tarjeta:focus-within .tarjeta__zona { color: rgba(255,255,255,.9); }
.tarjeta:hover .tarjeta__extra, .tarjeta.enfocada .tarjeta__extra, .tarjeta:focus-within .tarjeta__extra { grid-template-rows: 1fr; opacity: 1; }
.tarjeta:hover .tarjeta__ver svg { transform: translateX(4px); }

/* Variante para inversión: la rentabilidad es protagonista */
.tarjeta--inversion .tarjeta__renta { font-size: 15px; padding: 5px 12px; }

/* Carrusel horizontal (inversión, similares) */
.carrusel {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.carrusel .tarjeta { height: 440px; scroll-snap-align: start; }

/* Transición de la tarjeta hacia la ficha */
.transicion-ficha { position: fixed; z-index: 300; overflow: hidden; pointer-events: none; }
.transicion-ficha img { width: 100%; height: 100%; object-fit: cover; }
.transicion-ficha::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,13,.5) 0%, rgba(10,11,13,.1) 40%, rgba(10,11,13,.75) 100%); animation: fundido-in .65s both; }
@keyframes fundido-in { from { opacity: 0; } }

/* ---------- Formularios ---------- */
.formulario { background: var(--color-superficie); border-radius: var(--radio-lg); padding: clamp(22px, 4vw, 36px); display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra); }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label, fieldset legend { font-size: 14px; font-weight: 500; }
.campo input, .campo select, .campo textarea, select {
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--color-borde);
  background: var(--color-superficie); font-size: 16px; width: 100%;
}
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
[aria-invalid="true"] { border-color: #C0392B !important; }
.formulario__error { color: #C0392B; font-size: 14px; }
.formulario .nota { text-align: center; }

/* ---------- Pie ---------- */
.pie { position: relative; overflow: hidden; isolation: isolate; background: var(--color-oscuro); color: var(--color-sobre-oscuro); padding-block: 64px 28px; }
.pie::before { content: ""; position: absolute; z-index: -1; right: -4%; bottom: -30%; width: min(40vw, 460px); aspect-ratio: 252 / 266; background: url("../media/marca/simbolo-sobre-oscuro.svg") center / contain no-repeat; opacity: .06; pointer-events: none; }
.pie h3 { color: var(--color-destaque-oscuro); }
.pie__fila { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.pie h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.pie p { margin-bottom: 8px; opacity: .85; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie__marca p { margin-top: 16px; max-width: 36ch; }
.pie__legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; opacity: .6; }

/* ---------- WhatsApp flotante, asistente y favoritos ---------- */
.flotantes { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 10px; transition: transform .4s var(--transicion), opacity .3s; }
.whatsapp-flotante { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--color-whatsapp); color: #fff; box-shadow: 0 8px 24px rgba(31,168,85,.4); transition: transform .25s var(--transicion); }
.whatsapp-flotante:hover { transform: scale(1.06); }
.whatsapp-flotante svg { width: 30px; height: 30px; }
.asistente-boton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px;
  border-radius: 999px; border: 0; background: var(--color-tinta); color: var(--color-fondo);
  font-weight: 600; font-size: 14px; box-shadow: var(--sombra); transition: transform .25s var(--transicion);
}
.asistente-boton:hover { transform: translateY(-2px); }
.asistente-boton__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--color-whatsapp); animation: pulso 2s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(31,168,85,.6); } 70% { box-shadow: 0 0 0 8px rgba(31,168,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,168,85,0); } }

.panel-flotante {
  position: fixed; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  width: min(390px, calc(100vw - 32px)); max-height: min(620px, calc(100svh - 120px));
  display: flex; flex-direction: column; background: var(--color-superficie); color: var(--color-tinta);
  border-radius: var(--radio-lg); box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden;
  animation: emerger .35s var(--transicion) both; transform-origin: bottom right;
}
@keyframes emerger { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.panel-flotante__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--color-borde); }
.panel-flotante__cabeza strong { display: block; font-size: 15px; }
.panel-flotante__cabeza span { font-size: 13px; color: var(--color-tinta-suave); }
.asistente__mensajes { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.burbuja { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; animation: emerger .35s var(--transicion) both; }
.burbuja--bot { background: var(--color-superficie-2); border-bottom-left-radius: 4px; }
.burbuja--usuario { align-self: flex-end; background: var(--color-tinta); color: var(--color-fondo); border-bottom-right-radius: 4px; }
.escribiendo { display: inline-flex; gap: 4px; padding: 14px; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-tinta-suave); animation: rebote 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes rebote { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.asistente__resultados { display: grid; gap: 8px; }
.asistente__opciones { padding: 12px 18px 18px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--color-borde); }
.asistente__opciones form { display: flex; gap: 8px; width: 100%; }
.asistente__legal { width: 100%; margin: 0; font-size: 12px; color: var(--color-tinta-suave); }
.asistente__mensajes a { overflow-wrap: anywhere; }
.asistente__opciones input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--color-borde); font-size: 16px; }
.mini-propiedad { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--color-borde); border-radius: 12px; background: var(--color-superficie); text-decoration: none; transition: border-color .2s; }
.mini-propiedad:hover { border-color: var(--color-tinta); }
.mini-propiedad img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.mini-propiedad strong { display: block; font-size: 14px; line-height: 1.25; }
.mini-propiedad span { font-size: 13px; color: var(--color-tinta-suave); }
.favoritos__lista { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.favoritos__pie { padding: 14px 18px 18px; border-top: 1px solid var(--color-borde); }

.aviso { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 400; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px; background: var(--color-tinta); color: var(--color-fondo); font-size: 14px; font-weight: 500; box-shadow: var(--sombra); animation: emerger .3s var(--transicion) both; overflow-wrap: anywhere; }

/* ---------- Responsive compartido ---------- */
.solo-movil { display: none; }

@media (max-width: 860px) {
  .solo-escritorio { display: none !important; }
  .solo-movil { display: inline-flex; }
  .boton-icono.solo-movil { display: inline-grid; }
  .menu {
    position: fixed; inset: calc(72px + env(safe-area-inset-top, 0px)) 0 auto 0;
    flex-direction: column; gap: 0; padding: 8px var(--margen-lateral) 20px;
    background: var(--color-fondo); color: var(--color-tinta); box-shadow: 0 12px 24px rgba(0,0,0,.08);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: all .3s var(--transicion);
  }
  .menu.abierto { transform: none; opacity: 1; pointer-events: auto; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--color-borde); font-size: 17px; opacity: 1; }
  .pie__fila { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .formulario__fila { grid-template-columns: 1fr; }
  .asistente-boton { padding: 0 14px; }
  .panel-flotante { right: 8px; left: 8px; width: auto; }
  .segmentado button { padding: 10px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .revelar, .js .revelar-recorte { opacity: 1; transform: none; clip-path: none; }
}