/* ========================================================================== ESTILOS v2 — hoja única de TODAS las páginas públicas con la piel nueva: cabecera y pie (nav-v2.php), entrar, registro, galería, ficha de galería, precio y contacto. Se carga DESPUÉS de base.css y marketing.css: $hojas = ['css/estilos-v2.css']; Y en la portada, las dos, en este orden: $hojas = ['css/estilos-v2.css', 'css/index-nuevo.css']; index-nuevo.css solo aporta lo propio del índice (héroe 360, dock y pin del visor); la paleta y las primitivas viven acá y son los MISMOS valores, así que cargar las dos no cambia nada visualmente. Vocabulario propio `v2-*`, para no chocar con `pt-*` (portada actual) ni con `mk-*` (sistema del resto del sitio). Las clases ajenas que aparecen son exactamente tres y todas son ganchos de código que ya existe: `mk-nav` y `mk-pie` (JS del menú del layout), `campo-ojo` y `trampa`/`mk-trampa` (JS de auth y trampa de robots), y `oculto-visual` (base.css). FUENTE: cero descargas, cero @font-face, cero CDNs. Se nombra "Space Grotesk" y "JetBrains Mono" por si el visitante las tiene instaladas y si no cae en la misma pila del sistema que declara base.css (--fuente / --fuente-num). Índice 1. Paleta, tipografía y fondo 2. Primitivas: secciones, títulos, botones, avisos 3. Cabecera y pie 4. Formularios (entrar, registro, contacto) 5. Galería: grilla de showrooms 6. Ficha de galería: tour + panel 7. Precio: planes, tabla comparativa, FAQ ========================================================================== */ /* -------------------------------------------------------------------------- 1. Paleta, tipografía y fondo Se declara en `.v2` y no en :root para que no se filtre al showroom del cliente, que tiene su propio sistema de color. -------------------------------------------------------------------------- */ .v2 { --v2-fondo: #0f0f10; --v2-carta: #141416; --v2-tinta: #f2efe9; --v2-cobre: #c8763a; --v2-cobre-alto: #dd8b4d; --v2-noche: #05080c; --v2-tinta-82: rgba(242, 239, 233, .82); --v2-tinta-72: rgba(242, 239, 233, .72); --v2-tinta-70: rgba(242, 239, 233, .70); --v2-tinta-55: rgba(242, 239, 233, .55); --v2-tinta-45: rgba(242, 239, 233, .45); --v2-tinta-34: rgba(242, 239, 233, .34); --v2-borde: rgba(255, 255, 255, .09); --v2-borde-2: rgba(255, 255, 255, .14); --v2-vidrio: rgba(255, 255, 255, .10); --v2-vidrio-alto: rgba(255, 255, 255, .18); --v2-error: #e0705a; --v2-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --v2-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; --v2-ancho: 1120px; background: var(--v2-fondo); color: var(--v2-tinta); font-family: var(--v2-sans); -webkit-font-smoothing: antialiased; } /* El fondo tiene que llegar al : si solo se pinta `.v2`, el rebote del scroll en iOS y el área bajo el pie salen blancas sobre un diseño oscuro. */ .cuerpo-v2, html:has(.cuerpo-v2) { background: #0f0f10; color: #f2efe9; } .v2 *, .v2-nav *, .v2-pie * { box-sizing: border-box; } .v2 a { color: var(--v2-cobre); text-decoration: none; } .v2 a:hover { color: var(--v2-cobre-alto); } /* -------------------------------------------------------------------------- 2. Primitivas -------------------------------------------------------------------------- */ .v2-sec { max-width: var(--v2-ancho); margin: 0 auto; padding: 34px 18px 0; } .v2-sec--cab { padding-top: 26px; } .v2-sec:last-child { padding-bottom: 44px; } .v2-kicker { font: 700 9px/1 var(--v2-mono); letter-spacing: .16em; color: var(--v2-cobre); margin: 0 0 10px; text-transform: uppercase; } .v2-h1 { font: 600 clamp(1.7rem, 1.2rem + 2.4vw, 2.9rem)/1.06 var(--v2-sans); letter-spacing: -.03em; margin: 0 0 12px; text-wrap: pretty; } /* En una página interior el

no compite con una panorámica detrás, así que no necesita el tamaño del héroe. / .v2-h1--pagina { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); max-width: 26ch; } .v2-h2 { font: 600 22px/1.15 var(--v2-sans); letter-spacing: -.02em; margin: 0 0 6px; text-wrap: pretty; } .v2-h3 { font: 600 15px/1.25 var(--v2-sans); margin: 0 0 6px; } .v2-lead { font: 400 13.5px/1.5 var(--v2-sans); color: var(--v2-tinta-55); margin: 0 0 20px; max-width: 56ch; text-wrap: pretty; } .v2-p { font: 400 12.5px/1.5 var(--v2-sans); color: var(--v2-tinta-55); margin: 0; text-wrap: pretty; } .v2-p--cierre { font-size: 13px; color: var(--v2-tinta-70); max-width: 50ch; } .v2-nota-plan { font: 400 12px/1.5 var(--v2-sans); color: var(--v2-tinta-45); margin: 14px 0 0; max-width: 70ch; } .v2-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 0; } .v2-tarjeta { background: var(--v2-carta); border: 1px solid var(--v2-borde); border-radius: 18px; padding: 18px; } .v2-chip { font: 700 9px/1 var(--v2-mono); letter-spacing: .14em; background: rgba(15, 15, 16, .6); border: 1px solid rgba(255, 255, 255, .16); padding: 6px 9px; border-radius: 9999px; text-transform: uppercase; } / Botones. min-height 46px: piso de área táctil, no una decisión estética. / .v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 9999px; border: 0; font: 700 14px/1 var(--v2-sans); color: var(--v2-tinta); cursor: pointer; transition: background .18s ease, border-color .18s ease; } .v2-btn--cobre { background: var(--v2-cobre); color: #0f0f10; } .v2-btn--cobre:hover { background: var(--v2-cobre-alto); color: #0f0f10; } .v2-btn--vidrio { background: var(--v2-vidrio); border: 1px solid rgba(255, 255, 255, .2); font-weight: 600; } .v2-btn--vidrio:hover { background: var(--v2-vidrio-alto); color: var(--v2-tinta); } .v2-btn--bloque { width: 100%; } .v2-btn--sm { min-height: 40px; padding: 0 14px; font-size: 13px; } .v2-btn--icono { width: 46px; padding: 0; flex: none; } .v2-btn:focus-visible { outline: 2px solid var(--v2-tinta); outline-offset: 2px; } / Avisos. El de error lleva borde propio y no solo color de texto: el color por sí solo no es una señal accesible. / .v2-aviso { display: flex; align-items: center; gap: 9px; border-radius: 12px; padding: 11px 13px; margin: 0 0 18px; font: 500 12.5px/1.45 var(--v2-sans); } .v2-aviso--ok { background: rgba(200, 118, 58, .14); border: 1px solid rgba(200, 118, 58, .35); } .v2-aviso--error { background: rgba(224, 112, 90, .12); border: 1px solid rgba(224, 112, 90, .45); color: #f6d4cc; } / -------------------------------------------------------------------------- 3. Cabecera y pie `.mk-nav` y `.mk-pie` se conservan como clase para el JS del menú del layout; todo el estilo lo ponen `.v2-nav` y `.v2-pie`. -------------------------------------------------------------------------- / .v2-nav { position: sticky; top: 0; z-index: 30; background: linear-gradient(#0f0f10 58%, rgba(15, 15, 16, .88) 84%, rgba(15, 15, 16, .72)); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .06); } .v2-nav-inner { max-width: var(--v2-ancho); margin: 0 auto; padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .v2-nav-logo { display: flex; color: #f2efe9; flex: none; } .v2-nav-logo:hover { color: #fff; } .v2-nav-logo svg { display: block; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; } .v2-nav-links { display: flex; align-items: center; gap: 8px; } .v2-nav-link { font: 500 13px/1 var(--v2-sans); color: var(--v2-tinta-55); padding: 12px 8px; } .v2-nav-link:hover { color: var(--v2-tinta); } .v2-idiomas { display: flex; gap: 4px; } .v2-idioma { font: 700 10px/1 var(--v2-mono); letter-spacing: .12em; color: var(--v2-tinta-55); border: 1px solid var(--v2-borde-2); background: rgba(255, 255, 255, .04); border-radius: 11px; padding: 11px 10px; } .v2-idioma:hover { color: var(--v2-tinta); background: rgba(255, 255, 255, .1); } / El botón del menú solo existe bajo 820px: arriba de eso los enlaces caben. / .v2-nav-menu { display: none; min-height: 40px; padding: 0 13px; border-radius: 11px; border: 1px solid var(--v2-borde-2); background: rgba(255, 255, 255, .05); color: var(--v2-tinta); font: 600 13px/1 var(--v2-sans); cursor: pointer; } @media (max-width: 819px) { .v2-nav-menu { display: inline-flex; align-items: center; } / Cerrado por defecto; el JS del layout pone data-abierto="1". / .v2-nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 18px 18px; background: #0f0f10; border-bottom: 1px solid var(--v2-borde); } .v2-nav[data-abierto="1"] .v2-nav-links { display: flex; } .v2-nav-inner { position: relative; } .v2-nav-link { padding: 13px 0; } .v2-idiomas { padding: 6px 0; } } .v2-pie { margin-top: 54px; border-top: 1px solid var(--v2-borde); background: #0c0c0d; color: var(--v2-tinta); font-family: var(--v2-sans); } .v2-pie-inner { max-width: var(--v2-ancho); margin: 0 auto; padding: 26px 18px 34px; display: flex; flex-direction: column; gap: 14px; } .v2-pie-marca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; } .v2-pie-iso { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--v2-sans); color: var(--v2-tinta); } .v2-pie-lugar { font: 400 11.5px/1.4 var(--v2-sans); color: var(--v2-tinta-45); } .v2-pie-nav { display: flex; flex-wrap: wrap; gap: 10px 18px; } .v2-pie-nav a { font: 400 12.5px/1.4 var(--v2-sans); color: var(--v2-tinta-55); } .v2-pie-nav a:hover { color: var(--v2-tinta); } .v2-pie-legal { font: 400 11.5px/1.6 var(--v2-sans); color: var(--v2-tinta-34); margin: 0; max-width: 80ch; } / -------------------------------------------------------------------------- 4. Formularios Una sola familia de campos para entrar, registro y contacto: son el mismo control y tenerlos distintos solo garantiza que uno se quede atrás. -------------------------------------------------------------------------- / .v2-auth { max-width: 400px; margin: 0 auto; padding: 34px 18px 54px; } .v2-auth-h1 { font: 600 28px/1.05 var(--v2-sans); letter-spacing: -.03em; margin: 0 0 7px; } .v2-auth-intro { font: 400 13px/1.5 var(--v2-sans); color: var(--v2-tinta-55); margin: 0 0 22px; } .v2-auth-nota { font: 400 11px/1.5 var(--v2-sans); color: var(--v2-tinta-45); margin: 14px 0 0; text-align: center; } .v2-auth-alterna { font: 400 12px/1.5 var(--v2-sans); color: var(--v2-tinta-55); margin: 18px 0 0; text-align: center; } / Botón de Google: el parcial real trae sus clases `gauth`/`gbtn` y su propia hoja (oauth.css) puede no estar cargada en esta piel. Estas cuatro reglas lo dejan igual que el resto de los controles sin recolorear el logo, que es de Google y no se toca. / .v2-google { margin-bottom: 16px; } .v2-google .gauth { margin: 0; } .v2-google .gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; border: 0; border-radius: 13px; background: #fff; color: #1f1f1f; font: 600 13.5px/1 var(--v2-sans); cursor: pointer; } .v2-google .gbtn:hover { background: rgba(255, 255, 255, .88); } .v2-google .gbtn__logo { display: flex; } .v2-separador { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 400 11px/1 var(--v2-sans); color: var(--v2-tinta-45); } .v2-separador::before, .v2-separador::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .1); } .v2-form { display: flex; flex-direction: column; gap: 14px; } .v2-campo { display: flex; flex-direction: column; gap: 7px; } .v2-label { font: 700 8.5px/1.2 var(--v2-mono); letter-spacing: .14em; color: var(--v2-tinta-45); text-transform: uppercase; } .v2-label-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .v2-label-enlace { font: 400 11px/1.4 var(--v2-sans); color: var(--v2-cobre); } .v2-opcional { font: 400 8.5px/1 var(--v2-mono); letter-spacing: .1em; color: var(--v2-tinta-34); margin-left: 6px; } .v2-input { width: 100%; min-height: 48px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13); border-radius: 12px; padding: 0 14px; color: var(--v2-tinta); font: 400 13.5px/1.4 var(--v2-sans); outline: none; } .v2-input::placeholder { color: rgba(242, 239, 233, .32); } .v2-input:focus { border-color: rgba(200, 118, 58, .7); background: rgba(255, 255, 255, .07); } / aria-invalid y no una clase: el estado lo pone el servidor en el atributo. / .v2-input[aria-invalid="true"] { border-color: var(--v2-error); } .v2-area { min-height: 130px; padding: 12px 14px; resize: vertical; line-height: 1.55; } / El ojo va dentro del recuadro del campo. Arranca con `hidden` (lo destapa el JS de auth), así que sin JS no hay un botón muerto en pantalla. / .v2-input-conboton { position: relative; display: flex; } .v2-input-conboton .v2-input { padding-right: 46px; } .v2-ojo { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--v2-tinta-55); cursor: pointer; } .v2-ojo:hover { color: var(--v2-tinta); } .v2-ojo[hidden] { display: none; } .v2-ayuda { font: 400 11px/1.45 var(--v2-sans); color: var(--v2-tinta-45); margin: 0; } .v2-error { font: 500 11.5px/1.45 var(--v2-sans); color: var(--v2-error); margin: 0; } .v2-check { display: flex; align-items: flex-start; gap: 10px; font: 400 12px/1.5 var(--v2-sans); color: var(--v2-tinta-70); cursor: pointer; } .v2-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--v2-cobre); flex: none; } / Trampa para robots: fuera de pantalla y NO display:none — varios bots rellenan solo los campos que "existen" y este tiene que parecer uno. / .v2-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .v2-contacto { padding-bottom: 54px; } .v2-contacto-columna { max-width: 560px; } / -------------------------------------------------------------------------- 5. Galería -------------------------------------------------------------------------- / .v2-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; } .v2-showroom { display: block; border-radius: 18px; overflow: hidden; background: var(--v2-carta); border: 1px solid var(--v2-borde); color: var(--v2-tinta); transition: border-color .18s ease, transform .18s ease; } .v2-showroom:hover { border-color: rgba(200, 118, 58, .55); color: var(--v2-tinta); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .v2-showroom:hover { transform: none; } } .v2-showroom-foto { position: relative; display: block; height: 150px; overflow: hidden; background: var(--v2-noche); } .v2-showroom-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } / Sin portada: inicial sobre el color de marca del proyecto. `--marca` la inyecta la vista con el color ya validado en PHP. / .v2-showroom-inicial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--marca, #0E4FD1); color: #fff; font: 600 44px/1 var(--v2-sans); letter-spacing: -.04em; } .v2-cinta { position: absolute; top: 10px; left: 10px; font: 700 8px/1 var(--v2-mono); letter-spacing: .12em; background: var(--v2-cobre); color: #0f0f10; padding: 5px 8px; border-radius: 9999px; text-transform: uppercase; } .v2-vistas { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; font: 700 8.5px/1 var(--v2-mono); background: rgba(15, 15, 16, .7); color: #fff; padding: 5px 8px; border-radius: 9999px; } .v2-showroom-cuerpo { display: block; padding: 14px 15px 16px; } .v2-showroom-empresa { display: flex; align-items: center; gap: 7px; font: 500 11px/1.3 var(--v2-sans); color: var(--v2-tinta-55); margin-bottom: 7px; } .v2-showroom-chapa { width: 18px; height: 18px; border-radius: 5px; background: var(--marca, #0E4FD1); color: #fff; font: 700 9px/18px var(--v2-sans); text-align: center; flex: none; } .v2-showroom-nombre { font: 600 15px/1.25 var(--v2-sans); margin: 0 0 4px; } .v2-showroom-sub { display: block; font: 400 11.5px/1.4 var(--v2-sans); color: rgba(242, 239, 233, .5); margin-bottom: 8px; } .v2-showroom-meta { display: block; font: 700 8.5px/1.3 var(--v2-mono); letter-spacing: .11em; color: var(--v2-tinta-45); text-transform: uppercase; } .v2-showroom-ver { display: inline-block; margin-top: 10px; font: 600 11.5px/1 var(--v2-sans); color: var(--v2-cobre); } .v2-vacio { margin-top: 16px; } .v2-vacio-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 0; } .v2-reglas { margin-top: 8px; max-width: 520px; } .v2-guiones { margin: 12px 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .v2-guiones li { display: flex; gap: 9px; font: 400 12.5px/1.45 var(--v2-sans); color: var(--v2-tinta-72); } .v2-guiones li::before { content: "·"; color: var(--v2-cobre); flex: none; } / -------------------------------------------------------------------------- 6. Ficha de galería El tour manda: en escritorio ocupa dos tercios y el panel se queda pegado arriba mientras el visitante lee. En celular el tour va primero y el panel debajo, nunca al lado. -------------------------------------------------------------------------- / .v2-ficha { max-width: 1220px; margin: 0 auto; padding: 18px 18px 54px; } .v2-volver { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font: 500 13px/1 var(--v2-sans); color: var(--v2-tinta-55); } .v2-volver:hover { color: var(--v2-tinta); } .v2-ficha-escenario { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } @media (min-width: 900px) { .v2-ficha-escenario { grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); } .v2-ficha-panel { position: sticky; top: 88px; } } .v2-ficha-tour { position: relative; border-radius: 20px; overflow: hidden; background: var(--v2-noche); border: 1px solid var(--v2-borde); / Alto y no aspect-ratio: un recorrido 360 en 16:9 en un celular alto queda en una franja de 200 px y no se puede mirar hacia arriba. / height: min(70vh, 620px); min-height: 340px; } .v2-ficha-tour iframe { width: 100%; height: 100%; border: 0; display: block; } .v2-chip--tour { position: absolute; top: 14px; left: 14px; color: #fff; pointer-events: none; } .v2-ficha-panel { background: var(--v2-carta); border: 1px solid var(--v2-borde); border-radius: 20px; padding: 20px; } .v2-ficha-marca { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; } .v2-ficha-logo { display: flex; } .v2-ficha-logo img { max-height: 26px; width: auto; display: block; } .v2-ficha-inicial { width: 26px; height: 26px; border-radius: 8px; background: var(--marca, #0E4FD1); color: var(--marca-txt, #fff); font: 700 12px/26px var(--v2-sans); text-align: center; flex: none; } .v2-ficha-empresa { font: 500 12.5px/1.3 var(--v2-sans); color: var(--v2-tinta-70); } .v2-ficha-h1 { font: 600 24px/1.1 var(--v2-sans); letter-spacing: -.03em; margin: 0 0 6px; } .v2-ficha-sub { font: 400 12.5px/1.5 var(--v2-sans); color: rgba(242, 239, 233, .6); margin: 0 0 8px; } .v2-ficha-lugar { display: flex; align-items: center; gap: 6px; font: 400 12px/1.4 var(--v2-sans); color: rgba(242, 239, 233, .5); margin: 0 0 14px; } .v2-ficha-desc { font: 400 12.5px/1.55 var(--v2-sans); color: rgba(242, 239, 233, .65); margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); } .v2-ficha-acciones { display: flex; gap: 8px; margin-bottom: 14px; } .v2-ficha-compartir { flex: 1; border-radius: 12px; min-height: 44px; } .v2-ficha-acciones .v2-btn--icono { min-height: 44px; border-radius: 12px; } .v2-ficha-vistas, .v2-ficha-directo { display: flex; align-items: center; gap: 6px; font: 400 11.5px/1.4 var(--v2-sans); color: var(--v2-tinta-45); margin: 0 0 14px; } .v2-ficha-directo { color: var(--v2-cobre); } .v2-ficha-cta { background: linear-gradient(160deg, rgba(200, 118, 58, .16), rgba(20, 20, 22, .6)); border: 1px solid rgba(200, 118, 58, .35); border-radius: 16px; padding: 16px; } .v2-ficha-cta-marca { display: flex; align-items: center; gap: 7px; font: 700 8.5px/1 var(--v2-mono); letter-spacing: .14em; color: var(--v2-cobre); margin: 0 0 9px; text-transform: uppercase; } .v2-ficha-cta-t { font: 600 14.5px/1.2 var(--v2-sans); margin: 0 0 5px; } .v2-ficha-cta-x { font: 400 12px/1.45 var(--v2-sans); color: rgba(242, 239, 233, .6); margin: 0 0 13px; } .v2-ficha-cta .v2-btn { min-height: 44px; border-radius: 12px; font-size: 13px; } / -------------------------------------------------------------------------- 7. Precio -------------------------------------------------------------------------- / .v2-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; align-items: start; } .v2-plan { position: relative; display: flex; flex-direction: column; background: var(--v2-carta); border: 1px solid rgba(255, 255, 255, .11); border-radius: 18px; padding: 18px; } .v2-plan--destacado { border-color: rgba(200, 118, 58, .5); background: linear-gradient(165deg, rgba(200, 118, 58, .14), rgba(20, 20, 22, .9)); padding-top: 22px; } .v2-plan-cinta { position: absolute; top: -10px; left: 18px; font: 700 8px/1 var(--v2-mono); letter-spacing: .14em; background: var(--v2-cobre); color: #0f0f10; padding: 5px 8px; border-radius: 9999px; margin: 0; text-transform: uppercase; } .v2-plan-nombre { font: 600 17px/1.2 var(--v2-sans); margin: 0 0 3px; } .v2-plan-lema { font: 400 12px/1.45 var(--v2-sans); color: var(--v2-tinta-55); margin: 0 0 14px; } .v2-plan-precio { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; } .v2-plan-moneda { font: 700 10px/1 var(--v2-mono); letter-spacing: .1em; color: var(--v2-tinta-45); } .v2-plan-cifra { font: 700 30px/1 var(--v2-sans); letter-spacing: -.04em; } .v2-plan-periodo { font: 400 11.5px/1 var(--v2-sans); color: var(--v2-tinta-45); } .v2-plan-nota { font: 400 11px/1.45 var(--v2-sans); color: var(--v2-tinta-45); margin: 0; } .v2-plan-nota--mes { color: var(--v2-cobre); } .v2-plan-lista { margin: 16px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; / Empuja el botón al fondo: con listas de largo distinto los botones de las tres tarjetas quedaban a tres alturas. / flex: 1; } .v2-plan-lista li { display: flex; gap: 9px; font: 400 12.5px/1.35 var(--v2-sans); color: var(--v2-tinta-82); } .v2-plan-lista svg { color: var(--v2-cobre); flex: none; margin-top: 2px; } / Tabla comparativa. Bajo 640px se vuelve tarjetas con data-etiqueta: una tabla de cuatro columnas no cabe en un teléfono y el scroll horizontal esconde justo la columna del precio. / .v2-tabla-caja { margin-top: 16px; overflow-x: auto; } .v2-tabla { width: 100%; border-collapse: collapse; font: 400 12.5px/1.45 var(--v2-sans); } .v2-tabla th, .v2-tabla td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--v2-borde); } .v2-tabla thead th { font: 700 8.5px/1.3 var(--v2-mono); letter-spacing: .14em; color: var(--v2-tinta-45); text-transform: uppercase; white-space: nowrap; } .v2-tabla tbody th { font: 500 12.5px/1.4 var(--v2-sans); color: var(--v2-tinta-82); } .v2-tabla td { color: var(--v2-tinta-70); } .v2-si { color: var(--v2-cobre); font-size: 15px; } .v2-no { color: var(--v2-tinta-34); } @media (max-width: 640px) { .v2-tabla thead { display: none; } .v2-tabla, .v2-tabla tbody, .v2-tabla tr, .v2-tabla th, .v2-tabla td { display: block; } .v2-tabla tr { background: var(--v2-carta); border: 1px solid var(--v2-borde); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; } .v2-tabla tbody th { border: 0; padding: 0 0 8px; } .v2-tabla td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; gap: 12px; } .v2-tabla td::before { content: attr(data-etiqueta); font: 700 8.5px/1.6 var(--v2-mono); letter-spacing: .12em; color: var(--v2-tinta-45); text-transform: uppercase; } } / FAQ en
nativo: abre con teclado y sin una línea de JS. / .v2-faq { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } .v2-faq details { background: var(--v2-carta); border: 1px solid var(--v2-borde); border-radius: 14px; padding: 14px 16px; } .v2-faq summary { font: 600 13.5px/1.4 var(--v2-sans); cursor: pointer; list-style: none; } .v2-faq summary::-webkit-details-marker { display: none; } .v2-faq summary::after { content: "+"; float: right; color: var(--v2-cobre); font-family: var(--v2-mono); } .v2-faq details[open] summary::after { content: "–"; } .v2-faq p { font: 400 12.5px/1.6 var(--v2-sans); color: var(--v2-tinta-70); margin: 10px 0 0; max-width: 72ch; } / Caja de cierre, igual que en el índice. / .v2-cierre { margin: 8px auto 0; padding: 22px; background: linear-gradient(160deg, rgba(200, 118, 58, .16), rgba(20, 20, 22, .9)); border: 1px solid rgba(200, 118, 58, .4); border-radius: 20px; } .v2-cierre .v2-h2 { font-size: 20px; margin-bottom: 7px; } .v2-cierre p { margin: 0 0 16px; } .v2-cierre p:last-child { margin-bottom: 0; } / -------------------------------------------------------------------------- 8. Cascada: rótulos de los enlaces con piel propia NO hay ningún valor nuevo acá. Se repiten, uno por uno, los que ya declara este archivo más arriba, con una clase más de especificidad. El porqué: `.v2 a { color: var(--v2-cobre) }` (0,1,1) le gana por especificidad a `.v2-btn--cobre` (0,1,0) y a toda la cabecera, sin importar el orden de los archivos. Con la clase `v2` en el —hace falta ahí para que la paleta llegue a la cabecera y al pie, que viven fuera del
de cada vista— esa regla alcanza a los botones y a los enlaces de la nav. El resultado se veía: el botón cobre salía con el rótulo COBRE SOBRE COBRE, es decir invisible, y los enlaces de la nav en cobre en vez de tinta. Se arregla acá y no tocando `.v2 a` porque esa regla sí es la correcta para los enlaces de texto del cuerpo; lo que faltaba era que los componentes con color propio no la heredaran. -------------------------------------------------------------------------- / / Botón sólido: tinta oscura sobre cobre. Es el par que declara `.v2-btn--cobre` y el que da contraste de sobra (14:1 aprox). / .v2 a.v2-btn--cobre, .v2 a.v2-btn--cobre:hover { color: #0f0f10; } / Botón de vidrio: tinta clara sobre el velo translúcido. / .v2 a.v2-btn--vidrio, .v2 a.v2-btn--vidrio:hover { color: var(--v2-tinta); } / Cabecera. / .v2 a.v2-nav-logo { color: #f2efe9; } .v2 a.v2-nav-logo:hover { color: #fff; } .v2 a.v2-nav-link { color: var(--v2-tinta-55); } .v2 a.v2-nav-link:hover { color: var(--v2-tinta); } .v2 a.v2-idioma { color: var(--v2-tinta-55); } .v2 a.v2-idioma:hover { color: var(--v2-tinta); } / El enlace de salto (`.saltar-al-contenido`) también vive fuera del
y base.css le da SU par: fondo --sup-0 (claro) y texto --txt. Con el cobre heredado quedaba en 2,6:1 sobre ese fondo justo cuando aparece, que es al recibir el foco desde el teclado. Se le devuelve su color. / .v2 a.saltar-al-contenido { color: var(--txt); } / Pie: su regla es `.v2-pie-nav a` (0,1,1), o sea EMPATA con `.v2 a`, y ahí manda el orden de carga. En la portada, index-nuevo.css se carga después y volvía a ganar el cobre; con una clase más deja de depender del orden. */ .v2 .v2-pie-nav a { color: var(--v2-tinta-55); } .v2 .v2-pie-nav a:hover { color: var(--v2-tinta); }