/* ==========================================================================
   Pagina de inicio: portada, cifras, indice y carta del director.
   Replica de las paginas 1 a 4 del PDF.
   ========================================================================== */

/* ------------------------------------------------------------- portada */
.cubierta{
  position:relative;
  background:var(--papel-2);
  padding:44px 0 60px;
  overflow:hidden;
}
.cub-swirl{
  position:absolute; top:-70px; left:44%; width:min(360px,32vw);
  opacity:.95; pointer-events:none; user-select:none; z-index:0;
}
.cub-in{
  position:relative; z-index:1;
  max-width:var(--ancho-ancho); margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:1fr 1.08fr; gap:26px; align-items:stretch;
}
.cub-izq{ display:grid; grid-template-rows:auto 1fr; gap:22px; }

.cub-card{
  background:var(--azul);
  border-radius:34px;
  padding:clamp(32px,4vw,54px) clamp(28px,3.4vw,48px);
  color:#fff;
  box-shadow:var(--sombra-alta);
}
.cub-card h1{ margin:0; line-height:1; }
.cub-card .l1{
  display:block; font-size:clamp(30px,3.9vw,54px); font-weight:300;
  letter-spacing:-.015em; color:#fff;
}
.cub-card .l2{
  display:block; font-family:"EB Garamond",Georgia,serif; font-style:italic;
  font-weight:700; font-size:clamp(42px,5.6vw,78px); color:#F6F1E4;
  letter-spacing:-.02em; margin:2px 0 4px;
}
.cub-card .l3{
  display:block; font-size:clamp(34px,4.3vw,60px); font-weight:800;
  color:var(--azul-claro); letter-spacing:-.02em;
}

.cub-leon{
  background:var(--azul-palido);
  border-radius:34px;
  display:flex; align-items:center; justify-content:center;
  padding:34px; min-height:230px;
}
.cub-leon img{
  width:min(230px,58%); height:auto;
  animation:respira 7s ease-in-out infinite;
}
@keyframes respira{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.045) } }

.cub-der{ display:flex; }
.cub-foto{
  flex:1; border-radius:34px; overflow:hidden;
  background:var(--azul-humo);
  box-shadow:var(--sombra);
}
.cub-foto img{ width:100%; height:100%; object-fit:cover; }

.cub-pie{
  position:relative; z-index:1;
  margin-top:38px;
  display:flex; flex-wrap:wrap; gap:22px 40px; align-items:center;
  justify-content:space-between;
}
.cub-entrada{ margin:0; max-width:62ch; font-size:16.5px; line-height:1.62; }
.cub-botones{ display:flex; gap:12px; flex-wrap:wrap; }

/* --------------------------------------------------------- cifras clave */
.cifra .delta{
  margin-top:9px; display:inline-block;
  font-size:12.5px; font-weight:800; letter-spacing:.02em;
  padding:3px 10px; border-radius:999px;
  background:var(--azul-humo); color:var(--azul);
}
.cifra.media .delta{ background:rgba(255,255,255,.2); color:#fff; }
.cifra.oscura .delta{ background:rgba(255,255,255,.16); color:#fff; }

/* --------------------------------------------------- indice (pag. 2 PDF) */
.indice-caja{
  position:relative;
  background:var(--azul-palido);
  border-radius:40px;
  padding:clamp(34px,4vw,62px) clamp(26px,3.6vw,56px);
  padding-left:clamp(26px,10vw,168px);
}
.indice-rotulo{
  position:absolute; left:clamp(-6px,1vw,26px); top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-size:clamp(56px,9vw,132px); font-weight:800; letter-spacing:-.03em;
  color:var(--azul); line-height:.85;
  pointer-events:none; user-select:none;
}
@media (max-width:900px){ .indice-rotulo{ display:none; } }

.indice-lista{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:56px;
}
@media (max-width:900px){ .indice-lista{ columns:1; } }

.indice-cap{
  break-inside:avoid; display:flex; gap:18px; align-items:flex-start;
  margin-bottom:26px;
}
.indice-num{
  flex:0 0 auto;
  font-size:clamp(42px,4.6vw,64px); font-weight:800; line-height:.86;
  color:var(--azul); letter-spacing:-.04em;
  min-width:1.9em;
}
.indice-num.hueco{
  color:transparent;
  -webkit-text-stroke:2px var(--azul);
}
.indice-cuerpo{ flex:1; min-width:0; }

.indice-tit{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font-size:clamp(16px,1.55vw,21px); font-weight:800; color:var(--azul);
  text-transform:uppercase; line-height:1.14; letter-spacing:.005em;
  padding-bottom:5px;
}
.indice-tit:hover{ text-decoration:none; color:var(--navy); }
.indice-tit i{ font-style:normal; font-size:.92em; font-weight:800; flex:0 0 auto; }

.indice-sub{ list-style:none; margin:7px 0 0; padding:0; }
.indice-sub a{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:3px 6px 3px 0; border-radius:6px;
  font-size:14.2px; font-weight:500; color:#3E60B8;
}
.indice-sub a:hover{ background:rgba(255,255,255,.55); text-decoration:none; color:var(--navy); }
.indice-sub i{ font-style:normal; font-size:13px; flex:0 0 auto; }

.indice-ayuda{
  margin:26px 0 0; font-size:13.5px; font-weight:600; color:var(--azul-osc); opacity:.8;
}

/* ------------------------------------------- carta del director (págs 3-4) */
.carta-cols{
  columns:2; column-gap:56px;
  font-size:15.6px; line-height:1.66;
}
.carta-cols p, .carta-cols li{ break-inside:avoid-column; }
.carta-cols .vinetas{ margin-bottom:15px; }
@media (max-width:900px){ .carta-cols{ columns:1; } }

.firma{ margin-top:36px; }
.firma-linea{ width:180px; height:2px; background:var(--azul-claro); margin-bottom:14px; }
.firma b{ display:block; font-size:17px; color:var(--navy); font-weight:800; }
.firma span{ display:block; font-size:14px; color:var(--texto-suave); max-width:52ch; }

/* -------------------------------------------- accesos rapidos a secciones */
.tarjetas-sec{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px;
  margin-top:28px;
}
.tarjeta-sec{
  display:flex; flex-direction:column; gap:7px;
  padding:24px 24px 22px; border-radius:var(--radio);
  background:var(--papel-2); border:1px solid var(--linea);
  transition:transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.tarjeta-sec:hover{
  transform:translateY(-5px); border-color:var(--azul);
  box-shadow:var(--sombra-alta); text-decoration:none;
}
.ts-num{ font-size:30px; font-weight:800; color:var(--azul-claro); line-height:1; letter-spacing:-.03em; }
.tarjeta-sec:hover .ts-num{ color:var(--azul); }
.ts-tit{ font-size:16px; font-weight:700; color:var(--navy); line-height:1.28; }
.ts-pag{ font-size:12.5px; color:var(--texto-suave); font-weight:600; margin-top:auto; padding-top:8px; }

@media (max-width:1000px){
  .cub-in{ grid-template-columns:1fr; }
  .cub-der{ min-height:280px; }
  .cub-leon{ min-height:180px; }
}