/* Alhambra Labs, the chosen direction: A «Diez días» with pieces of B and C (Alex, 2026-09-24).
   This file: base, header and hero on estuco, the calendar row with the day-10 tag, the thin
   Alhambra line that closes the first screen, the fixed bar. Sections are in secciones.css. */
@font-face { font-family: "Sora"; src: url("/fonts/Sora.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/InstrumentSans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/InstrumentSans-Italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --rojo: #A8192A;
  --almagra: #6E1220;
  --tinta: #1E1819;
  --estuco: #F4EFE8;
  --blanco: #FFFFFF;
  --sillar: #D6CCC1;
  --display: "Sora", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --measure: 66ch;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(36px, 4.5vw, 64px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* entering, exiting, the disclosures */
  /* The two display sizes of the page: the poster numeral and the day marks / h1. */
  --d1: 54vw;
  --d2: clamp(2.5rem, 4.4vw, 4rem);
}
@media (min-width: 720px) { :root { --d1: clamp(13rem, 40vw, 36rem); } }

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--estuco);
  color: var(--tinta);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 720px) { body { font-size: 1.0625rem; } }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--tinta); text-underline-position: from-font; text-decoration-thickness: from-font; }
a:hover { color: var(--rojo); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: var(--d2); letter-spacing: -0.025em; line-height: 1; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
h3 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; }
p, li { text-wrap: pretty; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; }
.measure { max-width: var(--measure); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Actions: square corners, like the cells of the calendar. Rojo on estuco, white on rojo/almagra. */
.btn {
  display: inline-block; padding: 0.9em 1.4em;
  font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; color: var(--blanco); background: var(--rojo);
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}
.btn:hover { color: var(--blanco); background: var(--almagra); }
.btn:active { transform: translateY(1px); }
/* .btn.btn-claro outranks the «every link is white» rule of the almagra band */
.btn.btn-claro, .btn.btn-claro:hover { color: var(--rojo); }
.btn.btn-claro { background: var(--blanco); }
.btn.btn-claro:hover { background: var(--estuco); }
.btn-quiet { font-family: var(--display); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }

/* Header and hero on estuco, as A had them: rojo is spent on the numeral, the days and the action. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.top .logo img { display: block; height: 44px; width: auto; }
.top .phone { font-family: var(--display); font-weight: 600; text-decoration: none; }

/* Hero: the numeral is the poster; h1 and lead are its caption; the row of days sits under both */
.hero { display: grid; gap: 20px 56px; padding: clamp(16px, 3vw, 40px) 0 clamp(20px, 3vw, 36px); }
.poster { margin: 0; display: flex; align-items: baseline; font-family: var(--display); font-weight: 700; color: var(--rojo); line-height: 0.74; }
.poster-n { font-size: var(--d1); letter-spacing: -0.05em; display: inline-block; width: 1.18em; margin-left: -0.05em; }
.poster-d { font-size: clamp(1.5rem, 2.8vw, 2.75rem); font-weight: 600; color: var(--tinta); letter-spacing: -0.01em; margin-left: 0.2em; }
.hero-text .lead { font-size: clamp(1.125rem, 1.8vw, 1.3125rem); max-width: 36ch; margin: 0 0 12px; }
.hero-text .precio-hero { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); margin: 0 0 20px; }
.hero-text strong { font-weight: 600; }
.cta-hint { margin: 10px 0 0; }
.plazo-hero { margin: 14px 0 0; max-width: 46ch; }
.hero .cond { max-width: 72ch; margin: 0; }
.hero .cond strong { font-weight: 600; }
.hero-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0; }
.hero-links a { font-family: var(--display); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: auto 1fr; grid-template-areas: "poster text" "cal cal" "cond cond"; align-items: end; }
  .hero .cond { grid-area: cond; }
  .poster { grid-area: poster; }
  .hero-text { grid-area: text; padding-bottom: 0.5rem; }
  .cal { grid-area: cal; margin-top: 16px; }
}

/* The calendar row: ten days in sillar hairlines; day 10 is a rojo cell with a rojo tag hanging from it */
.cal { display: grid; grid-template-columns: repeat(10, 1fr); row-gap: 12px; }
.cal-days { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--sillar); border-left: 1px solid var(--sillar); }
.cal-days { grid-column: 1 / -1; grid-template-columns: subgrid; }
.cal-days li {
  position: relative; isolation: isolate; min-height: 3.25rem; padding: 8px 6px 6px;
  border-right: 1px solid var(--sillar); border-bottom: 1px solid var(--sillar);
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
}
.cal-n { font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1; color: var(--rojo); }
.cal-l { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.2; }
/* Day marker: a rojo bar on top of each day that has passed; day 10 is a full rojo cell. */
.cal-days li::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 5px; background: var(--rojo); transition: opacity 200ms ease-out; }
.cal-days .cal-fin::after { content: ""; position: absolute; inset: 0 -1px -1px 0; z-index: -1; background: var(--rojo); transition: opacity 200ms ease-out; }
.cal-days .cal-fin .cal-n { color: var(--blanco); }
/* Counting state, set by script.js only: days not yet reached are blank, the tag not yet hung. */
.cal.cuenta li:not(.on)::before, .cal.cuenta li:not(.on)::after { opacity: 0; }
.cal.cuenta .cal-days li.cal-fin:not(.on) .cal-n { color: var(--rojo); }
.cal-a { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; color: inherit; text-decoration: none; }
.cal-a:hover .cal-l, .cal-ev a:hover, .cal-ley a:hover { text-decoration: underline; }
.cal-ev a, .cal-ley a { color: inherit; text-decoration: none; }
.cal-ev { grid-column: 1 / 4; grid-row: 2; align-self: start; margin: 0; padding-top: 8px; border-top: 2px solid var(--tinta); font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.3; }
/* Below 1200px the labels move to a legend under days 1–5. Each row carries a bar as long as the
   days it names, on the calendar's own columns (subgrid): one day for «1», three for «1–3». */
.cal-ley { grid-column: 1 / 6; grid-row: 2; list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: subgrid; row-gap: 12px; align-content: start; font-size: 1rem; }
.cal-ley li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 6px; }
.cal-ley li::before { content: ""; grid-column: 1 / 2; border-top: 3px solid var(--tinta); }
.cal-ley .ley-13::before { grid-column: 1 / 4; }
.cal-ley a { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; padding-right: 16px; line-height: 1.35; }
.cal-ley b { font-family: var(--display); font-weight: 700; color: var(--rojo); min-width: 2.2em; flex: none; }
.cal-days .cal-l, .cal-ev { display: none; }

/* The tag (from B): rojo, cut corners, an eyelet and a strapwork chain, hanging from day 10 */
.cal-tag {
  grid-row: 2; grid-column: 6 / -1; justify-self: end; align-self: start; width: 100%;
  margin-top: -12px; position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 12px 14px 38px; background: var(--rojo); text-decoration: none;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  transition: clip-path 300ms var(--ease-out);
}
.cal-tag, .cal-tag:hover { color: var(--blanco); }
.cal-tag:hover .tag-t { text-decoration: underline; }
/* the eyelet shows the estuco ground through the tag, with an almagra ring */
.cal-tag::before { content: ""; position: absolute; left: 12px; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--estuco); border: 3px solid var(--almagra); }
.cadena { display: block; width: 24px; background: currentColor; -webkit-mask: url("cadena.svg") top center / 24px 24px repeat-y; mask: url("cadena.svg") top center / 24px 24px repeat-y; }
.cal-tag .cadena { position: absolute; left: 7px; top: 32px; bottom: 10px; opacity: 0.6; }
.tag-k { font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.tag-t { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.25; }
/* While the days count, the tag is only a 2 px line under day 10 (the top 12 px sit behind the
   cell); once day 10 is reached it unrolls downwards. The same six points as the tag's shape, so
   the clip interpolates: nothing is squashed, the text is uncovered, not stretched. */
.cal.cuenta .cal-tag { clip-path: polygon(16px 12px, 100% 12px, 100% 14px, 16px 14px, 16px 14px, 16px 12px); }
.cal-tag:focus-visible { outline-color: var(--tinta); outline-offset: 2px; }
@media (min-width: 720px) {
  .cal-days li { min-height: clamp(4rem, 6vw, 5.75rem); padding: 12px 12px 10px; }
  .cal-n { font-size: clamp(1.125rem, 1.6vw, 1.5rem); }
  .cal-tag { grid-column: 8 / -1; padding: 14px 16px 16px 44px; }
  .cal-tag::before { left: 14px; top: 16px; }
  .cal-tag .cadena { left: 9px; top: 38px; }
  .tag-t { font-size: 1.125rem; }
}
/* Wide screens: labels inside the cells and the note under days 1–3; no legend. */
@media (min-width: 1200px) {
  .cal-ley { display: none; }
  .cal-days .cal-l, .cal-ev { display: block; }
  .cal-tag { grid-column: 9 / -1; }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .cal-days li { transition: transform 160ms ease-out; }
  .cal-days li:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .cal-days li, .cal-days li::before, .cal-days .cal-fin::after, .cal-tag { transition: none; }
}

/* The Alhambra as one thin rojo line, once, as the separator between the first screen and Día 0.
   A hairline at every width (non-scaling stroke). Phones crop it to the Alcazaba (x 1000–1870 of
   the drawing), the stretch with the most towers. */
.horizonte { padding-bottom: clamp(8px, 1.5vw, 20px); }
.silueta { display: block; width: 100%; height: auto; }
@media (max-width: 719px) { .silueta { height: 88px; object-fit: cover; object-position: 88.6% 100%; } }

/* Fixed call and WhatsApp bar on phones */
.barra { position: fixed; inset: auto 0 0 0; display: grid; grid-template-columns: minmax(96px, 30%) 1fr; border-top: 1px solid var(--sillar); background: var(--estuco); padding-bottom: env(safe-area-inset-bottom); z-index: 10; }
/* Keep the end of the page and focused elements clear of the fixed bar. */
@media (max-width: 719px) {
  body.con-barra { padding-bottom: calc(53px + env(safe-area-inset-bottom)); }
  html:has(body.con-barra) { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
.barra a { display: block; text-align: center; padding: 14px 8px; background: var(--estuco); color: var(--tinta); font-family: var(--display); font-weight: 600; text-decoration: none; }
.barra a.wa { background: var(--rojo); color: var(--blanco); }
/* script.js hides the bar while the hero's WhatsApp button is on screen; no JS or reduced motion: always visible. */
.barra { transition: transform 200ms ease-out, opacity 200ms ease-out; }
.barra.oculta { transform: translateY(100%); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .barra { transition: none; } }
@media (min-width: 720px) { .barra { display: none; } }