@font-face{font-family:'Space Grotesk';src:url('/img/fonts/space-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/img/fonts/space-grotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/img/fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/img/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/img/fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/img/fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
/* Orbyte · maqueta web · negro de marca, sin tema claro, un único radio de esquina */
:root{
  --bg:#060605; --panel:#0c0c0a; --panel-2:#141412; --ink:#f5f3ee; --mid:#e6e2d9; --dim:#dad6cb;
  --line:rgba(245,243,238,.16); --line-2:rgba(245,243,238,.34);
  /* 21-sep · un solo acento de marca: champán (oro pálido mate). Sustituye al ámbar (#E8A951, "amarillo naranja")
     y a la plata (#dad6cb, "no destaca"). Es el crema #f5f3ee llevado a color: lujo silencioso y precisión, sin
     irse al naranja. Contraste con texto #060605 encima: 10,5:1. Los nombres de las variables se quedan para no
     tocar el HTML. Variante oscura (bronce) para las bandas claras .claro: 5,4:1 sobre crema. */
  --plata:#D2B877; --ambar:#D2B877; --ambar-claro:#E0CB93; --ambar-oscuro:#7B5F2E;
  --acento:#D2B877;   /* mismo champán, con el nombre que lee el calendario incrustado */   /* acento: solo botones y la etiqueta SOLUCIÓN */
  --r:14px;                       /* regla 8: un solo radio en toda la web, botones incluidos */
  /* dos familias de marca: Space Grotesk (titulares) e Inter (todo lo demás) */
  --disp:'Space Grotesk',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'Inter',system-ui,-apple-system,sans-serif;   /* los rótulos usan Inter en mayúsculas espaciadas: solo dos familias */
  /* ---- escala tipográfica única: se define aquí y nadie la repite por sección ---- */
  --t-h1:clamp(2.6rem,5.4vw,4.8rem);      /* titular de página */
  --t-h2:clamp(2.2rem,4.4vw,3.6rem);      /* titular de sección */
  --t-h3:clamp(1.55rem,2.2vw,2.1rem);     /* titular de tarjeta */
  --t-lead:clamp(1.3rem,2vw,1.75rem);     /* entradilla */
  --t-body:clamp(1.12rem,1.5vw,1.35rem);  /* cuerpo */
  --t-label:clamp(13px,1vw,15px);         /* rótulo en mono */
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1280px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--disp);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.label{display:inline-block;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.draft{background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-align:center;padding:8px 16px}

/* cabecera */
/* 28-sep · rendimiento (Daniel: "va a tirones"): sin backdrop-filter en la cabecera fija -- con position:sticky
   el navegador tenía que recalcular el desenfoque en cada fotograma de scroll. Fondo sólido (no solo casi
   opaco): con transparencia, un titular grande que pasa justo por debajo se leía como un fantasma. */
.top{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:5px;text-decoration:none;font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:.06em}
.brand svg{width:26px;height:26px;flex:none}
.nav{display:flex;align-items:center;gap:18px}
.nav a,.drop>button{font-family:var(--mono);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);text-decoration:none;background:none;border:0;padding:10px 6px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.nav a:hover,.drop>button:hover,.nav a[aria-current="page"]{color:var(--ink)}
.drop{position:relative}
.drop>button::after{content:" ▾";font-size:10px}
.menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);min-width:300px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);padding:8px;display:grid;gap:2px}
.menu[hidden]{display:none}
.menu a{display:block;padding:14px 16px;border-radius:var(--r);text-decoration:none;font-family:var(--sans);font-size:18px;letter-spacing:0;text-transform:none;color:var(--mid)}
.menu a:hover{background:var(--panel-2);color:var(--ink)}
.menu a small{display:block;font-size:16px;color:var(--dim)}

/* menú en móvil: se despliega, no desaparece */
.burger{display:none;font-family:var(--mono);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:none;border:1px solid var(--line-2);border-radius:var(--r);padding:10px 14px;cursor:pointer}
/* 27-sep · botón del menú con la forma de la marca: rectángulo + nodo en la esquina (el anillo del color del fondo abre
   el hueco, como el arco del logo). Al abrir, el nodo baja por el borde y se enciende en champán, y "Menú" pasa a "Cerrar". */
.burger{position:relative;font-family:var(--sans);font-weight:600;letter-spacing:.02em;text-transform:none;border-width:1.5px;padding:10px 18px;min-width:88px;min-height:44px;transition:color .2s,border-color .3s}
.burger::after{content:"";position:absolute;top:-6px;right:-6px;width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--bg);
  transition:top .42s cubic-bezier(.65,0,.35,1),background-color .3s}
.burger::before{content:"Cerrar";content:"Cerrar" / "";position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);opacity:0;transform:translateY(5px);transition:opacity .22s,transform .35s cubic-bezier(.16,1,.3,1)}
.burger[aria-expanded=true]{color:transparent;border-color:var(--ink)}
.burger[aria-expanded=true]::before{opacity:1;transform:none;transition-delay:.08s}
.burger[aria-expanded=true]::after{top:calc(100% - 6px);background:var(--ambar)}
@media (prefers-reduced-motion:reduce){.burger::after,.burger::before{transition:none}}
@media (max-width:1040px){
  .burger{display:inline-block}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--bg);border-bottom:1px solid var(--line);padding:12px 20px 20px}
  .nav{border-bottom:0;box-shadow:0 40px 60px -20px rgba(0,0,0,.85)}
  .nav[hidden]{display:none}
  .nav a,.drop>button{padding:14px 10px;font-size:15px;text-align:left;width:100%}
  .menu{position:static;transform:none;min-width:0;margin:2px 0 6px;border:0;background:var(--panel)}
  .nav .btn{margin-top:10px;justify-content:center}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:var(--t-body);
  border-radius:var(--r);padding:17px 30px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);text-decoration:none;cursor:pointer;
  transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.sm{padding:12px 20px;font-size:16px}

/* medios: huecos de foto o vídeo real */
.media{position:relative;border-radius:0;border:0;overflow:hidden;max-width:100%;
  background:repeating-linear-gradient(135deg,var(--panel) 0 16px,var(--panel-2) 16px 32px)}
.media .cap{position:absolute;right:16px;bottom:16px;max-width:min(400px,calc(100% - 32px));background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;font-size:16px;color:var(--mid)}
.media .cap b{display:block;font-family:var(--mono);font-weight:500;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}

/* páginas interiores */
.phead{padding-block:clamp(70px,10vw,130px) 48px}
.phead h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;margin-top:18px;max-width:14em}
.phead p{color:var(--mid);font-size:clamp(1.25rem,1.7vw,1.45rem);max-width:36em;margin-top:22px}
.plan{border:1px dashed var(--line-2);border-radius:var(--r);padding:clamp(24px,4vw,40px);margin-bottom:clamp(80px,10vw,120px)}
.plan h2{font-size:1.4rem;margin:10px 0 18px}
.plan ul{margin:0;padding-left:22px;display:grid;gap:12px;color:var(--mid);font-size:19px}

/* contacto: tres campos, una sola acción */
dialog{border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);color:var(--ink);padding:0;width:min(560px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(0,0,0,.74);backdrop-filter:blur(4px)}
.dlg{padding:clamp(24px,4vw,40px);display:grid;gap:16px}
.dlg-head{display:flex;justify-content:space-between;align-items:start;gap:16px}
.dlg h2{font-size:1.9rem}
.dlg .sub{color:var(--mid)}
.close{font:inherit;font-size:17px;color:var(--mid);background:transparent;border:1px solid var(--line-2);border-radius:var(--r);padding:9px 14px;cursor:pointer;flex:none}
.close:hover{color:var(--ink);border-color:var(--ink)}
label{display:grid;gap:8px;font-size:17px;color:var(--mid)}
input{font:inherit;font-size:19px;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px}
input:focus{outline:none;border-color:var(--ink)}
form{display:grid;gap:14px}
form .btn{width:100%;margin-top:4px;padding:16px}
.sent{display:none;border:1px solid var(--line-2);border-radius:var(--r);padding:16px 18px;font-size:18px}
/* segunda vía: elegir hora en el calendario, debajo del formulario */
.o-cal{display:grid;gap:12px;justify-items:start;border-top:1px solid var(--line);padding-top:18px}
.o-cal>span{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.o-cal .btn{width:100%}
.o-cal .nota{font-size:16px;color:var(--dim)}

footer{border-top:1px solid var(--line);padding-block:44px 60px;color:var(--mid);font-size:17px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
footer nav{display:flex;flex-wrap:wrap;gap:22px;font-family:var(--mono);font-size:15px;letter-spacing:.12em;text-transform:uppercase}
footer nav a{text-decoration:none}
footer nav a:hover{color:var(--ink)}
footer .idx{counter-reset:f}
footer .idx a::before{counter-increment:f;content:counter(f,decimal-leading-zero) " · ";color:var(--dim)}

/* ---- ritmo visual: la misma gama, con bandas que alternan ----
   .claro invierte los valores (fondo crema, texto casi negro) y .tono sube un
   escalón el negro. Todos los componentes leen variables, así que basta con
   cambiarlas aquí: botones, tarjetas, líneas y desplegables se adaptan solos. */
.claro{--bg:#f5f3ee;--panel:#ebe8e0;--panel-2:#e0dcd2;--ink:#060605;--mid:#26251f;--dim:#4a4842;
  --line:rgba(6,6,5,.2);--line-2:rgba(6,6,5,.42);background:var(--bg);color:var(--ink)}
/* en banda clara el ámbar se oscurece para que se lea; la cabecera y los botones oscuros no cambian */
.claro .btn.borde-ambar{color:var(--ambar-oscuro);border-color:var(--ambar-oscuro)}
.claro .btn.borde-ambar:hover{background:var(--ambar-oscuro);color:#f5f3ee}
.claro .btn.neutro{border-color:var(--ink);color:var(--ink)}
.claro .btn.neutro:hover{background:var(--ink);color:#f5f3ee}
.claro .btn.blanco{background:#060605;border-color:#060605;color:#f5f3ee}
.claro .btn.blanco::after{color:#f5f3ee}
.tono{--bg:#0a0a09;--panel:#131311;--panel-2:#1b1b18;background:var(--bg)}
.banda{padding-block:clamp(70px,9vw,120px)}

.fases.tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.fases.tres{grid-template-columns:1fr}}

/* ---- ámbar: un solo acento, solo en llamadas a la acción ---- */
.btn.ambar{background:var(--ambar);border-color:var(--ambar);color:#060605}
.btn.ambar:hover{background:var(--ambar-claro);border-color:var(--ambar-claro)}
.btn.borde-ambar{background:transparent;border:1.5px solid var(--ambar);color:var(--ambar)}
.btn.borde-ambar:hover{background:var(--ambar);color:#060605;transform:none}
.btn.blanco{background:#f5f3ee;border-color:#f5f3ee;color:#060605}
.btn.blanco::after{content:"→";color:#060605;font-weight:700}
/* sobre crema (bandas .claro y el cierre) el botón de acento va en la variante oscura, con texto crema; al pasar el ratón se enciende en champán */
.claro .btn.ambar,.cierre .btn.ambar{background:var(--ambar-oscuro);border-color:var(--ambar-oscuro);color:#f5f3ee}
.claro .btn.ambar:hover,.cierre .btn.ambar:hover{background:var(--ambar);border-color:var(--ambar);color:#060605}

/* medios generados por código: fondo liso y lienzo a todo el hueco */
.media.vivo{background:#0b0b0a}
.media.vivo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* botón neutro (ver, explorar): blanco con borde; el color queda solo para agendar una llamada */
.btn.neutro{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn.neutro:hover{background:var(--ink);color:#060605;transform:none}

/* aviso de cookies (mismos identificadores que el resto del sitio, con los colores de marca) */
#orb-cookie-banner{position:fixed;left:16px;right:auto;bottom:16px;z-index:10000;background:var(--panel);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);padding:18px 20px;max-width:520px;box-shadow:0 8px 32px rgba(0,0,0,.5);font-size:16px;line-height:1.5;display:none}
#orb-cookie-banner.orb-show{display:block}
/* enlace suelto en el texto del aviso: relleno vertical sin mover las líneas de alrededor (el
   padding en un elemento en línea no empuja el interlineado), así el área de toque llega a 44 px */
#orb-cookie-banner a{color:inherit;text-decoration:underline;padding-block:14px}
#orb-cookie-banner .orb-cb-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
#orb-cookie-banner button{cursor:pointer;border-radius:var(--r);padding:11px 18px;font:600 15px var(--sans);border:1px solid var(--line-2);background:transparent;color:var(--ink)}
#orb-cb-accept{background:var(--ink)!important;color:#060605!important;border-color:var(--ink)!important}
@media(max-width:760px){#orb-cookie-banner{left:12px;right:12px;bottom:150px;max-width:none}.orb-cal-fab{bottom:88px!important}}

/* ---- dedo: en pantalla táctil todo lo que se pulsa llega a 44 px ---- */
@media (pointer:coarse){
  .explore{padding-block:12px 14px}
  footer .legalnav a,footer nav a{display:inline-flex;align-items:center;min-height:44px}
  .brand,.pie-logo{min-height:44px}
  summary{padding-block:8px;min-height:44px}
  .tabs button{min-height:48px}
  input[type=checkbox]{width:24px;height:24px}
  label.chk,.caso .chk{min-height:44px;align-items:center}
}

/* Aparición al hacer scroll, estilo Apple (las clases .fx y .fx-img las pone site.js pieza a pieza: sin JavaScript
   todo se ve desde el principio). Desplazamiento corto, una sola curva, y los bloques de imagen o lienzo entran
   además con un scale(.985). El escalonado entre vecinas lo lleva site.js, no un retardo CSS, para que al terminar
   la pieza recupere sus transiciones propias (el hover de los botones no hereda ni retardo ni duración). */
.fx{transition:opacity .5s cubic-bezier(.25,.1,.25,1),transform .8s cubic-bezier(.16,1,.3,1)}
.fx:not(.in){opacity:0;transform:translateY(18px)}
.fx.fx-img:not(.in){transform:translateY(18px) scale(.985)}
@media (prefers-reduced-motion:reduce),print{.fx,.fx:not(.in){opacity:1;transform:none;transition:none}}

/* 21-sep · sin cajas (Daniel) */
.media.vivo,.media.est{background:var(--bg)}
.media .cap{border:0;border-radius:0;background:rgba(6,6,5,.78)}
/* El cierre de cada página deja de ser un rectángulo crema con esquinas: es una banda crema a todo el ancho (la sección lleva el fondo) */
.cierre-sec{background:#f5f3ee;color:#060605;padding-block:clamp(60px,8vw,110px)}
.cierre-sec .cierre{background:transparent;color:#060605;border:0;border-radius:0;padding:0;margin:0}
.claro+.cierre-sec{padding-top:clamp(16px,2.5vw,36px)}   /* tras una banda crema, el cierre se apoya en ella: solo un poco de aire, no doble margen */
/* Mientras dura el intro de la portada no asoma nada por encima: ni el botón flotante del calendario, ni la barra, ni el aviso de cookies */
body.intro-on .orb-cal-fab,body.intro-on .barra,body.intro-on #orb-cookie-banner{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.orb-cal-fab,.barra,#orb-cookie-banner{transition:opacity .5s ease,visibility .5s ease}

/* El módulo del calendario pinta su botón con background:currentColor, que en fondo
   oscuro sale blanco puro y parece un rectángulo suelto. Se le dan los colores de marca. */
button.orb-cal-btn{background:var(--ambar);border-radius:var(--r);font-family:var(--sans);padding:16px 28px;font-size:var(--t-body)}
button.orb-cal-btn span{color:#060605}
.orb-cal-invitacion{padding:clamp(22px,2.4vw,32px)}
.orb-cal-invitacion .orb-cal-nota{font-size:1rem;opacity:.85}
/* 21-sep · aviso de cookies compacto en móvil (no tapa el titular) */
@media(max-width:760px){#orb-cookie-banner{padding:12px 14px;font-size:14px;line-height:1.35}#orb-cookie-banner .orb-cb-actions{margin-top:8px;gap:8px}#orb-cookie-banner button{padding:8px 14px;font-size:14px;min-height:44px}}

/* ---- WhatsApp (click to chat): botón neutro y monocromo, el color queda solo para agendar ---- */
.btn.wa{background:transparent;border:1.5px solid currentColor;color:var(--ink);gap:12px}
.btn.wa:hover{background:var(--ink);color:#060605;transform:none}
.btn.wa .ico-wa{width:1.25em;height:1.25em;flex:none}
.cierre-acc{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* sobre la banda crema el cierre pinta sus botones oscuros (.cierre .btn): el de WhatsApp vuelve a ser de contorno */
.cierre-sec .cierre .btn.wa{background:transparent;border:1.5px solid #060605;color:#060605}
.cierre-sec .cierre .btn.wa:hover{background:#060605;color:#f5f3ee}
.claro .btn.wa{color:#060605}
.claro .btn.wa:hover{background:#060605;color:#f5f3ee}
.wa-linea{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:22px;color:var(--mid);font-size:var(--t-body)}
.barra .btn.wa.wa-ico{flex:none;width:54px;padding:0;min-height:0}
.barra .btn.wa.wa-ico .ico-wa{width:26px;height:26px}

/* enlace de exploración (mismo estilo en todas las páginas) */
.explore{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:var(--t-label);font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:6px}
.explore:hover{border-color:var(--ink)}

@media (pointer:coarse){
  .burger{min-height:44px;min-width:64px}
  .explore{padding-block:13px 13px;min-height:44px}
}

/* ---- 27-sep · llamada al diagnóstico (portada): botón champán + "100 % gratis y sin compromiso" + qué se lleva + WhatsApp discreto ---- */
.cta-diag{display:grid;justify-items:start;gap:14px}
.cta-diag .cta-nota{font-size:clamp(15px,1.15vw,17px);color:var(--dim);line-height:1.5;max-width:36em}
.cta-diag .cta-nota b{font-weight:600;color:var(--ink)}
/* relleno vertical en el propio enlace (en línea: no separa el resto del párrafo) para que el
   área de toque llegue a 44 px sin cambiar el texto */
.cta-wa{padding-block:14px;color:var(--mid);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.cta-wa:hover{color:var(--ink);text-decoration-color:currentColor}
@media (max-width:760px){.cta-diag .btn{width:100%}}
/* cierre de cada sección: pregunta y garantía a la izquierda, acción a la derecha; una raya fina que se desvanece la
   separa del contenido (no es una caja: sin borde, sin fondo, sin radio) */
.cta-cierre{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) auto;gap:clamp(22px,4vw,72px);align-items:center;
  margin-top:clamp(56px,7vw,96px);padding-top:clamp(30px,3.4vw,46px)}
.cta-cierre::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--line-2),transparent 85%)}
.cc-txt{display:grid;gap:14px}
.cc-t{font-family:var(--disp);font-weight:600;font-size:clamp(1.65rem,2.9vw,2.6rem);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;max-width:17em}
.cta-cierre .cta-nota{font-size:clamp(15.5px,1.2vw,18px);color:var(--dim);line-height:1.5;max-width:38em}
.cta-cierre .cta-nota b{font-weight:600;color:var(--ink)}
.cc-acc{display:grid;justify-items:center;gap:14px}
.cc-acc .btn{font-size:clamp(1.05rem,1.3vw,1.2rem);padding:19px 32px;white-space:nowrap}
.cc-acc .cta-wa{font-size:15.5px;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:760px){.cta-cierre{grid-template-columns:1fr}.cc-acc{justify-items:stretch}.cc-acc .btn{width:100%}.cc-acc .cta-wa{justify-self:start}}

/* ---- 27-sep · fondo continuo: nada de cortes negro/blanco. Cada banda entra y sale con un degradado largo
   (clamp 170-260 px) desde el negro de la página hasta un negro con otro matiz, y vuelve. --bg pasa a ser el color
   de la meseta para que lo que lo lea (máscaras de rótulos, lienzos) no se vea como un rectángulo. ---- */
.fundido{--f:#0e0d0a;--bg:var(--f);--panel:#151411;--panel-2:#1b1a16;--entra:clamp(170px,20vw,260px);
  background:var(--brillo,linear-gradient(transparent,transparent)),
    linear-gradient(180deg,#060605 0,var(--f) var(--entra),var(--f) calc(100% - var(--entra)),#060605 100%)}
.fundido.grafito{--f:#0c0d0d;--panel:#131515;--panel-2:#1a1c1c}
.fundido.calido{--brillo:radial-gradient(680px 300px at 12% 400px,rgba(210,184,119,.075),transparent 72%)}   /* nace a más de 300 px del borde: arriba vale 0, sin línea */

/* ---- hueco de vídeo a sangre (poster propio mientras no haya vídeo). Degradado arriba y abajo hasta el negro de la
   página, y velo lateral para que el texto se lea siempre. Sin fuente no descarga nada. ---- */
.con-video{position:relative;isolation:isolate;overflow:hidden}
.con-video>.wrap{position:relative;z-index:1}
/* 28-sep · vídeo real, no un póster: con el clip decodificando de verdad la primera prueba salía demasiado
   claro (el texto pequeño bajaba de 4,5:1 en las zonas con más detalle). Menos opacidad de vídeo y dos capas
   de degradado que se suman (el suelo nunca baja de ~78 % de negro, y donde hay texto pasa de 90 %). */
.media-video{position:absolute;inset:0;z-index:0;pointer-events:none;background:#060605}
.media-video video{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.42}
.media-video::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,6,5,.78) 0%,rgba(6,6,5,.55) 22%,rgba(6,6,5,.55) 78%,rgba(6,6,5,.82) 100%),
  linear-gradient(90deg,rgba(6,6,5,.93) 0%,rgba(6,6,5,.8) 50%,rgba(6,6,5,.55) 100%)}
@media (max-width:760px){.media-video::after{background:
  linear-gradient(180deg,rgba(6,6,5,.85) 0%,rgba(6,6,5,.72) 22%,rgba(6,6,5,.8) 70%,rgba(6,6,5,.92) 100%)}}
@media print{.media-video{display:none}}

/* 27-sep · barra fija de móvil con la misma forma que el botón flotante: rectángulo champán + nodo; dos líneas
   (qué es y que no compromete). El nodo llega un instante después de la barra. */
.barra .btn.ambar.dos{position:relative;display:grid;justify-items:center;gap:1px;padding:9px 14px;line-height:1.15}
.barra .btn.ambar.dos .fab-t{font-family:var(--disp);font-weight:600;font-size:16.5px}
.barra .btn.ambar.dos .fab-s{font-family:var(--sans);font-weight:500;font-size:13px;opacity:.82}
.barra .btn.ambar.dos::after{content:"";position:absolute;top:-6px;right:-6px;width:12px;height:12px;border-radius:50%;background:var(--ambar);
  box-shadow:0 0 0 3px var(--bg);transition:transform .42s cubic-bezier(.34,1.56,.64,1) .18s}
.barra.aparte .btn.ambar.dos::after{transform:scale(0);transition-delay:0s}

/* ---- 27-sep · pie propio (.pie): frase de cierre con la llamada, marca, páginas, contacto, legal y Madrid. Sin cajas:
   dos rayas finas que se desvanecen. Las demás páginas conservan su pie hasta la segunda tanda. ---- */
footer.pie{border-top:0;padding-block:0;color:var(--mid);font-size:16px}
footer.pie .wrap{display:grid;flex-wrap:nowrap;justify-content:normal;gap:0}
.pie-cierre{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:40px!important;row-gap:28px!important;padding-block:clamp(80px,10vw,140px) clamp(48px,6vw,76px)}
.pie-frase{font-family:var(--disp);font-weight:600;font-size:clamp(2.4rem,5.6vw,5.2rem);line-height:1.02;letter-spacing:-.03em;color:var(--ink)}
.pie-acc{display:grid;gap:12px;justify-items:end}
.pie-nota{font-size:14.5px;color:var(--dim)}
.pie-cols{position:relative;grid-template-columns:1.7fr 1fr 1fr 1fr;column-gap:clamp(28px,4vw,64px)!important;row-gap:36px!important;padding-block:clamp(40px,5vw,64px)}
.pie-cols::before,.pie-base::before{content:"";position:absolute;left:20px;right:20px;top:0;height:1px;background:linear-gradient(90deg,var(--line-2),transparent 92%)}
.pie-logo{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:.06em;color:var(--ink)}
.pie-logo svg{width:32px;height:32px;flex:none}
.pie-marca p{margin-top:16px;max-width:28em;line-height:1.5;color:var(--dim);font-size:16px}
footer.pie .pie-col,footer.pie nav.pie-col{display:grid;align-content:start;gap:2px;font-family:var(--sans);font-size:16px;letter-spacing:0;text-transform:none}
.pie-h{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--ink);margin-bottom:8px}
.pie-col a,.pie-col span{color:var(--mid);text-decoration:none;padding-block:5px;width:fit-content}
.pie-col a:hover{color:var(--ink)}
.pie-base{position:relative;display:flex!important;justify-content:space-between;flex-wrap:wrap;gap:10px 24px!important;padding-block:22px 36px;font-size:14px;color:var(--dim)}
@media (max-width:900px){.pie-cols{grid-template-columns:1fr 1fr}.pie-marca{grid-column:1/-1}}
@media (max-width:760px){.pie-cierre{grid-template-columns:1fr}.pie-acc{justify-items:stretch}.pie-acc .btn{width:100%}.pie-frase br.d{display:none}.pie-frase{text-wrap:balance}}
@media (pointer:coarse){.pie-col a{display:flex;align-items:center;min-height:44px;padding-block:0}}

/* ---- 30-sep · fondo continuo (fondo.js). Daniel: «que parezca el mismo fondo aunque vaya cambiando por estancias,
   sin cambios drásticos, y que destaque un poco más». Un solo lienzo fijo detrás de toda la página pinta el color de la
   estancia en la que estás y funde con el de la siguiente según bajas, con dos luces (champán y gris azulado) que
   derivan despacio. Las secciones dejan de pintar fondo propio; las bandas crema y de vídeo quedan y se funden por
   los bordes. ---- */
.fondo-vivo{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;display:block}
.sec,.bloque{position:relative;isolation:isolate}
.sec>.wrap,.bloque>.wrap{position:relative;z-index:1}
.sec:not(.con-video):not(.claro),.bloque:not(.con-video):not(.claro):not(.cierre-sec),.sec.fundido:not(.con-video),.bloque.fundido:not(.con-video),.sec.faq,.sec.formas,.reservar.fundido{background:transparent}
.top{background:rgba(6,6,5,.8)}
.claro,.cierre-sec{position:relative}
.claro::before,.cierre-sec::before{content:"";position:absolute;left:0;right:0;top:-120px;height:120px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(245,243,238,0),#f5f3ee)}
.claro::after{content:"";position:absolute;left:0;right:0;bottom:-120px;height:120px;z-index:1;pointer-events:none;background:linear-gradient(180deg,#f5f3ee,rgba(245,243,238,0))}
.claro+.cierre-sec::before{display:none}
.media-video video{opacity:.6}
/* el hero de la portada y el giro 3D de las interiores dejan ver el fondo continuo: sin negro propio ni corte abajo */
section.hero .media#hero-3d,.giro.g3d .media-video,.giro.g3d{background:transparent}

/* ---- 30-sep (2) · fondos integrados (Daniel: «cada sección con su fondo, pero que se integren en uno: nada de un
   salto de negro a dorado»). Las secciones con vídeo ya no pintan negro propio: el vídeo y su velo se funden por
   arriba y por abajo con el fondo continuo (fondo.js), así que la estancia anterior entra en la siguiente sin borde. ---- */
.media-video{background:transparent}
.media-video video,.media-video::after{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
.media-video::after{background:linear-gradient(90deg,rgba(6,6,5,.86) 0%,rgba(6,6,5,.64) 50%,rgba(6,6,5,.32) 100%)}
@media (max-width:760px){.media-video::after{background:rgba(6,6,5,.72)}}
html body .fase,html body .auto .fase,html body .media.est,html body .media.vivo,html body .fundido .media,html body iframe.ej{background:transparent}
.fundido{--panel:rgba(245,243,238,.035);--panel-2:rgba(245,243,238,.06)}
/* 30-sep · móvil: el aviso de cookies es una franja fina pegada a la barra de abajo, texto y botones en una línea,
   sin tapar el centro de la pantalla (antes 154 px de alto a media altura). */
@media(max-width:760px){
  #orb-cookie-banner{left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom,0px));border-radius:0;border-inline:0;padding:8px 12px;font-size:13px;line-height:1.3;box-shadow:none;background:rgba(14,13,10,.96)}
  #orb-cookie-banner.orb-show{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  #orb-cookie-banner>p,#orb-cookie-banner>span,#orb-cookie-banner>div:not(.orb-cb-actions){flex:1 1 180px;margin:0}
  #orb-cookie-banner .orb-cb-actions{margin:0;gap:6px;flex:0 0 auto}
  #orb-cookie-banner button{padding:6px 12px;font-size:13px;min-height:40px}
  #orb-cookie-banner a{padding-block:10px}
}
/* faq también en la portada */
.faq{margin-top:clamp(28px,3.6vw,44px)}
.faq details{border:0}
/* 30-sep · selector de idioma ES/EN en el menú: discreto, en mayúsculas espaciadas, sin caja */
/* botón de idioma con desplegable (globo + código + flecha); el menú no es una caja: fondo oscuro, sin borde ni radio */
.idioma{position:relative;display:flex;align-items:center}
.idioma-b{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;color:var(--dim,#dad6cb);font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.14em;padding:10px 6px;min-height:44px}
.idioma-b:hover,.idioma-b[aria-expanded=true]{color:var(--ink,#f5f3ee)}
.idioma-b:focus-visible{outline:2px solid var(--ink,#f5f3ee);outline-offset:2px}
.idioma-g{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5}
.idioma-f{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .25s}
.idioma-b[aria-expanded=true] .idioma-f{transform:rotate(180deg)}
.idioma-m{position:absolute;top:calc(100% + 6px);right:0;min-width:170px;margin:0;padding:6px 0;list-style:none;background:#0e0d0a;box-shadow:0 18px 40px rgba(0,0,0,.55);z-index:60;opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.idioma-m.on{opacity:1;transform:none}
.idioma-m[hidden]{display:none}
.idioma-m a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;min-height:44px;font-family:var(--sans);font-size:.98rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--mid,#dad6cb)}
.idioma-m a:hover,.idioma-m a[aria-current=true]{color:var(--ink,#f5f3ee)}
.idioma-m a[aria-current=true]::after{content:"";width:6px;height:6px;border-radius:50%;background:#D2B877}
/* el globo va en la barra, fuera del menú: en escritorio al final (tras el botón de diagnóstico); en móvil, siempre
   a la vista junto a «Menú», sin tener que abrirlo */
.top .wrap>.idioma{order:5}
.idioma-m a{text-decoration:none}
@media (max-width:760px){.top .wrap>.idioma{order:0;margin-left:auto}.top .wrap>.burger{order:1}.idioma-b{padding-inline:8px}}
@media (prefers-reduced-motion:reduce){.idioma-m,.idioma-f{transition:none}}