/* Ficha de finca — capa sobre estilo.css (mismos tokens).
   La ficha es el centro del marketplace: texto indexable alrededor de un escenario 3D. */

.ficha-hero { position: relative; color: #fff; overflow: hidden; background: var(--tinta); }
.ficha-hero img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: .78; }
.ficha-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,35,.15) 0%, rgba(20,24,35,.55) 55%, rgba(20,24,35,.92) 100%); }
.ficha-hero .contenedor { position: relative; z-index: 1; padding: clamp(5rem, 16vw, 11rem) 0 var(--e-4); }
.ficha-hero .ojal { color: #fff; opacity: .85; }
.ficha-hero h1 { color: #fff; font-size: clamp(2.6rem, 1.6rem + 5vw, 5.2rem); }
.ficha-hero .entradilla { color: rgba(255,255,255,.88); font-size: var(--t-l); max-width: 40ch; margin: var(--e-2) 0 var(--e-3); text-wrap: pretty; }
.ficha-hero .datos-clave { display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; margin: 0 0 var(--e-3); padding: 0; list-style: none; }
.ficha-hero .datos-clave li { display: flex; flex-direction: column; font-size: var(--t-s); color: rgba(255,255,255,.8); }
.ficha-hero .datos-clave b { font-family: var(--serif); font-size: 1.6rem; color: #fff; font-variation-settings: 'opsz' 24; line-height: 1.1; }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.boton { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-weight: 600; font-size: var(--t-s); padding: .85rem 1.3rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .2s var(--salida), background .2s var(--salida); }
.boton:hover { transform: translateY(-1px); }
.boton-primario { background: var(--arcilla); color: #fff; }
.boton-primario:hover { background: var(--arcilla-2); color: #fff; }
.boton-secundario { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.boton-tinta { background: var(--tinta); color: #fff; }
.boton-tinta:hover { background: #000; color: #fff; }
.boton-linea { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.credito { position: absolute; right: .8rem; bottom: .5rem; z-index: 2; font-size: .72rem; color: rgba(255,255,255,.55); }

/* — la fecha — */
.fecha { padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); background: var(--papel-2); }
.fecha .contenedor { display: grid; gap: var(--e-3); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .fecha .contenedor { grid-template-columns: 5fr 7fr; } }
.fecha form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: end; }
.fecha .paso > label { font-size: var(--t-base); }
.fecha .resultado { display: grid; grid-template-columns: auto 1fr; gap: 0 1.2rem; align-items: center; }
.fecha .cifra { font-family: var(--serif); font-size: clamp(3.6rem, 2rem + 7vw, 6.4rem); font-weight: 600; line-height: .95; letter-spacing: -.03em; color: var(--tormenta); font-variation-settings: 'opsz' 96; }
.fecha .cifra small { font-size: .38em; letter-spacing: 0; color: var(--tinta-3); font-weight: 500; margin-left: .15em; }
.fecha .lectura { margin: 0; color: var(--tinta-2); text-wrap: pretty; }
.fecha .lectura b { color: var(--tinta); }
.fecha .nivel { display: inline-block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; background: var(--tormenta-claro); color: var(--tormenta-2); margin-bottom: .4rem; }
.fecha .peq a { color: var(--tinta-3); }

/* — el escenario 3D — */
.escenario { padding: var(--e-4) 0 var(--e-5); }
.escenario .cabecera-seccion { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-3); }
.escenario .cabecera-seccion p { margin: 0; max-width: 52ch; color: var(--tinta-2); }
.tablero { display: grid; gap: var(--e-2); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .tablero { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.visor { position: relative; background: #1b2230; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 30px 60px -30px rgba(31,36,51,.45); isolation: isolate; }
@media (max-width: 999px) { .visor { aspect-ratio: auto; height: min(78vh, 640px); border-radius: 8px; } }
.visor canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.visor .cargando { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-family: var(--serif); font-size: var(--t-l); background: #1b2230; z-index: 3; transition: opacity .6s var(--salida); }
.visor .cargando.fuera { opacity: 0; pointer-events: none; }
.visor .cargando span { display: block; font-family: var(--sans); font-size: var(--t-s); opacity: .7; margin-top: .4rem; text-align: center; }
.hud { position: absolute; z-index: 2; display: flex; gap: .4rem; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-arriba { top: .7rem; left: .7rem; right: .7rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.hud-abajo { left: .7rem; right: .7rem; bottom: .7rem; flex-direction: column; align-items: flex-start; gap: .5rem; }
.chips { display: flex; gap: .35rem; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; font: inherit; font-size: .8rem; font-weight: 600; color: #fff; background: rgba(20,24,35,.55); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .42rem .8rem; cursor: pointer; backdrop-filter: blur(8px); white-space: nowrap; transition: background .2s; }
.chip:hover { background: rgba(20,24,35,.8); }
.chip[aria-pressed="true"] { background: #fff; color: var(--tinta); border-color: #fff; }
.modo { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px); background: rgba(20,24,35,.55); }
.modo button { font: inherit; font-size: .8rem; font-weight: 600; color: #fff; background: transparent; border: 0; padding: .45rem .8rem; cursor: pointer; }
.modo button[aria-pressed="true"] { background: #fff; color: var(--tinta); }
.lluvia-switch { display: inline-flex; align-items: center; gap: .6rem; font: inherit; font-size: .9rem; font-weight: 600; color: #fff; background: rgba(46,90,138,.85); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: .5rem .5rem .5rem 1rem; cursor: pointer; backdrop-filter: blur(8px); transition: background .3s; }
.lluvia-switch .pastilla { width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.3); position: relative; transition: background .3s; }
.lluvia-switch .pastilla::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .3s var(--salida); }
.lluvia-switch[aria-pressed="true"] { background: var(--tormenta-2); }
.lluvia-switch[aria-pressed="true"] .pastilla { background: var(--arcilla); }
.lluvia-switch[aria-pressed="true"] .pastilla::after { transform: translateX(18px); }
.aviso-visor { font-size: .74rem; color: rgba(255,255,255,.72); background: rgba(20,24,35,.5); padding: .3rem .6rem; border-radius: 6px; backdrop-filter: blur(6px); max-width: 100%; }
.ayuda-pie { position: absolute; z-index: 2; right: .7rem; bottom: 3.4rem; font-size: .74rem; color: rgba(255,255,255,.75); background: rgba(20,24,35,.5); padding: .3rem .6rem; border-radius: 6px; pointer-events: none; }
@media (max-width: 999px) { .ayuda-pie { display: none; } }
.pad { position: absolute; z-index: 2; right: .8rem; bottom: 3.6rem; display: none; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; }
.pad button { font: inherit; font-size: 1.1rem; color: #fff; background: rgba(20,24,35,.55); border: 1px solid rgba(255,255,255,.3); border-radius: 8px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pad button:active { background: #fff; color: var(--tinta); }
.visor.a-pie .pad { display: grid; }
@media (min-width: 1000px) { .visor.a-pie .pad { display: none; } }

/* — el panel «tu boda» — */
.panel { background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 1.1rem 1.2rem 1.2rem; display: grid; gap: .9rem; align-content: start; }
.panel h3 { font-size: var(--t-l); display: flex; justify-content: space-between; align-items: baseline; }
.panel h3 small { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--arcilla); }
.panel label, .panel .etq { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: .3rem; }
.panel .campo { min-height: 2.6rem; padding: .5rem .7rem; font-size: var(--t-s); }
.panel select.campo { background-position: right .7rem center; padding-right: 2.2rem; }
.panel .fila { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.panel input[type=range] { width: 100%; accent-color: var(--arcilla); }
.panel .invitados { display: flex; align-items: baseline; justify-content: space-between; }
.panel .invitados output { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--tinta); font-variation-settings: 'opsz' 24; }
.estilos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.estilos button { font: inherit; font-size: .72rem; font-weight: 600; color: var(--tinta-2); background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: .5rem .2rem .45rem; cursor: pointer; display: grid; gap: .3rem; justify-items: center; }
.estilos button i { display: block; width: 100%; height: 14px; border-radius: 4px; }
.estilos button[aria-pressed="true"] { border-color: var(--tinta); background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.lectura-boda { margin: 0; font-size: var(--t-s); color: var(--tinta-2); border-top: 1px solid var(--linea); padding-top: .8rem; text-wrap: pretty; }
.lectura-boda b { color: var(--tinta); }
.lectura-boda .planb { color: var(--tormenta-2); }
.lectura-boda .ojo { color: var(--arcilla-2); }
.nota-honesta { font-size: var(--t-xs); color: var(--tinta-3); margin: .6rem 0 0; text-wrap: pretty; }
.nota-honesta a { color: inherit; }

/* — los espacios — */
.espacios { padding: var(--e-4) 0; background: var(--papel-2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.espacios .rejilla { display: grid; gap: var(--e-2); grid-template-columns: 1fr; margin-top: var(--e-3); }
@media (min-width: 720px) { .espacios .rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .espacios .rejilla { grid-template-columns: repeat(4, 1fr); } }
.espacio { background: #fff; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.espacio img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.espacio .cuerpo { padding: 1rem 1.1rem 1.1rem; display: grid; gap: .5rem; flex: 1; align-content: start; }
.espacio h3 { font-size: var(--t-l); display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.espacio h3 span { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.espacio .caps { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; padding: 0; list-style: none; font-size: var(--t-s); color: var(--tinta-2); }
.espacio .caps b { font-family: var(--serif); font-size: 1.15em; color: var(--tinta); font-variation-settings: 'opsz' 20; }
.espacio p { font-size: var(--t-s); margin: 0; color: var(--tinta-2); text-wrap: pretty; }
.espacio blockquote { margin: 0; font-size: var(--t-s); color: var(--tormenta-2); border-left: 2px solid var(--tormenta-claro); padding-left: .7rem; font-style: italic; }
.espacio .cuerpo > .enlace { margin-top: auto; font-size: var(--t-s); font-weight: 600; text-decoration: none; }
.espacio .cuerpo > .enlace::after { content: ' →'; }

/* — fotos — */
.fotos { padding: var(--e-4) 0; }
.mosaico { columns: 2; column-gap: .6rem; margin-top: var(--e-3); }
@media (min-width: 720px) { .mosaico { columns: 3; } }
@media (min-width: 1100px) { .mosaico { columns: 4; } }
.mosaico figure { margin: 0 0 .6rem; break-inside: avoid; border-radius: 6px; overflow: hidden; background: var(--papel-3); }
.mosaico img { display: block; width: 100%; height: auto; }
.mosaico figcaption { font-size: .74rem; color: var(--tinta-3); padding: .3rem .5rem .45rem; }

/* — si llueve — */
.plan-b { padding: var(--e-5) 0; background: var(--tinta); color: #fff; }
.plan-b .ojal { color: var(--tormenta-claro); }
.plan-b h2 { color: #fff; max-width: 22ch; }
.plan-b .contenedor { display: grid; gap: var(--e-3); grid-template-columns: 1fr; }
@media (min-width: 900px) { .plan-b .contenedor { grid-template-columns: 6fr 6fr; align-items: start; } }
.plan-b p { color: rgba(255,255,255,.82); }
.plan-b .pasos { counter-reset: paso; list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.plan-b .pasos li { position: relative; padding-left: 3.2rem; }
.plan-b .pasos li::before { counter-increment: paso; content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: -.1rem; font-family: var(--serif); font-size: var(--t-xl); color: var(--tormenta-claro); font-variation-settings: 'opsz' 40; }
.plan-b .pasos b { color: #fff; }
.plan-b .tarjeta { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 1.3rem 1.4rem; display: grid; gap: .8rem; }
.plan-b .tarjeta h3 { color: #fff; }
.plan-b .tarjeta .campo { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.25); border-bottom-color: rgba(255,255,255,.7); }
.plan-b .tarjeta .campo::placeholder { color: rgba(255,255,255,.45); }
.plan-b .consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-xs); color: rgba(255,255,255,.7); }
.plan-b .consent input { margin-top: .2rem; accent-color: var(--arcilla); }
.plan-b .seguro { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1rem; font-size: var(--t-s); }
.plan-b .seguro b { color: var(--ambar-claro); }

/* — preguntas y fuentes — */
.faq-finca { padding: var(--e-4) 0; }
.fuentes { padding: var(--e-4) 0 var(--e-5); border-top: 1px solid var(--linea); font-size: var(--t-s); color: var(--tinta-2); }
.fuentes ul { margin: var(--e-2) 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.fuentes li { text-wrap: pretty; }

/* — móvil: el panel debajo del visor, compacto — */
@media (max-width: 999px) {
  .panel { padding: 1rem; }
  .estilos { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .boton:hover { transform: none; } }

/* Contraste medido 4,47:1 sobre --papel-3, y AA pide 4,5. Subido. (auditoría 10-sep-2026) */
.mosaico figcaption, figure.foto figcaption { color: #565C6E; }