/* ============================================================
   Beatriz Castrillon - sistema visual
   Paleta derivada del empaque real de la marca:
   caja hueso + logotipo caligrafico en dorado/bronce + linea botanica.
   Regla rectora: el cromatismo lo pone la OBRA, nunca la interfaz.
   ============================================================ */

:root{
  color-scheme: light;

  --bone:      #F6F2EC;
  --paper:     #FCFAF8;
  --paper-2:   #EFE9E0;
  --ink:       #17140F;
  --ink-2:     #4B443A;
  /* --ink-3 y --gold son para TEXTO sobre fondo claro: sus valores están
     fijados para superar 4.5:1 sobre --paper y --bone (WCAG AA).
     No aclararlos: se verificó con tools/audit.js. */
  --ink-3:     #736A5D;
  --line:      #E3DBD0;
  --line-soft: #EFE9E1;
  --gold:      #846437;
  /* decorativo grande sobre fondo claro (>=24px): basta 3:1 */
  --gold-dec:  #A8834E;
  /* solo sobre fondo oscuro */
  --gold-2:    #C6A87C;

  --ff-display: "Cormorant Garamond", "Times New Roman", serif;
  --ff-ui: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad: clamp(16px, 4vw, 64px);
  --maxw: 1440px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-ui);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-0.012em;
  margin:0;
}
h1{ font-size:clamp(2.6rem, 7vw, 6rem); }
h2{ font-size:clamp(2rem, 4.6vw, 3.9rem); }
h3{ font-size:clamp(1.35rem, 2.2vw, 1.95rem); }
p{ margin:0 0 1em; }

/* ---------- utilidades ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:840px; }
.section{ padding-block:clamp(56px, 9vw, 130px); }
.section--tight{ padding-block:clamp(40px, 5vw, 72px); }
.center{ text-align:center; }

.overline{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400; margin:0 0 1.1em;
}
.overline--gold{ color:var(--gold); }

.lede{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ink-2); max-width:62ch; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--ff-ui); font-size:.76rem; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase;
  padding:1.12em 2.3em; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  cursor:pointer; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  text-align:center;
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.65); }
.btn--outline-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--light{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn--light:hover{ background:transparent; color:var(--bone); border-color:var(--bone); }
.btn--wide{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.link-u{
  font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  border-bottom:1px solid var(--ink); padding-bottom:.35em; display:inline-block;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.link-u:hover{ color:var(--gold); border-color:var(--gold); }

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:90;
  background:rgba(252,250,248,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.hdr__bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:16px; padding:14px var(--pad); max-width:var(--maxw); margin-inline:auto;
}
.hdr__logo{
  grid-column:2; text-align:center; font-family:var(--ff-display);
  font-size:clamp(1.1rem,2.1vw,1.5rem); letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; line-height:1;
}
.hdr__logo small{
  display:block; font-family:var(--ff-ui); font-size:.65rem; letter-spacing:.3em;
  color:var(--gold); text-transform:uppercase; margin-top:.55em;
}
.nav{ display:flex; gap:clamp(12px,1.8vw,26px); align-items:center; }
.nav--right{ grid-column:3; justify-content:flex-end; }
.nav a{
  font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2);
  padding:6px 0; position:relative; transition:color .3s var(--ease); white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--ink); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ width:100%; }
.nav a.is-accent{ color:var(--gold); }

.nav-desk{ display:contents; }

.burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; color:var(--ink); }
.burger svg{ width:22px; height:22px; }

@media (max-width: 1060px){
  .nav--left,.nav-desk{ display:none; }
  .burger{ display:block; }
  .hdr__bar{ grid-template-columns:auto 1fr auto; }
  .hdr__logo{ grid-column:2; }
}

.mnav{
  position:fixed; inset:0; z-index:100; background:var(--paper);
  transform:translateY(-101%); transition:transform .5s var(--ease);
  display:flex; flex-direction:column; padding:var(--pad); overflow-y:auto;
}
.mnav[data-open="true"]{ transform:translateY(0); }
.mnav__close{ align-self:flex-end; background:none; border:0; font-size:1.7rem; cursor:pointer; color:var(--ink); line-height:1; padding:6px; }
.mnav a{
  font-family:var(--ff-display); font-size:clamp(1.7rem,7vw,2.3rem); padding:.32em 0;
  border-bottom:1px solid var(--line-soft);
}
.mnav__meta{ margin-top:auto; padding-top:28px; font-size:.76rem; color:var(--ink-3); }

/* ---------- announcement ---------- */
.announce{
  background:var(--ink); color:var(--bone); text-align:center;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; padding:10px 16px;
}
.announce b{ color:var(--gold-2); font-weight:400; }

/* ---------- hero ----------
   TODAS las fotos de hero son verticales (0.65-0.75). En movil el contenedor
   tambien es vertical y la imagen se ve entera. En escritorio, en cambio, un
   hero a pantalla ancha solo dejaria ver el 36-40% de la altura de la foto:
   se perdian las cabezas o las faldas, nunca cabian las dos.
   Por eso el hero cambia de forma, no solo de encuadre:
     - movil  -> imagen a sangre con el texto encima
     - escritorio -> dos columnas, la imagen en proporcion vertical y entera
   No volver a un hero a sangre en escritorio con estas fotos. */
.hero{ position:relative; min-height:clamp(560px, 88vh, 940px); display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img,.hero__media video{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.hero--portrait .hero__media img{ object-position:center 8%; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,10,8,.44) 0%, rgba(12,10,8,.10) 32%, rgba(12,10,8,.74) 100%);
}
.hero__body{ position:relative; z-index:2; color:#fff; padding-block:clamp(40px,7vw,86px); width:100%; }
.hero__body h1{ max-width:16ch; margin-bottom:.3em; text-shadow:0 2px 34px rgba(0,0,0,.36); }
.hero__body .overline{ color:rgba(255,255,255,.84); }
.hero__sub{ max-width:50ch; color:rgba(255,255,255,.93); font-size:clamp(1rem,1.5vw,1.2rem); margin-bottom:2.1em; text-shadow:0 1px 20px rgba(0,0,0,.4); }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }

/* La "estela": la misma foto ampliada y desenfocada ocupando todo el hero.
   Sirve para que el fondo sea UNA sola superficie. Fundir la foto contra el
   crema dejaba una linea vertical visible, porque casi todas las fotos tienen
   fondo oscuro. Al extender la propia imagen, el borde de la foto nitida cae
   sobre un fondo de su mismo tono y desaparece. Es decorativa: no se anuncia. */
.hero__wash{ display:none; }

/* Escritorio y tablet apaisada: hero en dos columnas sobre un fondo continuo.
   La imagen conserva proporcion vertical, asi que la modelo se ve completa. */
@media (min-width:821px){
  .hero{
    min-height:0; display:grid; grid-template-columns:1fr 1fr;
    align-items:stretch; background:var(--ink);
  }

  .hero__wash{ display:block; position:absolute; inset:0; z-index:0; overflow:hidden; }
  /* La estela conserva el tono real de la foto: asi el borde de la imagen
     nitida cae siempre sobre su mismo color, sea una foto oscura o una de
     fondo blanco. Oscurecerla por igual delataba la costura en las claras. */
  .hero__wash img{
    width:100%; height:100%; object-fit:cover; object-position:center;
    filter:blur(56px) saturate(.9) brightness(.82); transform:scale(1.18);
  }
  /* El velo oscuro solo cubre el lado del texto y se disuelve antes de llegar
     a la foto, para que el contraste no dependa de que la foto sea oscura. */
  .hero__wash::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(96deg,
      rgba(23,20,15,.96) 0%, rgba(23,20,15,.93) 30%,
      rgba(23,20,15,.34) 47%, rgba(23,20,15,0) 57%);
  }

  .hero__media{ position:relative; inset:auto; grid-area:1 / 2 / 2 / 3; z-index:1; }
  .hero__media img,.hero__media video{
    aspect-ratio:4/5; height:auto; max-height:88vh; object-position:center top;
    /* Funde la foto nitida con la estela. Al ser el mismo tono, no se ve costura. */
    -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 5%, #000 15%);
            mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 5%, #000 15%);
  }
  .hero__media::after{ display:none; }

  .hero__body{
    grid-area:1 / 1 / 2 / 2; z-index:2;
    display:flex; align-items:center; padding-block:clamp(48px,6vw,96px);
  }
  .hero__body .wrap{ max-width:none; padding-right:clamp(24px,3vw,56px); }
}

@media (max-width:560px){
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .announce{ font-size:.64rem; letter-spacing:.1em; padding:9px 12px; }
}

/* ---------- tira de argumentos ---------- */
.proof{ background:var(--bone); border-block:1px solid var(--line); }
.proof__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.proof__cell{ background:var(--bone); padding:clamp(22px,3vw,38px) clamp(16px,2vw,28px); }
.proof__cell strong{ display:block; font-family:var(--ff-display); font-size:1.26rem; font-weight:400; margin-bottom:.32em; }
.proof__cell span{ font-size:.82rem; color:var(--ink-3); line-height:1.5; display:block; }
@media (max-width:860px){ .proof__grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- rutas ---------- */
.routes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.2vw,34px); }
@media (max-width:900px){ .routes{ grid-template-columns:1fr; } }
.route{ display:flex; flex-direction:column; }
.route__fig{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--paper-2); }
.route__fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.route:hover .route__fig img{ transform:scale(1.045); }
.route__tag{
  position:absolute; left:14px; top:14px; background:var(--paper); color:var(--ink);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; padding:7px 12px;
}
.route__body{ padding-top:20px; display:flex; flex-direction:column; flex:1; }
.route__body h3{ margin-bottom:.4em; }
.route__body p{ color:var(--ink-2); font-size:.95rem; margin-bottom:1.4em; flex:1; }

/* ---------- encabezado de seccion ---------- */
.shead{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(28px,4vw,56px); flex-wrap:wrap; }
.shead h2{ margin-bottom:.3em; }
.shead p{ color:var(--ink-2); margin:0; max-width:56ch; }

/* ---------- editorial split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(24px,5vw,80px); }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } .split__media{ order:0 !important; } }
.split__media img,.split__media video{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--paper-2); }
.split__media--tall img,.split__media--tall video{ aspect-ratio:9/16; }
.split__body h2{ margin-bottom:.44em; }
.split__body p{ color:var(--ink-2); }
.split--flip .split__media{ order:2; }

.caption{ font-size:.78rem; color:var(--ink-3); letter-spacing:.04em; margin-top:10px; }

/* ---------- pasos ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--paper); padding:clamp(22px,2.6vw,32px); }
.step__n{ font-family:var(--ff-display); font-size:2.4rem; color:var(--gold-dec); line-height:1; display:block; margin-bottom:.3em; }
.step h3,.step h4{ font-family:var(--ff-ui); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 .8em; font-weight:400; }
.step p{ font-size:.9rem; color:var(--ink-2); margin:0; }
.dark .steps{ background:rgba(246,242,236,.16); border-color:rgba(246,242,236,.16); }
.dark .step{ background:var(--ink); }
.dark .step h3,.step h4{ color:var(--bone); }
.dark .step__n{ color:var(--gold-2); }

/* ---------- grilla de producto ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:clamp(20px,2.4vw,38px) clamp(12px,1.6vw,22px); }
.pgrid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1040px){ .pgrid--4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .pgrid--4{ grid-template-columns:repeat(2,1fr); } .pgrid{ grid-template-columns:repeat(2,1fr); } }

.card{ display:flex; flex-direction:column; position:relative; }
.card__fig{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--paper-2); margin-bottom:14px; }
.card__fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.05s var(--ease), opacity .5s var(--ease); }
.card:hover .card__fig img{ transform:scale(1.05); }
.card__badge{
  position:absolute; left:10px; top:10px; z-index:2;
  background:var(--paper); color:var(--ink); font-size:.66rem; letter-spacing:.15em;
  text-transform:uppercase; padding:6px 10px;
}
.card__badge--ink{ background:var(--ink); color:var(--bone); }
.card__badge--gold{ background:var(--gold); color:#fff; }
.card__name{ font-family:var(--ff-display); font-size:1.24rem; line-height:1.15; margin:0 0 .18em; }
.card__meta{ font-size:.8rem; color:var(--ink-3); letter-spacing:.05em; margin:0 0 .5em; }
.card__price{ font-size:.84rem; letter-spacing:.05em; color:var(--ink); margin:0; }
.card.is-sold .card__fig img{ opacity:.5; }
.card.is-sold .card__price{ color:var(--ink-3); }

/* ---------- filtros ---------- */
.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:clamp(24px,3vw,40px); padding-bottom:20px; border-bottom:1px solid var(--line); }
.chip{
  font-family:var(--ff-ui); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.72em 1.25em; border:1px solid var(--line); background:transparent; color:var(--ink-2);
  cursor:pointer; transition:all .28s var(--ease);
}
.chip:hover{ border-color:var(--ink-3); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.filters__count{ margin-left:auto; font-size:.78rem; color:var(--ink-3); letter-spacing:.08em; }

/* ---------- banda oscura ---------- */
.dark{ background:var(--ink); color:var(--bone); }
.dark h1,.dark h2,.dark h3{ color:var(--bone); }
.dark p{ color:rgba(246,242,236,.76); }
.dark .overline{ color:var(--gold-2); }
.dark .caption{ color:rgba(246,242,236,.5); }
.dark .lede{ color:rgba(246,242,236,.8); }

/* ---------- cita ---------- */
.quote{ font-family:var(--ff-display); font-size:clamp(1.6rem,3.4vw,2.9rem); line-height:1.24; max-width:22ch; margin:0; }
.quote__by{ font-family:var(--ff-ui); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); margin-top:1.8em; display:block; }

/* ---------- mosaico ----------
   Casi todo el material de Beatriz es VERTICAL (0.45-0.75). Las celdas
   apaisadas que habia antes recortaban hasta el 72% de la altura y se comian
   las cabezas. Regla: la celda sigue la orientacion de la foto.
     .m      -> vertical (3/4), es el caso normal
     .m-wide -> apaisada (3/2), solo para fotos realmente horizontales
   Antes de meter una foto aqui, comprueba su orientacion. */
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1.2vw,16px); }
.mosaic figure{ margin:0; position:relative; overflow:hidden; background:var(--paper-2); aspect-ratio:3/4; }
.mosaic img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; transition:transform 1.1s var(--ease); }
.mosaic figure:hover img{ transform:scale(1.05); }
.mosaic .m-wide{ grid-column:span 2; aspect-ratio:3/2; }
.mosaic .m-wide img{ object-position:center center; }
@media (max-width:900px){
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .mosaic .m-wide{ grid-column:span 2; }
}

/* ---------- PDP ---------- */
.pdp{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(26px,4vw,72px); align-items:start; }
@media (max-width:920px){ .pdp{ grid-template-columns:1fr; } }
.pdp__gallery{ display:grid; gap:clamp(8px,1.2vw,14px); }
.pdp__gallery img,.pdp__gallery video{ width:100%; object-fit:cover; background:var(--paper-2); }
.pdp__info{ position:sticky; top:104px; }
@media (max-width:920px){ .pdp__info{ position:static; } }
.pdp__name{ font-size:clamp(2.1rem,3.8vw,3.1rem); margin-bottom:.16em; }
.pdp__price{ font-size:1.1rem; letter-spacing:.05em; margin:0 0 1.5em; }
.pdp__unique{
  border:1px solid var(--gold-2); background:rgba(198,168,124,.10);
  padding:15px 18px; margin-bottom:26px; display:flex; gap:12px; align-items:flex-start;
}
.pdp__unique p{ margin:0; font-size:.85rem; color:var(--ink-2); }
.pdp__unique strong{ color:var(--ink); font-weight:400; }
.spec{ width:100%; border-collapse:collapse; font-size:.86rem; margin-bottom:26px; }
.spec th,.spec td{ text-align:left; padding:11px 0; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.spec th{ font-weight:400; color:var(--ink-3); width:40%; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; }
details.acc{ border-bottom:1px solid var(--line); }
details.acc summary{
  cursor:pointer; padding:17px 0; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
details.acc summary::-webkit-details-marker{ display:none; }
details.acc summary::after{ content:"+"; font-size:1.1rem; color:var(--ink-3); }
details.acc[open] summary::after{ content:"\2013"; }
details.acc .acc__body{ padding-bottom:20px; font-size:.9rem; color:var(--ink-2); }
details.acc .acc__body p:last-child{ margin-bottom:0; }

/* ---------- formularios ---------- */
.form{ display:grid; gap:22px; }
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field label{ font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2); }
.field label .req{ color:var(--gold); }
.field input,.field textarea,.field select{
  max-width:100%; min-width:0;
  font-family:var(--ff-ui); font-weight:300; font-size:.98rem; color:var(--ink);
  padding:.92em 1em; border:1px solid var(--line); background:var(--paper); border-radius:0;
  transition:border-color .3s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--gold); outline:none; }
.field textarea{ resize:vertical; min-height:130px; }
.field__hint{ font-size:.78rem; color:var(--ink-3); }
.field--2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; min-width:0; }
@media (max-width:640px){ .field--2{ grid-template-columns:1fr; } }

/* ---------- consentimiento y vista previa con IA ---------- */
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--ink-2); line-height:1.45; cursor:pointer; }
.consent input{ margin-top:.25em; flex-shrink:0; }
.consent strong{ color:var(--ink); font-weight:500; }

.preview-box{
  border:1px solid var(--line); background:var(--paper-2);
  padding:16px 18px; margin-bottom:26px; display:grid; gap:12px;
}
/* --ink-3 solo se verificó contra --paper/--bone (ver nota en :root);
   sobre --paper-2 no alcanza 4.5:1 en texto pequeño — usar --ink-2 aquí. */
.preview-box .field__hint{ color:var(--ink-2); }
.preview-reforzado{
  border-left:3px solid var(--gold-dec); background:rgba(198,168,124,.12); padding:12px 14px;
}
.preview-result{ display:grid; gap:8px; }
.preview-result img{ display:block; width:100%; height:auto; border:1px solid var(--line); }
.preview-warning{ font-size:.78rem; color:var(--ink-3); margin:0; }
.preview-error{ font-size:.85rem; color:var(--ink); margin:0; }

.fieldset{ border:0; padding:0; margin:0; }
.fieldset legend{ font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2); padding:0; margin-bottom:12px; }

.pickers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(154px,1fr)); gap:10px; }
.picker{ position:relative; }
.picker input{ position:absolute; opacity:0; width:0; height:0; }
.picker span{
  display:block; border:1px solid var(--line); padding:1.05em 1em; text-align:center;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:all .28s var(--ease); color:var(--ink-2); line-height:1.35;
}
.picker input:checked + span{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.picker input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
.picker small{ display:block; text-transform:none; letter-spacing:0; font-size:.78rem; opacity:.72; margin-top:.4em; }

.form__note{ font-size:.78rem; color:var(--ink-3); }
.form__ok{ border:1px solid var(--gold-2); background:rgba(198,168,124,.12); padding:24px 26px; display:none; }
.form__ok[data-show="true"]{ display:block; }
.form__ok h3{ margin-bottom:.4em; }
.form__ok p{ margin:0; color:var(--ink-2); font-size:.92rem; }

/* ---------- newsletter ---------- */
.news{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center; }
@media (max-width:860px){ .news{ grid-template-columns:1fr; } }
.news__form{ display:flex; gap:10px; flex-wrap:wrap; }
.news__form input{
  flex:1 1 230px; font-family:var(--ff-ui); font-weight:300; font-size:.95rem; border-radius:0;
  padding:1.05em 1.1em; border:1px solid rgba(246,242,236,.32); background:transparent; color:var(--bone);
}
.news__form input::placeholder{ color:rgba(246,242,236,.5); }
.news__form input:focus{ border-color:var(--gold-2); outline:none; }

/* ---------- footer ---------- */
.ftr{ background:var(--bone); border-top:1px solid var(--line); padding-block:clamp(48px,6vw,84px) 28px; }
.ftr__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(24px,3vw,48px); margin-bottom:clamp(36px,5vw,64px); }
@media (max-width:900px){ .ftr__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ftr__grid{ grid-template-columns:1fr; } }
.ftr h2{ font-family:var(--ff-ui); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin:0 0 1.5em; font-weight:400; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.85em; }
.ftr ul a{ font-size:.88rem; color:var(--ink-2); transition:color .3s var(--ease); }
.ftr ul a:hover{ color:var(--gold); }
.ftr__mark{ font-family:var(--ff-display); font-size:1.5rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.5em; }
.ftr__bottom{
  border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-size:.76rem; color:var(--ink-3); align-items:center;
}
.ftr__bottom a{ text-decoration:underline; text-underline-offset:3px; }

.preview-flag{
  display:inline-flex; align-items:center; gap:.5em; border:1px dashed var(--gold-2);
  color:var(--gold); padding:.42em .9em; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
}

/* ---------- page head ---------- */
.phead{ padding-block:clamp(36px,5vw,76px) clamp(26px,3.5vw,48px); border-bottom:1px solid var(--line); }
.phead h1{ font-size:clamp(2.4rem,5.6vw,4.6rem); margin-bottom:.22em; }
.phead p{ color:var(--ink-2); max-width:64ch; margin:0; }
.crumbs{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.6em; }
.crumbs a:hover{ color:var(--gold); }

/* ---------- reveal ---------- */
/* Objetivo tactil minimo en movil (WCAG 2.5.8). Verificado con tools/audit.js. */
@media (max-width:820px){
  .chip{ min-height:44px; display:inline-flex; align-items:center; }
  .link-u{ min-height:44px; display:inline-flex; align-items:center; }
  details.acc summary{ min-height:48px; }
  .ftr ul{ gap:0; }
  .ftr ul a{ display:inline-block; padding-block:11px; }
  .hdr__logo{ padding-block:8px; }
  .mnav__close{ min-width:44px; min-height:44px; }
}

.rv{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; } }

/* ---------- contacto persistente ----------
   Discreto a proposito: la marca es de lujo accesible, no de boton chillon.
   Aparece solo cuando ya se dejo atras la entrada de marca. */
.flota{
  position:fixed; right:clamp(14px,2.2vw,28px); bottom:clamp(14px,2.2vw,28px); z-index:80;
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--ink); color:var(--bone);
  padding:.95em 1.35em; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  box-shadow:0 8px 30px rgba(23,20,15,.22);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), background .3s var(--ease);
}
.flota.is-in{ opacity:1; transform:none; pointer-events:auto; }
.flota:hover{ background:var(--gold); }
.flota svg{ width:17px; height:17px; flex:none; }
@media (max-width:520px){
  .flota{ padding:.9em 1.1em; font-size:.72rem; }
  .flota span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .flota svg{ width:21px; height:21px; }
}

.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
  padding:12px 20px; z-index:200; font-size:.8rem;
}
.skip:focus{ left:8px; top:8px; }

.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }