/* ========= Base (limpio, sin comentarios abiertos) ========= */ :root{ --primary:#0b4aa2; --secondary:#1e6ad6; --accent:#ffd166; --ink:#0f172a; --muted:#64748b; --bg:#f6f8fb; --card:#ffffff; --ring:#e2e8f0; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth;} body{ margin: 0; font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #1f2937; /* CAPAS: gradientes (encima) + imagen (debajo) */ background: radial-gradient(circle at 30% 40%, rgba(14,165,233,0.18), transparent 70%), radial-gradient(circle at 70% 60%, rgba(59,130,246,0.15), transparent 70%), url("../images/bg.svg"); /* Ajustes por capa (3 valores = 3 capas, en el mismo orden) */ background-position: 30% 40%, 70% 60%, center; background-size: 200% 200%, 200% 200%, cover; background-repeat: no-repeat, no-repeat, no-repeat; /* Efecto “parallax” sutil; fija la imagen, no los gradientes */ background-attachment: scroll, scroll, fixed; } h1{ mix-blend-mode: plus-lighter; color: #0a49a2; font-size: 4rem; margin-bottom: 0; line-height: 4rem; } .is-home h2.highlight{ mix-blend-mode: plus-lighter; color: #0a49a2; font-size: 4rem; margin-bottom: 0; line-height: 4rem; } .text-muted{ color: #0a49a2; font-size: 1.25rem; margin-bottom: 0; line-height: 1.5; } .is-home h2{ mix-blend-mode: plus-lighter; color: #0a49a2; font-size: 3rem; line-height: 4rem; } a{ color:var(--secondary); text-decoration:none; } a:hover{ text-decoration:underline; } .container{ max-width:1100px; margin:0 auto; padding:1rem; } .session-table{ background-color: #0b4aa21f; border-radius: 20px; } .session-head{ padding: 1rem; padding-bottom: 0; } .session-table .muted{ padding: 1rem; margin: 0; } .session .cards{ margin-bottom: 2rem; } .session-time{ font-size: 1.5rem; } .subheader{ display: flex; align-items: flex-end; justify-content: space-between; } .subheader .filters{ position: sticky; top: 50px; } .bio{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 1rem; background: #ffffffc9; display: none; backdrop-filter: saturate(140%) blur(8px); } .bio p{ font-size: 14px; } .speaker-card:hover .bio{ display: block; } /* ========= Header por defecto (páginas internas) ========= */ .site-header{ position: sticky; top:0; z-index:20; background: linear-gradient(to right, #0b4aa2 60%, #86f6a8 100%); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); border-radius: 0 0 32px 0; } .site-header .brand{ color:#fff; font-weight:900; letter-spacing:.3px; display:inline-flex; gap:.5rem; align-items:baseline; } .site-header nav ul{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; justify-content: center; gap: 6rem; letter-spacing: 1px;} .site-header nav a{ color:#e6eefc; font-weight:500; } /* ========= Header overlay SOLO en el home ========= */ /* Agregaremos la clase .is-home al (ver más abajo) */ .is-home .site-header{ position: fixed; inset: 0 0 auto 0; z-index:60; background: transparent; box-shadow:none; } .is-home .site-header nav a{ color:#ffffff; } .is-home .site-header.scrolled{ backdrop-filter: saturate(140%) blur(8px); background: #0a49a282; box-shadow:0 10px 24px rgba(2,12,27,.12); } /* En home, el main NO necesita empuje superior */ .main{ padding-top: 72px; } .is-home .main{ padding-top: 0; } /* ========= Hero genérico (para otras secciones) ========= */ .hero{ border-radius: 0 0 2rem; padding:2rem; margin:0 0 2rem 0; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; } .hero h1{ margin:0 0 .25rem; font-size:clamp(1.8rem,3.5vw,2.6rem); } .event-meta{ opacity:.95; margin:.25rem 0 1rem; } .btn{ display: inline-block; padding: .75rem 1rem; font-weight: 500; background: #0a49a2; border-radius: .8rem; border: none; mix-blend-mode: plus-lighter; color: #ffffff; letter-spacing: 1px; } /* ========= Hero portada a pantalla completa ========= */ .hero--portada{ position:relative; min-height:100dvh; isolation:isolate; overflow:hidden; display:grid; place-items:center; } .hero--portada .hero-layer{ position:absolute; inset:0; } .hero--portada .hero-bg{ background-image:url("../images/portada.png"); background-size:cover; background-position:center; background-repeat: none; z-index:-2; } .hero--portada .hero-overlay{ z-index:-1; background: linear-gradient(to right, #0b4aa2 50%, #7dffa4 100%); opacity: 0.5; } .hero-content{ position:relative; width:100%; display:grid; grid-template-columns:1.5fr 1fr; align-items:end; gap:1rem; color:#fff; } .hero-logo{ width:min(560px,90%); height:auto; align-self:center; justify-self:start; filter:drop-shadow(0 8px 24px rgba(0,0,0,.25)); } .hero-year{ width:min(300px,40vw); height:auto; justify-self:end; align-self:center; opacity:.25; position: fixed; right: -30px; top: 120px; } /* .hero-cta{ position:absolute; left:clamp(16px,5vw,48px); bottom:clamp(16px,5vw,48px); color:#fff; } */ .hero-cta .count-grid div{ background: rgb(55 121 215); mix-blend-mode: lighten;} .hero-cta .btn{ box-shadow:0 8px 20px rgba(0,0,0,.25); margin-top:.75rem; } @media (max-width:920px){ .hero-content{ grid-template-columns:1fr; gap:.5rem; place-items:center; padding-top:4rem; } .hero-logo{ justify-self:center; } .hero-year{ position:absolute; right:4%; top:6%; width:200px; } } @media (max-width:520px){ .hero-year{ width:150px; right:3%; top:6%; opacity:.22; } } /* ========= Countdown ========= */ .countdown{ margin:1rem 0; } .count-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; } .count-grid div{ background:rgba(255,255,255,.15); border-radius:.8rem; text-align:center; padding:.75rem; } .count-grid span{ display:block; font-size:clamp(1.2rem,3.5vw,2rem); font-weight:900; } /* ========= Cards, listas, galería ========= */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2rem; padding-top: 1rem;} .card{ background:var(--card); border:1px solid var(--ring); border-radius:1rem; padding:1rem; box-shadow:0 10px 24px rgba(2,12,27,.06); } .muted{ color: #3730a3; } .grid-3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } .list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.5rem; } .list a{ background:white; padding:.75rem; border-radius:.75rem; display:block; box-shadow:0 4px 14px rgba(0,0,0,.05); } .gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.5rem; } .gallery figure{ margin:0; } .gallery img{ width:100%; height:100%; object-fit:cover; border-radius:.75rem; } /* ========= Agenda ========= */ .schedule{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--ring); border-radius:1rem; overflow:hidden; box-shadow:0 8px 22px rgba(2,12,27,.06); margin:.75rem 0 1.25rem; } .schedule thead{ background:#eef2ff; color:#1e3a8a; font-weight:900; } .schedule th, .schedule td{ padding:.7rem .9rem; border-bottom:1px solid var(--ring); vertical-align:top; text-align: left;} .schedule .dur, .schedule .time{ font-weight:900; color:#0b4aa2; } .break, .parallel{ display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; border-radius:.8rem; font-weight:800; border:1px solid var(--ring); } .break{ background:#fffbea; color:#7c5a00; border-color:#fde68a; margin-bottom: 1.5rem;} .parallel{ background:#eef2ff; color:#243189; border-color:#c7d2fe; } .room span{ background:#e0e7ff; color:#3730a3; font-weight:500; padding:.25rem .5rem; border-radius:.5rem; font-size:.85rem; display:inline-block; } /* ========= Speaker card ========= */ .avatar{ width:70%; aspect-ratio:1/1; border-radius: 20px 20px 50% 8px; overflow:hidden; background:#eef2ff; margin-bottom:.6rem; } .avatar img{ width:85%; height:100%; object-fit:cover; display:block; } .tag{ display:inline-block; margin-top:.25rem; padding:.25rem .5rem; font-size:.75rem; font-weight:600; background:#eef2ff; color:#243189; border-radius:.35rem; } .badge{ display:inline-block; font-size:.75rem; font-weight:900; line-height:1; padding:.35rem .55rem; border-radius:.5rem; } .badge-speaker{ background: #86f6a8; color: #336d49; font-weight: 500; } .badge-moderador{ background:#e7f0fb; color:#0b4aa2; font-weight: 500; } .speaker-card{ background:#fff; border:1px solid #e5e7eb; border-radius:1rem; overflow:hidden; box-shadow:0 10px 24px rgba(2,12,27,.06); position: relative;} .speaker-media{ position:relative; padding:1rem 1rem 0 1rem; } .speaker-media .frame{ position:relative; border-radius:.8rem; overflow:hidden; background:#eef2f7; } .speaker-media img{ width:100%; height:auto; display:block; object-fit:cover; } .speaker-like{ position:absolute; top:.8rem; right:.8rem; background:#fff; color:#111827; border-radius:999px; padding:.35rem .6rem; display:flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.12); } .speaker-quote{ position:absolute; right:1.2rem; bottom:-.6rem; font-size:3.8rem; line-height:1; font-weight:900; color:#111827; text-shadow:0 2px 0 #fff; } .speaker-body{ padding:1rem 1.2rem 1.1rem; } .speaker-body p{ margin:.4rem 0 0; color:#475569; line-height:1.6; } .speaker-footer{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.9rem 1.2rem 1.2rem; border-top:1px solid #e5e7eb; } .speaker-meta{ min-width:0; } .speaker-name{ font-weight:800; font-size:1.05rem; color:#0f172a; margin:0; } .speaker-org{ color:#6b7280; font-size:.9rem; margin-top:.2rem; } .speaker-sign img{ height:36px; width:auto; display:block; opacity:.9; } .speaker-card h3{ margin-bottom: 0; font-weight: 600; } @media (max-width:480px){ .speaker-like{ top:.6rem; right:.6rem; } .speaker-quote{ font-size:3.2rem; right:.9rem; bottom:-.5rem; } } /* ========= Footer ========= */ /* Secciones con respiración */ .section { padding: 5rem 0; } /* Split 2 cols */ .split-2{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.25rem; } @media (max-width: 920px){ .split-2{ grid-template-columns: 1fr; } } /* Hotel destacado */ .hotel{ align-items:center; } .hotel-media{ margin:0; border-radius: 1rem; overflow:hidden; box-shadow: 0 10px 24px rgba(2,12,27,.10); } .hotel-media img{ width:100%; height:100%; object-fit:cover; display:block; } .hotel-body h3{ margin: .25rem 0 .35rem; font-size: 2rem; font-weight: 600; } .hotel-bullets{ margin:.5rem 0 1rem; padding-left: 1.1rem; } .hotel-bullets li{ margin:.25rem 0; } .hotel-text-muted{ color: #0a49a2; font-size: 1.1rem; margin-bottom: 0; line-height: 1.5; } /* Footer con logos */ .footer-grid{ display:grid; grid-template-columns: 1fr auto; gap: 1rem; align-items:center; } .footer-brand .footer-logo{ height: 80px; width:auto; display:block; margin-bottom:.35rem; max-width: 100%; } .footer-orgs{ text-align:right; } .footer-orgs .label{ display:block; font-weight:700; margin-bottom:.4rem; color:#4b72a8; } .footer-orgs.blanco .label{ color: #fff; font-size: 14px; } .org-logos{ display:flex; gap:1rem; align-items:center; justify-content:flex-end; } .org-logo{ height: 110px; width:auto; display:block; filter: grayscale(0) brightness(1.05); } @media (max-width: 720px){ .footer-grid{ grid-template-columns: 1fr; text-align:center; } .footer-orgs{ text-align:center; } .org-logos{ justify-content:center; } } /* ==== Ajustes globales móviles ==== */ :root{ --container-pad: 1rem; } .container{ padding-left: var(--container-pad); padding-right: var(--container-pad); } /* Tipografía más cómoda en pantallas pequeñas */ @media (max-width: 600px){ h1{ font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.15; } h2{ font-size: clamp(1.2rem, 4.8vw, 1.5rem); } .btn{ padding:.7rem .9rem; font-size:.95rem; } } /* ==== Header responsive (hamburger) ==== */ .site-header{ height: 64px; display:flex; align-items:center; } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; } .main-nav ul{ display:flex; gap:1rem; } .mobile-toggle{ display:none; appearance:none; border:0; background:rgba(255,255,255,.12); width:42px; height:42px; border-radius:.65rem; color:#fff; font-size:1.2rem; } .mobile-toggle:focus{ outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; } /* Modo overlay en home mantiene contraste en enlaces */ .is-home .mobile-toggle{ background:rgba(255,255,255,.18); } /* Menú colapsable en móvil */ @media (max-width: 860px){ .mobile-toggle{ display:inline-grid; place-items:center; } .main-nav{ position: fixed; inset: 64px 0 auto 0; /* bajo el header */ background: rgba(9, 46, 102, .97); backdrop-filter: blur(6px); transform: translateY(-8px); opacity:0; pointer-events:none; transition: opacity .25s ease; padding: .5rem 0; z-index:59; } .main-nav.open{ opacity:1; pointer-events:auto; } .main-nav ul{ flex-direction:column; align-items:center; gap:.25rem; padding:.5rem 0; margin:0; } .main-nav a{ display:block; padding:.8rem 1rem; font-size:1.05rem; } } /* ==== Hero portada mobile ==== */ .hero--portada{ min-height: 100svh; } .hero-content{ grid-template-columns: 1fr 1fr; } .log svg, .log img{ max-width: 100%; height:auto; display:block; } @media (max-width: 920px){ .hero-content{ grid-template-columns: 1fr; gap:.75rem; place-items: center; padding-top: 3.5rem; padding-bottom: 4.5rem; } } @media (max-width: 600px){ .hero-year{ position: absolute; right: 4%; top: 6%; width:min(140px, 35vw); opacity:.22; } .hero-cta{ position: static; margin-top: .5rem; width: 100%; } .hero-cta .count-grid{ grid-template-columns: repeat(2,1fr); gap:.4rem; } .hero-cta .count-grid div{ padding:.6rem; } .hero-cta .btn{ width: 100%; text-align:center; } } /* Countdown tarjetas legibles en mobile */ @media (max-width: 360px){ .count-grid span{ font-size: 1.2rem; } .count-grid small{ font-size: .75rem; } } /* ==== Hotel destacado (split → stack) ==== */ .split-2{ grid-template-columns: 1.15fr .85fr; gap: 1.25rem; } @media (max-width: 920px){ .split-2{ grid-template-columns: 1fr; } } .hotel-media{ aspect-ratio: 16/9; } .hotel-media img{ width:100%; height:100%; object-fit: cover; } /* ==== Cards y listas espaciadas en mobile ==== */ @media (max-width: 540px){ .cards{ gap: 1rem; } .card{ padding: .9rem; } .list{ grid-template-columns: 1fr; } } /* ==== Galería responsive ==== */ .gallery{ gap: .6rem; } @media (max-width: 920px){ .gallery{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px){ .gallery{ grid-template-columns: 1fr; } } /* ==== Footer responsive con logos ==== */ .footer-grid{ grid-template-columns: 1fr auto; gap: 1rem; } @media (max-width: 720px){ .footer-grid{ grid-template-columns: 1fr; text-align: center; } .footer-orgs .label{ margin-top:.75rem; } .org-logos{ justify-content: center; flex-wrap: wrap; } .org-logo{ height: 76px; } } /* ==== Toques finales mobile ==== */ /* Evita que el overlay tape el contenido al hacer scroll en iOS */ @supports (-webkit-touch-callout: none){ .site-header.scrolled{ background: rgba(9, 46, 102, .60); } } /* Evita desbordes horizontales por SVG/imagenes */ html, body{ overflow-x: hidden; } .log{ width: 100%; } /* Estados del formulario */ .form input:required:invalid, .form select:required:invalid, .form textarea:required:invalid{ border-color:#fca5a5; } .form input:required:valid, .form select:required:valid, .form textarea:required:valid{ border-color:#86efac; } .form .checkbox input{ margin-right:.5rem; width: auto; } /* ========= Formularios ========== */ .form { background: var(--card); padding: 2rem; border-radius: 1rem; box-shadow: 0 8px 22px rgba(2,12,27,.06); display: grid; gap: 1.5rem; } .form label { font-weight: 600; font-size: .9rem; color: var(--ink); display: block; margin-bottom: .35rem; } .form input, .form select, .form textarea { width: 100%; padding: .75rem 1rem; border: 1px solid var(--ring); border-radius: .65rem; font-size: 1rem; font-family: "Poppins", system-ui, sans-serif; transition: border-color .2s, box-shadow .2s; } .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(30,106,214,.2); outline: none; } .form textarea { min-height: 120px; resize: vertical; } .form .checkbox { display: flex; align-items: center; gap: .5rem; font-size: .9rem; } .form .checkbox input { margin: 0; } .form .btn { align-self: start; justify-self: start; background: var(--secondary); color: #fff; border-radius: .65rem; padding: .85rem 1.5rem; font-size: 1rem; font-weight: 700; transition: background .2s; mix-blend-mode: normal; } .form .btn:hover { background: #0b4aa2; } /* Estados */ .form input:required:invalid, .form select:required:invalid, .form textarea:required:invalid { border-color: #fca5a5; } .form input:required:valid, .form select:required:valid, .form textarea:required:valid { border-color: #86efac; } .cards input[type="checkbox"] { margin-right: .5rem; transform: scale(1.2); } .cards label.card { cursor: pointer; transition: transform .2s, box-shadow .2s; } .cards label.card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); } .grid-2, .grid-3 { display: grid; gap: 1rem; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* ========================= Títulos (h2) y Subheader ========================= */ /* h2 base más consistente */ h2{ font-weight: 700; letter-spacing: .2px; margin: 0 0 .75rem; color: #0a49a2; font-size: clamp(1.5rem, 2.8vw, 2rem); /* desktop cómodo */ line-height: 1.2; } /* Variantes del home */ .is-home h2{ font-size: clamp(1.8rem, 4.5vw, 3rem); line-height: 1.15; margin-bottom: 2rem; } .is-home h2.highlight{ font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.1; } /* Texto secundario debajo de títulos */ .text-muted{ color:#0a49a2; font-weight: 500; margin: .25rem 0 0; font-size: clamp(1rem, 2.5vw, 1.15rem); line-height: 1.45; } /* Subheader: título + filtros/acciones */ .subheader{ display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; flex-wrap: wrap; /* evita desbordes en tablet */ } /* Contenedor de filtros/botones */ .subheader .filters{ position: sticky; top: 64px; /* bajo el header */ display: flex; gap: .5rem; align-items: center; } /* ======= Mobile-first tweaks ======= */ @media (max-width: 720px){ /* h2 más legibles y sin saltos grandes */ h2{ font-size: clamp(1.25rem, 5.5vw, 1.6rem); line-height: 1.2; margin-bottom: .5rem; } .is-home h2{ font-size: clamp(1.4rem, 6vw, 1.9rem); } .is-home h2.highlight{ font-size: clamp(1.6rem, 7vw, 2.2rem); } .text-muted{ font-size: clamp(.95rem, 4.2vw, 1.05rem); line-height: 1.4; } /* Subheader apilado, respiración y full-width para filtros */ .subheader{ flex-direction: column; align-items: flex-start; gap: .65rem; margin-bottom: 1rem; } .subheader .filters{ position: static; /* quita sticky en mobile */ width: 100%; display: grid; grid-template-columns: 1fr 1fr; /* 2 columnas compactas */ gap: .5rem; } /* Si hay más de dos controles, los dejamos fluir */ .subheader .filters > *{ min-width: 0; /* evita que inputs rompan el layout */ } } /* Teléfonos muy estrechos */ @media (max-width: 380px){ .subheader .filters{ grid-template-columns: 1fr; /* 1 columna */ } } /* ===== Patrocinadores: grid y tarjetas solo logo ===== */ .section-sponsors .sponsor-tier { margin-bottom: 2.5rem; } .section-sponsors .sponsor-tier__title { margin:.25rem 0 1rem; font-size:1.35rem; } /* Grid más flexible para logos */ .section-sponsors .sponsor-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 1rem; } @media (max-width: 1024px) { .section-sponsors .sponsor-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); } } @media (max-width: 640px) { .section-sponsors .sponsor-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); } } /* Tarjeta solo con logo */ .sponsor-card { display: flex; align-items: center; justify-content: center; border-radius: 14px; border: 1px solid var(--sp-border, #e6e6e6); background: var(--sp-bg, #fff); padding: 0.5rem; min-height: 120px; position: relative; overflow: hidden; } /* Barra de acento a la izquierda (mantiene color por tier) */ .sponsor-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background: var(--sp-accent, #e5e7eb); } .sponsor-card__logo { width: 100%; display:flex; align-items:center; justify-content:center; } .sponsor-card__logo img { max-width: 80%; max-height: 87px; object-fit: contain; } .logo-placeholder { width: 80%; height: 80px; border: 1px dashed #cfcfcf; border-radius: 10px; } /* ===== Paletas por tier ===== */ .sponsor-tier--platinum .sponsor-card { --sp-bg: linear-gradient(180deg, #f7f8fa, #ffffff); --sp-border: #e3e4e8; --sp-accent: #b7bcc6; } .sponsor-tier--gold .sponsor-card { --sp-bg: #fff8e1; --sp-border: #ffe3a8; --sp-accent: #d4af37; } .sponsor-tier--silver .sponsor-card { --sp-bg: #f6f7f8; --sp-border: #e2e5e9; --sp-accent: #c0c0c0; } .sponsor-tier--cooper .sponsor-card { --sp-bg: #fff3ea; --sp-border: #ffd9c2; --sp-accent: #b87333; } .sponsor-tier--apoyos .sponsor-card { --sp-bg: #f0f6ff; --sp-border: #d7e6ff; --sp-accent: #3b82f6; }