/* ========================================================
   CIDE 2025 — STYLES (mobile-first, consolidado y documentado)
   ======================================================== */

/* =========================
   0) TOKENS & BASE
   ========================= */

/* :root — Variables globales (sobrescribibles en @media) */
:root{
  /* 🎨 Colores */
  --bg:#0E1320;
  --text:#FFFFFF;
  --muted:#C7D2FE;
  --line:#2A3142;
  --accent:#0E87F9;

  /* 📐 Forma */
  --b:2px;
  --r:8px;

  /* 📏 Layout global */
  --container-max:1320px;
  --container-side: clamp(80px, 12vw, 180px);
  --gutter: clamp(20px, 6vw, 80px);

  /* 📌 Navbar */
  --nav-h:72px;

  /* 🔢 Hero (chips y contador) */
  --hero-chip-h: clamp(56px, 8.2vw, 72px);
  --hero-box-w: clamp(72px, 7vw, 88px);

  /* ⬛ Sincronía tarjeta/contador (mobile-first) */
  --hero-meta-max: 340px;

  /* Alturas mínimas del hero por breakpoint */
  --hero-min-mobile: 420px;
  --hero-min-tablet: 460px;
  --hero-min-desktop: 520px;
}

/* Sobrescrituras responsivas de tokens */
@media (min-width:700px){
  :root{ --hero-meta-max:360px; }
}
@media (min-width:1024px){
  :root{ --hero-meta-max:380px; }
}

/* ▼ Reset mínimo + tipografía */
*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100% }
body{
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Sans", Inter, system-ui, sans-serif;
  overflow-x:hidden;
  padding-top:var(--nav-h);
}
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
[hidden]{ display:none !important }

/* Helpers de layout + tipografías de sección */
.container{
  width:min(var(--container-max), 100% - var(--container-side));
  margin-inline:auto;
}
.section{ padding:clamp(56px, 8vw, 96px) 0 }
.section-head{ margin-bottom:16px }

.kicker{ font:600 12px/1.4 Inter; letter-spacing:.08em; color:var(--muted) }
.h2{ font:700 clamp(24px, 2.6vw, 32px)/1.2 "IBM Plex Sans"; letter-spacing:-.01em }
.h2-sm{ font:700 clamp(18px,1.8vw,22px)/1.3 "IBM Plex Sans" }
.lead{ font:500 clamp(14px,1.6vw,16px)/1.6 "IBM Plex Sans"; color:var(--muted) }
.micro{ font:400 13px/1.5 Inter; color:var(--muted) }

/* =========================
   1) COMPONENTES BÁSICOS
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 18px; border-radius:var(--r);
  font:600 16px/1 "IBM Plex Sans";
  border:var(--b) solid transparent;
  transition:filter .15s ease, opacity .15s ease;
}
.btn-primary{ background:var(--accent); color:#0E1320 }
.btn-primary:hover{ filter:brightness(1.06) }
.btn-outline{ border-color:var(--line); background:transparent }
.btn-outline:hover{ border-color:#3a435a }

.card{
  border:var(--b) solid rgba(255,255,255,.10);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.pill{
  border:var(--b) solid var(--line);
  border-radius:999px; padding:8px 12px;
  font:500 14px/1 Inter;
}

/* Accesibilidad */
:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent), #fff 30%);
  outline-offset:2px;
}

/* =========================
   2) NAVBAR FIJA
   ========================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--nav-h); display:flex; align-items:center;
  background:rgba(14,19,32,.90); backdrop-filter:blur(8px);
  border-bottom:var(--b) solid transparent;
}
.nav-inner{
  width:min(var(--container-max), 100% - var(--container-side));
  margin-inline:auto; display:flex; align-items:center; justify-content:space-between;
}
.nav-links{ display:flex; gap:28px; font:500 15px/1 Inter }
.nav-links a{ transition:color .2s }
.nav-links a:hover{ color:var(--accent) }
.nav-cta{ margin-left:28px }

/* Burger / menú móvil */
.burger{
  display:none; background:none; border:0; color:#fff;
  font:700 20px/1 "IBM Plex Sans"; padding:8px 10px; border-radius:var(--r);
}
@media (max-width:920px){
  .nav-links, .nav-cta{ display:none }
  .burger{ display:block }
}
.mobile-menu{
  width:min(var(--container-max), 100% - var(--container-side));
  margin-inline:auto; display:grid; gap:12px;
  padding:12px 0 16px;
  border-bottom:var(--b) solid rgba(255,255,255,.10);
}
.mobile-menu a{ padding:10px 0 }

/* Menú hamburguesa alineado al container + bloqueo de scroll */
@media (max-width:920px){
  body.menu-open{ overflow:hidden }
  .mobile-menu{
    position:fixed; top:var(--nav-h); left:50%; transform:translateX(-50%);
    z-index:1200; width:min(var(--container-max), 100% - var(--container-side));
    background:rgba(14,19,32,.98); backdrop-filter:blur(8px);
  }
}
@media (min-width:921px){ #mnav{ display:none !important } }

/* Mostramos la hamburguesa antes para evitar colisiones de ancho */
@media (max-width:1180px){
  .nav-links, .nav-cta{ display:none }
  .burger{ display:block }
}

/* Centrado mobile: mismo padding izq/der */
@media (max-width:767px){
  .container, .nav-inner, .mobile-menu, .footer .row{
    padding-left:16px; padding-right:16px; margin-left:auto; margin-right:auto;
  }
}

/* =========================
   3) HERO (2/3 texto – 1/3 slider)
   ========================= */

/* Altura controlada por tokens */
.hero{ min-height:var(--hero-min-mobile); margin-bottom:0; padding-bottom:0 }
@media (min-width:768px){ .hero{ min-height:var(--hero-min-tablet) } }
@media (min-width:1024px){ .hero{ min-height:var(--hero-min-desktop) } }

/* Gap exacto con la primera sección */
.hero + .section{ padding-top:72px; margin-top:0 }
.hero + .section > .container{ padding-top:0; margin-top:0 }
.hero + .section .section-head{ margin-top:0 }
.hero + .section .section-head > *:first-child{ margin-top:0 }
.hero + .section h1, .hero + .section h2, .hero + .section .h2{ margin-top:0 }

/* Grid */
.hero-grid{
  display:grid; gap:24px; align-items:start; /* start evita aire muerto */
  grid-template-columns:1fr;                 /* mobile-first */
}
@media (min-width:768px){
  .hero-grid{
    grid-template-columns:minmax(560px,2fr) minmax(360px,1fr);
    gap:32px;
  }
}

/* Columna izquierda */
.hero-left{ display:flex; flex-direction:column; gap:20px }
.hero-left h1{ font:700 clamp(30px,3.6vw,46px)/1.15 "IBM Plex Sans"; letter-spacing:-.01em }
.hero-left .lead{ font:500 clamp(16px,1.7vw,20px)/1.55 "IBM Plex Sans"; color:var(--muted) }

/* Meta + contador (sincronizados) */
.hero-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-top:8px; width:100% }
.event-card, .hero-meta .count{ max-width:var(--hero-meta-max); width:100% }

.event-card{
  min-height:var(--hero-chip-h);
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:10px 16px;
  border:1px solid rgba(255,255,255,.10); /* outline 1px */
}
.event-card .row{ display:flex; align-items:center; gap:10px; color:#EAF0FF }
.event-card .strong{ font-weight:700 }
.event-card .sep{ opacity:.7 }
.event-card .ic{ font-size:16px; line-height:1; opacity:.95 }

.count{ display:flex; gap:10px; flex-wrap:nowrap; align-items:stretch }
.box{
  height:var(--hero-chip-h); width:var(--hero-box-w);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.val{ font:700 clamp(20px, 2vw, 28px)/1 "IBM Plex Sans" }
.lab{ font:400 12px/1.2 Inter; color:var(--muted) }

/* CTAs */
.hero-cta .cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px }

/* Columna derecha (slider) */
.hero-right{
  position:relative; overflow:hidden; border-radius:var(--r);
  height:100%; min-height:360px;      /* evita héroes gigantes por el slider */
}
@media (min-width:768px) and (max-width:1023.98px){
  .hero-right{ aspect-ratio:4/3; min-height:360px; height:auto }
}

.slider{ position:absolute; inset:0; border-radius:var(--r); isolation:isolate }
.slide{
  position:absolute; inset:0; opacity:0; transition:opacity 900ms ease-in-out;
  border-radius:var(--r); background:#000;
}
.slide.is-active{ opacity:1 }
.slide img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r) }

/* Brillos decorativos */
.slider-waves{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; z-index:2 }
.slider-waves span{
  position:absolute; border-radius:50%;
  width:clamp(220px,22vw,420px); height:clamp(220px,22vw,420px);
  filter:blur(60px) saturate(120%); opacity:.16;
  background:conic-gradient(from 20deg,#7A3EE0,#5B26CD,#36127A,#0C8AFA,#7A3EE0);
}
.slider-waves .w1{ right:-12vw; top:-8vh }
.slider-waves .w2{ right:-16vw; bottom:-12vh; background:conic-gradient(from 200deg,#0C8AFA,#7A3EE0,#00CEC3,#0C8AFA) }

/* Tablet: columna fija para texto + slider angosto */
@media (min-width:768px) and (max-width:1023.98px){
  :root{ --hero-text-max:380px; --hero-slider-max:340px }
  .hero-grid{
    grid-template-columns: minmax(0,var(--hero-text-max)) minmax(0,var(--hero-slider-max));
    gap:24px; justify-content:space-between;
  }
  .hero-left{ max-width:var(--hero-text-max); width:100% }
  .hero-right{ max-width:var(--hero-slider-max); width:100% }
  .slider, .slide{ width:100% }
  .slide img{ object-fit:cover; object-position:center }
}

/* =========================
   4) BENEFICIOS / AGENDA / SPEAKERS
   ========================= */

/* Benefits */
.benefits{ display:grid; grid-template-columns:1fr; gap:16px }
@media (min-width:1024px){ .benefits{ grid-template-columns:repeat(4,1fr) } }
.benefit{ padding:16px; display:flex; flex-direction:column; gap:8px }
.benefit h3{ font:700 18px/1.3 "IBM Plex Sans" }
.benefit p{ font:400 14px/1.6 Inter; color:var(--muted) }

/* Agenda (timeline) */
.timeline{ list-style:none; display:grid; gap:12px }
.tl-item{
  display:grid; grid-template-columns:120px 1fr; gap:16px; padding:14px 16px;
  border:1px solid rgba(255,255,255,.10);
}
@media (max-width:640px){ .tl-item{ grid-template-columns:1fr } }
.tl-time{ font:700 14px/1.2 "IBM Plex Sans" }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  border:var(--b) solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:#fff;
  padding:6px 10px; border-radius:999px; font:600 12px/1 "IBM Plex Sans";
}
.below-timeline{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px }
.note{ font:400 14px/1.5 Inter; color:var(--muted) }

/* Speakers grid */
.speakers{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
@media (max-width:1024px){ .speakers{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .speakers{ grid-template-columns:1fr } }

/* Foto cuadrada sin estirarse */
.speaker{ display:flex; flex-direction:column }
.speaker .ph{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border-top-left-radius:var(--r); border-top-right-radius:var(--r);
  background:radial-gradient(60% 60% at 40% 40%, #1A2240 0, #0E1320 70%);
}
.speaker .ph img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
.spk-txt{ padding:12px 14px }
.spk-txt h3{ font:700 18px/1.3 "IBM Plex Sans"; margin-bottom:6px }
.spk-txt p{ font:400 14px/1.5 Inter; color:var(--muted) }

/* =========================
   5) ENTRADAS (pricing)
   ========================= */
#entradas .pricing{ max-width:760px; margin-inline:auto }
#entradas .price{
  padding:24px 24px 20px; text-align:center;
  border:var(--b) solid rgba(255,255,255,.12); border-radius:var(--r);
}
#entradas .price .big{ font:700 clamp(28px,3vw,36px)/1 "IBM Plex Sans"; margin-bottom:8px }
#entradas .price .inc{ font:400 14px/1.6 Inter; color:var(--muted); margin:8px 0 16px }
#entradas .price .note{ margin-top:16px }

/* =========================
   6) SPONSORS
   ========================= */

/* Sponsor destacado (sin marco externo; solo logo enmarcado) */
.sponsor-card{
  /* quitamos look de .card heredado */
  background:none !important; border:none !important; box-shadow:none !important; padding:0;

  /* layout del contenido */
  display:grid; grid-template-columns:1fr; gap:14px; padding:16px 0;
}
@media (min-width:720px){
  .sponsor-card{ grid-template-columns:minmax(260px,420px) 1fr; align-items:center }
}

/* Caja del logo (con borde y fondo suave) */
.sponsor-card__logo{
  display:grid; place-items:center; aspect-ratio:21/8;
  background:rgba(255,255,255,.04);
  border:var(--b) solid rgba(255,255,255,.10);
  border-radius:var(--r); overflow:hidden;
}
.sponsor-card__logo img{
  max-width:100%; max-height:100%; object-fit:contain; display:block; padding:8px 10px;
}

/* Texto del sponsor */
.sponsor-card__meta p{ margin:2px 0 }

/* Media Partners grid */
.brand-logos{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr) }
@media (max-width:900px){ .brand-logos{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .brand-logos{ grid-template-columns:1fr } }

/* Cada logo (partners) */
.brand-logos .logo{
  display:grid; place-items:center; height:56px;
  background:rgba(255,255,255,.04);
  border:var(--b) solid rgba(255,255,255,.10);
  border-radius:var(--r); overflow:hidden;
}
.brand-logos .logo img{
  max-width:90%; max-height:80%; object-fit:contain; display:block;
}

/* nuevo de sponsors */

.sponsors-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .sponsors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sponsor-card__meta h3 {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 4px;
}

.sponsor-card__meta p {
  margin-top: 4px;
  line-height: 1.5;
}

/* === Sponsors === */
.sponsor-heading {
  margin-bottom: 12px;   /* Antes estaba en el style del <h3> */
}

.sponsor-name {
  margin: 4px 0 6px;     /* Antes estaba en el style del <h4> */
}

.sponsor-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;

  /* 🔑 Quitar aspect-ratio fijo */
  /* aspect-ratio:21/8;   <-- QUITAR esta línea */

  background: rgba(255,255,255,.04);
  border: var(--b) solid rgba(255,255,255,.10);
  border-radius: var(--r);
  overflow: hidden;

  /* 🔑 Ajustar tamaño de la caja */
  min-height: 140px;           /* altura mínima para que los logos verticales respiren */
  padding: 12px 18px;          /* espacio interno */
}

.sponsor-card__logo img {
  max-width: 90%;              /* que no sobresalga de la caja */
  max-height: 90%;
  object-fit: contain;         /* mantiene proporción del logo */
  object-position: center;
  display: block;
}


/* =========================
   7) LUGAR (venue)
   ========================= */
.venue-grid{ display:grid; grid-template-columns:1fr; gap:16px }
@media (min-width:900px){ .venue-grid{ grid-template-columns:1fr 1fr } }

.mapph{
  aspect-ratio:16/9; border:var(--b) solid rgba(255,255,255,.10);
  border-radius:var(--r); overflow:hidden; background:#0B0F1C;
}
.venue-card{ padding:16px }
.venue-card h3{ font:700 18px/1.3 "IBM Plex Sans" }
.venue-card ul{ margin-top:8px; padding-left:18px; font:400 14px/1.6 Inter; color:var(--muted) }

/* =========================
   8) TESTIMONIOS & FAQ
   ========================= */
.testi{ padding:16px }
.faq-a{ margin-top:8px; color:var(--muted); font:400 14px/1.6 Inter }
details{
  border:var(--b) solid rgba(255,255,255,.10);
  border-radius:var(--r); padding:12px 14px; background:rgba(255,255,255,.03);
}
details+details{ margin-top:10px }
summary{ cursor:pointer; font:600 16px/1.4 "IBM Plex Sans" }

/* =========================
   9) CONTACTO
   ========================= */
.contact-form{ padding:16px }
.contact-form .grid2{ display:grid; grid-template-columns:1fr; gap:14px 16px }
@media (min-width:700px){ .contact-form .grid2{ grid-template-columns:1fr 1fr } }
.contact-form label{
  display:flex; flex-direction:column; gap:8px;
  font:600 14px/1.3 "IBM Plex Sans"; color:var(--muted);
}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:var(--r);
  border:var(--b) solid var(--line); background:#0B1020; color:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.contact-form textarea{ min-height:160px }
.contact-form input:focus, .contact-form textarea:focus{
  border-color:color-mix(in srgb, var(--accent) 60%, #fff 0%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, #fff 0%);
}
.contact-form .span-2{ grid-column:1 / -1 }
.contact-form .actions{ margin-top:12px }

/* =========================
   10) FOOTER
   ========================= */
.footer{
  border-top:var(--b) solid rgba(255,255,255,.10);
  padding:24px 0; font:400 14px/1.5 Inter; color:var(--muted);
}
.footer .row{
  width:min(var(--container-max), 100% - var(--container-side));
  margin-inline:auto; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer .copy{ display:flex; align-items:center; gap:12px }
.footer .links{ display:flex; gap:16px; flex-wrap:wrap }

/* =========================
   11) FAB WhatsApp
   ========================= */
.whatsapp-fab{
  position:fixed; right:16px; bottom:16px; z-index:1200;
  width:52px; height:52px; border-radius:999px;
  background:#25D366; color:#0E1320;
  display:flex; align-items:center; justify-content:center;
  border:var(--b) solid rgba(0,0,0,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .15s ease, filter .15s ease;
}
.whatsapp-fab:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.whatsapp-fab:focus-visible{ outline:3px solid rgba(255,255,255,.6); outline-offset:3px }
@media (max-width:360px){
  .whatsapp-fab{ right:12px; bottom:12px; width:48px; height:48px }
}


/* =========================
   CTAs de sponsors / feria
   ========================= */

/* Contenedor de CTA */
.spon-cta {
  margin-top: 24px;   /* separación con lo anterior */
  display: flex;
}

/* Si hay más de un bloque seguido, dales separación */
.spon-cta + .spon-cta {
  margin-top: 16px;   /* espacio entre botones consecutivos */
}

.hero-left {
  margin-top: 32px; /* separa todo el bloque de texto de la navbar */
}

/* === Media Partners: logos más grandes y cómodos === */

/* Caja general */
.brand-logos .logo {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 120px;               /* antes 72px → más alto */
  background: rgba(255,255,255,.04);
  border: var(--b) solid rgba(255,255,255,.10);
  border-radius: var(--r);
  overflow: hidden;
  padding: 8px;                /* aire interno */
}

/* Imagen del logo */
.brand-logos .logo img {
  max-height: 100%;            /* ocupa todo el alto disponible */
  max-width: 95%;              /* casi todo el ancho de la caja */
  width: auto;
  height: auto;
  object-fit: contain;         /* mantiene proporción */
  display: block;
}


.whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  width: 72px;       /* un poco más grande */
  height: 72px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .15s ease, filter .15s ease;
}

.whatsapp-fab:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.whatsapp-fab svg,
.whatsapp-fab img {
  width: 40px;   /* tamaño del ícono */
  height: 40px;
}


/* =========================
   TESTIMONIOS EN GRID
   ========================= */
.testi-grid {
  display: grid;
  gap: 20px;                               /* separación entre cards */
  grid-template-columns: 1fr;              /* mobile: 1 columna */
}

@media (min-width: 768px) {
  .testi-grid {
    grid-template-columns: repeat(2, 1fr); /* tablet: 2 columnas */
  }
}

@media (min-width: 1200px) {
  .testi-grid {
    grid-template-columns: repeat(3, 1fr); /* desktop: 3 columnas */
  }
}

/* Cada card de testimonio */
.testi {
  padding: 16px 20px;
  border-radius: var(--r);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  font: 400 15px/1.5 Inter;
  color: var(--text);
}


.below-timeline {
  display: flex;
  align-items: center; /* alinea el texto al medio vertical */
  gap: 12px;           /* espacio entre el botón y el texto */
  flex-wrap: wrap;     /* en mobile, el texto puede bajar debajo del botón */
}

.below-timeline .note {
  font-size: 14px;
  color: var(--muted);
}


.testi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.testi {
  padding: 16px;
}

.testi .quote {
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
}

.testi .author {
  margin-top: 10px;      /* espacio de una línea */
  font-weight: 400;      
  color: var(--muted);   /* gris clarito, podés cambiar a blanco si preferís */
}