/* ───────────────────────────────────────────────────────────── luicalarios.com — landing de conferencias y cursos. Identidad heredada de la semblanza: azul eléctrico sobre negro. Diseño comprometido con un solo tema (oscuro): todos los colores se pintan explícitos, nada depende del tema del visitante. ───────────────────────────────────────────────────────────── */ :root{ --negro:#08090C; --negro-2:#0E1015; --negro-3:#141721; --linea:#1E2230; --hueso:#F3F4F8; --gris:#9096A6; --gris-2:#6B7183; --azul:#152AFF; /* el de marca — fondos y botones */ --azul-luz:#6B7BFF; /* el legible sobre negro — textos */ --azul-tenue:rgba(21,42,255,.14); --display:"Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; --texto:"Inter", "Helvetica Neue", Arial, sans-serif; --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ancho:1180px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} } body{ margin:0; background:var(--negro); color:var(--hueso); font-family:var(--texto); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block;} a{color:var(--azul-luz); text-decoration:none;} a:hover{color:#93A0FF;} :focus-visible{outline:2px solid var(--azul-luz); outline-offset:3px; border-radius:4px;} .wrap{max-width:var(--ancho); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.2rem);} section{padding:clamp(3.4rem,8vw,6.5rem) 0; border-top:1px solid var(--linea);} section:first-of-type{border-top:0;} h1,h2,h3,.btn,.cifra{font-family:var(--display); letter-spacing:-.02em;} h2{font-size:clamp(1.75rem,4.4vw,2.9rem); font-weight:800; line-height:1.08; margin:0 0 1rem; text-wrap:balance;} h3{font-size:1.12rem; font-weight:700; margin:0; letter-spacing:-.01em;} p{margin:0 0 1rem; max-width:64ch;} p:last-child{margin-bottom:0;} .eyebrow{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--azul-luz); margin:0 0 1rem; display:flex; align-items:center; gap:.65rem; } .eyebrow::after{content:""; height:1px; flex:1; background:var(--linea); max-width:110px;} .sub{color:var(--gris); font-size:1.05rem; max-width:62ch;} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-size:.92rem; font-weight:700; letter-spacing:.01em; padding:.92rem 1.6rem; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:transform .12s ease, background .15s ease, border-color .15s ease; } .btn:hover{transform:translateY(-1px);} .btn-p{background:var(--azul); color:#fff;} .btn-p:hover{background:#2A3CFF; color:#fff;} .btn-s{background:transparent; color:var(--hueso); border-color:#2A3040;} .btn-s:hover{border-color:var(--azul-luz); color:var(--hueso);} .btn-sm{padding:.6rem 1.05rem; font-size:.82rem;} /* ── Placeholders de imagen ──────────────────────────────── */ .ph{ position:relative; display:grid; place-items:center; text-align:center; padding:1.5rem; border:1px dashed rgba(107,123,255,.4); border-radius:14px; overflow:hidden; background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px), linear-gradient(160deg,#141721 0%,#0A0B10 100%); } .ph b{display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--azul-luz); font-weight:500;} .ph span{display:block; font-family:var(--mono); font-size:.68rem; color:var(--gris-2); margin-top:.45rem;} /* ── Barra superior ──────────────────────────────────────── */ header.top{ position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(8,9,12,0); border-bottom:1px solid transparent; transition:background .25s ease, border-color .25s ease; backdrop-filter:saturate(140%) blur(10px); } header.top.on{background:rgba(8,9,12,.9); border-bottom-color:var(--linea);} header.top .wrap{display:flex; align-items:center; gap:1.2rem; height:66px;} .marca{font-family:var(--display); font-weight:800; font-size:.95rem; letter-spacing:.02em; color:var(--hueso);} header.top nav{margin-left:auto; display:flex; gap:1.4rem;} header.top nav a{font-size:.82rem; font-weight:500; color:var(--gris); letter-spacing:.01em;} header.top nav a:hover{color:var(--hueso);} header.top .btn{margin-left:1.2rem;} @media (max-width:900px){ header.top nav{display:none;} header.top .btn{margin-left:auto;} } header.top .corta{display:none;} /* Debajo de 900 el menú ya no está, así que el botón se queda solo con la marca: etiqueta corta y sin posibilidad de desbordar la barra. */ @media (max-width:900px){ header.top .larga{display:none;} header.top .corta{display:inline;} header.top .wrap{height:58px; gap:.6rem; min-width:0;} .marca{font-size:.82rem; white-space:nowrap;} header.top .btn{padding:.55rem .95rem; font-size:.78rem; margin-left:auto; flex:0 0 auto;} } /* Cinturón de seguridad: ningún bloque debe poder empujar la página de lado. */ html, body{overflow-x:hidden; max-width:100%;} /* ── Hero ────────────────────────────────────────────────── */ /* La foto es panorámica (2.33:1). Si el hero fuera tan alto como la pantalla, 'cover' recortaría los costados y partiría a la mitad el texto proyectado. Por eso el hero es una banda: alto atado al ancho, casi sin recorte. */ .hero{position:relative; min-height:clamp(520px,56vw,760px); display:flex; align-items:flex-end; padding:0; border-top:0; overflow:hidden;} /* La foto. El filtro es la mitad del trabajo de enfriado: le baja la saturación al naranja de tungsteno y la aleja un punto del rojo, sin volverla azul. La otra mitad la hacen las capas de ::after. */ .hero-foto{position:absolute; inset:0; z-index:0; background-image:url("img/hero2.jpg"); /* Encuadre calculado, no 'cover': ampliando un 38% y anclando a la izquierda, él queda a la derecha del bloque de texto en vez de detrás. De paso se recorta el plafón, que es la parte que nada aporta, y se conserva el público del primer plano. */ background-size:auto 138%; background-position:0% 74%; background-repeat:no-repeat; /* La foto ya viene fría de fábrica (luz azul de escenario), así que aquí solo se oscurece para que el titular pese. Nada de enfriarla más. */ filter:brightness(.68) saturate(.88) contrast(1.06); transform:scale(1.01); } /* Dos capas: apoyo oscuro desde la izquierda para el texto, y caída al negro por abajo para coser el hero con el resto de la página. */ .hero-foto::after{content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(6,8,16,.88) 0%, rgba(6,8,16,.62) 26%, rgba(6,8,16,.18) 44%, rgba(6,8,16,0) 62%), linear-gradient(180deg, rgba(8,9,12,.30) 0%, rgba(8,9,12,0) 24%, rgba(8,9,12,.55) 78%, var(--negro) 100%); } @media (max-width:900px){ .hero{min-height:100svh;} .hero .wrap{padding-top:5.5rem;} .hero-foto{background-size:auto 118%; background-position:58% 24%;} .hero-foto::after{ background:linear-gradient(180deg, rgba(8,9,12,.42) 0%, rgba(8,9,12,.24) 24%, rgba(8,9,12,.88) 70%, var(--negro) 100%); } } /* width:100% es indispensable: dentro de un flex, .wrap se encogería al ancho del contenido y el titular dejaría de caer en la misma columna que el logo y que el resto de las secciones. */ .hero .wrap{position:relative; z-index:1; width:100%; padding-top:7rem; padding-bottom:clamp(2rem,4vw,3.2rem);} .hero h1{ font-size:clamp(2.1rem,4.6vw,3.6rem); font-weight:800; line-height:1.02; margin:0 0 1.1rem; max-width:12ch; text-wrap:balance; } .hero .cred{ font-size:clamp(.98rem,1.9vw,1.12rem); font-weight:600; color:var(--hueso); max-width:34ch; margin:0 0 .6rem; line-height:1.45; } .hero .espina{font-size:clamp(.92rem,1.7vw,1.02rem); color:var(--gris); max-width:36ch; margin:0 0 1.6rem;} .hero .acciones{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.8rem;} .sellos{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.3rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.14);} .sellos .lab{font-family:var(--mono); font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gris-2);} .sellos b{font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--gris);} /* ── Números ─────────────────────────────────────────────── */ .nums{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:14px; overflow:hidden;} .nums > div{background:var(--negro-2); padding:1.6rem 1.3rem;} .cifra{display:block; font-size:clamp(1.9rem,4.6vw,2.9rem); font-weight:800; color:var(--hueso); line-height:1; font-variant-numeric:tabular-nums;} .cifra em{font-style:normal; color:var(--azul-luz);} .nums small{display:block; margin-top:.55rem; font-size:.78rem; color:var(--gris); line-height:1.4;} /* ── Video ───────────────────────────────────────────────── */ .video{aspect-ratio:16/9; width:100%;} /* ── Rejillas ────────────────────────────────────────────── */ .grid{display:grid; gap:.9rem;} .g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));} .g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));} .card{background:var(--negro-2); border:1px solid var(--linea); border-radius:14px; padding:1.4rem 1.5rem;} .card p{color:var(--gris); font-size:.94rem; margin:.5rem 0 0;} .card .n{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--azul-luz); display:block; margin-bottom:.65rem;} /* Temas — desplegables */ details.tema{background:var(--negro-2); border:1px solid var(--linea); border-radius:14px; margin-bottom:.7rem; overflow:hidden;} details.tema[open]{border-color:#2A3040;} details.tema summary{ list-style:none; cursor:pointer; padding:1.15rem 1.4rem; display:flex; align-items:center; gap:1rem; } details.tema summary::-webkit-details-marker{display:none;} details.tema summary .n{font-family:var(--mono); font-size:.72rem; color:var(--azul-luz); flex:none;} details.tema summary h3{flex:1; min-width:0;} details.tema summary .mas{font-family:var(--mono); font-size:1.1rem; color:var(--gris-2); flex:none; transition:transform .2s ease;} details.tema[open] summary .mas{transform:rotate(45deg); color:var(--azul-luz);} details.tema .cuerpo{padding:0 1.4rem 1.35rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.1rem;} details.tema .cuerpo h4{font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gris-2); margin:0 0 .35rem; font-weight:500;} details.tema .cuerpo p{font-size:.93rem; color:var(--gris); margin:0;} /* Sectores */ .sector{background:var(--negro-2); border:1px solid var(--linea); border-radius:14px; padding:1.3rem 1.4rem; border-top:2px solid var(--azul);} .sector h3{margin-bottom:.45rem;} .sector p{color:var(--gris); font-size:.92rem; margin:0 0 .9rem;} .sector .quien{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--gris-2); border-top:1px solid var(--linea); padding-top:.7rem;} /* Diferenciador */ .dif{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:14px; overflow:hidden;} .dif > div{background:var(--negro-2); padding:1.6rem 1.5rem;} .dif .n{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--azul-luz); display:block; margin-bottom:.7rem;} .dif p{color:var(--gris); font-size:.93rem; margin:.5rem 0 0;} /* Marcas */ .marcas{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:14px; overflow:hidden;} .marcas > div{background:var(--negro-2); padding:1.25rem 1.35rem;} .marcas strong{display:block; font-family:var(--display); font-weight:700; font-size:1rem; margin-bottom:.2rem;} .marcas span{font-size:.85rem; color:var(--gris-2);} /* Testimonios */ .testi{background:var(--negro-2); border:1px solid var(--linea); border-radius:14px; padding:1.5rem;} .testi .ph{min-height:120px; margin-bottom:1rem;} .testi .quien{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--gris-2);} /* ── Formulario ──────────────────────────────────────────── */ .solicitud{background:linear-gradient(165deg,#111524 0%,#0A0C12 100%); border:1px solid #232840; border-radius:18px; padding:clamp(1.5rem,4vw,2.6rem);} .cierre{font-family:var(--display); font-weight:800; font-size:clamp(1.3rem,3vw,1.9rem); letter-spacing:-.02em; margin:0 0 .5rem; max-width:20ch;} form .fila{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.85rem; margin-bottom:.85rem;} form label{display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gris-2); margin-bottom:.4rem;} form input, form select{ width:100%; background:#0A0C12; border:1px solid #262B3B; border-radius:8px; padding:.78rem .85rem; color:var(--hueso); font-family:var(--texto); font-size:.95rem; } form input::placeholder{color:#4E5464;} form input:focus, form select:focus{outline:none; border-color:var(--azul-luz);} form .acciones{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-top:1.3rem;} form .nota{font-size:.82rem; color:var(--gris-2); margin:.9rem 0 0;} /* ── Instagram ───────────────────────────────────────────── */ .ig{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(1.4rem,4vw,3rem); align-items:center;} @media (max-width:820px){ .ig{grid-template-columns:1fr;} } .ig-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem;} .ig-grid .ph{aspect-ratio:9/16;} .ig-grid .ph b{font-size:.6rem; letter-spacing:.1em;} .redes{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem;} .redes a{font-family:var(--mono); font-size:.75rem; color:var(--gris); border:1px solid var(--linea); border-radius:999px; padding:.4rem .85rem;} .redes a:hover{border-color:var(--azul-luz); color:var(--hueso);} /* ── Salidas ─────────────────────────────────────────────── */ .proy{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:14px; overflow:hidden;} .proy a{display:flex; flex-direction:column; background:var(--negro-2); padding:1.35rem 1.4rem; color:var(--hueso);} .proy a:hover{background:var(--negro-3); color:var(--hueso);} /* Isotipo, no logotipo completo. Tres de las seis marcas traen el nombre dentro del logo, y puesto así el nombre salía dos veces y las placas quedaban de anchos disparejos. Con solo el símbolo, en un cuadro idéntico para las seis, la rejilla se lee pareja. El cuadro es apenas más claro que la tarjeta: le da borde al isotipo de Aura, que es negro sobre negro. */ .proy .placa{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:13px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); align-self:flex-start; margin-bottom:1rem; } .proy .placa img, .proy .placa svg{width:34px; height:34px; object-fit:contain; display:block;} .proy strong{display:block; font-family:var(--display); font-weight:700; font-size:1rem;} .proy span{display:block; font-size:.85rem; color:var(--gris-2); margin-top:.15rem;} .proy em{display:block; font-style:normal; font-family:var(--mono); font-size:.68rem; color:var(--azul-luz); margin-top:auto; padding-top:.8rem;} footer{border-top:1px solid var(--linea); padding:2.6rem 0 3.2rem; color:var(--gris-2); font-size:.86rem;} footer .filas{display:flex; flex-wrap:wrap; gap:1rem 2.2rem; align-items:baseline;} footer a{color:var(--gris);} /* ── Ocultos por no estar listos (2026-09-08) ────────────── Nada fue borrado. Para volver a mostrar algo, quita su atributo data-oculto. Para mostrar todo, borra esta regla. */ [data-oculto]{display:none !important;} .aviso{ background:var(--azul-tenue); border:1px dashed rgba(107,123,255,.45); border-radius:12px; padding:1rem 1.2rem; margin-top:1.4rem; font-family:var(--mono); font-size:.74rem; color:var(--azul-luz); line-height:1.7; } /* ── Teléfonos angostos ────────────────────────────────────── VA AL FINAL A PROPOSITO. Estas reglas tienen la misma especificidad que las de arriba (.hero .acciones), así que si estuvieran antes las ganaría la declaración posterior y el bloque no serviría de nada. */ @media (max-width:560px){ body{font-size:16px;} .hero .acciones{flex-direction:column; align-items:stretch; gap:.6rem;} .hero .acciones .btn{width:100%;} header.top .btn{font-size:.74rem; padding:.5rem .8rem;} .btn{padding:.85rem 1.1rem;} .sellos{gap:.4rem 1rem;} /* En pantalla angosta la foto y el titular se estorban: no hay ancho para que él quepa a un lado del texto, y encimarlos deja al conferencista invisible. Se separan — banda de foto arriba, texto debajo sobre negro. */ .hero{min-height:0; display:block; padding-bottom:2.6rem;} .hero-foto{position:relative; inset:auto; height:46svh; min-height:290px; background-size:cover; background-position:46% 44%; filter:brightness(.82) saturate(.92) contrast(1.04); transform:none;} .hero-foto::after{background:linear-gradient(180deg, rgba(8,9,12,.30) 0%, rgba(8,9,12,0) 34%, rgba(8,9,12,.72) 84%, var(--negro) 100%);} .hero .wrap{padding-top:1.9rem;} .hero h1{max-width:none;} } /* ═════ /ia/ — "Lo que pasa con la IA" (radar.py) ═════════════════════ Todo lo de arriba es el