/* ROCCA · estética "noche" (24-sep-2026): fondo carbón total, menú flotante en píldora, titulares en mayúscula con
   acento en cursiva terracota, servicios numerados, botones redondeados. Inspirada en la referencia que dio Guillo
   (fackers.co), traducida a la marca: Marcellus para títulos, Instrument Serif itálica para el acento, Archivo para texto. */
:root {
  --fondo: #0E0E0E; --carbon: #171717; --panel: #1A1A1A; --panel-2: #222222; --marfil: #F2EFE7;
  --texto: var(--marfil); --texto-2: #B9B3A6; --texto-inv: var(--marfil); --texto-inv-2: #B9B3A6;
  --linea: rgba(242,239,231,.12); --linea-inv: rgba(242,239,231,.12); --papel: var(--panel);
  --cursiva: 'Instrument Serif', Georgia, serif;
}
body { background: var(--fondo); color: var(--marfil); }
.papel, .oscuro, .seccion { background: transparent; color: var(--marfil); }
.oscuro { background: var(--panel); }
h1, h2, h3 { color: var(--marfil); }
h1, .titulo-grande { text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; }
h2 { text-transform: uppercase; letter-spacing: .02em; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; }
.acento { font-family: var(--cursiva); font-style: italic; text-transform: none; color: var(--terracota); letter-spacing: 0; font-weight: 400; }
.antetitulo, .oscuro .antetitulo { color: var(--dorado); }
.entradilla, .oscuro .entradilla, .nota, .nota-portada, p { color: var(--texto-2); }
a { color: var(--marfil); }

/* Menú flotante en píldora */
.encabezado { position: fixed; top: 18px; left: 0; right: 0; z-index: 50; background: transparent; border: 0; pointer-events: none; }
.encabezado .contenedor { pointer-events: auto; max-width: 1180px; min-height: 0; background: rgba(14,14,14,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--linea); border-radius: 999px; padding: 8px 10px 8px 22px; }
.encabezado .logo-nombre { font-size: 20px; }
.menu a:not(.boton) { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--marfil); font-weight: 500; }
.menu .idioma { border-color: var(--linea); }
.boton { border-radius: 999px; letter-spacing: .14em; }
.boton-principal { background: var(--marfil); color: var(--carbon); border-color: var(--marfil); }
.boton-principal:hover { background: #fff; }
.boton-linea { color: var(--marfil); border-color: rgba(242,239,231,.35); }
.boton-linea:hover { background: var(--marfil); color: var(--carbon); }
main { padding-top: 0; }

/* Portada cinematográfica: imagen a pantalla completa (o el degradado mientras no hay video) */
.portada { min-height: min(100vh, 880px); display: flex; align-items: center; padding: 140px 0 96px; background: var(--fondo); }
.portada::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(60% 55% at 78% 62%, rgba(169,87,66,.55), transparent 70%),
  radial-gradient(40% 40% at 20% 20%, rgba(36,55,74,.7), transparent 70%),
  radial-gradient(35% 35% at 55% 90%, rgba(200,169,107,.18), transparent 70%),
  linear-gradient(180deg, #0E0E0E 0%, #141414 60%, #0E0E0E 100%); filter: saturate(1.1); }
.portada::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); opacity: .07; mix-blend-mode: overlay; pointer-events: none; }
.portada .contenedor { z-index: 1; }
.portada-dos h1 { font-size: clamp(44px, 6.4vw, 92px); max-width: 12ch; }
.portada .entradilla { font-size: clamp(16px, 1.4vw, 18px); max-width: 520px; }
.portada-tarjeta .tarjeta-rocca { box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(242,239,231,.08); }

/* Franja de zonas como "marquee" de marcas */
.zonas { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 22px 0; gap: 0; justify-content: space-between; }
.zonas li { border: 0; background: none; font-family: var(--serif); font-size: clamp(14px, 1.3vw, 18px); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); padding: 6px 10px; }

/* Servicios numerados en tarjetas escalonadas */
.rejilla-3 { gap: 18px; background: none; border: 0; }
.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: 18px; padding: clamp(28px, 3vw, 40px); }
.tarjeta:nth-child(2) { transform: translateY(36px); } .tarjeta:nth-child(3) { transform: translateY(72px); }
.tarjeta .numero { font-family: var(--cursiva); font-style: italic; font-size: 34px; color: var(--dorado); }
.tarjeta h3 { text-transform: uppercase; letter-spacing: .04em; font-size: 22px; }
.tarjeta ul, .tarjeta li { color: var(--texto-2); }
.tarjeta li::before { background: var(--dorado); }
#servicios { padding-bottom: clamp(120px, 14vw, 200px); }

/* Pasos, captación, formularios y tarjetas claras → oscuras */
.pasos li { border-top-color: var(--linea); }
.pasos li::before { font-family: var(--cursiva); font-style: italic; }
.formulario, .demanda-inicio, .opinion, .cv-datos > div, .cv-arriendo, .cv-cierre, .cv-tarjeta, .listo, .aviso { background: var(--panel); border-color: var(--linea); color: var(--marfil); border-radius: 18px; }
.campo input, .campo select, .campo textarea { background: var(--panel-2); border-color: var(--linea); color: var(--marfil); border-radius: 12px; }
.campo input::placeholder, .campo textarea::placeholder { color: #7F796D; }
.chip span { background: var(--panel-2); border-color: var(--linea); color: var(--marfil); border-radius: 999px; }
.chip input:checked + span { background: var(--marfil); color: var(--carbon); border-color: var(--marfil); }
.consentimiento { color: var(--texto-2); }
.lista-captacion span { color: var(--dorado); font-family: var(--cursiva); font-style: italic; }
.opinion::before { color: var(--dorado); }
.opinion blockquote { color: var(--marfil); } .opinion footer { border-top-color: var(--linea); } .opinion footer span { color: var(--texto-2); }
.estado-pasos b { border-color: var(--linea); }
.decision .op { border-radius: 18px; }
.dictado, .voz { background: var(--panel); color: var(--marfil); border-color: var(--linea); }
.pie { background: var(--fondo); border-top: 1px solid var(--linea); }
.flotante { border-radius: 999px; }
.contacto-cierre { border-top-color: var(--linea); }
.perfil-foto img { border-radius: 18px; }
.cabecera-seccion { align-items: flex-end; }
.selector-operacion a { border-radius: 999px; }
.filtros { background: var(--panel); border-color: var(--linea); border-radius: 18px; }
.ficha-tarjeta { background: var(--panel); border-color: var(--linea); border-radius: 18px; overflow: hidden; }
.ficha-tarjeta .datos, .ficha-tarjeta h3, .ficha-tarjeta .precio { color: var(--marfil); }
.vacio { background: var(--panel); border-color: var(--linea); border-radius: 18px; }
@media (max-width: 1000px) {
  .encabezado .contenedor { border-radius: 24px; }
  .menu { background: rgba(14,14,14,.96); border-radius: 18px; }
  .tarjeta:nth-child(2), .tarjeta:nth-child(3) { transform: none; }
  #servicios { padding-bottom: clamp(72px, 10vw, 128px); }
  .zonas { justify-content: flex-start; gap: 6px; }
}
.demanda li { background: var(--panel-2); border-color: var(--linea); border-radius: 14px; color: var(--marfil); }
.demanda li strong { color: var(--dorado); }
.rotulo-demanda { color: var(--texto-2); }

/* ---------- Vida y movimiento (assets/vida.js) ---------- */
.con-vida .vida { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--retraso, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--retraso, 0ms); }
.con-vida .vida.visible { opacity: 1; transform: none; }
.con-vida .portada::before { animation: respira 14s ease-in-out infinite alternate; background-size: 100% 100%; }
@keyframes respira { 0% { transform: scale(1) translate(0, 0); filter: saturate(1.05); } 50% { transform: scale(1.06) translate(-1.5%, 1%); filter: saturate(1.25); } 100% { transform: scale(1.03) translate(1.5%, -1%); filter: saturate(1.1); } }
.con-vida .portada-tarjeta .tarjeta-rocca { animation: flota 7s ease-in-out infinite; }
@keyframes flota { 0%, 100% { transform: rotateY(-14deg) rotateX(6deg) rotate(-4deg) translateY(0); } 50% { transform: rotateY(-10deg) rotateX(4deg) rotate(-3deg) translateY(-14px); } }
.con-vida .portada-tarjeta:hover .tarjeta-rocca { animation-play-state: paused; }
.inclina { transform-style: preserve-3d; transition: transform .35s ease, box-shadow .35s ease; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); position: relative; }
.inclina:hover { box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.tarjeta.inclina::after, .opinion.inclina::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(242,239,231,.08), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.tarjeta.inclina:hover::after, .opinion.inclina:hover::after { opacity: 1; }
.con-vida .tarjeta:nth-child(2).inclina { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(36px); }
.con-vida .tarjeta:nth-child(3).inclina { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(72px); }
.boton { transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.boton:hover { transform: translateY(-2px); }
.boton-principal { position: relative; overflow: hidden; }
.boton-principal::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.boton-principal:hover::after { left: 120%; }
.cinta { overflow: hidden; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); display: flex; width: 100%; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta .cinta-lista { border: 0; padding: 22px 0; flex-shrink: 0; display: flex; gap: 0; justify-content: space-around; min-width: 100%; animation: desliza 40s linear infinite; }
.cinta:hover .cinta-lista { animation-play-state: paused; }
.cinta .zonas li { padding: 6px 28px; white-space: nowrap; }
.cinta .zonas li::after { content: '·'; margin-left: 56px; color: var(--dorado); }
@keyframes desliza { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.encabezado { transition: transform .4s ease, opacity .4s ease; }
.encabezado.recogido { transform: translateY(-120%); opacity: 0; }
.encabezado.con-fondo .contenedor { background: rgba(14,14,14,.88); }
.perfil-foto.inclina img { transition: transform .6s ease; }
h1 .acento, h2 .acento { display: inline-block; animation: none; }
.con-vida .portada h1 .acento { background: linear-gradient(90deg, var(--terracota), #D98A73, var(--terracota)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brillo 6s ease-in-out infinite; }
@keyframes brillo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.flotante, .voz { transition: transform .25s ease; } .flotante:hover, .voz:hover { transform: translateY(-3px) scale(1.03); }
/* Logo: la casa se dibuja al cargar, y al pasar el mouse el trazo "respira" */
.dibuja-logo .encabezado .logo svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traza 1.1s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--orden, 0) * .22s + .15s); }
@keyframes traza { to { stroke-dashoffset: 0; } }
.con-vida .logo svg { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.con-vida .logo:hover svg { transform: translateY(-2px) rotate(-3deg); }
.con-vida .logo .logo-nombre { transition: letter-spacing .5s ease; }
.con-vida .logo:hover .logo-nombre { letter-spacing: .4em; }

/* Páginas interiores: componentes que eran claros */
.calc-resultado { background: var(--panel); border-color: var(--linea); border-radius: 18px; color: var(--marfil); }
.calc-tabla th, .calc-tabla td { border-bottom-color: var(--linea); color: var(--marfil); }
.calc-tabla .calc-grupo th { border-bottom-color: var(--marfil); }
.calc-tabla small, .calc-resultado small, .calc-resultado .nota { color: var(--texto-2); }
.progreso li.hecho { border-color: var(--marfil); }
.opcion-grande span { background: var(--panel); border-color: var(--linea); border-radius: 14px; color: var(--marfil); }
.opcion-grande input:checked + span { border-color: var(--marfil); box-shadow: inset 0 0 0 1px var(--marfil); background: var(--panel-2); }
.casilla input, .consentimiento input { accent-color: var(--terracota); }
.doc { border-color: var(--linea); border-radius: 14px; background: var(--panel); }
/* El contrato y la firma siguen en papel blanco: son documentos, se leen mejor así */
.contrato { color: #171717; border-radius: 12px; }
.contrato-tabla th { background: #F2EFE7; }
.firma-caja { border-color: var(--linea); border-radius: 12px; }
.estudio-pasos li.activo b { background: var(--marfil); color: var(--carbon); border-color: var(--marfil); }
.estudio-pasos li.hecho b { background: #24463E; color: #fff; }
.selector-operacion { border-color: var(--linea); }
.selector-operacion a[aria-current="page"] { background: var(--marfil); color: var(--carbon); }
.miga a { color: var(--texto-2); }
.galeria button { background: var(--panel); border-radius: 14px; overflow: hidden; }
.caja-contacto { background: var(--panel); border-color: var(--linea); border-radius: 18px; }
.cifras dt { color: var(--texto-2); } .cifras dd { color: var(--marfil); }
.precio-grande { color: var(--marfil); }
.leyenda-amoblada { background: rgba(14,14,14,.8); color: var(--marfil); }
.visor { background: rgba(0,0,0,.92); }
.decision .buena { background: #1F3A31; color: #DDEBE3; } .decision .mala { background: #4A241B; color: #F3D9D2; }
.cv-principal { background: #24463E; } .cv-puesto { background: var(--panel); border: 1px solid var(--linea); }
.perfil-cifras li { background: transparent; }
.tr-nombre, .tr-palabra { color: var(--marfil); }
::selection { background: var(--terracota); color: #fff; }
@media (max-width: 1000px) { .menu { background: #0E0E0E !important; border: 1px solid var(--linea); padding: 18px 16px; box-shadow: 0 30px 60px rgba(0,0,0,.6); } .encabezado .contenedor { background: rgba(14,14,14,.92); } }