@import url("fonts.css");

/* ========== Base / Reset ========== */
*,
*::before,
*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family:'avenirbook', sans-serif;
  color:#010101;
  background:#fff;
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0;
}

/* ========== Variables ========== */
:root{
  --azul-oscuro:#0E2E4E;
  --azul:#1A287C;
  --azul-hero:#0b1a2a;
  --verde-lima:#C2D73A;
  --grad-pill: linear-gradient(90deg,#F5F7F8 0%, #C2D73A 60%, #9BBC43 100%);
  --grad-pill-horizontal: linear-gradient(90deg,#F5F7F8 0%, #C2D73A 100%);
  --grad-dark: linear-gradient(165deg,#0C2C4D 0%, #0C2C4D 45%, #082138 100%);
  --content-max: 1240px;
  --section-max: 1100px;
  --hero-stack-size: clamp(2.2rem, 7vw, 4.2rem);

  /* Alineación común Networking/Límites */
  --center-col: clamp(360px, 28vw, 520px);
  --col-gap: clamp(12px, 2vw, 28px);
}

/* ========== Masthead ========== */
#masthead{
  position:relative;
  overflow:hidden;
  background:#fff;
  padding:18px 0 26px;
}
.masthead-inner{
  max-width:var(--section-max);
  margin:0 auto;
  padding:0 clamp(16px,3vw,40px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
  z-index:2;
}
.mh-logo {
    max-width: 369px;
    height: auto;
    display: block;
    margin-top: -15px;
}
.event-lines{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:1rem;
  font-weight:800;
  text-transform:uppercase;
  color:#1E2E4E;
  letter-spacing:.05em;
  font-family:'avenirblack';
  line-height:1.18rem;
  white-space:nowrap;
  text-align:right;
}

/* CTA sobre el contador */
.mh-toolbar{
  max-width:var(--section-max);
  margin:6px auto 4px;
  padding:0 clamp(16px,3vw,40px);
  display:flex;
  justify-content:center;
  position:relative;
  z-index:2;
}
.btn-wip-2024{
  display:inline-block;
  font-family:'avenirblack';
  font-size:.72rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  background:var(--grad-pill-horizontal);
  color:#0E2E4E;
  padding:10px 22px 9px;
  border-radius:40px;
  box-shadow:none;
  white-space:nowrap;
  text-decoration:none;
  line-height:1;
}
.btn-wip-2024:hover,
.btn-wip-2024:focus{
  background:linear-gradient(90deg,#EEF1F3 0%, #B5D13C 100%);
  text-decoration:none;
  box-shadow:none;
}

/* Decoraciones masthead */
.mh-deco{
  position:absolute;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.mh-deco-left{
  left:0; top:36px;
  width:min(340px,26vw);
  transform:translateX(-22%);
}
.mh-deco-right{
  right:0; top:120px;
  width:min(300px,22vw);
  transform:translateX(16%);
  opacity:.95;
}

/* Contador */
.countdown{
  position:relative;
  z-index:2;
  max-width:1240px;
  margin:18px auto 6px;
  padding:0 clamp(16px,3vw,40px);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 40px);
}
.cd-card{
  background:#fff;
  border:2px solid #C2D73A;
  border-radius:18px;
  padding:18px 10px 16px;
  box-shadow:none;
  text-align:center;
}
.cd-number{
  font-family:'avenirblack';
  color:#193156;
  font-size: clamp(1.8rem, 4.2vw, 2.8rem);
  line-height:1;
}
.cd-label{
  margin-top:6px;
  color:#193156;
  font-weight:900;
  letter-spacing:.06em;
  font-size:.85rem;
}
@media (max-width:760px){
  .countdown{ grid-template-columns: repeat(2, 1fr); }
  .mh-logo{ max-width:200px; }
  .event-lines{ font-size:.9rem; line-height:1.08rem; text-align:center; align-items:center; }
}

/* ========== HERO ========== */
#hero{
  position:relative;
  height:66vh;
  min-height:520px;
  background:#041423;
  overflow:hidden;
  isolation:isolate;
}
#hero .hero-media,
#hero video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
#hero video{ filter:brightness(.9) contrast(1.05) saturate(1.06); }
#hero .hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,25,42,.20) 0%, rgba(10,25,42,.52) 45%, rgba(10,25,42,.85) 100%);
  z-index:1;
}
.hero-inner{
  position:relative;
  z-index:10;
  width:100%;
  max-width:var(--section-max);
  height:100%;
  margin:0 auto;
  padding:0 clamp(16px,3vw,40px);
  display:flex;
  align-items:center;
}
.hero-claim-block{ display:flex; flex-direction:column; align-items:flex-start; max-width:520px; }
.hero-stack{
  margin:0;
  font-family:'avenirblack',sans-serif;
  font-weight:900;
  font-size:var(--hero-stack-size);
  line-height:1.02;
  letter-spacing:.012em;
  color:#fff;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  text-shadow:none;
}
.hero-stack span{ display:block; }
.hero-pill{
  margin-top:1.05rem;
  background:var(--grad-pill);
  color:#0E2E4E;
  font-family:'avenirblack';
  font-size:clamp(.85rem,1vw,1rem);
  font-weight:900;
  padding:.64em 1.25em .66em 1.35em;
  border-radius:60px;
  letter-spacing:.085em;
  box-shadow:none;
}
@media (max-width:680px){
  #hero{ min-height:520px; }
  .hero-inner{ justify-content:center; }
  .hero-claim-block{ align-items:center; text-align:center; }
  .hero-stack{ font-size:clamp(2.1rem, 9.8vw, 3.2rem); }
}

/* ========== Networking (3 columnas con centro común) ========== */
#networking{
  padding-top:1.4rem;
  padding-bottom:.6rem;
  max-width:var(--section-max);
  margin:0 auto;
}
.net-grid{
  display:grid;
  grid-template-columns: 1fr var(--center-col) 1fr;
  align-items:center;
  justify-items:center;
  column-gap: var(--col-gap);
}
.sec-heading{
  font-weight:900;
  text-transform:uppercase;
  color:var(--azul-oscuro);
  letter-spacing:.01em;
  line-height:1.02;
  font-size:clamp(1.9rem, 4.2vw, 2.8rem);
  margin:0;
}
.sec-heading.alt{ text-align:right; }
.elem-central{
  width:var(--center-col);
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}
@media (max-width:900px){
  .net-grid{ grid-template-columns: 1fr; text-align:center; }
  .sec-heading,.sec-heading.alt{ text-align:center; }
}

/* ========== Límites (misma rejilla y blobs anclados al centro) ========== */
#limites{
  padding:1.1rem 0 2.6rem;
  max-width:var(--section-max);
  margin:0 auto;
}
#limites .limites-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1fr var(--center-col) 1fr;
  column-gap: var(--col-gap);
  align-items:start;
}
.lim-col p{
  font-size:1.16rem;
  line-height:1.78rem;
  margin:0 0 .85rem;
  color:#0b1a2a;
}
.lim-title{
  font-weight:900;
  color:var(--azul-oscuro);
  font-size:1.38rem;
  margin:0 0 .8rem;
}
.dilo{ font-weight:900; color:var(--azul-oscuro); }

/* Columna central para anclar formas */
.lim-center{
  grid-column: 2;
  position:relative;
  min-height: 360px; /* área para posicionar formas sin empujar el layout */
  pointer-events:none;
}

/* Formas pegadas a los textos pero sin invadirlos; siempre detrás */
.lim-blob-left,
.lim-blob-right{
  position:absolute;
  z-index:-1;            /* detrás de los textos */
  filter:none;
  user-select:none;
  pointer-events:none;
}

/* Izquierda: entra desde el centro hacia la columna izquierda (a mitad de textos) */
.lim-blob-left{
  width:clamp(220px, 24vw, 380px);
  top: 52%;
  left: 0;
  transform: translateX(-56%) rotate(-6deg);
}

/* Derecha: grande, apoya la base del bloque derecho sin pisar el titular */
.lim-blob-right{
  width:clamp(320px, 34vw, 620px);
  bottom: -10px;
  right: 0;
  transform: translateX(42%) rotate(6deg);
}

/* Responsive: pila centrada y formas en flujo normal */
@media (max-width:900px){
  #limites .limites-grid{
    grid-template-columns: 1fr;
    row-gap:12px;
    text-align:center;
  }
  .lim-center{ min-height: 0; }
  .lim-blob-left,
  .lim-blob-right{
    position:relative;
    z-index:0;
    transform:none;
    left:auto; right:auto; top:auto; bottom:auto;
    display:block;
    margin:8px auto 0;
  }
  .lim-blob-left{ width:min(60vw, 360px); }
  .lim-blob-right{ width:min(70vw, 420px); }
}

/* ========== Ponentes + Rookie ========== */
#ponentes-rookie{
  padding:3.0rem 0 2.8rem;
  background:#fff;
}
.pr2{ max-width:var(--section-max); margin:0 auto; }
.ponentes-main{ margin-bottom:2.0rem; }
.pr-big{
  font-weight:900;
  text-transform:uppercase;
  color:var(--azul-oscuro);
  font-size:clamp(1.9rem, 3.9vw, 2.7rem);
  line-height:1.05;
  letter-spacing:.015em;
  margin:0 0 .8rem;
}
.pr-pill-alone{
  display:inline-block;
  background:var(--grad-pill-horizontal);
  padding:.55em 1.35em .6em;
  border-radius:58px;
  font-family:'avenirblack';
  font-size:clamp(.82rem, 1vw, 1rem);
  letter-spacing:.09em;
  color:#0E2E4E;
  box-shadow:none;
}
.pon-right{ display:flex; justify-content:center; }
.pr-circle{
  width:clamp(230px, 33vw, 400px);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border-radius:50%;
  overflow:visible;
  filter:none;
}
.pr-circle-img{
  width:100%; height:auto; display:block;
  border-radius:50%;
  object-fit:cover;
}

/* Rookie: escritorio original; móvil centrado */
.rookie-bar{
  border-top:1px solid #e3e8ec;
  padding-top:1.0rem;
  padding-bottom:.9rem;
  margin-top:.6rem;
  row-gap:12px;
}
.rookie-logos{ display:flex; align-items:center; justify-content:flex-start; }
.rookie-text{ display:flex; align-items:center; justify-content:flex-start; }
.rookie-logo{
  height:clamp(58px, 6.8vw, 96px);
  width:auto;
  object-fit:contain;
  display:block;
  filter:none;
}
.rookie-text p{
  margin:0;
  font-weight:700;
  font-size:clamp(.9rem, 1.1vw, 1.05rem);
  letter-spacing:.085em;
  line-height:1.42rem;
  text-transform:uppercase;
  color:#1E2E4E;
}
@media (max-width:768px){
  .ponentes-main{ text-align:center; row-gap:12px; }
  .pon-left{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .pr-big{ text-align:center; margin-bottom:.6rem; }
  .pr-pill-alone{ margin:4px auto 0; }
  #ponentes-rookie{ padding:2.2rem 0 2.0rem; }
  .pr-circle{ margin-top:.4rem; }

  .rookie-logos{ justify-content:center; }
  .rookie-text{ justify-content:center; text-align:center; }
}

/* ========== Talleres (acordeón) ========== */
#talleres{
  position:relative;
  background:var(--grad-dark);
  color:#fff;
  padding:3.0rem 0 3.0rem;
  overflow:hidden;
}
#talleres:before{
  content:"";
  position:absolute; top:-80px; left:0; right:0; height:120px;
  background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,0) 100%);
  pointer-events:none; z-index:0;
}
#talleres .container{ position:relative; z-index:1; max-width:var(--section-max); }
.taller-card{ background:transparent; border:0; }
.taller-card + .taller-card{ margin-top:14px; }
.taller-card .card-header{ background:transparent; padding:0; border:0; }
.taller-btn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; text-decoration:none; cursor:pointer;
  background:var(--grad-pill);
  padding:10px 22px 12px;
  border-radius:42px;
  font-family:'avenirblack';
  font-weight:900;
  font-size:clamp(.98rem, 1.05vw, 1.06rem);
  letter-spacing:.03em;
  color:#1C2878;
  box-shadow:none;
  text-transform:uppercase;
}
.taller-btn:hover,
.taller-btn:focus{
  filter:brightness(1.04);
  text-decoration:none;
  box-shadow:none;
}
.title-text{ display:flex; flex-wrap:wrap; gap:.8ch; line-height:1.1; }
.icon-circle{
  width:36px; height:36px;
  border-radius:50%;
  background:#102744; color:#fff;
  font-size:1.2rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:none;
}
.card-container .card-body{
  background:rgba(255,255,255,.07);
  margin:10px 46px 4px;
  padding:18px 22px 18px;
  border-radius:18px;
  font-size:.96rem;
  line-height:1.46rem;
  color:#E6EEF5;
  box-shadow:none;
}
@media (max-width:560px){
  .taller-btn .title-text{ margin:0 auto; text-align:center; }
  .card-container .card-body{ text-align:center; margin:10px 16px 4px; }
  .icon-circle{ width:38px; height:38px; font-size:1.3rem; }
}
.formate-en{
  margin:1.6rem 0 0;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
  font-size:.86rem;
  text-align:center;
  color:#fff;
}

/* ========== Recap (sin sombras) ========== */
#recap{
  position:relative;
  max-width:var(--section-max);
  margin:0 auto;
  padding:3.2rem clamp(16px,3vw,40px) 3.8rem;
  background:#fff;
}
.recap-inner{
  display:grid;
  grid-template-columns: minmax(320px, 520px) 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items:center;
  position:relative;
  z-index:2;
}
.recap-media{ position:relative; }
.recap-media img{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  border-radius:0;
  box-shadow:none;
  image-rendering:auto;
}
.recap-caption{
  margin-top:12px;
  color:#1E2E4E;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.12;
  font-size:clamp(1.05rem, 2.3vw, 1.6rem);
}
.recap-caption-line{ display:block; }
.recap-eyebrow-accent{
  background:var(--grad-pill-horizontal);
  padding:.08em .3em;
  border-radius:.4em;
}
.recap-text{ color:#1E2E4E; }
.recap-title{
  margin:0 0 1.2rem; color:#1E2E4E; font-weight:900; text-transform:uppercase; line-height:1.08;
  font-size:clamp(1.6rem, 3.2vw, 2.4rem);
}
.recap-sub{
  font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.95rem; margin:0;
}
.recap-deco{
  position:absolute; right:-100px; bottom:-6px; width:min(400px, 30vw);
  pointer-events:none; user-select:none;
  filter:none;
  z-index:0;
}
@media (max-width:900px){
  .recap-inner{ grid-template-columns: 1fr; }
  .recap-text{ text-align:center; }
  .recap-deco{ right:-72px; width:min(360px, 58vw); bottom:-16px; }
}

/* ========== Footer ========== */
#footer{
  background:#fff;
  margin-top:.6rem;
}
#footer .footer-inner{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 clamp(16px,3vw,40px) 2.2rem;
}
.footer-sep{
  height:1px;
  background:#E7EBF2;
  margin:18px 0 14px;
}
#footer .rrss{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:28px;
  padding:8px 0 6px;
  color:#243A5A;
  font-size:.9rem;
}
#footer .rrss .hash{
  font-weight:900;
  letter-spacing:.02em;
}
#footer .rrss a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:#243A5A;
  text-decoration:none;
}
#footer .rrss a:hover{ text-decoration:underline; }
#footer .rrss i{ font-size:1rem; color:#243A5A; }

/* Sponsors */
#patrocinadores.sponsors-grid{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  column-gap:28px;
  row-gap:18px;
  margin-top:10px;
}
.sponsor-left{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:22px;
  flex-wrap:nowrap;
}
.sponsor-left .sponsor{
  display:flex;
  align-items:center;
  gap:12px;
}
.sponsor-left .sponsor.eu{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.sponsor-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.sponsor-left .eu img{ height:clamp(34px, 5.2vw, 58px); width:auto; }
.sponsor-left .carm img{ height:clamp(38px, 5.6vw, 62px); width:auto; }
.sponsor-right.info img{ height:clamp(40px, 6vw, 64px); width:auto; }
.eu-caption{
  font-size:.78rem;
  line-height:1.1rem;
  color:#243A5A;
  font-weight:600;
}
@media (max-width:900px){
  #footer .footer-inner{ padding:0 18px 2.0rem; }
  #patrocinadores.sponsors-grid{
    grid-template-columns: 1fr;
    justify-items:center;
    text-align:center;
    row-gap:16px;
    margin-top:12px;
  }
  .sponsor-left,
  .sponsor-right{
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
  }
  .sponsor-left .sponsor.eu{ align-items:center; }
}