/* ========================================================================= Solinco Mexico - hoja de estilo del sitio Sigue el lenguaje visual de solincosports.com: negro, mayusculas condensadas, imagen a sangre y un rojo que solo aparece donde hay que hacer clic. El rojo es acento, no decoracion: si se usa en todos lados deja de llamar la atencion, que es justo para lo que sirve. ========================================================================= */ /* ---------- TIPOGRAFIAS (inicio) ---------- Las dos familias de la marca, servidas desde aqui. United Sans es la condensada de los titulos; Geomanist es la del texto corrido. font-display:swap para que el texto se lea aunque la fuente tarde: una portada muda mientras baja una fuente es una portada perdida. */ @font-face{font-family:"United Sans";src:url("../fonts/united-sans-heavy.otf") format("opentype"); font-weight:900;font-style:normal;font-display:swap} @font-face{font-family:"United Sans";src:url("../fonts/united-sans-bold.otf") format("opentype"); font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Geomanist";src:url("../fonts/geomanist-regular.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Geomanist";src:url("../fonts/geomanist-bold.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Geomanist";src:url("../fonts/5094Geomanist-medium.woff2") format("woff2"); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Geomanist";src:url("../fonts/2781Geomanist-light.woff2") format("woff2"); font-weight:300;font-style:normal;font-display:swap} /* ---------- TIPOGRAFIAS (fin) ---------- */ :root{ --negro:#000; --carbon:#0d0d0d; --humo:#141414; --linea:#262626; --papel:#fff; --gris:#9a9a9a; --gris-claro:#d4d4d4; --rojo:#ec1c24; --rojo-vivo:#ff2f38; /* El verde del Hyper-G. Solo para destacar un apartado de la cabecera; no es un color de fondo general. */ --verde-hyper:#b2e51e; --ancho:1400px; --alto-barra:38px; --alto-cabecera:76px; --tipo:"United Sans","Oswald","Arial Narrow",Impact,sans-serif; --tipo-texto:"Geomanist",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; } *{box-sizing:border-box} /* El navegador esconde lo que trae el atributo hidden con una regla suya, [hidden]{display:none}. Pero cualquier regla NUESTRA que use clase le gana por especificidad: .jugador-ficha{display:flex} pisaba ese display:none, y las fichas seguian a la vista aunque el filtro ya las hubiera marcado como ocultas. Por eso "los filtros no funcionaban": si trabajaban, pero no se notaba. Esta linea lo cierra para todo el sitio: roster, catalogo y noticias filtran de verdad. */ [hidden]{display:none!important} html{scroll-behavior:smooth} body{ margin:0;background:var(--negro);color:var(--papel); font-family:var(--tipo-texto);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .envoltura{max-width:var(--ancho);margin:0 auto;padding:0 24px} /* ---------- BARRA BLANCA SUPERIOR (inicio) ---------- */ .barra-uni{ background:var(--papel);color:#111;height:var(--alto-barra); display:flex;align-items:center;gap:18px;padding:0 20px;overflow:hidden; } .barra-uni .leyenda{ font-family:var(--tipo);text-transform:uppercase;letter-spacing:.14em; font-size:11px;font-weight:700;white-space:nowrap;flex:none;color:#111; } .barra-uni .correo{ font-size:11px;letter-spacing:.06em;white-space:nowrap;flex:none; color:#555;text-transform:lowercase; } .barra-uni .correo:hover{color:var(--rojo)} /* min-width:0 no es adorno: sin el, un hijo de flex NO se encoge por debajo del ancho de su contenido, y el desfile de 26 logos (2112px) empuja la pagina entera a lo ancho en el celular. Con overflow:hidden no basta. */ .pista{flex:1;min-width:0;overflow:hidden;position:relative;height:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .pista ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0; height:100%;animation:desfile 60s linear infinite;width:max-content} .pista:hover ul{animation-play-state:paused} .pista img{height:22px;width:auto;opacity:.62;filter:grayscale(1);transition:.25s} .pista li:hover img{opacity:1;filter:none} @keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- BARRA BLANCA SUPERIOR (fin) ---------- */ /* ---------- CABECERA (inicio) ---------- */ .cabecera{ position:sticky;top:0;z-index:60;background:var(--negro); border-bottom:1px solid var(--linea);height:var(--alto-cabecera); } .cabecera .envoltura{display:flex;align-items:center;justify-content:space-between; height:100%;gap:20px} .logo{flex:none;display:flex;align-items:center} .logo img{height:26px} .logo .texto{font-family:var(--tipo);font-size:26px;font-weight:900; letter-spacing:.02em;text-transform:uppercase} .logo .texto span{color:var(--rojo)} .navegacion{display:flex;align-items:center;gap:30px;height:100%;margin:0;padding:0} .navegacion > li{list-style:none;position:relative;height:100%;display:flex;align-items:center} .navegacion > li > a{ font-family:var(--tipo);text-transform:uppercase;letter-spacing:.11em; font-size:13px;font-weight:700;color:var(--papel);display:flex;align-items:center; gap:6px;height:100%;border-bottom:2px solid transparent;transition:.2s; } .navegacion > li > a:hover{color:var(--rojo-vivo);border-bottom-color:var(--rojo)} /* El apartado destacado de la cabecera (Distribuidores). Bloque verde de la altura de la barra, como lo pidio Fernando. El verde es el del Hyper-G, no uno inventado; y el texto va en negro porque sobre ese verde el blanco casi no se lee. */ .navegacion > li.destaca{margin-left:4px} .navegacion > li.destaca > a{ background:var(--verde-hyper);color:#000;border-bottom:0; padding:0 22px;letter-spacing:.13em;border-radius:8px; height:auto;align-self:center;line-height:34px; } .navegacion > li.destaca > a:hover{background:#c7f53a;color:#000;border-bottom:0} .navegacion > li.destaca > a:focus-visible{outline:2px solid #fff;outline-offset:-4px} .navegacion .flecha{width:8px;height:8px;border-right:2px solid currentColor; border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)} /* Cuenta que aun no existe: se ve, pero apagada y sin clic. */ .red-pendiente{color:#4a4a4a;display:flex;cursor:default} .red-pendiente svg{width:17px;height:17px;fill:currentColor} .redes-pie .red-pendiente{width:38px;height:38px;border:1px solid var(--linea); align-items:center;justify-content:center;color:#3d3d3d} .redes-pie .red-pendiente svg{width:16px;height:16px} /* ---------- PANEL ANCHO DE EQUIPO (inicio) ---------- Como el de solincosports.com: una sola tabla de cuatro columnas que ocupa todo el ancho. Se posiciona contra .cabecera, que es el elemento pegajoso, asi que baja bien lo mismo con la pagina arriba que ya con scroll. */ .navegacion > li.con-panel{position:static} .panel-menu{position:absolute;top:100%;left:0;width:100%;background:#0a0a0a; border-top:2px solid var(--rojo);border-bottom:1px solid var(--linea); opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s; box-shadow:0 26px 60px rgba(0,0,0,.7);z-index:70} .navegacion > li.con-panel:hover .panel-menu{opacity:1;visibility:visible;transform:translateY(0)} /* Las columnas se miden por su contenido y el grupo se centra. Con cuatro columnas de 1fr, el texto se apelotona a la izquierda de cada una y el bloque entero se ve recargado a un lado, aunque tecnicamente ocupe todo el ancho. */ /* El panel vive DENTRO de
, y ahi existe la regla .cabecera .envoltura{display:flex}. Esa regla alcanzaba tambien a la envoltura del panel, que entonces trataba a las columnas como un hijo de flex y las encogia a su contenido, pegadas a la izquierda. Por eso el justify-content:center no hacia nada: no habia espacio sobrante que repartir. Se devuelve a bloque y ya. */ .panel-menu .envoltura{display:block} .columnas-menu{display:flex;justify-content:center; gap:clamp(48px,7vw,110px);padding:40px 0 46px} .columna-menu{flex:0 0 auto} .columna-menu h4{font-family:var(--tipo);text-transform:uppercase;font-size:15px; letter-spacing:.09em;font-weight:900;color:var(--papel);margin:0 0 20px} .columna-menu ul{list-style:none;margin:0;padding:0} .columna-menu li{margin-bottom:13px} .columna-menu li a{font-family:var(--tipo);text-transform:uppercase;letter-spacing:.09em; font-size:12.5px;font-weight:700;color:var(--gris-claro);transition:.16s; display:inline-block} .columna-menu li a:hover{color:var(--rojo-vivo);transform:translateX(4px)} /* Lo que no vendemos en Mexico lleva al sitio de Solinco USA. La flechita avisa que sale del sitio: que el cliente se entere ANTES de hacer clic. */ .columna-menu li a.sale i{font-style:normal;font-size:10px;opacity:.5;margin-left:5px; vertical-align:super} .columna-menu li a.sale:hover i{opacity:1;color:var(--rojo-vivo)} .ancla-extra{display:block;height:0;scroll-margin-top:calc(var(--alto-cabecera) + 16px)} /* ---------- PANEL ANCHO DE EQUIPO (fin) ---------- */ /* menu desplegable */ .submenu{ position:absolute;top:100%;left:-22px;min-width:260px;background:#0a0a0a; border:1px solid var(--linea);border-top:2px solid var(--rojo);padding:10px 0; opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;list-style:none;margin:0; box-shadow:0 22px 50px rgba(0,0,0,.65); } .navegacion > li:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)} .submenu li{position:relative} .submenu a{display:block;padding:9px 22px;font-size:13.5px;color:var(--gris-claro);transition:.15s} .submenu a:hover{background:var(--humo);color:var(--papel);padding-left:28px} .submenu .con-hijos > a::after{content:"\203A";float:right;color:var(--rojo);font-size:17px;line-height:1} .submenu .submenu{top:-12px;left:100%;border-top:1px solid var(--linea);border-left:2px solid var(--rojo)} .submenu li:hover > .submenu{opacity:1;visibility:visible;transform:translateY(0)} .utilidades{display:flex;align-items:center;gap:16px;flex:none} .utilidades a{color:var(--gris-claro);display:flex;transition:.2s} .utilidades a:hover{color:var(--rojo-vivo);transform:translateY(-1px)} .utilidades svg{width:17px;height:17px;fill:currentColor} .lupa{background:none;border:0;color:var(--gris-claro);cursor:pointer;padding:0;display:flex} .lupa:hover{color:var(--rojo-vivo)} .lupa svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2} .separador{width:1px;height:18px;background:var(--linea)} .hamburguesa{display:none;background:none;border:0;cursor:pointer;padding:6px} .hamburguesa span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:.25s} /* ---------- CABECERA (fin) ---------- */ /* ---------- BUSCADOR (inicio) ---------- */ .buscador{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:200; display:none;align-items:flex-start;justify-content:center;padding-top:16vh} .buscador.abierto{display:flex} .buscador form{width:min(680px,90vw)} .buscador input{width:100%;background:none;border:0;border-bottom:2px solid var(--rojo); color:#fff;font-family:var(--tipo);font-size:clamp(26px,5vw,44px); text-transform:uppercase;letter-spacing:.04em;padding:14px 4px;outline:none} .buscador p{color:var(--gris);font-size:13px;margin-top:14px;letter-spacing:.05em} .cerrar{position:absolute;top:26px;right:30px;background:none;border:0;color:#fff; font-size:30px;cursor:pointer;line-height:1} /* ---------- BUSCADOR (fin) ---------- */ /* ---------- CARRUSEL PRINCIPAL (inicio) ---------- Copia el comportamiento del carrusel de solincosports.com: - La lamina mide EXACTO lo que queda de pantalla. Asi el titulo, el boton y los puntos caben completos sin bajar: se ve, se hace clic y se sigue. - Las laminas se desvanecen, no se deslizan. - La sombra es apenas la necesaria para leer el texto. Una sombra fuerte apaga la foto del producto, que es lo unico que el banner viene a vender. ------------------------------------------------------------------------ */ .heroe{position:relative;overflow:hidden;background:#000; height:calc(100vh - var(--alto-cabecera) - var(--alto-barra)); min-height:520px;max-height:900px} .laminas{position:absolute;inset:0} .lamina{position:absolute;inset:0;opacity:0;transition:opacity .8s ease; pointer-events:none} .lamina.activa{opacity:1;pointer-events:auto} .lamina img{width:100%;height:100%;object-fit:cover} /* La sombra solo donde hace falta. Arriba, apenas para despegar la cabecera; en medio, nada, para que el producto se vea con su color real; abajo, la suficiente para que el titulo se lea SIEMPRE, incluso sobre las fotos de fondo claro como la del hibrido Mach-BD. */ .lamina::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 24%, rgba(0,0,0,.10) 48%,rgba(0,0,0,.55) 78%, rgba(0,0,0,.88) 100%)} .lamina .dicho{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex; flex-direction:column;align-items:center;text-align:center; padding:0 clamp(20px,5vw,60px) clamp(56px,8vh,88px)} .gorro{font-family:var(--tipo);text-transform:uppercase;letter-spacing:.16em; font-size:clamp(11px,1.1vw,14px);color:var(--papel);font-weight:700;margin-bottom:10px; text-shadow:0 2px 12px rgba(0,0,0,.7)} .lamina h2{font-family:var(--tipo);text-transform:uppercase;margin:0 0 26px; font-size:clamp(32px,5.6vw,74px);line-height:.98;letter-spacing:.01em; font-weight:900;text-wrap:balance;text-shadow:0 3px 22px rgba(0,0,0,.55)} .boton{display:inline-flex;align-items:center;gap:9px;background:var(--papel);color:#000; font-family:var(--tipo);text-transform:uppercase;letter-spacing:.13em;font-size:12.5px; font-weight:700;padding:15px 34px;border:2px solid var(--papel);border-radius:9999px; transition:.22s;cursor:pointer} .boton:hover{background:var(--rojo);border-color:var(--rojo);color:#fff} .boton.hueco{background:transparent;color:#fff} .boton.hueco:hover{background:#fff;color:#000;border-color:#fff} /* En su sitio no hay flechas: solo los puntos. Se dejan en el DOM porque el carrusel del Equipo Solinco si las usa, pero en el principal no se pintan. */ .heroe .flecha-h{display:none} .flecha-h{position:absolute;top:50%;transform:translateY(-50%);z-index:5; background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.28);color:#fff; width:46px;height:46px;cursor:pointer;display:flex;align-items:center; justify-content:center;font-size:20px;transition:.2s} .flecha-h:hover{background:var(--rojo);border-color:var(--rojo)} .flecha-h.izq{left:22px}.flecha-h.der{right:22px} .puntos{position:absolute;bottom:22px;left:0;right:0;z-index:5;display:flex;gap:11px; justify-content:center} .puntos button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.42); border:0;cursor:pointer;padding:0;transition:.25s} .puntos button.activo{background:var(--papel)} .puntos button:hover{background:rgba(255,255,255,.8)} /* ---------- CARRUSEL PRINCIPAL (fin) ---------- */ /* ---------- TITULOS DE SECCION (inicio) ---------- */ .seccion{padding:clamp(56px,7vw,96px) 0} .seccion.oscura{background:var(--carbon)} .titulo-seccion{font-family:var(--tipo);text-transform:uppercase;text-align:center; font-size:clamp(26px,4vw,50px);letter-spacing:.03em;font-weight:900; margin:0 0 10px;line-height:1} .bajada{text-align:center;color:var(--gris);font-size:15px;margin:0 auto 44px;max-width:620px} .raya{width:56px;height:3px;background:var(--rojo);margin:16px auto 40px} /* ---------- TITULOS DE SECCION (fin) ---------- */ /* Variante de fondo claro, para comparar. Solinco USA alterna secciones negras y blancas; nosotros vamos en negro corrido. Esta clase permite ver la misma seccion de las dos formas sin tocar nada mas. */ .seccion.clara{background:var(--papel);color:#111} .seccion.clara .titulo-seccion{color:#111} .seccion.clara .bajada{color:#555} .seccion.clara .raya{background:var(--rojo)} /* Las etiquetas de las tarjetas van SOBRE la foto, no sobre el fondo de la seccion: se quedan blancas aunque la seccion sea clara. Heredar el negro del contenedor las volvia ilegibles. */ .seccion.clara .tarjeta-cat{color:var(--papel)} .seccion.clara .tarjeta-cat h3{color:var(--papel)} /* ---------- NUESTROS PRODUCTOS (inicio) ---------- */ .rejilla-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .tarjeta-cat{position:relative;overflow:hidden;aspect-ratio:4/5;display:block;background:#111} .tarjeta-cat img{width:100%;height:100%;object-fit:cover;transition:transform .7s} .tarjeta-cat:hover img{transform:scale(1.06)} .tarjeta-cat::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72) 100%)} .tarjeta-cat .pie-tarjeta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 26px; display:flex;align-items:center;justify-content:space-between;gap:12px} .tarjeta-cat h3{font-family:var(--tipo);text-transform:uppercase;font-size:clamp(20px,2.2vw,30px); margin:0;letter-spacing:.04em;font-weight:900} .tarjeta-cat .mas{width:38px;height:38px;border:2px solid rgba(255,255,255,.5);display:flex; align-items:center;justify-content:center;flex:none;transition:.25s;font-size:17px} .tarjeta-cat:hover .mas{background:var(--rojo);border-color:var(--rojo)} /* ---------- NUESTROS PRODUCTOS (fin) ---------- */ /* ---------- LO NUEVO (inicio) ---------- La seccion debe medir LO MISMO que "Nuestros Productos" y caber en una pantalla. Productos son 3 tarjetas de 4/5 con 20px de separacion, o sea una rejilla de proporcion (3*1 + 2*20/ancho) / 1.25 ~= 2.47 a 1. Aqui se fija esa misma proporcion en vez de alturas en pixeles: asi las dos secciones coinciden en cualquier monitor y no hay que ir ajustando a mano. ------------------------------------------------------------------------ */ .rejilla-nuevo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.22fr 1fr; gap:20px;aspect-ratio:2.47} .nuevo-franja{grid-column:1/-1;position:relative;overflow:hidden;background:#0a0a0a; border:1px solid var(--linea);transition:.3s} .nuevo-franja:hover{border-color:var(--rojo)} .nuevo-franja img{width:100%;height:100%;object-fit:cover;object-position:center; transition:transform .8s} .nuevo-franja:hover img{transform:scale(1.03)} .nuevo-tarjeta{position:relative;overflow:hidden;background:#0a0a0a; border:1px solid var(--linea);transition:.3s;display:block} .nuevo-tarjeta:hover{border-color:var(--rojo)} .nuevo-tarjeta img{width:100%;height:100%;object-fit:cover;transition:transform .7s} .nuevo-tarjeta:hover img{transform:scale(1.05)} .nuevo-tarjeta::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.82) 100%)} .nuevo-pie{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px; display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .nuevo-pie .gorro{margin-bottom:5px;color:var(--rojo-vivo);letter-spacing:.16em} .nuevo-pie h3{font-family:var(--tipo);text-transform:uppercase; font-size:clamp(15px,1.6vw,22px);margin:0;letter-spacing:.03em; font-weight:900;line-height:1.05} .nuevo-pie .mas{width:34px;height:34px;border:2px solid rgba(255,255,255,.5);display:flex; align-items:center;justify-content:center;flex:none;transition:.25s; font-size:18px;font-family:var(--tipo);border-radius:50%} .nuevo-tarjeta:hover .mas{background:var(--rojo);border-color:var(--rojo)} @media (max-width:760px){ /* En celular la proporcion fija aplasta todo: mejor apilar y que cada imagen conserve su forma. */ .rejilla-nuevo{grid-template-columns:1fr;grid-template-rows:none;aspect-ratio:auto;gap:14px} .nuevo-franja{grid-column:auto;aspect-ratio:2.5} .nuevo-tarjeta{aspect-ratio:16/10} } /* ---------- LO NUEVO (fin) ---------- */ /* ---------- NOTICIAS (inicio) ---------- */ .rejilla-notas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .nota{background:var(--humo);border:1px solid var(--linea);display:flex;flex-direction:column; transition:.3s;overflow:hidden} .nota:hover{border-color:var(--rojo);transform:translateY(-5px)} .nota .foto{aspect-ratio:16/10;overflow:hidden} .nota .foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .nota:hover .foto img{transform:scale(1.06)} .nota .cuerpo{padding:24px;flex:1;display:flex;flex-direction:column} .fecha{font-family:var(--tipo);text-transform:uppercase;letter-spacing:.15em;font-size:10.5px; color:var(--rojo-vivo);font-weight:700;margin-bottom:11px} .nota h3{font-family:var(--tipo);text-transform:uppercase;font-size:19px;line-height:1.16; margin:0 0 12px;letter-spacing:.02em;font-weight:900} .nota p{color:var(--gris);font-size:14px;margin:0 0 18px;flex:1;text-align:justify;hyphens:auto} .leer{font-family:var(--tipo);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px; color:var(--papel);font-weight:700;border-bottom:2px solid var(--rojo); align-self:flex-start;padding-bottom:3px;transition:.2s} .nota:hover .leer{color:var(--rojo-vivo)} .envuelve-nota{display:contents} .envuelve-nota[hidden]{display:none} .centro{text-align:center;margin-top:44px} /* ---------- NOTICIAS (fin) ---------- */ /* ---------- EQUIPO SOLINCO (inicio) ---------- */ .pestanas{display:flex;justify-content:center;gap:0;margin:0 auto 38px;width:max-content; border:1px solid var(--linea)} .pestanas button{background:none;border:0;color:var(--gris);font-family:var(--tipo); text-transform:uppercase;letter-spacing:.15em;font-size:12.5px;font-weight:700; padding:13px 34px;cursor:pointer;transition:.22s} .pestanas button.activa{background:var(--rojo);color:#fff} .pestanas button:not(.activa):hover{color:#fff;background:var(--humo)} .panel{display:none} .panel.visible{display:block} .equipo-carrusel{position:relative;overflow:hidden} .equipo-pista{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)} /* Fernando pidio que Equipo Solinco mida lo mismo que Nuestros Productos, para que los botones de abajo se vean sin bajar. La lamina se aplana y se le quita el alto minimo, que era lo que empujaba la seccion. */ .jugador{flex:0 0 100%;position:relative;aspect-ratio:3.62;min-height:0;background:#111} .jugador img{width:100%;height:100%;object-fit:cover;object-position:center 22%} .jugador::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%)} .jugador .nombre{position:absolute;left:0;bottom:0;z-index:2;padding:0 clamp(24px,5vw,64px) 40px} .jugador .nombre h3{font-family:var(--tipo);text-transform:uppercase; font-size:clamp(26px,3.6vw,46px);margin:0;letter-spacing:.02em;font-weight:900} .jugador .nombre span{font-size:13px;color:var(--gris-claro);letter-spacing:.1em; text-transform:uppercase;font-family:var(--tipo)} .vacio-mx{border:1px dashed var(--linea);padding:56px 30px;text-align:center;background:var(--humo)} .vacio-mx h3{font-family:var(--tipo);text-transform:uppercase;font-size:24px;margin:0 0 12px; letter-spacing:.03em} .vacio-mx p{color:var(--gris);max-width:560px;margin:0 auto 26px;font-size:15px} .botones-fila{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px} /* ---------- EQUIPO SOLINCO (fin) ---------- */ /* ---------- PRENSA (inicio) ---------- Cuadro blanco, logo del medio en su color original y texto oscuro. El logo va SIN filtro a proposito: en gris un logotipo de prensa deja de reconocerse, y lo que da autoridad aqui es reconocerlo de un vistazo. La primera cita mide el doble: cinco cuadritos iguales salen apretados. ------------------------------------------------------------------------ */ .rejilla-prensa{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .dicho-prensa{background:var(--papel);color:#15181d;padding:34px 30px 30px;margin:0; position:relative;overflow:hidden;display:flex;flex-direction:column; border-top:3px solid var(--rojo);transition:.28s} .dicho-prensa:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.45)} /* Toda la tarjeta es clicable, no solo el renglon de abajo: es un cuadro chico y obligar a atinarle a tres palabras es pedir punteria. */ .capa-enlace{position:absolute;inset:0;z-index:3} .leer-nota{font-family:var(--tipo);text-transform:uppercase;letter-spacing:.13em; font-size:10.5px;font-weight:700;color:#8a9099;margin-top:16px;padding-top:14px; border-top:1px solid #e4e8ee;transition:.2s;position:relative;z-index:1; display:flex;align-items:center;gap:7px} .leer-nota b{color:var(--rojo);transition:.22s} .dicho-prensa:hover .leer-nota{color:#15181d} .dicho-prensa:hover .leer-nota b{transform:translateX(4px)} .dicho-prensa.grande{grid-column:span 2} /* la comilla es decoracion: se queda detras y no la lee el lector de pantalla */ .dicho-prensa .comilla{position:absolute;top:-26px;right:14px;font-family:Georgia,serif; font-size:150px;line-height:1;color:#eceff3;user-select:none; pointer-events:none} /* Alto fijo, no maximo: los logos con mucho aire adentro (10sBalls, Air Mail, Cosmopolitan) se veian diminutos al lado de Forbes y Tennis, que son anchos y planos. Con alto fijo todos pesan parecido; el ancho maximo evita que los muy alargados se coman el cuadro. */ .dicho-prensa .logo-medio{height:46px;width:auto;max-width:215px;object-fit:contain; object-position:left center;margin:0 0 22px;filter:none;opacity:1; position:relative;z-index:1} .dicho-prensa blockquote{margin:0;font-size:15.5px;line-height:1.62;color:#2b3038; flex:1;position:relative;z-index:1;text-align:left} .dicho-prensa.grande blockquote{font-size:19px;line-height:1.55;color:#15181d;font-weight:500} .dicho-prensa figcaption{font-family:var(--tipo);text-transform:uppercase;letter-spacing:.15em; font-size:10.5px;color:#8a9099;font-weight:700;position:relative; z-index:1;padding-top:14px;border-top:1px solid #e4e8ee} @media (max-width:1000px){ .rejilla-prensa{grid-template-columns:repeat(2,1fr)} .dicho-prensa.grande{grid-column:span 2} } @media (max-width:620px){ .rejilla-prensa{grid-template-columns:1fr} .dicho-prensa.grande{grid-column:auto} .dicho-prensa.grande blockquote{font-size:16.5px} } /* ---------- PRENSA (fin) ---------- */ /* ---------- REDES (inicio) ---------- */ .rejilla-social{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .post{position:relative;aspect-ratio:1;overflow:hidden;background:var(--humo);display:block} .post img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .post:hover img{transform:scale(1.08)} .post .velo{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:.3s; display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px} .post:hover .velo{opacity:1} /* ---------- REDES (fin) ---------- */ /* ---------- PIE (inicio) ---------- Tres piezas: nuestros datos en oscuro, la franja blanca de universidades calcada de Solinco USA, y un cintillo final. La franja es la que mas cambio: sus escudos miden 94px y van en dos filas de trece, en gris pero SIN transparencia. Los teniamos a 34px y apagados, y a ese tamano no se reconoce ninguna universidad; si no se reconocen, la franja no prueba nada, que es justo lo que viene a hacer. ------------------------------------------------------------------------ */ .pie{background:#070707;border-top:1px solid var(--linea);padding:70px 0 60px; position:relative} .pie::before{content:"";position:absolute;top:0;left:0;width:180px;height:3px; background:var(--rojo)} .pie-rejilla{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.3fr;gap:48px} .pie h4{font-family:var(--tipo);text-transform:uppercase;letter-spacing:.15em;font-size:12px; color:var(--papel);margin:0 0 22px;font-weight:900;padding-bottom:12px; border-bottom:1px solid var(--linea);position:relative} .pie h4::after{content:"";position:absolute;left:0;bottom:-1px;width:34px;height:1px; background:var(--rojo)} .pie ul{list-style:none;margin:0;padding:0} .pie li{margin-bottom:12px} .pie li a{color:var(--gris);font-size:14px;transition:.18s;display:inline-block} .pie li a:hover{color:var(--rojo-vivo);padding-left:5px} .pie-marca .pie-logo{height:30px;width:auto;margin-bottom:24px} .pie-sede{font-family:var(--tipo);text-transform:uppercase;letter-spacing:.1em;font-size:12.5px; color:var(--gris-claro);margin:0 0 16px;line-height:1.9;font-weight:700} .pie-correo,.pie-tel{display:block;color:var(--gris);font-size:14px;margin-bottom:7px; transition:.18s} .pie-correo:hover,.pie-tel:hover{color:var(--rojo-vivo)} .pie .suscribe p{color:var(--gris);font-size:14px;margin:0 0 18px} .pie .suscribe form{display:flex;border:1px solid var(--linea);margin-bottom:18px} .pie .suscribe input{flex:1;background:var(--humo);border:0;color:#fff;padding:13px 15px; font:inherit;font-size:16px;outline:none;min-width:0} .pie .suscribe input:focus{background:#1b1b1b} .pie .suscribe button{background:var(--rojo);border:0;color:#fff;font-family:var(--tipo); text-transform:uppercase;letter-spacing:.12em;font-size:11.5px; padding:0 22px;cursor:pointer;font-weight:700;transition:.2s} .pie .suscribe button:hover{background:var(--rojo-vivo)} .boton.chico{padding:11px 22px;font-size:11px;letter-spacing:.12em} .redes-pie{display:flex;gap:12px;margin-top:24px} .redes-pie a{width:38px;height:38px;border:1px solid var(--linea);display:flex;align-items:center; justify-content:center;color:var(--gris);transition:.22s} .redes-pie a:hover{background:var(--rojo);border-color:var(--rojo);color:#fff; transform:translateY(-2px)} .redes-pie svg{width:16px;height:16px;fill:currentColor} /* la franja blanca, calcada de la de ellos */ .franja-uni{background:var(--papel);padding:52px 24px 56px} .franja-uni h3{text-align:center;font-family:var(--tipo);text-transform:uppercase; font-size:clamp(22px,2.6vw,34px);color:#111;margin:0 0 36px; letter-spacing:.02em;font-weight:900} .franja-uni ul{display:grid;grid-template-columns:repeat(13,1fr);gap:26px 16px; max-width:1720px;margin:0 auto;padding:0;list-style:none;align-items:center} .franja-uni li{display:flex;align-items:center;justify-content:center} .franja-uni img{width:100%;height:auto;max-height:88px;object-fit:contain; filter:grayscale(1);opacity:1;transition:.25s} .franja-uni li:hover img{transform:scale(1.09)} .cintillo{background:#000;border-top:1px solid #1a1a1a;padding:18px 0} .cintillo .envoltura{display:flex;justify-content:space-between;align-items:center; gap:14px;flex-wrap:wrap} .cintillo span{font-family:var(--tipo);text-transform:uppercase;letter-spacing:.12em; font-size:10.5px;color:#6d6d6d} /* ---------- PIE (fin) ---------- */ /* ---------- SOLINCO MAS (inicio) ---------- */ .portada-mas{background:linear-gradient(140deg,#170003 0%,#000 55%); padding:clamp(60px,9vw,110px) 0;border-bottom:1px solid var(--linea)} .portada-mas h1{font-family:var(--tipo);text-transform:uppercase; font-size:clamp(38px,7vw,86px);line-height:.95;margin:0 0 22px; letter-spacing:.01em;font-weight:900} .portada-mas .entradilla{font-size:clamp(16px,1.7vw,19px);color:var(--gris-claro); max-width:620px;margin:0 0 34px;line-height:1.65} .rejilla-escalones{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .escalon{background:var(--humo);border:1px solid var(--linea);border-top:3px solid var(--rojo); padding:34px 30px;transition:.28s} .escalon:hover{transform:translateY(-5px);border-color:var(--rojo)} .escalon .pct{font-family:var(--tipo);font-size:64px;line-height:1;margin:0 0 6px; font-weight:900;color:var(--rojo-vivo)} .escalon .pct span{font-size:28px} .escalon h3{font-family:var(--tipo);text-transform:uppercase;font-size:19px;margin:0 0 20px; letter-spacing:.03em;font-weight:900} .escalon ul{list-style:none;margin:0;padding:0} .escalon li{font-size:15px;color:var(--gris-claro);padding:11px 0; border-top:1px solid var(--linea)} .escalon li b{color:var(--gris);font-weight:700;font-size:10.5px;text-transform:uppercase; letter-spacing:.11em;display:inline-block;min-width:82px} .nota-al-pie{text-align:center;color:var(--gris);font-size:13.5px;margin:28px 0 0} .rejilla-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px} .paso{border:1px solid var(--linea);padding:30px 26px;background:var(--negro);position:relative} .paso .num{font-family:var(--tipo);font-size:46px;font-weight:900;color:var(--rojo); line-height:1;display:block;margin-bottom:14px;opacity:.9} .paso h3{font-family:var(--tipo);text-transform:uppercase;font-size:17px;margin:0 0 10px; letter-spacing:.03em;font-weight:900} .paso p{color:var(--gris);font-size:14px;margin:0;text-align:justify;hyphens:auto} .preguntas{max-width:820px;margin:0 auto} .preguntas details{border-bottom:1px solid var(--linea)} .preguntas summary{cursor:pointer;padding:22px 40px 22px 0;font-family:var(--tipo); text-transform:uppercase;letter-spacing:.03em;font-size:16px; font-weight:700;list-style:none;position:relative;transition:.2s} .preguntas summary::-webkit-details-marker{display:none} .preguntas summary::after{content:"+";position:absolute;right:6px;top:19px;color:var(--rojo); font-size:24px;line-height:1;transition:.25s} .preguntas details[open] summary::after{transform:rotate(45deg)} .preguntas summary:hover{color:var(--rojo-vivo)} .preguntas p{color:var(--gris-claro);font-size:15px;padding:0 40px 24px 0;margin:0; line-height:1.7;text-align:justify;hyphens:auto} /* ---------- SOLINCO MAS (fin) ---------- */ /* ---------- AREA DE CLIENTE (inicio) ---------- */ /* Los pasos se esconden con el atributo hidden, que es el estandar: los lectores de pantalla lo respetan y no hace falta una clase aparte. La clase .visible es del diseno viejo y se deja por si algo la usa. */ .paso-cuenta[hidden]{display:none} .paso-cuenta.visible{display:block} .cuenta .pestanas{margin-bottom:28px} .cara{display:none} .cara.visible{display:block} .formulario.angosto{max-width:460px;margin:0 auto} .opciones{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* OJO: .opcion es un