/* =========================================================
   Giornalino Revistas Home — CSS base (depurado)
   ========================================================= */

/* Tipografías (si tu theme define --primary/secondary, las usa; si no, fallback) */
.gio-hero{
  --gio-serif: "Source Serif Pro", serif;

  --gio-pad-x: 20px; /* padding lateral real del contenedor */
  position: relative;
  min-height: min(900px, 100svh);
  display: grid;
  place-items: center;
  padding: clamp(32px, 6vw, 72px) var(--gio-pad-x);
  background: var(--gio-bg, #BF294E);
  overflow: hidden;
}

.gio-inner{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
  width: 100%;
}

/* Logo principal */
.gio-brand{
  display: block;
  margin: 0 auto 12px;
  width: min(640px, 90vw);
  height: auto;
}

/* Años */
.gio-years,
.gio-year,
.gio-sep{
  font-family: var(--gio-sans);
}

.gio-years{
  margin: 2px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 6px;
  max-width: 740px;
  color: #fff;
}

/* Quitar hovers de theme (naranja) y mantener blanco siempre */
.gio-hero .gio-years a.gio-year,
.gio-hero .gio-years a.gio-year:visited,
.gio-hero .gio-years a.gio-year:hover,
.gio-hero .gio-years a.gio-year:focus,
.gio-hero .gio-years a.gio-year:active{
  color: #fff !important;
  text-decoration: none !important;
  background: transparent !important;
  transform: none !important;
  transition: none !important;
}

.gio-year{
  font-weight: 400;
     font-size: clamp(14px, 2vw, 18px);
  line-height: 1.2;
  padding: 0 2px;
 font-family: "Source Serif Pro", serif;
 letter-spacing: 0.1rem;
}

/* Solo el activo (2025 cuando estás en /2025/) */
.gio-year.is-active{ font-weight: 600;
font-family: "Source Serif Pro", serif;
letter-spacing: 0.1rem; 
}

.gio-sep{
  opacity: .85;
  margin: 0;
  font-family: "Source Serif Pro", serif;
}

.gio-break{
  flex-basis: 100%;
  height: 0;
}

/* Logo inferior */
.gio-logo{
  display: block;
  width: clamp(150px, 10vw, 150px); /* clamp correcto */
  height: auto;
  margin: clamp(26px, 4vw, 46px) auto 0;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.08));
}

/* Decoraciones */
.gio-decor{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: .25;
}

/* =========================================================
   GRID punteado (cuadrícula) — como tu referencia
   Usamos un tile SVG repetido: estable y exacto.
   ========================================================= */

.gio-grid{
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, 86vw);
  height: 200px;
  border-radius: 0px;
  opacity: .45;

  /* SVG tile 40x40 con líneas punteadas (dash) en top y left */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cpath%20d='M0%200%20H40'%20stroke='rgba(255,255,255,0.55)'%20stroke-width='1'%20stroke-dasharray='5%207'/%3E%3Cpath%20d='M0%200%20V40'%20stroke='rgba(255,255,255,0.55)'%20stroke-width='1'%20stroke-dasharray='5%207'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  background-repeat: repeat;
}

  
/* Base: círculo perfecto con rayas finas */
.gio-stripe-left,
.gio-stripe-right{
  width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,.7) 0 3px,
    transparent 3px 8px
  );
  opacity: .25;
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* IZQUIERDA: parte plana hacia afuera (izquierda) => mitad derecha del círculo */
.gio-stripe-left{
  left: -100px;
  top: 0px;
  clip-path: inset(0 0 0 50%);
}

/* DERECHA: parte plana hacia afuera (derecha) => mitad izquierda del círculo */
.gio-stripe-right{
  right: -100px;
  top: 620px;
  clip-path: inset(0 50% 0 0);
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width:520px){
  .gio-grid{
    top: 0px;
    width: min(72vw, 460px);
    height: 110px;
    opacity: .85;
  }

  .gio-stripe-left,
  .gio-stripe-right{ width: 170px; opacity: .30; }

  .gio-stripe-left{ left: -120px; top: 40px; }
  .gio-stripe-right{ right: -100px; top: 620px; }
}