/* ══════════════════════════════════════════════════════
   calenton® — calenton.es
   El cartel, impreso: campo rojo, tinta negra, reverso negro.
   Una sola tipografía (Anton) y el logotipo vectorizado.
   ══════════════════════════════════════════════════════ */

:root{
  --rojo:#DE0D10;
  --tinta:#0A0A0A;
  --noche:#070606;
  --cal:#F2EFEC;

  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --util:"Oswald","Arial Narrow",sans-serif;

  --gut:clamp(14px,3vw,40px);

  --estrella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 155 100'%3E%3Cpath d='M77.5 6L87.8 37.8L121.3 37.8L94.2 57.4L104.5 89.2L77.5 69.6L50.5 89.2L60.8 57.4L33.8 37.8L67.2 37.8Z'/%3E%3C/svg%3E");
  --alto-estrella:clamp(22px,3.4vw,46px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--rojo);
  color:var(--tinta);
  font-family:var(--util);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--tinta);color:var(--rojo)}
:focus-visible{outline:3px solid currentColor;outline-offset:6px}

/* Grano de impresión sobre todo el pliego */
.grano{
  position:fixed;inset:0;z-index:9;pointer-events:none;
  opacity:.3;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ── Las dos caras del pliego ─────────────────────────── */
.cara{
  position:relative;
  display:flex;flex-direction:column;
  min-height:100svh;
  padding:var(--gut);
}
.cara-b{background:var(--noche);color:var(--rojo)}

/* ── Logotipo vectorizado del original: hereda el color de la cara ── */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.marca{
  display:block;flex:none;height:auto;
  fill:currentColor;
}
.marca--rail{width:clamp(104px,17vw,208px)}
.marca--grande{width:min(92%,560px)}

/* ── Cabecera ─────────────────────────────────────────── */
.cabecera{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(12px,4vw,48px);
  margin-bottom:clamp(14px,2.4vw,26px);
}
.lema{
  margin:0;text-align:right;text-transform:uppercase;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.35rem,min(4.4vw,6.6svh),4.1rem);
  line-height:.9;letter-spacing:.005em;
}
.lema em{font-style:normal;text-transform:lowercase}
.lema sup{font-size:.44em;vertical-align:super}

/* ── Bandas de foto: absorben el alto sobrante ────────── */
.banda{
  margin:0;overflow:hidden;background:var(--tinta);
  flex:1 1 0;
  min-height:clamp(170px,20svh,24vw);
  max-height:clamp(220px,33svh,34vw);
}
.banda img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.cara-b .banda img{object-position:50% 40%}

/* ── Titular monumental, justificado al ancho exacto ──── */
.titular{margin:clamp(10px,1.6vw,20px) 0 0}
.titular svg{display:block;width:100%;height:clamp(84px,24svh,33vw)}
.ig svg{display:block;width:100%;height:clamp(64px,20svh,24vw)}
.titular text,.ig text{font-family:var(--display);fill:currentColor}
.titular text{font-size:428px}   /* 13 signos, caja 0.32 del ancho */
.ig text{font-size:341px}        /* 14 signos, misma compresión */

/* ── Pie del cartel: datos y estrellas ────────────────── */
.fondo{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(16px,4vw,64px);row-gap:clamp(10px,1.6vw,18px);
  align-items:start;
  margin:auto 0 0;
}
.fondo .estrellas{grid-column:1;grid-row:2}
.dato{display:flex;align-items:flex-start;gap:.45em;margin:0}
.dato dt{
  font-family:var(--util);font-weight:500;
  font-size:clamp(.95rem,min(1.5vw,2.4svh),1.35rem);
  line-height:1.05;letter-spacing:.01em;white-space:nowrap;padding-top:.16em;
}
.dato dd{
  margin:0;text-transform:uppercase;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,min(3.4vw,4.6svh),3.2rem);
  line-height:.9;letter-spacing:.002em;
}

/* ── Hilera de estrellas ──────────────────────────────── */
.estrellas{
  margin:0;height:var(--alto-estrella);
  background-color:currentColor;
  -webkit-mask:var(--estrella) repeat-x left center/auto 100%;
  mask:var(--estrella) repeat-x left center/auto 100%;
}

/* ── Cara B ───────────────────────────────────────────── */
.marca--grande{margin:clamp(22px,4vw,50px) 0 clamp(12px,1.8vw,18px)}
.estrellas--b{margin-bottom:clamp(14px,2.6vw,26px)}
.ig{display:block;transition:opacity .25s}
.ig:hover{opacity:.72}
.pie{
  display:flex;justify-content:space-between;gap:16px;
  margin-top:auto;padding-top:clamp(18px,2.6vw,30px);
  color:var(--cal);
  font-family:var(--util);font-weight:500;
  font-size:clamp(.78rem,1.1vw,.95rem);
  letter-spacing:.16em;text-transform:uppercase;
}
.pie p{margin:0}

/* ── Movimiento ───────────────────────────────────────── */
.carga,.revela{
  opacity:0;transform:translateY(14px);
  transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.18,.85,.25,1) var(--d,0s);
}
.carga.va,.revela.va{opacity:1;transform:none}
.banda.carga,.banda.revela{
  opacity:1;transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s cubic-bezier(.2,.8,.2,1) var(--d,0s);
}
.banda.carga.va,.banda.revela.va{clip-path:inset(0 0 0 0)}

/* ── Móvil y tableta ──────────────────────────────────── */
@media (max-width:760px){
  .cabecera{align-items:center;gap:12px}
  .lema{font-size:clamp(1.15rem,5.4vw,1.9rem)}
  .banda{max-height:46svh}
  .titular svg{height:clamp(96px,27svh,42vw)}
  .ig svg{height:clamp(72px,20svh,30vw)}
  .fondo{grid-template-columns:1fr;row-gap:clamp(12px,3vw,20px)}
  .fondo .estrellas{grid-column:1;grid-row:3}
  .marca--grande{width:min(100%,420px)}
}
@media (max-width:420px){
  .dato dd{font-size:clamp(1.4rem,7.4vw,2rem)}
  .dato dt{font-size:.95rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;transition-duration:.001ms!important;
  }
  .carga,.revela{opacity:1;transform:none}
  .banda.carga,.banda.revela{clip-path:none}
}