/* ═══════════════════════════════════════════════════════════
   CORALINE HOUSE
   Cartel de turismo español, 1960-70. Campos planos de color,
   tipografía que vende el sol, sin sombras ni tarjetas.
   ═══════════════════════════════════════════════════════════ */

/* Archivo, self-hosted (latin subset, variable 400-900 + italic).
   font-display:block on the display face so huge headlines never paint in a
   fallback at the wrong metrics, then reflow. SIL Open Font License 1.1. */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 900;
  font-display:block;
  src:url("assets/font/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:italic;
  font-weight:400 700;
  font-display:block;
  src:url("assets/font/archivo-latin-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Tinta litográfica: cuatro planchas, nada más */
  --red:    #b8281d;
  --red-lt: #f2523f;  /* el rojo sobre fondo oscuro: el de marca se apaga */
  --red-dk: #8e1a12;
  --ochre:  #e9a23b;   /* display sizes + on light grounds only */
  --ochre-lt: #fbd9a0; /* small text on red / sea: >=4.4:1 */
  --sea:    #1a6076;
  --cream:  #f4ece0;
  --paper:  #fbf6ee;
  --ink:    #241a16;
  --ink-2:  #6a5850;

  --rule: 1px solid var(--ink);

  --gut: clamp(1.15rem, 4vw, 3rem);
  --max: 1400px;

  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2,.7,.3,1);

  /* Trama de semitono sobre los campos rojos */
  --dots: radial-gradient(circle at 1px 1px, rgba(0,0,0,.30) 1.15px, transparent 1.3px);
}

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

/* Superficies del navegador: selección, cursor y foco en la paleta.
   Lo que no dibujamos también lleva el diseño. */
::selection{ background:var(--red); color:var(--cream); }
::-moz-selection{ background:var(--red); color:var(--cream); }
:root{ caret-color:var(--red); accent-color:var(--red); }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:4.5rem;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f);
  font-size:clamp(1rem,.95rem + .25vw,1.09rem);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; width:100%; height:auto; }
a{ color:inherit; }
h1,h2{ margin:0; font-weight:900; letter-spacing:-.035em; line-height:.92; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
dl,dd{ margin:0; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

:focus-visible{ outline:3px solid var(--sea); outline-offset:2px; }
.poster__field :focus-visible,
.beach__field :focus-visible,
.book :focus-visible{ outline-color:var(--cream); }
/* the cream-faced button sits on the red field: ring it in ink, not cream */
.wa:focus-visible{ outline-color:var(--ink); }
.foot :focus-visible{ outline-color:var(--ochre); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream);
  padding:.75rem 1.2rem; font-weight:700;
}
.skip:focus{ left:0; }

/* ── barra superior ─────────────────────────────────────── */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.55rem var(--gut);
  background:var(--paper);
  border-bottom:var(--rule);
}

.bar__brand{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none;
  font-weight:800; font-size:.95rem; letter-spacing:-.01em;
}
.bar__brand img{ width:auto; height:1.9rem; }

.bar__nav{ display:flex; gap:clamp(1rem,2.4vw,2.2rem); }
.bar__nav a{
  text-decoration:none;
  font-size:.86rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.bar__nav a:hover{ border-bottom-color:var(--red); color:var(--red); }

/* visually hidden but focusable: the checkbox is the real control */
.bar__check{
  position:absolute;
  width:1px; height:1px;
  margin:0; padding:0; border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}
/* ring the visible burger when the hidden checkbox takes focus */
.bar__check:focus-visible + .bar__burger{
  outline:3px solid var(--red);
  outline-offset:3px;
}
.bar__burger{ display:none; }

@media (max-width:800px){
  .bar{ flex-wrap:wrap; }
  .bar__burger{
    display:inline-flex; align-items:center; gap:.5rem;
    cursor:pointer; user-select:none;
    -webkit-tap-highlight-color:transparent;
    min-height:44px;
    font-size:.78rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.1em;
    padding:.4rem .2rem;
  }
  .bar__burger span{
    position:relative; display:block; width:1.15rem; height:2px;
    background:var(--ink);
  }
  .bar__burger span::before,
  .bar__burger span::after{
    content:""; position:absolute; left:0; width:100%; height:2px;
    background:var(--ink);
    transition:transform .25s var(--ease);
  }
  .bar__burger span::before{ top:-6px; }
  .bar__burger span::after{ top:6px; }
  .bar__check:checked + .bar__burger span{ background:transparent; }
  .bar__check:checked + .bar__burger span::before{ transform:translateY(6px) rotate(45deg); }
  .bar__check:checked + .bar__burger span::after{ transform:translateY(-6px) rotate(-45deg); }

  .bar__nav{
    flex-basis:100%;
    display:grid;
    grid-template-rows:0fr;
    grid-auto-rows:0fr;
    margin:0; padding:0; gap:0;
    min-height:0; height:0;
    overflow:hidden;
    visibility:hidden;
    transition:grid-template-rows .35s var(--ease),
               grid-auto-rows .35s var(--ease),
               height .35s var(--ease),
               visibility .35s var(--ease);
  }
  .bar__check:checked ~ .bar__nav{
    grid-template-rows:1fr;
    grid-auto-rows:1fr;
    height:auto;
    visibility:visible;
  }
  .bar__nav a{
    min-height:0;
    overflow:hidden;
    padding:.85rem 0;
    border-bottom:var(--rule);
    font-size:.95rem;
  }
  .bar__nav a:hover{ color:var(--red); }
}

/* ── el cartel ──────────────────────────────────────────── */
/* Una sola imagen a sangre; el tipo se sobreimprime en un bloque rojo,
   como la tinta de una plancha sobre la foto. Sin degradados. */
.poster{
  position:relative;
  isolation:isolate;
  border-bottom:var(--rule);
  container-type:inline-size;
  display:grid;
  /* la foto y el bloque comparten celda: el bloque sobreimprime la imagen y
     la celda crece si el bloque necesita más alto, así nada se recorta */
  grid-template-areas:"art" "data";
}
.poster > .poster__plate,
.poster > .poster__field{ grid-area:art; }

.poster__plate{
  margin:0;
  overflow:hidden;
  background:var(--ink);
  position:relative;
}

/* Marca de agua: el coral en el centro del vídeo, muy tenue. Decorativa;
   se apaga si el visitante pide menos movimiento o menos contraste. */
.poster__mark{
  position:absolute;
  top:38%; left:50%;
  translate:-50% -50%;
  width:clamp(10rem,22vw,19rem);
  height:auto;
  z-index:1;
  opacity:.4;
  pointer-events:none;
  /* el logo es coral sobre transparente: se pasa a crema para que funcione
     como filigrana sobre el metraje, sin competir con el titular. */
  filter:brightness(0) invert(1) drop-shadow(0 1px 16px rgba(20,12,9,.55));
}
@media (prefers-contrast:more){
  .poster__mark{ display:none; }
}
@media (max-width:860px){
  /* el texto ocupa casi toda la portada: la filigrana se retira al cielo */
  .poster__mark{
    top:19%;
    width:clamp(7rem,30vw,11rem);
    opacity:.34;
  }
}
.poster__video{
  display:block;
  width:100%;
  /* alto completo de la ventana: la barra es sticky y va por encima, así que
     restarle su alto dejaba una franja de papel al pie. */
  height:100svh;
  min-height:clamp(28rem,60svh,40rem);
  /* el atributo poster ya pinta el fotograma: un fondo CSS aquí sería una
     segunda descarga de la misma imagen. */
  object-fit:cover;
  background:var(--ink);
}

/* el bloque de tinta: se apoya abajo a la izquierda, sangra por el borde */
.poster__field{
  z-index:1;
  /* Overlay completo: la tinta cubre todo el encuadre, como una plancha
     impresa sobre la foto. Más transparente que el bloque en esquina, para
     que la ciudad siga leyéndose debajo. */
  align-self:stretch;
  justify-self:stretch;
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);
  align-content:end;
  align-items:end;
  column-gap:clamp(1.8rem,4vw,3.6rem);
  padding:clamp(2rem,5vw,4rem) var(--gut) clamp(1.8rem,4vw,3.2rem);
  /* Sólo un velo oscuro al pie: el color de la imagen queda intacto y la
     hora dorada se ve como es. Sin tinta roja, que ya vuelve tres veces
     más abajo en la página. */
  background:linear-gradient(to top,
    rgba(20,12,9,.88) 0%,
    rgba(20,12,9,.72) 32%,
    rgba(20,12,9,.34) 62%,
    rgba(20,12,9,0)   100%);
  color:var(--cream);
}
/* sin color-mix: rojo sólido, nunca texto sobre foto desnuda */
.poster__type{
  /* el peso 900 cuelga bajo su caja: se sube para casar el pie óptico */
  margin-bottom:-.12em;
  display:flex; flex-direction:column;
  font-size:clamp(2.6rem, 1.1rem + 7.2vw, 6.6rem);
  line-height:.82;
  letter-spacing:-.045em;
  text-transform:uppercase;
  margin:0;
}
.poster__type span{
  display:block;
  white-space:nowrap;
  /* Medido: Archivo 900 en caja alta ocupa ~0.733em por carácter en su línea
     más ancha, así que N caracteres necesitan N/1.34 em para caber. */
  font-size:min(
    clamp(2.3rem, 1rem + 5.4vw, 5rem),
    calc(100cqi / (var(--ch) / 2.55))
  );
}
@supports not (width:1cqi){
  .poster__type span{ font-size:clamp(2rem,1rem + 5.6vw,6.6rem); }
}
.poster__type .is-sea{
  color:var(--red-lt);
  font-style:italic;
  letter-spacing:-.03em;
}

.poster__act{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(.8rem,1.8vw,1.1rem);
  padding-bottom:.4rem;
}
.poster__sub{
  max-width:38ch;
  padding-bottom:.4rem;
  font-size:clamp(.98rem,.94rem + .3vw,1.12rem);
  line-height:1.5;
  color:#f8ede0;
  margin:0;
}

/* Botón: bloque macizo, sin radio, con desplazamiento al pulsar */
.wa{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.65rem;
  background:var(--cream); color:var(--ink);
  padding:.95rem 1.6rem;
  text-decoration:none;
  font-size:.95rem; font-weight:800;
  letter-spacing:-.01em;
  border:2px solid var(--ink);
  transition:transform .18s var(--ease), background-color .18s var(--ease);
}
.wa svg{ width:1.2em; height:1.2em; fill:currentColor; flex:none; }
.wa:hover{ background:var(--ochre); transform:translate(-2px,-2px); }
.wa:active{ transform:translate(0,0); }
.wa--dark{ background:var(--ochre); }
.wa--dark:hover{ background:var(--cream); }

.poster__where{
  margin:0;
  max-width:26ch;
  font-size:clamp(.82rem,.8rem + .14vw,.94rem);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.5;
  color:var(--ochre-lt);
}

/* Franja de datos: la ficha del cartel */
.strip{
  grid-area:data;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.6fr repeat(4,1fr);
  background:var(--ink);
  color:var(--cream);
  border-top:var(--rule);
}
.strip > div{
  padding:.95rem var(--gut);
  border-right:1px solid rgba(244,236,224,.22);
}
.strip > div:last-child{ border-right:0; }
.strip dt{
  font-size:clamp(.75rem,.72rem + .1vw,.8rem); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  color:#c9b9ae;
  margin-bottom:.15rem;
}
.strip dd{
  font-size:clamp(1.1rem,1rem + .5vw,1.45rem);
  font-weight:900; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums;
}
.strip--where dd{
  font-size:clamp(.92rem,.88rem + .22vw,1.06rem);
  line-height:1.2;
  letter-spacing:-.01em;
}

/* Entre 1100 y 861 no caben tres columnas: el titular y el botón tienen ancho
   propio y aplastaban la central hasta 47px. La acción baja bajo el texto. */
@media (max-width:1100px) and (min-width:861px){
  .poster__field{
    grid-template-columns:minmax(0,auto) minmax(0,1fr);
    row-gap:clamp(1rem,2.2vw,1.5rem);
  }
  .poster__sub{ grid-column:2; }
  .poster__act{ grid-column:2; }
}


@media (max-width:860px){
  .poster__video{ height:100svh; }
  /* El overlay también en móvil: la tinta cubre el vídeo, no se aparta a
     una fila propia. El degradado se inclina más abajo porque la banda es
     más corta y el texto ocupa más proporción de ella. */
  .poster__field{
    grid-template-columns:1fr;
    align-items:start;
    row-gap:clamp(1.1rem,3.5vw,1.6rem);
    padding-top:clamp(3rem,14vw,5rem);
    background:linear-gradient(to top,
      rgba(20,12,9,.92) 0%,
      rgba(20,12,9,.80) 44%,
      rgba(20,12,9,.42) 76%,
      rgba(20,12,9,0)   100%);
  }
  .strip{ grid-template-columns:repeat(2,1fr); }
  .strip--where{ grid-column:1 / -1; }
  .strip > div{ border-bottom:1px solid rgba(244,236,224,.22); }
  .strip > div:nth-child(2n+1){ border-right:0; }
}

/* ── la casa ────────────────────────────────────────────── */
.casa{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.4rem,5vw,3.6rem);
  align-items:start;
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(3.5rem,8vw,7rem) var(--gut);
}
.casa__lede{ max-width:62ch; }
.casa__lede h2{
  font-size:clamp(1.85rem,1.2rem + 2.5vw,3.4rem);
  margin-bottom:clamp(1.1rem,2.5vw,1.6rem);
  max-width:16ch;
  text-wrap:balance;
}
.casa__lede p{
  max-width:68ch;
  color:var(--ink-2);
  font-size:clamp(1rem,.96rem + .28vw,1.13rem);
}

/* Lista de servicios: reglas horizontales, no iconos en tarjetas */
.kit{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.8rem,3.4vw,2.8rem) clamp(1.4rem,3vw,2.4rem);
  border-top:2px solid var(--ink);
  padding-top:clamp(1.8rem,3.6vw,2.6rem);
}
.kit li{ display:grid; gap:.1rem; }
.kit__icon{
  width:1.85rem; height:1.85rem;
  margin-bottom:.7rem;
  fill:none;
  stroke:var(--red);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.kit h3{
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 .15rem;
}
.kit p{
  margin:0;
  font-size:.92rem;
  line-height:1.45;
  color:var(--ink-2);
}

/* 7 elementos: 4 columnas reparten 4+3 y 2 reparten 4x2−1; 3 y 5 dejan
   una fila huérfana, así que no se usan. */
@media (max-width:900px){
  .kit{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:420px){
  .kit{ grid-template-columns:1fr; }
}

/* ── estancias ──────────────────────────────────────────── */
/* Bandas a todo el ancho, como "Las Canteras al final de la calle":
   foto a un lado, campo de color al otro, alternando tono y lado.
   Cada estancia ocupa su propia pantalla en vez de ser una miniatura. */
.rooms{ background:var(--cream); }
.room{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border-top:var(--rule);
}
.room__plate{ margin:0; overflow:hidden; border-right:var(--rule); }
.room__plate img{
  width:100%;
  height:100%;
  min-height:clamp(17rem,44vh,31rem);
  object-fit:cover;
}
.room__field{
  padding:clamp(2.2rem,5vw,4rem) clamp(1.15rem,4vw,3.5rem);
  display:flex; flex-direction:column; justify-content:center;
  /* la columna de texto se centra en el campo en vez de pegarse al borde */
  align-items:center;
  text-align:center;
}
.room__field > *{ width:100%; max-width:34ch; }
.room__field h3{
  font-family:var(--f);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1;
  font-size:clamp(1.7rem,1.1rem + 2.4vw,3.2rem);
  text-transform:uppercase;
  margin:0 0 clamp(.8rem,2vw,1.3rem);
}
.room__field p{
  font-size:clamp(1rem,.96rem + .28vw,1.12rem);
  line-height:1.55;
  margin:0;
}
.room__note{
  margin-top:1rem !important;
  font-weight:800;
}

/* tinta: campo rojo, tipo crema. La trama va en la tinta, no en el papel. */
.room--ink .room__field{
  background-color:var(--red);
  background-image:var(--dots);
  background-size:6px 6px;
  color:var(--cream);
}
.room--ink .room__field p{ color:#f8ede0; }
.room--ink .room__note{ color:var(--ochre-lt) !important; }

/* papel: campo crema, tipo tinta */
.room--paper .room__field{ background-color:var(--paper); color:var(--ink); }
.room--paper .room__field h3{ color:var(--red); }
.room--paper .room__field p{ color:var(--ink-2); }
.room--paper .room__note{ color:var(--ink) !important; }

/* alterna el lado: la foto pasa a la derecha */
.room--flip .room__plate{ order:2; border-right:0; border-left:var(--rule); }

@media (max-width:860px){
  .room{ grid-template-columns:1fr; }
  .room__plate,
  .room--flip .room__plate{
    order:0;
    border-right:0; border-left:0;
    border-bottom:var(--rule);
  }
  .room__plate img{ min-height:clamp(13rem,34vh,20rem); }
}

/* ── la playa ───────────────────────────────────────────── */
.beach{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--sea);
  border-bottom:var(--rule);
}
.beach__plate{ margin:0; overflow:hidden; border-right:var(--rule); }
.beach__plate img{
  height:100%;
  min-height:clamp(18rem,46vh,34rem);
  object-fit:cover;
}
.beach__field{
  padding:clamp(2.4rem,5.5vw,4.5rem) var(--gut);
  display:flex; flex-direction:column; justify-content:center;
  color:var(--cream);
  background-image:var(--dots);
  background-size:6px 6px;
}
.beach__field h2{
  font-size:clamp(2rem,1.1rem + 3.6vw,4.2rem);
  text-transform:uppercase;
  margin-bottom:clamp(1rem,2.4vw,1.6rem);
}
.beach__field p{
  max-width:42ch;
  color:#e2eef2;
  font-size:clamp(1rem,.96rem + .28vw,1.12rem);
}
.beach__note{
  font-weight:800;
  color:var(--ochre-lt) !important;
  margin:0;
}

@media (max-width:860px){
  .beach{ grid-template-columns:1fr; }
  .beach__plate{ border-right:0; border-bottom:var(--rule); }
  .beach__plate img{ min-height:clamp(13rem,34vh,20rem); }
}

/* ── reserva ────────────────────────────────────────────── */
.book{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(3.5rem,8vw,7rem) var(--gut);
}
.book__title{
  font-size:clamp(2.6rem,1.2rem + 6vw,6.2rem);
  text-transform:uppercase;
  color:var(--red);
}
.book__lede{
  max-width:44ch;
  color:var(--ink-2);
  font-size:clamp(1rem,.96rem + .28vw,1.13rem);
  margin-bottom:1.8rem;
}

.book__acts{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem 1.4rem;
  margin-bottom:2.4rem;
}
.mail{
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.22em;
  text-decoration-color:var(--red);
  transition:color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.mail:hover{ color:var(--red); text-decoration-color:currentColor; }

.terms{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:2px solid var(--ink);
}
.terms > div{
  padding:.85rem 0;
  border-bottom:var(--rule);
}
.terms > div:nth-child(odd){ padding-right:1rem; }
.terms dt{
  font-size:clamp(.75rem,.72rem + .1vw,.8rem); font-weight:700;
  text-transform:uppercase; letter-spacing:.13em;
  color:var(--ink-2);
  margin-bottom:.1rem;
}
.terms dd{
  font-weight:800; font-size:1.02rem;
  font-variant-numeric:tabular-nums lining-nums;
}

@media (max-width:860px){
  .book{ grid-template-columns:1fr; gap:1.8rem; }
}

/* ── pie ────────────────────────────────────────────────── */
.foot{
  background:var(--ink);
  color:var(--cream);
  padding:clamp(2.5rem,5vw,4rem) var(--gut);
  display:grid;
  gap:.4rem;
}
.foot__mark{
  font-size:clamp(1.6rem,1.1rem + 2.2vw,3rem);
  font-weight:900;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
}
.foot__where{
  margin:0 0 1.4rem;
  color:#b6a79e;
  font-size:.92rem;
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.foot__nav a{
  text-decoration:none;
  font-size:.9rem; font-weight:600;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s var(--ease);
}
.foot__nav a:hover{ border-bottom-color:var(--ochre); }