/* pp-portada.v28.css — Portada (Home) — Centro fuerte (A) — ALT “pura”
   =============================================================================
   Estrategia:
   - El stage NO lleva padding (para que height:100% no se infle).
   - El “aire” vive dentro del contenedor tipográfico (.pp-portada__type).
   - Layout raíz (#page) gobierna el alto del viewport.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Tokens mínimos (solo portada)
----------------------------------------------------------------------------- */
:root{
  --pp-air: clamp(8px, 1.1svh, 14px);
  --pp-gutter: clamp(18px, 3.4vw, 52px);
  --pp-pad-y: clamp(10px, 1.4svh, 18px);
  --pp-gap: clamp(10px, 1.2svh, 18px);

  /* Control fino: separación Foto inferior ↔ Footer */
  --pp-footer-gap: clamp(10px, 1.4svh, 20px);

  /* Columna editorial estable por caracteres */
  --pp-type-max: 62ch;
  --pp-type-max-wide: 72ch;
}

html, body{ background:#fff !important; }

/* -----------------------------------------------------------------------------
   1) Layout raíz: header / main / footer
----------------------------------------------------------------------------- */
body.home #page.site{
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* -----------------------------------------------------------------------------
   2) Neutralización de wrappers típicos del theme (SOLO Home)
----------------------------------------------------------------------------- */
body.home #content.site-content,
body.home #primary.content-area,
body.home #main.site-main{
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}

/* -----------------------------------------------------------------------------
   3) Portada ocupa la fila central del grid
   - display: contents elimina un wrapper que a veces rompe el estiramiento del 1fr.
----------------------------------------------------------------------------- */
body.home #pp-home.pp-home{
  display: contents;
}

/* -----------------------------------------------------------------------------
   4) Stage (sin padding: evita “bloque debajo”)
----------------------------------------------------------------------------- */
body.home .pp-portada{
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}

.pp-portada__stage{
  height: auto;
  margin: 0;

  /* Grid vertical del afiche */
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: var(--pp-gap);

  /* Evita “aire fantasma”: no distribuir espacio extra entre filas auto */
  align-content: start;

  background: transparent;
}

/* -----------------------------------------------------------------------------
   5) Contenedor tipográfico único (columna)
   - Aquí vive el “aire” (padding vertical + lateral).
   - Además, es grid interno para centro fuerte.
----------------------------------------------------------------------------- */
.pp-portada__type{
  width: 100%;
  margin-inline: auto;

  /* Aire: se mueve aquí (en vez del stage) */
  padding-inline: var(--pp-gutter);
  padding-block: calc(var(--pp-air) + var(--pp-pad-y));
  box-sizing: border-box;

  max-width: var(--pp-type-max);
  text-align: center;

  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: var(--pp-gap);
}


.pp-portada__photo{
  width: 100%;
  margin: 0;
  padding: 0;

  max-width: var(--pp-type-max);
  justify-self: center;

  /* ritmo: la foto vive dentro de la misma capa tipográfica */
  margin-top: var(--pp-gap);
}

.pp-portada__photo-img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;

  border-radius: 0;
}


@media (min-width: 1100px){
  .pp-portada__type{ max-width: var(--pp-type-max-wide); }
}

/* -----------------------------------------------------------------------------
   Tipografía (ritmo editorial)
----------------------------------------------------------------------------- */
.pp-portada__title{
  margin: 0;

  font-family: var(--wp--preset--font-family--pp-bebas);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;

  color: #262626;
  font-size: clamp(3.0rem, 5.2vw, 6.2rem);
  line-height: 0.90;

  text-wrap: balance;
}

.pp-portada__bajada{
  margin: 0;

  font-family: var(--wp--preset--font-family--pp-spectral);
  color: #262626;

  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  line-height: 1.42;

  text-wrap: pretty;

  /* Centro fuerte */
  align-self: center;
}

.pp-portada__stat{
  margin: 0;

  font-family: var(--wp--preset--font-family--pp-spectral);
  color: #262626;

  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.35;
  opacity: 0.92;

  align-self: center;
}

.pp-portada__weeks{
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Links (editorial, sin “botón”) */
.pp-portada__link{
  color: inherit;

  /* Subrayado: dotted, ultra-fino (ideal ~0.5px).
     Nota: usamos px cuando el navegador lo soporta; si no, cae a em. */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.07em; /* fallback */
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: auto;
}
@supports (text-decoration-thickness: 0.75px){
  .pp-portada__link{ text-decoration-thickness: 0.75px; }
}
.pp-portada__link:hover{
  text-decoration-style: solid;
  text-decoration-thickness: 0.09em; /* fallback */
}
@supports (text-decoration-thickness: 1px){
  .pp-portada__link:hover{ text-decoration-thickness: 1px; }
}
.pp-portada__link:focus{
  outline: 2px solid currentColor;
  outline-offset: 4px;
}



/* Colores pelotapasto por sección */
.pp-portada__link[href*="/la-pasada/"]{ color: #ff6900; }
.pp-portada__link[href*="/casilla-de-palos/"]{ color: #598fbf; }
/* Clubhouse hereda (neutral) */
.pp-portada__link[href*="/clubhouse/"]{ color: inherit; }
/* -----------------------------------------------------------------------------
   Accesibilidad: H1 y nav ocultos visualmente
----------------------------------------------------------------------------- */
.pp-sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.pp-portada__nav{ display:none !important; }
.pp-portada__h1{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* -----------------------------------------------------------------------------
   Footer: abajo natural (sin empujar con márgenes artificiales)
----------------------------------------------------------------------------- */
body.home #colophon.site-footer{
  margin-top: 0;
  padding-top: var(--pp-footer-gap);
  padding-bottom: var(--pp-air);
  background: transparent;
}

/* -----------------------------------------------------------------------------
   Foto inferior (fallback CSS) — se mantiene como bloque final, centrado
----------------------------------------------------------------------------- */

/* =============================================================================
   v30 — MOBILE Scale (legibilidad presbicia) + underline fino
   Objetivo: misma estructura; subir escala tipográfica y ritmo vertical
   - H2 y bajada claramente legibles sin zoom
   - Mantener columna centrada + control de overflow
   - Underline ultra fino (dotted) + hover sólido
============================================================================= */
@media (max-width: 560px){
  .pp-portada__type{
    max-width: 100%;
    padding-inline: clamp(18px, 6vw, 28px);
    padding-block: calc(var(--pp-air) + (var(--pp-pad-y) * 0.85));
    box-sizing: border-box;
    gap: clamp(16px, 4.5vw, 26px);
  }

  .pp-portada__title{
    font-size: clamp(45px, 10.4vw, 68px);
    line-height: 0.98;
    letter-spacing: -0.005em;
    text-wrap: balance;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    max-width: 92vw;
    margin-inline: auto;
  }

  .pp-portada__bajada{
    font-size: clamp(19px, 5.2vw, 27px);
    line-height: 1.45;
    max-width: 88vw;
    margin-inline: auto;
  }

  .pp-portada__stat{
    font-size: clamp(13px, 3.3vw, 15px);
    line-height: 1.35;
  }

  .pp-portada__photo{
  margin-top: clamp(18px, 2.6vw, 28px);
  margin-bottom: 0;
  display: flex;
  justify-content: center;
}

  .pp-portada__photo-img{
    border-radius: 0;
  }
}