/* ===== IDENTIDAD — Internacional Chimbote FC ===== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

:root{
  --ic-azul:#2D4281;
  --ic-dorado:#FED128;
  --ic-blanco:#FFFFFF;

  --hero-min-h: 62vh;

  /* Franjas del hero (desktop base) */
  --franjas-y:  300px;
  --franja-h:   30px;

  /* DURACIÓN ÚNICA DE FADES */
  --fade-duration: 220ms;
}

.identidad{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#0f172a;
}

/* ---------- HERO ---------- */
.id-hero{
  position:relative;
  min-height:var(--hero-min-h);
  overflow:hidden;
  display:block;
}

.id-hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; /* llena y recorta lo necesario */
  display:block;
}

/* Franjas azul + dorado (visibles en desktop; se ajustan en mobile con media queries) */
.id-hero__stripes{
  position:absolute; left:0; right:0; bottom:var(--franjas-y);
  display:flex; flex-direction:column; gap:var(--franjas-gap);
  pointer-events:none;
  z-index:2;
}
.id-hero__line{height:var(--franja-h)}
.id-hero__line.blue{background:var(--ic-azul)}
.id-hero__line.gold{background:var(--ic-dorado)}

/* Texto hero con FRANJA AZUL */
.id-hero__txt{
  position:absolute;
  left:0; right:0;
  bottom:-29px;
  background:rgba(45,66,129,.62);
  padding:100px 0;                 /* alto de franja (desktop base) */
  color:var(--ic-blanco);
  text-align:center;
  z-index:1;
}
.id-hero__content{max-width:1200px; margin:0 auto; padding:0 18px}
.id-hero__title{
  font-family:'Bebas Neue',sans-serif;
  text-transform:uppercase; letter-spacing:.5px; line-height:1;
  margin:0 0 10px; font-size:clamp(44px,8vw,110px);
  text-shadow:0 3px 12px rgba(0,0,0,.35);
}
.id-hero__subtitle{margin:0 auto; max-width:980px; font-size:clamp(14px,2.2vw,18px)}
.id-hero__separator{position:absolute; left:0; right:0; bottom:0; height:8px; background:var(--ic-dorado)}

/* ---------- FRANJA AMARILLA (tabs) ---------- */
.id-tabs{background:var(--ic-dorado); color:var(--ic-azul)}
.id-tabs__inner{max-width:1100px; margin:0 auto; padding:70px 40px 70px; text-align:center}
.id-tabs__head{display:block; margin-bottom:6px}
.id-tabs__crest{width:56px; height:56px; object-fit:contain; display:block; margin:0 auto 6px}

/* Barra de tabs */
.id-tabs__bar{position:relative; display:inline-flex; gap:28px; align-items:center; flex-wrap:wrap}
.id-tab{
  appearance:none; background:none; border:none; cursor:pointer;
  padding:10px 4px;
  font-family:'Bebas Neue',sans-serif;
  text-transform:uppercase; letter-spacing:.6px; font-size:22px;
  color:#af8b49; transition:color .35s ease;
}
.id-tab[aria-selected="true"]{color:var(--ic-azul)}
.id-tab__label{display:inline-block}

/* Base dorada y slider azul */
.id-tabs__under{
  position:absolute; left:8px; right:8px; bottom:-8px;
  height:4px; background:#af8b49; pointer-events:none;
}
.id-tabs__slider{
  position:absolute; bottom:-8px; height:4px; left:0; width:120px;
  background:var(--ic-azul); pointer-events:none;
  transition:left .38s ease, width .30s ease;
}

/* Panel de texto (cuadro amarillo) */
.id-panel{padding:10px 14px 22px; text-align:center}
.id-panel__title{
  font-family:'Bebas Neue',sans-serif;
  text-transform:uppercase; letter-spacing:1px;
  font-size:clamp(26px,5vw,40px); margin:10px 0 8px; color:var(--ic-azul);
}
.id-panel__lead{margin:0 auto; max-width:900px; color:#1c2b5f}

/* Fade SOLO del contenido del cuadro amarillo (SIN tocar tabs) */
.id-panel__fader{opacity:1; transition:opacity var(--fade-duration) ease}
.id-panel__fader.is-hiding{opacity:0}

/* ---------- CUERPO AZUL ---------- */
.id-body{background:var(--ic-azul); color:var(--ic-blanco); padding:42px 14px 40px}
.id-body__inner{max-width:1000px; margin:0 auto}

/* Crossfade del contenido + altura mínima fija para evitar salto */
.id-fader{opacity:1; transition:opacity var(--fade-duration) ease; min-height:260px}
.id-fader.is-hiding{opacity:0}

/* Lista EMBLEMA (icono + texto) */
.id-list{display:grid; gap:22px}
.id-list.emblema .id-row{display:grid; grid-template-columns:56px 1fr; gap:16px; align-items:flex-start}
.id-ico{width:42px; height:42px; object-fit:contain}
.id-text h3{margin:0 0 4px; font-weight:700; font-size:18px; color:var(--ic-blanco); letter-spacing:.2px}
.id-text p{margin:0; font-size:15px; line-height:1.55; opacity:.95}

/* Lista VALORES (rejilla 2×2, sin iconos) */
.id-list.valores{display:grid; grid-template-columns:repeat(2, minmax(320px,1fr)); gap:26px 44px}
.id-list.valores .id-row{display:block}
.id-list.valores .id-row .id-text h3{margin-bottom:6px}
.id-list.valores .id-row .id-text p{max-width:560px}

/* ---------- RESPONSIVE ---------- */

/* Tablet/desktop angosto */
@media (max-width:1100px){
  .id-tabs__inner{padding:60px 28px 60px}
  .id-hero__txt{padding:120px 0;}
}

/* Tablet */
@media (max-width:900px){
  .id-tabs__bar{gap:22px}
  .id-tab{font-size:20px; letter-spacing:.5px}
  .id-list.valores{grid-template-columns:1fr 1fr}
  .id-ico{width:38px; height:38px}
}

/* Tablet portrait / phablet */
@media (max-width:760px){
  :root{--hero-min-h:56vh}
  .id-hero__txt{padding:130px 0}      /* franja azul baja en proporción */
  .id-tabs__inner{padding:48px 22px 52px}
  .id-list.valores{grid-template-columns:1fr}
  .id-fader{min-height:300px}
}

/* Móvil */
@media (max-width:560px){
  :root{--hero-min-h:52vh; --franjas-y:140px}
  .id-hero__txt{padding:70px 0}
  .id-tabs__bar{gap:16px}
  .id-tab{font-size:18px}
  .id-tabs__under{left:10px; right:10px}
  .id-list.emblema .id-row{grid-template-columns:40px 1fr; gap:12px}
  .id-ico{width:34px; height:34px}
  .id-body{padding-bottom:32px}
}

/* Móvil pequeño */
@media (max-width:390px){
  .id-hero__txt{padding:50px 0}
  .id-tab{font-size:17px; letter-spacing:.4px}
  .id-fader{min-height:320px}
}