/* Domova — hero cinematográfico de la portada.
   Solo aplica en index.html, que lleva <body class="home-cinematic">.
   El resto del sitio no se toca. */

body.home-cinematic{ --hero-ink:#171813; --hero-paper:#f6f1e3; --hero-gold:#bfa46f; }

/* ---------- Encabezado sobre la foto ---------- */
/* En la portada el encabezado flota encima del hero y se vuelve sólido al bajar. */
body.home-cinematic header#site-header{
  position: fixed; inset: 0 0 auto; z-index: 60;
  background: linear-gradient(180deg, rgba(16,17,15,.65), rgba(16,17,15,0));
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--hero-paper);
  transition: background-color .2s, border-color .2s;
}
body.home-cinematic header#site-header.is-solid{
  background: rgba(22,23,20,.97);
  border-bottom-color: rgba(246,241,227,.16);
}
/* El logotipo normal es oscuro sobre blanco. En la portada, sobre la foto, se usa
   una versión clara con fondo transparente (assets/logo-claro.png). */
.brand .brand-claro{ display: none; }
body.home-cinematic .brand .brand-oscuro{ display: none; }
body.home-cinematic .brand .brand-claro{
  display: block; width: auto; height: 74px;
  object-fit: contain; mix-blend-mode: normal; filter: none; flex: none;
}
@media (max-width: 620px){ body.home-cinematic .brand .brand-claro{ height: 58px; } }
body.home-cinematic .navlinks a,
body.home-cinematic .navlinks a[aria-current="page"]{ color: var(--hero-paper); }
body.home-cinematic .navlinks a:hover{ text-decoration: underline; text-decoration-color: var(--hero-gold); text-underline-offset: 6px; }
body.home-cinematic .navlink::after{ background: var(--hero-gold); }
body.home-cinematic .nav-toggle{ color: var(--hero-paper); border-color: rgba(246,241,227,.5); }
body.home-cinematic .btn-gold{ background: rgba(17,18,15,.15); color: var(--hero-paper); border: 1px solid var(--hero-gold); }
body.home-cinematic .btn-gold:hover{ background: var(--hero-paper); color: var(--hero-ink); }
body.home-cinematic #mobile-menu{ background: #1b1c18; color: var(--hero-paper); border-top-color: rgba(246,241,227,.2); }
body.home-cinematic #mobile-menu a{ color: var(--hero-paper); border-bottom-color: rgba(246,241,227,.15); }
body.home-cinematic #mobile-menu a.mobile-cta{ background: var(--gold); color: var(--gold-ink); }
body.home-cinematic header#site-header :focus-visible{ outline: 2px solid var(--hero-paper); outline-offset: 5px; }

/* ---------- El hero ---------- */
.cinema-wrap{ width:100%; max-width:1600px; margin-inline:auto; padding-inline:clamp(24px,7.5vw,120px); }
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.cinematic-hero{
  position:relative; isolation:isolate; padding:0;
  background:var(--hero-ink); color:var(--hero-paper);
  min-height:clamp(760px, calc(100svh - 108px), 1000px);
}
.cinema-photo{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.cinema-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 53%; }
/* Velo en degradado: oscurece la izquierda para que el texto se lea siempre. */
.cinematic-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(12,14,12,.85) 0%, rgba(12,14,12,.67) 33%, rgba(12,14,12,.29) 68%, rgba(12,14,12,.08) 100%),
    linear-gradient(180deg, rgba(12,14,12,.13) 20%, transparent 48%, rgba(12,14,12,.24) 100%);
}
.cinema-content{
  position:relative; min-height:inherit;
  padding-top:calc(var(--header-height,106px) + 54px); padding-bottom:46px;
  display:flex; flex-direction:column; align-items:stretch;
}
.cinema-copy{ padding-bottom:55px; }
.cinema-eyebrow{ font:400 14px/1.5 var(--sans); letter-spacing:.24em; color:#dedbcf; margin:0 0 25px; }
.cinema-copy h1{ max-width:1160px; margin:0; font:400 clamp(3.75rem,6.2vw,6.35rem)/1.04 var(--serif); letter-spacing:-.04em; }
.cinema-copy h1 span, .cinema-copy h1 em{ display:block; }
.cinema-copy h1 em{ font-weight:400; }
.cinema-description{ font-size:clamp(18px,1.55vw,24px); line-height:1.5; margin:26px 0 23px; color:#f0ede5; max-width:740px; }
.cinema-explore{ display:inline-flex; align-items:center; gap:14px; min-height:44px; color:#d8c394; font-size:17px; border-bottom:1px solid rgba(216,195,148,.7); padding-block:5px; }
.cinema-explore svg{ width:20px; height:20px; transition:transform .2s; }
.cinema-explore:hover svg{ transform:translate(2px,-2px); }
.cinema-copy :focus-visible{ outline:2px solid var(--hero-paper); outline-offset:5px; }
.cinema-caption{ position:absolute; right:clamp(24px,7.5vw,120px); bottom:10px; margin:0; color:#dfddd5; font-size:12px; line-height:1.5; }

/* ---------- Buscador ---------- */
.cinema-search{ margin-top:auto; background:var(--hero-paper); color:#292920; border:1px solid rgba(255,255,255,.35); border-radius:6px; padding:0 28px; box-shadow:0 14px 45px #0002; }
.cinema-operations{ display:flex; gap:24px; padding:0; margin:0; border:0; border-bottom:1px solid #d9d3c7; min-width:0; }
.cinema-operation{ position:relative; display:flex; }
.cinema-operation input{ position:absolute; width:1px; height:1px; opacity:0; }
.cinema-operation label{ display:block; padding:20px 28px 17px; min-height:54px; cursor:pointer; font-size:16px; border-bottom:3px solid transparent; color:#554f44; }
.cinema-operation input:checked + label{ border-bottom-color:#292920; color:#292920; font-weight:600; }
.cinema-operation input:focus-visible + label{ outline:2px solid var(--gold-deep); outline-offset:-5px; }
.cinema-fields{ display:grid; grid-template-columns:1.1fr 1.1fr 1fr 1fr; align-items:center; padding-block:18px; }
.cinema-field{ display:flex; flex-direction:column; min-width:0; padding-inline:23px; border-right:1px solid #d9d3c7; }
.cinema-field:first-child{ padding-left:7px; }
.cinema-field label{ font-size:14px; line-height:1.4; color:#5a5448; margin-bottom:2px; }
.cinema-field select, .cinema-field input{ display:block; width:100%; min-width:0; min-height:43px; padding:8px 24px 8px 0; background-color:transparent; border:0; border-radius:2px; box-shadow:none; color:#292920; font:400 16px/1.4 var(--sans); }
.cinema-field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23514c3e' stroke-width='1.7'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position:right 5px center; background-repeat:no-repeat; }
.cinema-field select option{ background:var(--hero-paper); color:#292920; }
.cinema-field input::placeholder{ color:#292920; opacity:1; }
.cinema-field input:focus-visible, .cinema-field select:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
.cinema-submit{ display:flex; align-items:center; justify-content:center; gap:13px; min-height:60px; margin-left:18px; padding:12px 18px; border:1px solid transparent; border-radius:4px; background:#b8a06f; color:#211d14; font:500 15px/1.4 var(--sans); cursor:pointer; }
.cinema-submit svg{ width:22px; height:22px; flex:none; }
.cinema-submit:hover{ background:#cfb882; }
.cinema-submit:focus-visible{ outline:2px solid var(--hero-ink); outline-offset:4px; }

/* ---------- Franja de servicios debajo del hero ---------- */
.cinema-services{ background:var(--hero-paper); border-bottom:1px solid var(--line); }
.cinema-services-grid{ display:grid; grid-template-columns:1fr 1.2fr 1fr; padding-block:29px; }
.cinema-service{ display:flex; align-items:center; gap:22px; padding:0 36px; border-right:1px solid #cec8ba; min-width:0; color:var(--ink); }
.cinema-service:first-child{ padding-left:0; }
.cinema-service:last-child{ padding-right:0; border:0; }
.cinema-service svg{ width:38px; height:38px; flex:none; stroke-width:1.5; }
.cinema-service strong{ display:block; font-size:16px; font-weight:500; line-height:1.4; }
.cinema-service span{ display:block; font-size:14px; color:#625e54; margin-top:3px; line-height:1.5; }
.cinema-service:hover strong{ text-decoration:underline; text-underline-offset:4px; }

/* ---------- Adaptaciones ---------- */
@media(max-width:1180px){
  .cinema-field{ padding-inline:16px; }
  .cinema-submit{ margin-left:16px; padding-inline:14px; }
  .cinema-service{ padding-inline:24px; gap:16px; }
}
@media(max-width:980px){
  .cinematic-hero{ min-height:810px; }
  .cinema-content{ padding-top:calc(var(--header-height,96px) + 45px); padding-bottom:40px; }
  .cinema-copy{ padding-bottom:36px; }
  .cinema-copy h1{ font-size:clamp(3.1rem,7.9vw,4.85rem); }
  .cinema-description{ max-width:550px; }
  .cinema-search{ padding-inline:22px; }
  .cinema-fields{ grid-template-columns:1fr 1fr; gap:17px 0; }
  .cinema-field:nth-child(2){ border-right:0; }
  .cinema-field:nth-child(3){ padding-left:7px; }
  .cinema-submit{ min-height:62px; }
  .cinema-services-grid{ padding-block:22px; }
  .cinema-service{ gap:12px; padding-inline:16px; }
  .cinema-service svg{ width:28px; height:28px; }
  .cinema-service strong{ font-size:14px; }
}
@media(max-width:620px){
  .cinema-wrap{ padding-inline:24px; }
  .cinematic-hero{ min-height:0; }
  .cinema-photo img{ object-position:67% center; }
  .cinematic-hero::before{
    background:
      linear-gradient(90deg, rgba(12,14,12,.84), rgba(12,14,12,.55)),
      linear-gradient(180deg, rgba(12,14,12,.06) 45%, rgba(12,14,12,.48));
  }
  .cinema-content{ padding-top:calc(var(--header-height,88px) + 37px); padding-bottom:39px; min-height:0; }
  .cinema-eyebrow{ font-size:12px; letter-spacing:.16em; margin-bottom:21px; max-width:310px; }
  .cinema-copy{ padding-bottom:29px; }
  .cinema-copy h1{ font-size:clamp(2.6rem,9.8vw,3.8rem); line-height:1.08; letter-spacing:-.035em; }
  .cinema-copy h1 em{ margin-top:5px; }
  .cinema-description{ font-size:17px; line-height:1.55; margin:21px 0 12px; max-width:370px; }
  .cinema-explore{ font-size:16px; }
  .cinema-search{ padding-inline:17px; }
  .cinema-operations{ gap:17px; }
  .cinema-operation label{ font-size:16px; padding:15px 22px 13px; }
  .cinema-fields{ grid-template-columns:1fr; gap:0; padding-block:6px 16px; }
  .cinema-field, .cinema-field:first-child, .cinema-field:nth-child(3){ padding:12px 3px 9px; border-right:0; border-bottom:1px solid #d9d3c7; }
  .cinema-field select, .cinema-field input{ min-height:40px; padding-block:6px; }
  .cinema-submit{ margin:16px 0 0; min-height:51px; font-size:16px; }
  .cinema-caption{ right:24px; bottom:11px; }
  .cinema-services-grid{ grid-template-columns:1fr; padding-block:8px; }
  .cinema-service, .cinema-service:first-child, .cinema-service:last-child{ padding:17px 0; border-right:0; border-bottom:1px solid #d9d3c7; gap:19px; }
  .cinema-service:last-child{ border-bottom:0; }
  .cinema-service svg{ width:32px; height:32px; }
  .cinema-service strong{ font-size:16px; }
}
@media(prefers-reduced-motion:reduce){
  body.home-cinematic header#site-header, .cinema-explore svg{ transition:none; }
}
