/* * Theme Name: Cancun100 * Theme URI: https://cancun100.com * Description: Tema propio de cancun100.com — clasico, mobile-first, sin Elementor * ni Woodmart. Sistema de bloques: un componente = un partial en * parts/. Sin build: el CSS que se edita es el que se sirve. * Version: 0.6.0 * Author: Cancun100 * Author URI: https://cancun100.com * Text Domain: cancun100 * Requires at least: 6.5 * Requires PHP: 8.0 * License: Propietario */ /* =========================================================================== INDICE --------------------------------------------------------------------------- 1 · TOKENS :root oscuro + [data-theme=light] 2 · RESET 3 · TIPOGRAFIA + .mo + .kick 4 · LAYOUT .wrap .prose .sec .skip 5 · GLASS receta unica 6 · BOTONES .btn .btn.gh — 3D, unica definicion 7 · PIEZAS BASE .stars .live .chip .pc .tag .rating 8 · CHROME menu Islas · header escritorio · mega menu · overlay 9 · FOOTER A Comercial 10 · CLASES DEL CONTRATO c100-intro/highlights/itinerario/includes/faq 11 · CONTENIDO GENERICO 12 · UTILIDADES 13 · BLOQUES DE LA HOME 13.1 glass panel · 13.2 bokeh · 13.3 card 13.4 carrusel · 13.5 naipes · 13.6 marquesina 13.7 HEROE Centro de Mando + aro de puntos 13.8 iconos vivos (todo el sitio) 13.9 FRANJA DE CONFIANZA + sellos · 13.9b muelle 13.10 marquesinas · 13.11 rejilla · 13.12 faq 13.13 vistos 14 · CONTROLES DEL HEADER toggle de tema + pastilla de idioma =========================================================================== LEY DE TOKENS (doc SISTEMA-DE-BLOQUES A.3): Ningun bloque escribe un hex, un rgba ni una sombra. Solo var(--...). Si un diseno necesita un valor que no existe, se propone como token y se consulta ANTES de escribirlo. ======================================================================== */ /* =========================================================================== 1 · TOKENS — cerrados en el laboratorio "Ensamble Final" (25-ago-2026). Copiados literalmente de ahi. No se inventan ni se ajustan valores. ======================================================================== */ /* Los tokens tambien valen en un contenedor con data-theme (ORDEN-LABORATORIO-FONDOS-1): una escena puede forzar noche o dia sin tocar el tema del resto de la pagina. Mismos valores, una sola fuente. */ :root, [data-theme="dark"] { /* --- superficies --- */ --g: #05070C; /* fondo base */ --s: #0C1017; /* superficie */ --el: #111823; /* superficie elevada */ --rl: #1D2430; /* linea */ --rl2: #151A24; /* linea suave */ /* --- texto --- */ --tx: #F2F5F7; --mu: #93A0AE; --dim: #5C6875; --migas: #5C6875; /* las migas de pan: su propio token, que ninguna paleta de mascara redefine (ORDEN-CABECERA-PAGINA-1) */ /* --- AMARILLO = ESTRUCTURA (nunca un boton) --- EL AMARILLO TIENE TRES TRABAJOS Y TRES TOKENS (spec del heroe, 25-ago): --ac SUPERFICIE pinta un area: fondo de chip, isotipo, punto, paso activo --ai TINTA escribe palabras en amarillo sobre el fondo --aico TRAZO dibuja: iconos SVG, contornos, bordes activos, focos La regla en una linea: area -> --ac, palabras -> --ai, linea o icono -> --aico. El tercero existe porque en tema claro --ai tiene que ser oscuro (#8A6300) para leerse como parrafo, y ese mismo valor sobre un icono se veia quemado, casi cafe. Un trazo no necesita el contraste de un texto. */ --ac: #FFD400; --onac: #14140A; --acedge: #8A6E00; --ai: #FFD400; /* tinta; en claro baja a #8A6300 */ --aico: #FFD400; /* trazo; en claro baja a #E5A800 */ --llama: #FF7A00; /* la llamita de Ofertas (B-LLAMA): la llama; el corazon es --ac */ /* --- LOS CINCO TONOS DE LA AURORA --- amarillo · rosa · azul · morado · cian, EN ESE ORDEN. No es capricho: la aurora no cambia de tono, cruza los mismos cinco. Nada de hue-rotate — eso si alteraria los colores. Lo que gira son las manchas, y en cada punto se ve una mezcla distinta de LOS MISMOS tonos. En oscuro son luz; en claro bajan de luminosidad para que se lean sobre el papel (--g #FAFAF7) en vez de desaparecer en el. OJO: hasta la spec de la Aurora, --d2 era turquesa y --d3 rosa. Estaban cruzados respecto al orden canonico y --d5 era un gris azulado que no pintaba nada. Solo los lee la aurora, asi que realinearlos no toca nada mas del sitio. */ --d1: #FFD400; /* amarillo */ --d2: #FF1B7F; /* rosa */ --d3: #38A0FF; /* azul */ --d4: #A855F7; /* morado */ --d5: #22D3EE; /* cian */ /* --- ROSA = ACCION (solo botones y CTA) --- */ --go: #FF1B7F; /* --- ROJO = HUECO: un dato que falta (§18.0). Rojo, no rosa, para que nunca se lea como un boton (Marco, 30-sep). --- */ --hueco: #FF5A4E; /* --ok · estado "abierto". Era #1E9B3F escrito a mano dentro de la seccion de contacto: un verde que no existia en ningun otro sitio del sistema. Un color suelto en una pagina no se ve distinto, se ve roto. */ --ok: #3BE08A; --ongo: #ffffff; --goedge: #8A0043; /* --- AZUL MARINO = LA PUERTA DE AGENCIAS ------------------------------- Un solo uso, y por eso un solo token: el boton de chat de /agencias/. Misma geometria exacta que el rosa —cuadrado de 60, radio 20, icono en trazo blanco— y SOLO cambia el color. Eso es lo que hace que se lea como el mismo sistema con otra puerta, en vez de como otro widget. POR QUE AZUL Y NO DORADO: el dorado es el acento de esa pagina y lo lleva «Solicitar tarifario», que es la conversion que importa. Dos manchas doradas compiten y pierde la del formulario. El acento se gasta en un sitio. ⚠ VALORES PROPUESTOS POR MI, no salidos del laboratorio. Un marino de verdad (#0A2A5E) desaparece sobre el fondo oscuro #05070C, asi que en oscuro sube de luminosidad lo justo para sostener un icono blanco. Si el laboratorio cierra otro par, se cambia AQUI y en ningun otro sitio. */ --nv: #0B2545; /* el azul marino de la bandeja de agencias del CRM (ORDEN-KOMITO-BOTON-1 §1) */ --onnv: #ffffff; --nvedge: #06162B; /* --- glass (5 tokens) --- */ --gA: rgba(255,255,255,.13); --gB: rgba(255,255,255,.045); --gBr: rgba(255,255,255,.18); --gIn: rgba(255,255,255,.25); --gSh: 0 10px 28px -14px rgba(0,0,0,.9); /* --- vidrio esmerilado (ORDEN-DISENO-GLOBAL-1 §8): UN juego de tokens para .glass, .glass-panel, .card y las islas; las skins lo ajustan sin repetir la receta. Relleno mas transparente que el glass viejo, desenfoque con saturacion, filo de luz arriba y borde interior fino (el canto del vidrio). --- */ --vidrio-fondo: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); --vidrio-blur: blur(14px) saturate(140%); --vidrio-borde: rgba(255,255,255,.16); --vidrio-filo: rgba(255,255,255,.30); --vidrio-opaco: var(--el); /* sin backdrop-filter: casi opaco, para leer */ --mega-fondo: color-mix(in srgb, var(--el) 72%, transparent); /* el mega menu de vidrio (ORDEN-VIDEO-MENU-PAQUETES-1) */ /* --- el patron de cruces del fondo (§7): en oscuro es luz tenue (queda tal cual); en claro es tinta, para que se note igual sobre el papel. --- */ --patron-cruz: rgba(190,215,235,.20); --patron-cruz-2: rgba(190,215,235,.09); /* --- el canto de los botones (§6): un tono mas oscuro de la cara de cada variante; se obtiene mezclando la cara con esta sombra. --- */ --canto-mezcla: #000000; /* --- sombras y velos (B-2). Eran valores a mano en 13.3, 13.5 y 13.22; ahora son tokens y los bloques nuevos (ficha, dock, hoja) los heredan. --- */ --sombra-card: 0 24px 50px -24px rgba(0,0,0,.95); --sombra-naipe: 0 1px 2px rgba(0,0,0,.6), 0 26px 48px -26px rgba(0,0,0,1); --velo: rgba(4,8,14,.55); /* --- tipografia --- */ --ui: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mo-f: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --- degradado de la casa (Ensamble Final). Aparece en titulares y en el numero del Top 10. Se declara como token porque lo usan varios bloques y la ley prohibe hexadecimales dentro de un bloque. --- */ --grad-casa: linear-gradient(98deg, #7CE7DC, #FFD400); /* --- letrero LED de la portada (ORDEN-HOME-2 §1; CORRECCION-HOME-2 §1). De noche, el tablero negro con letra blanca y estrella amarilla; de dia va invertido y el bloque de dia cambia SOLO estos tres: fondo, letra y estrella. El borde, la segunda hilera y los brillos salen de ellos (color-mix en 13.6b), asi que se invierten solos. --- */ --led-f: #000000; /* fondo (y la rejilla de puntos) */ --led-t: #FFFFFF; /* letra */ --led-e: #FFD400; /* estrella */ --led-punto: 1.15px; /* el radio del punto encendido de la rejilla (celda de 3 px). De noche 1.15 px; de dia 1.3 px (CORRECCION-RESPUESTAS-B-1 §2): con la letra negra la rejilla la aclaraba a gris. */ --led-dur: 72s; /* una vuelta; Marco pidio mas lento que la prueba de 46 s */ /* --- portada (ORDEN-HOME-2): la sombra con enfasis de la campaña y el brochazo de marcatexto que va detras del de los H2 de dia (los valores de defecto del laboratorio B-L1: bajo, amarillo suave al 60 %, sin contorno; B-C2 los fija). --- */ --sombra-campana: 0 18px 40px -18px rgba(0,0,0,.95); /* --- movimiento --- */ --ez: cubic-bezier(.32,.72,0,1); /* --- escala tipografica (cerrada; theme.json la espeja) --- */ --fs-xs: .6875rem; --fs-sm: .8125rem; --fs-base: .9375rem; --fs-lg: 1.0625rem; --fs-xl: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); --fs-2xl: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); --fs-3xl: clamp(1.75rem, 1.4rem + 1.7vw, 2.5rem); --fs-4xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.2rem); /* --- espaciado (cerrada) --- */ --sp1: .25rem; --sp2: .5rem; --sp3: .75rem; --sp4: 1rem; --sp5: 1.5rem; --sp6: 2rem; --sp7: 3rem; --sp8: 4rem; /* --- layout --- */ --content: 760px; --wide: 1180px; --gut: clamp(1.05rem, 4vw, 2.75rem); --r: 11px; /* radio de boton, el del laboratorio */ --r-lg: 16px; /* radio de tarjeta glass */ /* --- BOTONES 3D, grosor único (Marco 21-oct 12:49): TODOS los botones con canto, en todos los colores (rosa, amarillo, azul, blanco, oscuro, verde), salen de aquí. Dos tamaños y solo dos: normal y chico. Ningún botón con valores propios. --- */ --c100-btn-alto: 52px; --c100-btn-alto-chico: 44px; --c100-btn-fuente: 1rem; --c100-btn-fuente-chico: .875rem; --c100-btn-peso: 800; --c100-btn-pl: 22px; --c100-btn-pl-chico: 16px; --c100-btn-canto: 5px; /* en el teléfono, 1 px menos (abajo) */ } @media (max-width: 767px) { :root { --c100-btn-canto: 4px; } } /* MODO CLARO — redefinicion de los MISMOS tokens (doc A.3.3). Los bloques no saben en que modo estan: heredan. */ :root[data-theme="light"], [data-theme="light"] { --g: #FAFAF7; --s: #FFFFFF; --el: #F2F2ED; --rl: #E4E4DE; --rl2: #EDEDE7; --tx: #0F0F12; --mu: #63636C; --dim: #96969E; --migas: #96969E; --ai: #8A6300; /* tinta: tiene que leerse como parrafo sobre papel */ --aico: #E5A800; /* trazo: mas vivo, porque una linea no es un parrafo */ /* Los mismos cinco, bajados de luminosidad para el papel. */ --d1: #E5A800; --d2: #E4007C; --d3: #1B7FD6; --d4: #8B3DD9; --d5: #0F9BAE; --go: #E4007C; --hueco: #C8281C; --ok: #0E8F62; /* en claro baja: tiene que leerse sobre papel */ --goedge: #7A0043; --nv: #0B2545; --nvedge: #06162B; --mega-fondo: color-mix(in srgb, var(--el) 72%, transparent); /* mismo alfa que la noche, con el --el del dia */ --gA: rgba(255,255,255,.72); --gB: rgba(255,255,255,.38); --gBr: rgba(15,23,32,.12); --gIn: rgba(255,255,255,.85); --gSh: 0 10px 26px -14px rgba(15,23,32,.25); --vidrio-fondo: linear-gradient(155deg, rgba(255,255,255,.50), rgba(255,255,255,.26)); --vidrio-borde: rgba(15,23,32,.14); --vidrio-filo: rgba(255,255,255,.92); --patron-cruz: rgba(15,23,32,.22); --patron-cruz-2: rgba(15,23,32,.10); --canto-mezcla: #0F0F12; --sombra-card: var(--gSh); --sombra-naipe: var(--gSh); --velo: rgba(15,23,32,.35); /* EL DIA CONGELADO (Marco, CORRECCION-DEGRADADO-DIA-3, 2-oct): «asi como esta, se queda». Letras con el mismo degradado de la noche, sin contorno ni sombra, y el brochazo amarillo suave detras. No se mueven sin orden; las capturas patron estan en capturas/degradado-dia-3/referencia/. */ --grad-dia-desde: #7CE7DC; --grad-dia-hasta: #FFD400; --grad-casa: linear-gradient(98deg, var(--grad-dia-desde), var(--grad-dia-hasta)); /* el brochazo: amarillo suave #FFEA80 al 60 % (con un filo de arriba al 33 % y una veta blanca al 18 %), dentro de su imagen. Es UNA capa de fondo sin mascara: asi se ve igual en Chrome, Safari y Firefox y en todos los anchos (B-G3). */ --brocha-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath fill='%23FFEA80' fill-opacity='.6' d='M9 17 C70 11 170 13 262 10 S372 8 393 13 L386 19 C396 22 384 27 397 31 L388 36 C394 40 386 44 392 47 C330 52 238 53 150 54 S44 57 11 55 C17 49 4 45 12 40 C3 35 13 29 6 25 C12 22 4 20 9 17Z'/%3E%3Cpath fill='%23FFEA80' fill-opacity='.33' d='M30 6 C120 2 260 3 360 4 L352 9 C250 9 130 10 34 12Z'/%3E%3Cpath fill='%23FFFFFF' fill-opacity='.18' d='M40 30 C140 27 260 26 370 27 L366 30 C260 30 150 31 44 33Z'/%3E%3C/svg%3E"); --brocha-alto: 58%; /* cubre la mitad de abajo de la letra (el «bajo» del laboratorio) */ --brocha-pos: left 100%; /* pegado abajo */ --sombra-campana: 0 16px 34px -16px rgba(15,23,32,.38); /* el letrero LED invertido de dia (CORRECCION-HOME-2 §1) */ --led-f: #FFFFFF; --led-t: #000000; --led-e: #F5B800; --led-punto: 1.3px; /* solo de dia: la letra negra se lee negra y queda el tablero; Marco cambia este valor */ } /* =========================================================================== 2 · RESET ======================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { background: var(--g); color: var(--tx); font-family: var(--ui); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, picture, video, svg, canvas { display: block; max-width: 100%; } img, video { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--aico); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--go); color: var(--ongo); } /* =========================================================================== 3 · TIPOGRAFIA ======================================================================== */ h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; } h1 { font-size: var(--fs-4xl); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } h5, h6 { font-size: var(--fs-base); } p { text-wrap: pretty; } strong, b { font-weight: 700; } small { font-size: var(--fs-sm); color: var(--mu); } hr { border: 0; height: 1px; background: var(--rl); margin-block: var(--sp7); } /* .mo — la voz monoespaciada del sistema: etiquetas, cifras, kickers. */ .mo { font-family: var(--mo-f); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; } /* Kicker de seccion: .mo + filete que ocupa el resto del ancho */ .kick { color: var(--dim); display: flex; align-items: center; gap: .7rem; margin-bottom: var(--sp4); } .kick::after { content: ""; height: 1px; flex: 1; background: var(--rl2); } /* =========================================================================== 4 · LAYOUT ======================================================================== */ .wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); } .prose { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--gut); } /* La barra Islas es position:fixed, asi que NO ocupa espacio en el flujo: sin esto se come la primera linea de CADA pagina del sitio. Se compensa una sola vez aqui, en el contenedor principal, y no plantilla por plantilla — que es como estaba (el heroe viejo lo tapaba con su propio padding y las demas paginas quedaban con el titulo debajo del cristal). A partir de 1000px manda .hdr, que es sticky y si ocupa su sitio. */ @media (max-width: 999px) { #c100-main { padding-top: calc(64px + env(safe-area-inset-top)); } } .sec { padding-block: clamp(2rem, 6vw, 3.75rem); } .sec + .sec { border-top: 1px solid var(--rl2); } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ac); color: var(--onac); padding: var(--sp3) var(--sp4); font-weight: 800; border-radius: var(--r); } .skip:focus { left: var(--sp4); top: var(--sp4); } /* =========================================================================== 5 · GLASS — receta unica. Nadie re-implementa glassmorphism localmente. ======================================================================== */ .glass { background: var(--vidrio-fondo); backdrop-filter: var(--vidrio-blur); -webkit-backdrop-filter: var(--vidrio-blur); border: 1px solid var(--vidrio-borde); box-shadow: inset 0 1px 0 var(--vidrio-filo), inset 0 0 0 1px var(--vidrio-borde), var(--gSh); } /* Sin soporte de backdrop-filter: superficie casi opaca, para no perder legibilidad */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .glass-panel, .card, .rail::before, .grp::before { background: var(--vidrio-opaco); } .mega__in, .sel-panel { background: linear-gradient(155deg, var(--gA), var(--gB)), var(--el); } } /* =========================================================================== 6 · BOTONES — UN componente, UNA tecla (ORDEN-DISENO-GLOBAL-1 §6) Reposo: la cara arriba y un canto de 4px (box-shadow inferior solido). Hover: el canto crece 1px. Presionado: la cara baja 4px y el canto queda en 0: se ve la tecla hundida, no el bloque entero moviendose. Todas las variantes comparten el mecanismo (variables --btn-n y --btn-y); solo cambia la cara, la tinta y el canto, que es un tono mas oscuro de la cara (mezcla con --canto-mezcla, en claro y en oscuro). Antes el fantasma pisaba el :active con su propio :hover (mas especifico) y bajaba en bloque. El rosa vive AQUI y en ningun otro sitio. ======================================================================== */ .btn { --btn-cara: var(--go); --btn-tinta: var(--ongo); --btn-canto: var(--goedge); --btn-borde: var(--goedge); --btn-n: var(--c100-btn-canto); --btn-y: 0px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font: inherit; font-size: var(--c100-btn-fuente); font-weight: var(--c100-btn-peso); line-height: 1.15; letter-spacing: -.01em; padding: 0 var(--c100-btn-pl); min-height: var(--c100-btn-alto); border-radius: var(--r); border: 1.5px solid var(--btn-borde); background: var(--btn-cara); color: var(--btn-tinta); box-shadow: 0 var(--btn-n) 0 var(--btn-canto); transform: translateY(var(--btn-y)); cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform 90ms var(--ez), box-shadow 90ms var(--ez); } .btn:hover { --btn-n: calc(var(--c100-btn-canto) + 1px); --btn-y: -1px; color: var(--btn-tinta); text-decoration: none; } .btn:active { --btn-n: 0px; --btn-y: var(--c100-btn-canto); } .btn:focus-visible { outline: 2px solid var(--aico); outline-offset: 3px; } /* Fantasma / secundario y claro: cara de superficie, borde fino, canto gris. Sin rosa. */ .btn.gh, .btn--claro { --btn-cara: var(--s); --btn-tinta: var(--tx); --btn-borde: var(--rl); --btn-canto: color-mix(in oklab, var(--s) 70%, var(--canto-mezcla)); } /* Oscuro: cara de tinta. */ .btn--oscuro { --btn-cara: var(--tx); --btn-tinta: var(--g); --btn-borde: var(--tx); --btn-canto: color-mix(in oklab, var(--tx) 70%, var(--canto-mezcla)); } /* Amarillo: SOLO la accion principal de una pilar o de la compra (no es el boton del sitio). */ .btn--ac { --btn-cara: var(--ac); --btn-tinta: var(--onac); --btn-borde: var(--ac); --btn-canto: var(--acedge); } /* Verde: WhatsApp. Azul marino: la puerta de agencias (ley 74). */ .btn--ok { --btn-cara: var(--ok); --btn-tinta: var(--g); --btn-borde: var(--ok); --btn-canto: color-mix(in oklab, var(--ok) 70%, var(--canto-mezcla)); } .btn--nv { --btn-cara: var(--nv); --btn-tinta: var(--onnv); --btn-borde: var(--nv); --btn-canto: var(--nvedge); } .btn--sm { min-height: var(--c100-btn-alto-chico); padding: 0 var(--c100-btn-pl-chico); font-size: var(--c100-btn-fuente-chico); } /* el chico: solo donde ya existía */ .btn--full { width: 100%; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { --btn-n: var(--c100-btn-canto); --btn-y: 0px; filter: brightness(1.04); } .btn:active { --btn-n: var(--c100-btn-canto); --btn-y: 0px; filter: brightness(.9); } } /* =========================================================================== 7 · PIEZAS BASE ======================================================================== */ .stars { color: var(--ai); letter-spacing: .5px; font-size: .75rem; line-height: 1; } .stars i { font-style: normal; opacity: .26; } /* RETIRADO EL 27-AGO · el punto "en vivo" redondo (.live) y su @keyframes c100-pulse. Era el marcador VIEJO, el que quedo registrado hace semanas como «muere con estado-vivo». Lo sustituye la pastilla con punto CUADRADO y sonar. No se cuadro: se retiro. Comprobado antes de borrar que no lo pintaba nadie —ni un PHP, ni un JS, ni otra regla de esta hoja—, asi que era CSS muerto sirviendose en cada peticion. Cuadrarlo habria dejado un elemento que sobra, ahora ademas con la forma correcta, que es peor: parece que se usa. Si se necesita el sonar otra vez, esta en git. */ /* Chip glass: categorias, marcas, busquedas populares */ .chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: var(--r); padding: .4rem .8rem; font-size: var(--fs-sm); font-weight: 600; color: var(--tx); min-height: 38px; transition: transform 140ms var(--ez); } .chip:hover { transform: translateY(-1px); color: var(--tx); } /* Etiqueta de pago o marca, en mono */ .pc { font-family: var(--mo-f); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .5rem; border-radius: 6px; color: var(--mu); } /* Pildora de contexto (sobre el hero) */ .tag { display: inline-flex; align-items: center; gap: .4rem; border-radius: 11px; padding: .3rem .7rem; color: var(--mu); } .tag i { width: 6px; height: 6px; border-radius: 2px; background: var(--ac); flex: none; } /* Rating visible. Nunca aggregateRating: son resenas de un tercero. */ .rating { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mo-f); font-size: var(--fs-xs); letter-spacing: .06em; color: var(--mu); } .rating:hover { color: var(--ai); } .rating__star { color: var(--ai); font-size: 1.1em; line-height: 1; } /* =========================================================================== 8 · CHROME 8.1 Menu Islas (movil) · 8.2 Header escritorio · 8.3 Mega menu 8.4 Overlay movil ======================================================================== */ /* --- 8.1 · MENU ISLAS ---------------------------------------------------- Corregido el 25-ago-2026 con el laboratorio "Barra Islas — Correccion". EL RIEL MANDA. El margen horizontal vive UNA SOLA VEZ, en .islas. Dentro, .rail ocupa el ancho util y reparte con space-between; las dos islas son hijos flex suyos. Asi el margen izquierdo y el derecho coinciden por construccion. El descuadre que se vio en el telefono venia justo de lo contrario: el margen se resolvia en dos sitios a la vez. LEY DEL CRISTAL: una superficie de cristal no contiene otra superficie de cristal. La isla ES el cristal; dentro, todo va desnudo. Para separar, el 1px de .sep — no otra pastilla. (Antes: isla de cristal > pastilla de idioma de cristal > toggle de cristal. Leia como dos menus encimados.) LEGIBILIDAD: la barra flota sobre contenido impredecible. Con cristal puro, un boton rosa del hero pasando por debajo se come el texto. Por eso la superficie es la variante glass-panel (13.1): la receta de siempre sobre una base --el al 72%. Se sigue viendo el desenfoque y el movimiento detras; el texto ya no pelea. AL PARTIRSE no entra ni sale nada del DOM: los cuatro elementos existen siempre. Solo cambian dos cosas, ambas continuas — la superficie del riel se desvanece mientras aparece la de cada isla (260ms), y el logotipo se recoge a isotipo. Umbrales 64 / 24 (histeresis, en theme.js). */ .islas { position: fixed; inset: 0 0 auto; z-index: var(--z-encabezado, 90); padding: calc(7px + env(safe-area-inset-top)) var(--gut) 0; height: calc(64px + env(safe-area-inset-top)); display: flex; align-items: center; pointer-events: none; /* Contexto para la guarda anti-desborde de mas abajo. El ancho de .islas es el del viewport, asi que la consulta mide lo que tiene que medir. */ container-type: inline-size; } .rail { flex: 1; min-width: 0; height: 50px; position: relative; display: flex; align-items: center; justify-content: space-between; pointer-events: auto; } /* Una sola receta para las tres superficies (riel + dos islas): lo unico que las distingue es cual esta encendida. */ .rail::before, .grp::before { content: ""; position: absolute; inset: 0; border-radius: 100px; background: var(--vidrio-fondo), color-mix(in oklab, var(--el) 72%, transparent); backdrop-filter: var(--vidrio-blur); -webkit-backdrop-filter: var(--vidrio-blur); border: 1px solid var(--vidrio-borde); box-shadow: inset 0 1px 0 var(--vidrio-filo), var(--gSh); transition: opacity 260ms var(--ez); pointer-events: none; } .rail::before { opacity: 1; } .grp::before { opacity: 0; } .islas.is-split .rail::before { opacity: 0; } .islas.is-split .grp::before { opacity: 1; } /* Las islas: hijos flex del riel. Nunca absolute, nunca ancho fijo, nunca margenes propios. El aire interior es este padding, identico a los dos lados de cada isla. */ .grp { position: relative; flex: none; flex-shrink: 0; min-width: 0; height: 50px; display: flex; align-items: center; gap: 9px; padding-inline: 12px; border-radius: 100px; } /* Nada dentro de la isla tiene un ancho que no quepa en 360px ni se sale de la pastilla (ORDEN-DISENO-GLOBAL-1 §3): el interruptor mide 50 y su envoltorio tactil tambien, para que Firefox, Opera y Samsung no lo empujen fuera. */ .grp .sw-hit { width: 50px; min-width: 50px; flex: none; } .grp > * { position: relative; z-index: 1; } /* Nada dentro de una isla trae vidrio propio. Es la ley, escrita una vez. */ .grp button { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* El separador de 1px que sustituye a la pastilla anidada. */ .sep { width: 1px; height: 20px; background: var(--gBr); flex: none; } /* --- LOGO (parts/logo.php) --------------------------------------------- Dos variantes del lockup porque el wordmark original es negro y sobre el fondo oscuro seria invisible. El CSS ensena una u otra segun data-theme; nunca las dos. */ .logo { display: flex; align-items: center; gap: .45rem; flex: none; } .logo__lockup { display: block; height: 24px; width: auto; } .logo__lockup--claro { display: none; } :root[data-theme="light"] .logo__lockup--oscuro { display: none; } :root[data-theme="light"] .logo__lockup--claro { display: block; } .logo__iso { display: none; } /* En las Islas el logotipo NO desaparece de golpe: se recoge. El lockup estrecha su max-width hasta el ancho del isotipo mientras se cruza con el isotipo, que esta superpuesto exactamente encima de la marca. El resultado es un solo movimiento continuo — nada aparece ni desaparece. flex:none para que jamas se corte a media palabra. */ /* SIN MOVER LA MAQUETACION (ORDEN-MENU-SCROLL-1: CLS 0). Antes el lockup estrechaba su max-width de 111 a 27 px y la hamburguesa se corria 84 px POR MAQUETACION: Chrome lo contaba como desplazamiento (0.002 por vuelta, y ahora el encabezado se expande cada vez que el usuario sube). Ahora el logo ocupa siempre el ancho del isotipo (27 px); la marca se pinta encima, absoluta, y se recoge con clip-path; la hamburguesa se corre con transform lo que la marca mide de mas (26 px de alto x 440/103 de proporcion - 27). Se ve exactamente igual que antes. */ .islas { --logo-extra: calc(26px * 440 / 103 - 27px); } .islas .logo { position: relative; width: 27px; } .islas .logo__lockup { position: absolute; left: 0; top: 50%; translate: 0 -50%; height: 26px; width: auto; max-width: none; flex: none; clip-path: inset(0 0 0 0); transition: clip-path 300ms var(--ez), opacity 200ms var(--ez); } .islas .logo__iso { display: block; position: absolute; left: 0; top: 50%; height: 26px; width: auto; translate: 0 -50%; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ez); } .islas .burger { transform: translateX(var(--logo-extra)); transition: transform 300ms var(--ez); } .islas.is-split .logo__lockup { clip-path: inset(0 calc(100% - 27px) 0 0); opacity: 0; } .islas.is-split .logo__iso { opacity: 1; } .islas.is-split .burger { transform: none; } /* GUARDA ANTI-DESBORDE. Por debajo de este ancho el logotipo se recoge solo, antes de que nada pueda salirse. OJO CON EL NUMERO: una consulta @container NO mide el viewport, mide la CAJA DE CONTENIDO del contenedor. Como .islas lleva --gut a cada lado (~16.8px en movil), en un telefono de 390px el contenedor mide 356.4, no 390. Con el 379px del laboratorio la guarda saltaba en 390 y el logotipo se recogia estando en reposo — el medidor lo delato: el grupo izquierdo daba 94px igual que partido, en vez de 178. El umbral real, medido: grupo izq con logotipo 178.06 + grupo der 164.48 = 342.54 de contenido 390px -> caja 356.4 cabe con 13.9 de holgura -> logotipo visible 360px -> caja 326.4 no cabe -> se recoge 340 cae limpio entre los dos. */ @container (max-width: 340px) { .islas .logo__lockup { clip-path: inset(0 calc(100% - 27px) 0 0); opacity: 0; } .islas .logo__iso { opacity: 1; } .islas .burger { transform: none; } } .burger { display: grid; gap: 4px; padding: 3px 8px; min-height: 44px; align-content: center; flex: none; } .burger span { display: block; width: 18px; height: 2px; background: var(--tx); border-radius: 2px; } /* --- 8.2 · HEADER ESCRITORIO (ORDEN-MENU-FOOTER-1) ----------------------- Sin WhatsApp (ORDEN-DISENO-GLOBAL-1 §1: se encimaba con «Nosotros»). Si el menu no cabe con las etiquetas del idioma, theme.js §1b mide y pone .hdr--apretado: el menu se esconde y sale la hamburguesa (el mismo overlay del movil). */ .hdr { display: none; } .hdr__burger { display: none; } .hdr--apretado .hdr__nav { display: none; } .hdr--apretado .hdr__burger { display: grid; } /* Con sesion iniciada, las islas del movil bajan lo que mide la barra de WordPress (46 px hasta 782). */ .admin-bar .islas { top: var(--wp-admin--admin-bar--height, 46px); } @media (min-width: 1000px) { .islas { display: none; } .hdr { display: block; position: sticky; top: 0; z-index: var(--z-encabezado, 90); border-bottom: 1px solid var(--rl2); } /* El vidrio del header va en ::before y no en .hdr: un elemento con backdrop-filter es «raiz de fondo» de lo que lleva dentro, y el mega menu de vidrio solo veria el header, no la pagina de atras. */ .hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in oklab, var(--g) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Con sesion iniciada, la barra de WordPress va arriba: el header se pega debajo de ella. */ .admin-bar .hdr { top: var(--wp-admin--admin-bar--height, 32px); } /* .hdr__in es el contexto del panel: el mega ocupa el ancho del wrap. */ .hdr__in { position: relative; display: flex; align-items: center; gap: var(--sp4); min-height: 66px; flex-wrap: nowrap; } .hdr__nav { display: flex; align-items: center; gap: .1rem; flex: 1 1 auto; min-width: 0; } .hdr__right { display: flex; align-items: center; gap: .5rem; flex: none; } /* FLOTANTE (ORDEN-MENU-SCROLL-1): al bajar, el header se vuelve una barra de vidrio mas baja, separada del borde y redondeada (el lenguaje de la barra completa del movil), con todo dentro: menu, idioma y moneda, sol/luna. El header NO cambia el alto que ocupa (sigue siendo sticky de 66 px): la barra es un pseudo de .hdr__in y lo que se anima es su opacidad y escala, el borde y el vidrio de reposo. CLS 0. theme.js §1 pone .is-flotante. */ /* overflow-x: clip (CORRECCION-PANEL-ABIERTO-1, desborde a 1024): entre 1000 y ~1280 .hdr__in ocupa todo el ancho y la pildora (inset -16px) sobresalia 24 px de la pagina aunque estuviera apagada. Solo corta lo que ya cae fuera de la pantalla; en vertical (mega menus) nada cambia. */ .hdr { transition: border-color 220ms var(--ez); overflow-x: clip; } .hdr::before { transition: opacity 220ms var(--ez); } .hdr__in::before { content: ""; position: absolute; inset: 9px -16px; z-index: -1; pointer-events: none; border-radius: 18px; border: 1px solid var(--vidrio-borde); background: color-mix(in oklab, var(--g) 84%, transparent); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); box-shadow: inset 0 1px 0 var(--vidrio-filo), var(--gSh); opacity: 0; transform: scale(1.015); transition: opacity 220ms var(--ez), transform 220ms var(--ez); } .hdr.is-flotante { border-bottom-color: transparent; } .hdr.is-flotante::before { opacity: 0; } .hdr.is-flotante .hdr__in::before { opacity: 1; transform: none; } .hdr.is-flotante .navlink { padding-block: .42rem; } /* el panel sale a la misma distancia de la barra flotante que del header en reposo */ .hdr.is-flotante .mega__panel { top: calc(100% - 9px); } } @media (min-width: 1000px) and (prefers-reduced-motion: reduce) { .hdr, .hdr::before, .hdr__in::before { transition: none; } } .navlink { display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .7rem; border-radius: 8px; white-space: nowrap; font-size: var(--fs-sm); font-weight: 700; color: var(--mu); transition: color 140ms var(--ez), background 140ms var(--ez); } .navlink:hover, .navlink[aria-expanded="true"] { color: var(--tx); background: var(--gB); } .navlink svg { width: 11px; height: 11px; opacity: .7; } .navlink--off { color: var(--dim); cursor: default; } .navlink__chip { display: inline-flex; align-items: center; height: 18px; padding: 0 .4rem; border-radius: 6px; background: var(--ac); color: var(--onac); font-size: 9px; font-weight: 700; letter-spacing: .06em; } /* La llamita de Ofertas (B-LLAMA): del alto del chip, se estira, se encoge y se ladea; quieta si no hay movimiento */ /* B-LLAMA2 (Marco, captura del menu del telefono): justo despues de «Ofertas», a 7 px, al doble (36 px). En el menu del telefono el renglon es flex con espacio entre medio y la llamita caia al borde derecho, donde van las flechas de los desplegables: margin-right:auto la pega al texto. En escritorio sobresale sin subir el alto del header (los margenes negativos le quitan su alto al renglon) y top la baja a la base del texto. La zona de toque sigue siendo el enlace. */ /* B-LLAMA3 (Marco, 5-oct 15:53): la llama C, «3D brillante», en el mismo hueco de 36 px de alto (30 de ancho: su viewBox es 48 x 56). Colores fijos, iguales de noche y de dia (los degradados, en c100_llama_defs). Movimiento solo CSS, el de la referencia: la llama respira desde la base y el corazon late a otro ritmo; quieta sin movimiento. */ .c100-llama, .navlink svg.c100-llama { display: inline-block; flex: none; width: 30px; height: 36px; opacity: 1; vertical-align: -12px; margin: -9px auto -9px 7px; overflow: visible; } .c100-llama__g { transform-origin: 50% 96%; transform-box: fill-box; animation: c100-respira 1.1s ease-in-out infinite alternate; } .c100-llama__c { transform-origin: 50% 100%; transform-box: fill-box; animation: c100-late .7s ease-in-out infinite alternate; } /* la sombra del piso solo de dia: de noche, negra sobre el fondo oscuro, solo ensuciaba */ /* el SVG de los degradados (c100_llama_defs): fuera del flujo, sin ocupar sitio; sin estilo en linea (lo prohibe la puerta) */ .c100-llama-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .c100-llama__piso { fill: #000; opacity: 0; } [data-theme="light"] .c100-llama__piso { opacity: .16; } @keyframes c100-respira { 0% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(1.03, .97) skewX(-2.5deg); } 60% { transform: scale(.97, 1.05) skewX(2deg); } 100% { transform: scale(1.01, 1.03) skewX(-1deg); } } @keyframes c100-late { to { transform: scale(.9, 1.08); } } @media (prefers-reduced-motion: reduce) { .c100-llama__g, .c100-llama__c { animation: none; } } /* «Header sobre foto»: el vidrio del header en escritorio cuando la pagina empieza con una foto a todo lo ancho. El mega hero lo activa solo (:has); otra portada pone la clase c100-hdr-foto en el body (body_class), sin copiar la regla. */ @media (min-width: 1000px) { body:is(:has(.mhero), .c100-hdr-foto) .hdr:not(.is-flotante)::before { background: color-mix(in oklab, var(--g) 60%, transparent); } } /* --- 8.3 · MEGA MENU ----------------------------------------------------- */ /* El item es static: el panel se posiciona contra .hdr__in y ocupa el wrap. Sin hueco exterior: el respiro va dentro (.mega__in) y un puente invisible (::before) cubre los 14px de arriba. Nada de display:none <-> flex: se anima opacidad, visibilidad y un pelin de desplazamiento, 180ms. */ .mega { position: static; } .mega__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 95; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; /* Cerrado no se maqueta (como el overlay): sin esto, las imagenes lazy de un panel cerrado (la miniatura del video, la foto del destacado) se pedian al cargar la pagina, porque visibility: hidden sigue ocupando su sitio. */ content-visibility: hidden; transition: opacity 180ms var(--ez), transform 180ms var(--ez), visibility 0s linear 180ms, content-visibility 0s linear 180ms; transition-behavior: allow-discrete; } .mega__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 24px; } .mega[data-open="true"] .mega__panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; content-visibility: visible; transition: opacity 180ms var(--ez), transform 180ms var(--ez), visibility 0s, content-visibility 0s; transition-behavior: allow-discrete; } @media (prefers-reduced-motion: reduce) { .mega__panel { transition: none; transform: none; } } /* De vidrio (ORDEN-VIDEO-MENU-PAQUETES-1): lo de atras se adivina difuso y el texto se lee. Mismo alfa y mismo desenfoque en noche y en dia; sin backdrop-filter, el respaldo opaco de siempre (abajo, @supports not). */ .mega__in { border-radius: var(--r-lg); padding: var(--sp5); background: linear-gradient(155deg, var(--gA), var(--gB)), var(--mega-fondo); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--gBr); box-shadow: var(--sombra-card); } /* Nosotros: desplegable corto bajo su boton, no el ancho del wrap. */ .mega--corto { position: relative; } .mega--corto .mega__panel { left: 0; right: auto; width: 320px; } /* el contenido de una entrada (parts/nav-panel.php), en escritorio */ .navp { display: grid; gap: var(--sp5); align-items: start; } .navp--tours { grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; } .navp--guia { grid-template-columns: repeat(3, minmax(0, 1fr)) 280px; } .navp--paquetes { grid-template-columns: 320px repeat(2, minmax(0, 1fr)); } .navp--destinos { grid-template-columns: 1fr; } .navp--simple { grid-template-columns: 1fr; gap: var(--sp3); } /* Nosotros (ORDEN-MENU-NOSOTROS-1): video «Quiénes somos» · enlaces · la tarjeta Contáctanos, con el mismo vidrio, radio y padding que los otros paneles. */ .navp--nosotros { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) minmax(0, 1fr); align-items: start; } .navp__contacto { display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: var(--sp4); border-radius: var(--r-lg); border: 1px solid var(--rl); background: var(--s); color: var(--tx); } .navp__contacto > .mo { color: var(--ai); } .navp__wa { justify-content: center; gap: .45rem; margin-block: .2rem .3rem; } .navp__dato { font-size: var(--fs-sm); font-weight: 700; color: var(--tx); } .navp__dato.soft { font-weight: 500; color: var(--mu); } .navp__dato a { color: var(--ai); text-decoration: underline; text-underline-offset: 3px; } .navp__contacto .navp__rnt { margin-top: .3rem; } /* El video de Paquetes (ORDEN-VIDEO-MENU-PAQUETES-1): solo escritorio, a la derecha bajo «Combos», 16:9 y con el fondo alineado al de la tarjeta del paquete (la tarjeta y «Por destino» ocupan las dos filas). Fachada hasta el clic. */ .navp--paquetes:has(> .navp__media) > .navp__card { grid-area: 1 / 1 / 3 / 2; align-self: stretch; } .navp--paquetes:has(> .navp__media) > .navp__card + .navp__col { grid-area: 1 / 2 / 3 / 3; } .navp__media { display: grid; gap: .5rem; min-width: 0; } .navp--paquetes .navp__media { grid-area: 2 / 3 / 3 / 4; align-self: end; } .navp__media-rot { display: flex; flex-direction: column; gap: .15rem; margin: 0; } .navp__media-rot .mo { color: var(--tx); } /* --tx: va sobre la zona donde mas asoma una foto clara (3.6:1 con --mu) */ .navp__media-rot b { font-size: var(--fs-sm); line-height: 1.3; } .navp__marco { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--el); } .navp__marco > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .navp__video { display: block; padding: 0; border: 1px solid var(--rl); border-radius: 12px; overflow: hidden; background: none; cursor: pointer; transition: border-color 140ms var(--ez); } .navp__video:hover, .navp__video:focus-visible { border-color: var(--aico); } .navp__video:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; } .navp__video img { width: 100%; height: 100%; object-fit: cover; display: block; } .navp__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transition: scale 160ms var(--ez); } .navp__play circle { fill: var(--ac); } .navp__play path { fill: var(--onac); } .navp__video:hover .navp__play { scale: 1.08; } @media (prefers-reduced-motion: reduce) { .navp__play { transition: none; } .navp__video:hover .navp__play { scale: 1; } } /* «Cancún» en «Por destino» se ilumina mientras se ve el video: se lee que el video es de esa seccion */ .navp:has(> .navp__media[data-destino="cancun"]) a[data-navp-destino="cancun"] { color: var(--ai); text-decoration: underline 2px var(--ac); text-underline-offset: 4px; } @media (max-width: 999px) { .navp__media { display: none; } } /* respaldo: el overlay movil ni lo recibe */ .navp__col { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .navp__col > .mo { color: var(--mu); margin-bottom: .35rem; } /* --mu y no --dim: AA sobre el vidrio */ .navp__col a, .navp__off { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--mu); padding: .3rem 0; transition: color 140ms var(--ez); } /* Los enlaces del panel en --tx: con el vidrio, una foto clara detras (el agua del heroe de Xcaret) bajaba el --mu a 3.5:1. El rotulo de cada columna sigue en --mu: la jerarquia la da el tamaño y la mono. */ .navp__col a { color: var(--tx); } .navp__col a:hover { color: var(--ai); } .navp__col a small { color: var(--mu); font-size: 10px; } .navp__off { color: var(--dim); cursor: default; } .navp__pie { grid-column: 1 / -1; justify-self: start; margin-top: var(--sp2); font-size: var(--fs-sm); font-weight: 800; color: var(--tx); border-bottom: 2px solid var(--ac); } .navp__card { display: flex; flex-direction: column; gap: .3rem; padding: var(--sp4); border-radius: var(--r-lg); border: 1px solid var(--rl); background: var(--s); color: var(--tx); min-width: 0; transition: border-color 140ms var(--ez); } a.navp__card:hover { border-color: var(--aico); } .navp__card > .mo { color: var(--ai); } .navp__card b { font-size: var(--fs-base); line-height: 1.25; letter-spacing: -.01em; } .navp__card--guia { background: var(--ac); color: var(--onac); border-color: var(--acedge); } .navp__card--guia > .mo, .navp__card--guia > span { color: inherit; } .navp__card--guia > span { font-size: var(--fs-sm); } .navp__precio { display: flex; align-items: baseline; gap: .35rem; font-size: var(--fs-sm); } .navp__precio strong { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .navp__foto { display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--el); margin-bottom: .4rem; } .navp__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .navp__foto--vacia { display: grid; place-items: center; background: linear-gradient(150deg, var(--el), var(--rl)); color: var(--dim); } .navp__tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp3); } /* B-MENU-DEST: el renglon de texto bajo las tarjetas (Tulum · Holbox · Próximamente: Bacalar) */ .navp__mas { margin: var(--sp2) 0 0; font-weight: 800; } .navp__mas a { color: var(--tx); } .navp__mas a:hover { color: var(--ai); } .navp__mas .navp__pronto { font-weight: 400; } .navp__destino { display: flex; flex-direction: column; gap: .2rem; color: var(--tx); font-weight: 800; min-width: 0; } .navp__destino .navp__foto { margin-bottom: .2rem; } a.navp__destino:hover { color: var(--ai); } span.navp__destino { color: var(--dim); } .navp__pronto { margin: 0; font-size: var(--fs-sm); } .navp__pronto .mo { color: var(--mu); margin-right: .4rem; } .navp__rnt { margin: var(--sp2) 0 0; padding-top: var(--sp3); border-top: 1px solid var(--rl); color: var(--mu); } .navp__rnt a { color: var(--mu); } /* --- 8.4 · OVERLAY MOVIL ------------------------------------------------- */ .ovl { position: fixed; inset: 0; z-index: var(--z-modal, 100); background: color-mix(in oklab, var(--g) 94%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: flex; flex-direction: column; padding: calc(74px + env(safe-area-inset-top)) var(--gut) calc(var(--sp6) + env(safe-area-inset-bottom)); gap: .1rem; overflow-y: auto; visibility: hidden; opacity: 0; /* Cerrado no se maqueta (content-visibility: hidden): era trabajo de CPU antes del primer pintado en cada pagina (ORDEN-COLA-B-2 §4). allow-discrete: al cerrar, el contenido se esconde al final del fundido, no de golpe. */ content-visibility: hidden; transition: opacity 240ms var(--ez), visibility 240ms var(--ez), content-visibility 240ms allow-discrete; } .ovl[data-open="true"] { visibility: visible; opacity: 1; content-visibility: visible; } .ovl__item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.035em; color: var(--tx); padding: .6rem 0; border-bottom: 1px solid var(--rl2); list-style: none; cursor: pointer; } .ovl__item::-webkit-details-marker { display: none; } .ovl__item:hover { color: var(--ai); } .ovl__item--off { color: var(--dim); } .ovl__item svg { flex: none; transition: transform 200ms var(--ez); } .ovl__grupo[open] > .ovl__item svg { transform: rotate(180deg); } .ovl__grupo[open] > .ovl__item { color: var(--ai); } .ovl__cuerpo { padding: var(--sp3) 0 var(--sp5); display: flex; flex-direction: column; gap: var(--sp4); } /* en el overlay, las columnas son chips de 36px y las tarjetas van en pequeno */ .ovl .navp { display: flex; flex-direction: column; gap: var(--sp4); } .ovl .navp__col { flex-direction: row; flex-wrap: wrap; gap: .4rem; } .ovl .navp__col > .mo { flex-basis: 100%; margin: 0 0 .1rem; } .ovl .navp__col a, .ovl .navp__off { height: 36px; padding: 0 .75rem; border-radius: 10px; border: 1px solid var(--rl); background: var(--s); font-size: var(--fs-xs); color: var(--tx); gap: .35rem; } .ovl .navp__off { color: var(--dim); } /* El enlace principal de la seccion (CORRECCION-MENU-MOVIL-1 §2: «Nuestra agencia»): relleno del acento en la pildora del telefono; en el mega menu de escritorio, en negrita y con el color de acento. */ .ovl .navp__col a.navp__principal { background: var(--ac); border-color: var(--ac); color: var(--onac); font-weight: 800; } .navp__col a.navp__principal { color: var(--ai); font-weight: 800; } .ovl .navp__card { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .5rem; padding: var(--sp3); } .ovl .navp__card .navp__foto { width: 84px; aspect-ratio: 4 / 3; margin: 0; } .ovl .navp__card b { flex: 1 1 8rem; font-size: var(--fs-sm); } .ovl .navp__card--paquete .navp__precio strong { font-size: var(--fs-base); } /* Nosotros en el movil: los enlaces y el bloque Contáctanos con el WhatsApp a todo lo ancho (sin video). */ .ovl .navp__contacto { padding: var(--sp3); align-self: stretch; } .ovl .navp__wa { width: 100%; min-height: 48px; } /* B-MENU-DEST (Marco, 5-oct 15:27): en el telefono las cuatro tarjetas en una tira que se desliza con el dedo, solo CSS; cada una ~70 % del ancho para que se asome la siguiente. Sin flechas ni JS. */ .ovl .navp__tarjetas { display: flex; gap: var(--sp3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; } .ovl .navp__tarjetas::-webkit-scrollbar { display: none; } .ovl .navp__destino { flex: 0 0 70%; scroll-snap-align: start; font-size: var(--fs-sm); } .ovl__todo { align-self: flex-start; font-size: var(--fs-sm); font-weight: 800; color: var(--tx); border-bottom: 2px solid var(--ac); } .ovl__pie { margin-top: var(--sp5); padding-top: var(--sp5); border-top: 1px solid var(--rl2); display: flex; flex-direction: column; gap: var(--sp3); } .ovl__tel { font-size: var(--fs-lg); font-weight: 800; color: var(--tx); align-self: flex-start; } .ovl__controles .controles { justify-content: flex-start; } .ovl__enlaces { display: flex; flex-wrap: wrap; gap: var(--sp3); } .ovl__enlaces a { font-size: var(--fs-sm); font-weight: 700; color: var(--mu); } .ovl__rnt { margin: 0; color: var(--dim); } .ovl__close { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: var(--gut); width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--gBr); background: var(--gB); color: var(--tx); display: grid; place-items: center; } body.c100-locked { overflow: hidden; } /* --- los dialogos del selector y las fichas de los sellos: titulos que no son encabezados --- */ .sel-panel__titulo { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; } .c100-ficha__h { margin: 0 0 var(--sp3); font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; color: var(--tx); } /* En el panel de la ficha, el boton de A ya no repite el «desde MX$…»: el precio esta arriba. */ .panel .c100-modal-boton__desde { display: none; } /* =========================================================================== 9 · FOOTER (ORDEN-MENU-FOOTER-1 §3) ======================================================================== */ /* El pie nunca esta a la vista al cargar: se maqueta cuando se acerca (ORDEN-COLA-B-2 §4, trabajo de CPU antes del primer pintado). «auto» recuerda su alto real una vez visto. */ .pie { border-top: 1px solid var(--rl); content-visibility: auto; contain-intrinsic-size: auto 1700px; } .pie__top { position: relative; overflow: hidden; border-bottom: 1px solid var(--rl); } .pie__top__in { position: relative; padding-block: var(--sp6); display: flex; flex-direction: column; gap: .7rem; } /* El resplandor rosa. Decoracion en pseudo-elemento, nunca en el DOM. */ .pie__top::before { content: ""; position: absolute; inset: -40%; pointer-events: none; filter: blur(46px); background: radial-gradient(24% 42% at 78% 40%, color-mix(in oklab, var(--go) 26%, transparent), transparent 70%); } .pie__h { margin: 0; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .pie__p { margin: 0; max-width: 52ch; } .pie__form { display: flex; gap: .45rem; flex-wrap: wrap; max-width: 460px; } .pie__form input { flex: 1 1 200px; min-width: 0; background: var(--gB); color: var(--tx); border: 1px solid var(--gBr); border-radius: var(--r); padding: .55rem .75rem; font-size: var(--fs-sm); min-height: 46px; outline: none; } .pie__form input::placeholder { color: var(--dim); } /* marca + columnas */ .pie__grid { display: grid; gap: var(--sp6); padding-block: var(--sp6); } @media (min-width: 1000px) { .pie__grid { grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp7); } } .pie__marca { display: flex; flex-direction: column; gap: var(--sp3); align-items: flex-start; } .pie__somos { margin: 0; color: var(--mu); font-size: var(--fs-sm); line-height: 1.55; max-width: 34ch; } .pie__rnt { display: flex; flex-direction: column; gap: .15rem; padding: var(--sp3) var(--sp4); border-radius: var(--r); border: 1px solid var(--rl); background: var(--s); } .pie__rnt .mo { color: var(--dim); } .pie__rnt b { font-family: var(--mo-f); font-size: var(--fs-sm); letter-spacing: .04em; } .pie__rnt a { font-size: var(--fs-xs); font-weight: 700; color: var(--mu); } .pie__rnt a:hover { color: var(--ai); } .pie__redes { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; } .pie__redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--rl); color: var(--mu); } .pie__redes a:hover { color: var(--tx); border-color: var(--mu); } .pie__cols { display: grid; gap: var(--sp4); } @media (min-width: 760px) { .pie__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp5); } } .pie__col { border-bottom: 1px solid var(--rl2); } .pie__col > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: var(--dim); } .pie__col > summary::-webkit-details-marker { display: none; } .pie__col > summary::after { content: "+"; font-family: var(--mo-f); color: var(--dim); } .pie__col[open] > summary::after { content: "\2212"; } .pie__col ul { list-style: none; margin: 0; padding: 0 0 var(--sp3); display: flex; flex-direction: column; gap: .15rem; } .pie__col a { font-size: var(--fs-sm); font-weight: 600; color: var(--mu); padding: .2rem 0; display: block; } .pie__col a:hover { color: var(--ai); } .pie__off { font-size: var(--fs-sm); color: var(--dim); padding: .2rem 0; display: block; } @media (min-width: 760px) { .pie__col { border-bottom: 0; } .pie__col > summary { pointer-events: none; min-height: 0; margin-bottom: .35rem; } .pie__col > summary::after { content: none; } } /* B2B + contacto */ .pie__medio { display: grid; gap: var(--sp4); padding-bottom: var(--sp6); } @media (min-width: 760px) { .pie__medio { grid-template-columns: 1fr 1fr; } } .pie__b2b, .pie__contacto { display: flex; flex-direction: column; gap: .35rem; padding: var(--sp5); border-radius: var(--r-lg); border: 1px solid var(--rl); background: var(--s); align-items: flex-start; } .pie__b2b > .mo, .pie__contacto > .mo { color: var(--dim); } .pie__b2b b { font-size: var(--fs-xl); letter-spacing: -.02em; line-height: 1.15; } .pie__b2b .btn { margin-top: .5rem; } .pie__contacto > a:not(.btn) { color: var(--tx); font-weight: 700; } .pie__contacto .pie__wa { margin-top: .5rem; } @media (min-width: 760px) { .pie__contacto .pie__wa { width: auto; } } .pie__pay { display: flex; gap: .35rem; flex-wrap: wrap; padding-bottom: var(--sp5); } /* la fila legal */ .pie__legal { border-top: 1px solid var(--rl2); padding-block: var(--sp4) var(--sp6); display: flex; flex-direction: column; gap: var(--sp3); } .pie__legales { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem var(--sp4); } @media (min-width: 760px) { .pie__legales { display: flex; flex-wrap: wrap; } } .pie__legales a, .pie__cookies { font-size: var(--fs-xs); font-weight: 600; color: var(--mu); background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; } .pie__legales a:hover, .pie__cookies:hover { color: var(--ai); } .pie__fine { font-size: var(--fs-xs); color: var(--dim); display: flex; flex-wrap: wrap; gap: var(--sp3) var(--sp4); align-items: center; } .pie__idiomas { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; } .pie__idiomas a { font-family: var(--mo-f); font-size: 11px; letter-spacing: .06em; color: var(--dim); padding: .2rem .4rem; border-radius: 6px; } .pie__idiomas a[aria-current="true"] { color: var(--tx); background: var(--el); } /* el mapa del sitio */ .mapa-sitio__bloque { margin-top: var(--sp6); } .mapa-sitio__bloque h2 small { color: var(--dim); font-size: 10px; margin-left: .4rem; } .mapa-sitio__bloque ul { columns: 2; column-gap: var(--sp5); list-style: none; padding: 0; margin: 0; } @media (min-width: 760px) { .mapa-sitio__bloque ul { columns: 3; } } .mapa-sitio__bloque li { break-inside: avoid; padding: .15rem 0; } .mapa-sitio__bloque a { color: var(--mu); font-size: var(--fs-sm); } .mapa-sitio__bloque a:hover { color: var(--ai); } /* =========================================================================== 10 · CLASES DEL CONTRATO El JSONB contenido_{lang}.secciones_html llega con ESTA estructura exacta (contrato 5.3): el h3 va DENTRO del div, el itinerario es
    , y en includes los dos bloques son HERMANOS. Escrito contra eso. ======================================================================== */ .c100-intro, .c100-highlights, .c100-itinerario, .c100-includes, .c100-faq { margin-block: var(--sp7); } .c100-highlights > h3, .c100-itinerario > h3, .c100-includes > h3, .c100-faq > h3 { font-family: var(--mo-f); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ai); display: flex; align-items: center; gap: .7rem; margin-bottom: var(--sp4); } .c100-highlights > h3::before, .c100-itinerario > h3::before, .c100-includes > h3::before, .c100-faq > h3::before { content: ""; width: 24px; height: 2px; background: var(--ac); flex: none; } /* 10.1 · intro */ .c100-intro { border-left: 2px solid var(--aico); padding-left: var(--sp5); max-width: 64ch; } .c100-intro > h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp4); } .c100-intro > p { font-size: var(--fs-lg); color: var(--mu); } .c100-intro > p + p { margin-top: var(--sp4); } .c100-intro strong { color: var(--tx); } /* 10.2 · highlights */ .c100-highlights > ul { display: grid; gap: var(--sp3); grid-template-columns: 1fr; padding: 0; margin: 0; list-style: none; } @media (min-width: 620px) { .c100-highlights > ul { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .c100-highlights > ul { grid-template-columns: repeat(3, 1fr); } } .c100-highlights > ul > li { background: linear-gradient(155deg, var(--gA), var(--gB)); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid var(--gBr); box-shadow: inset 0 1px 0 var(--gIn), var(--gSh); border-radius: var(--r-lg); padding: var(--sp5); font-size: var(--fs-sm); color: var(--mu); } .c100-highlights > ul > li::before { content: ""; display: block; width: 18px; height: 2px; background: var(--ac); margin-bottom: var(--sp3); } /* 10.3 · itinerario (llega como
      ) */ .c100-itinerario > ol { counter-reset: c100step; list-style: none; padding: 0; margin: 0; position: relative; } .c100-itinerario > ol::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: var(--rl); } .c100-itinerario > ol > li { counter-increment: c100step; position: relative; padding-left: calc(var(--sp7) + var(--sp2)); padding-bottom: var(--sp5); font-size: var(--fs-sm); color: var(--mu); min-height: 32px; } .c100-itinerario > ol > li:last-child { padding-bottom: 0; } .c100-itinerario > ol > li::before { content: counter(c100step, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: grid; place-items: center; background: var(--g); border: 1px solid var(--aico); border-radius: 10px; font-family: var(--mo-f); font-size: .6875rem; font-weight: 700; color: var(--ai); } /* El contrato manda "titulo: detalle" en la misma linea. Se deja inline: sacarlo a bloque dejaba el ": " huerfano en la linea siguiente, y el colon viene del dato, no del tema. */ .c100-itinerario > ol > li > strong { color: var(--tx); font-size: var(--fs-base); } /* Blindaje del bug de grid del doc SISTEMA B.1: un hijo de grid sin min-width:0 puede colapsar a su contenido minimo. */ .c100-itinerario > ol > li > * { min-width: 0; } /* 10.4 · includes — dos h3 + dos ul HERMANOS, sin wrapper */ @media (min-width: 760px) { .c100-includes { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: var(--sp6); align-items: start; } .c100-includes > h3:nth-of-type(1) { grid-column: 1; grid-row: 1; } .c100-includes > ul:nth-of-type(1) { grid-column: 1; grid-row: 2; } .c100-includes > h3:nth-of-type(2) { grid-column: 2; grid-row: 1; } .c100-includes > ul:nth-of-type(2) { grid-column: 2; grid-row: 2; } } .c100-includes > ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp2); } .c100-includes > ul + h3 { margin-top: var(--sp6); } @media (min-width: 760px) { .c100-includes > ul + h3 { margin-top: 0; } } .c100-includes > ul > li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--sp3); align-items: start; font-size: var(--fs-sm); color: var(--mu); } .c100-includes > ul > li > * { min-width: 0; } .c100-includes > ul > li::before { content: "+"; font-family: var(--mo-f); font-weight: 700; color: var(--ai); line-height: 1.6; } /* El SEGUNDO bloque es siempre "no incluye" */ .c100-includes > h3:nth-of-type(2) { color: var(--dim); } .c100-includes > h3:nth-of-type(2)::before { background: var(--dim); } .c100-includes > ul:nth-of-type(2) > li { color: var(--dim); } .c100-includes > ul:nth-of-type(2) > li::before { content: "-"; color: var(--dim); } /* 10.5 · faq —
      nativo: accesible, sin JS, y el texto sigue en el DOM aunque este cerrado (lo que importa para el rastreador y para la IA) */ .c100-faq > details { border-bottom: 1px solid var(--rl); } .c100-faq > details:first-of-type { border-top: 1px solid var(--rl); } .c100-faq > details > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp4); padding: var(--sp5) 0; font-weight: 700; font-size: var(--fs-base); cursor: pointer; list-style: none; min-height: 48px; } .c100-faq > details > summary::-webkit-details-marker { display: none; } .c100-faq > details > summary::after { content: "+"; font-family: var(--mo-f); font-weight: 400; font-size: var(--fs-xl); line-height: 1; color: var(--ai); flex: none; transition: transform 200ms var(--ez); } .c100-faq > details[open] > summary::after { transform: rotate(45deg); } .c100-faq > details > summary:hover { color: var(--ai); } .c100-faq > details > p, .c100-faq > details > div { padding-bottom: var(--sp5); color: var(--mu); max-width: 68ch; } /* 10.6 · RESET frente al estilado generico de listas (seccion 11). Leccion de fase 1: :where() NO basta. Las dos reglas se aplican a la vez sobre propiedades distintas del mismo ::before — el contrato pone el "+", la generica pone position:absolute. Un ::before absoluto sale del flujo, el
    1. en grid se queda con un item y el texto cae en la columna de 20px: una palabra por linea. Aqui se devuelve al flujo. NO tocar .c100-itinerario: ese SI necesita el ::before absoluto. */ .c100-highlights > ul > li { position: static; } .c100-highlights > ul > li::before { position: static; } .c100-includes > ul > li { position: static; padding-left: 0; } .c100-includes > ul > li::before { position: static; width: auto; height: auto; background: none; } /* =========================================================================== 11 · CONTENIDO GENERICO (post_content sin clases de contrato) En :where() para que jamas le gane a un bloque, sin depender del orden. ======================================================================== */ .c100-content > * + * { margin-top: var(--sp4); } .c100-content > h2 { margin-top: var(--sp7); } .c100-content > h3 { margin-top: var(--sp6); } .c100-content--narrow { max-width: var(--content); } .c100-content :where(ol) { padding-left: 1.25rem; } .c100-content :where(li + li) { margin-top: var(--sp2); } .c100-content :where(ul) { list-style: none; padding-left: 0; } .c100-content :where(ul > li) { position: relative; padding-left: 1.25rem; } .c100-content :where(ul > li)::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 2px; background: var(--ac); } .c100-content :where(ol > li)::marker { color: var(--ai); font-family: var(--mo-f); } .c100-content :where(a) { color: var(--tx); text-decoration: underline; text-decoration-color: var(--aico); text-underline-offset: 3px; } .c100-content :where(a):hover { color: var(--ai); } .c100-content :where(blockquote) { border-left: 2px solid var(--aico); padding-left: var(--sp5); color: var(--mu); font-style: italic; } .c100-content :where(table) { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .c100-content :where(th), .c100-content :where(td) { padding: var(--sp3); border-bottom: 1px solid var(--rl); text-align: left; } .c100-content :where(th) { color: var(--ai); font-family: var(--mo-f); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; } .c100-tablewrap { overflow-x: auto; } /* Migas */ .crumbs { font-family: var(--mo-f); font-size: var(--fs-xs); color: var(--migas); padding-block: var(--sp4); } .crumbs a { color: var(--migas); } .crumbs a:hover { color: var(--ai); } /* LA CABECERA DE PAGINA (ORDEN-CABECERA-PAGINA-1): una sola, el patron del blog y las legales. Migas en mono, H1 a la escala comun (sin mayusculas forzadas, equilibrado), subtitulo atenuado a ~60 caracteres por linea y la linea de dato en mono. Selectores de dos clases a proposito: ninguna plantilla la retoca por su cuenta. */ .cab { margin: 0 0 var(--sp6); } .cab .cab__migas { padding-block: var(--sp4) var(--sp2); } .cab .cab__h1 { margin: .2rem 0 .5rem; font-family: var(--ui); font-size: var(--fs-4xl); line-height: 1.02; font-weight: 800; letter-spacing: -.05em; text-transform: none; text-wrap: balance; } .cab .cab__sub { max-width: 60ch; margin: 0; font-family: var(--ui); font-size: var(--fs-base); line-height: 1.5; color: var(--mu); text-wrap: pretty; } .cab .cab__dato { margin: .6rem 0 0; font-family: var(--mo-f); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--dim); } /* =========================================================================== 12 · UTILIDADES ======================================================================== */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .soft { color: var(--mu); } .center { text-align: center; } .stack { display: flex; flex-direction: column; gap: var(--sp4); } .row { display: flex; flex-wrap: wrap; gap: var(--sp3); align-items: center; } /* =========================================================================== 13 · BLOQUES DE LA HOME (fase C) 13.1 glass panel · 13.2 fondo bokeh · 13.3 card-producto 13.4 carrusel Profundidad · 13.5 apilado Naipes · 13.6 marquesina 13.7 hero buscador · 13.8 promesas · 13.9 muelle movil ======================================================================== */ /* --- 13.1 · VARIANTE OFICIAL "glass panel" ------------------------------- El glass normal es casi transparente y sirve para piezas pequenas sobre fondo. Un PANEL GRANDE que cae sobre texto necesita respaldo opaco o se vuelve ilegible. Misma receta + capa var(--el) debajo. Cero valores nuevos. Se usa en: mega menu, desplegable de idioma, hoja de reserva movil, modales. */ .glass-panel { background: var(--vidrio-fondo), var(--el); backdrop-filter: var(--vidrio-blur); -webkit-backdrop-filter: var(--vidrio-blur); border: 1px solid var(--vidrio-borde); box-shadow: inset 0 1px 0 var(--vidrio-filo), inset 0 0 0 1px var(--vidrio-borde), var(--gSh); } /* --- 13.2 · FONDO BOKEH (laboratorio Tres Carruseles) -------------------- */ /* .sec--elegante es el «fondo elegante» de la portada (ORDEN-HOME-2 §4): mientras B-C2 no cierre, el mismo bokeh. overflow: clip y no hidden: clip no crea contenedor de desplazamiento y los naipes (sticky) siguen pegandose cuando les toca este fondo; el navegador sin clip se queda con hidden. */ .bokeh, .sec--elegante { position: relative; overflow: hidden; } .sec--elegante { overflow: clip; } .bokeh::before, .sec--elegante::before { content: ""; position: absolute; inset: -4px; z-index: 0; pointer-events: none; filter: blur(1.3px); opacity: .8; background-image: radial-gradient(circle at 1px 1px, var(--patron-cruz) 1.2px, transparent 1.8px), radial-gradient(circle at 1px 1px, var(--patron-cruz-2) 1.2px, transparent 1.8px); background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px; } .bokeh::after, .sec--elegante::after { content: ""; position: absolute; inset: -28%; z-index: 0; pointer-events: none; filter: blur(46px); opacity: .95; background: radial-gradient(21% 17% at 12% 26%, rgba(124,231,220,.62), transparent 70%), radial-gradient(15% 13% at 33% 68%, rgba(255,212,0,.42), transparent 70%), radial-gradient(19% 16% at 58% 20%, rgba(255,27,127,.48), transparent 70%), radial-gradient(17% 14% at 78% 74%, rgba(124,180,231,.44), transparent 70%), radial-gradient(13% 11% at 92% 34%, rgba(255,212,0,.34), transparent 70%), radial-gradient(16% 13% at 46% 44%, rgba(124,231,220,.30), transparent 70%); } :root[data-theme="light"] .bokeh::after, :root[data-theme="light"] .sec--elegante::after { opacity: .5; } .bokeh > *, .sec--elegante > * { position: relative; z-index: 2; } /* La aurora animada es cara: solo se mueve la seccion a la vista (theme.js §1d pone .is-vista con IntersectionObserver). Hoy el bokeh es quieto; cuando B-C2 le de movimiento, esto ya lo pausa fuera de la pantalla. */ .sec--elegante:not(.is-vista)::before, .sec--elegante:not(.is-vista)::after, .sec--elegante:not(.is-vista) .c100-aurora > i { animation-play-state: paused; } /* «Claro»: el fondo plano de la pagina, sin aurora ni patron. */ .sec--claro { background: var(--g); } /* Ofertas de la semana: claro con enfasis, el filo con el degradado de la casa. */ .sec--enfasis { border-block: 1.5px solid transparent; border-image: var(--grad-casa) 1; } /* Titulo de seccion con el degradado de la casa */ .shead { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--sp5); } .shead h2 { font-size: var(--fs-3xl); } /* El degradado de la letra va en su propio elemento, .c100-grad (c100_titulo_em() lo pone dentro del ): una sola capa recortada a la letra. El queda libre para el pincel de dia (CORRECCION-DEGRADADO-DIA-4). Si el navegador no recorta fondos a la letra, la letra cae a tinta solida: nunca invisible. */ .c100-grad { background: var(--grad-casa); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } @supports not ((background-clip: text) or (-webkit-background-clip: text)) { .c100-grad, .shead h2 em { background: none; color: inherit; -webkit-text-fill-color: currentColor; } } .shead h2 em { font-style: normal; background: var(--grad-casa); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* --- 13.3 · CARD-PRODUCTO — la tarjeta unica de todo el sitio ------------ */ .card { border-radius: 20px; padding: 8px 8px 0; background: var(--vidrio-fondo); backdrop-filter: var(--vidrio-blur); -webkit-backdrop-filter: var(--vidrio-blur); border: 1px solid var(--vidrio-borde); box-shadow: inset 0 1px 0 var(--vidrio-filo), inset 0 0 0 1px var(--vidrio-borde), var(--sombra-card); display: flex; flex-direction: column; height: 100%; } .card__ph { aspect-ratio: 16 / 10; border-radius: 14px; position: relative; overflow: hidden; flex: none; } .card__ph img { width: 100%; height: 100%; object-fit: cover; } .card__ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255,255,255,.08) calc(25% - 1px) 25%); } .card__tag { position: absolute; top: .5rem; left: .5rem; z-index: 2; background: var(--ac); color: var(--onac); border-radius: 6px; font-family: var(--mo-f); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .42rem; font-weight: 500; } .card__bd { padding: .85rem .55rem .9rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; } .card__rate { display: flex; align-items: center; gap: .4rem; } .card__rate b { font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; } .card__rate span { font-size: var(--fs-xs); color: var(--mu); } .card h3 { font-size: 1.15rem; letter-spacing: -.035em; line-height: 1.08; } /* El gancho: 3 lineas como maximo, nunca un bloque de texto (ORDEN-DISENO-GLOBAL-1 §9.1). */ .card__sub { color: var(--mu); font-size: var(--fs-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* Top 10: la frase de por que esta en la lista (ORDEN-HOME-2 §5), una linea arriba del gancho. */ .card__porque { font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; } /* HIGHLIGHTS: 3 o 4 promesas con icono. Lo que cambia entre un tour suelto, un combo y un paquete es esto — por eso son datos de entrada de la MISMA tarjeta y no tres tarjetas distintas. Rejilla de dos para que la cuarta no deje una linea coja. */ /* OFERTA: rosa, no amarillo. El amarillo es estructura; una promocion es accion. Va junto a la etiqueta de tipo, en la esquina de la foto. */ .card__hot { display: inline-flex; align-items: center; gap: .25rem; font-family: var(--mo-f); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--go); color: var(--ongo); border-radius: 6px; padding: .2rem .4rem; } .card__hot svg { width: 11px; height: 11px; flex: none; } .card__hl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .6rem; list-style: none; padding: 0; margin: 0; } .card__hl li { display: flex; align-items: center; gap: .38rem; min-width: 0; font-size: var(--fs-xs); color: var(--mu); } .card__hl svg { width: 14px; height: 14px; flex: none; color: var(--aico); } /* Las etiquetas se parten en dos renglones y NUNCA se cortan (CORRECCION-TIENDA-1 §4.4: «Transporte» se cortaba en la orilla). */ .card__hl li { align-items: flex-start; } /* Nunca se parte una palabra (B-G3: «Cancelació / n gratis» a 390): si la columna no le alcanza a la palabra mas larga, la lista pasa a una columna (el cuerpo de la tarjeta es contenedor). */ .card__hl span { min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; line-height: 1.25; } .card__bd { container: c100card / inline-size; } @container c100card (max-width: 280px) { .card__hl { grid-template-columns: minmax(0, 1fr); } } .pronto { color: var(--dim); } /* El dia a dia de un paquete dentro de la tarjeta (ORDEN-PAQUETES-PAGINAS-1): si los dias caben se quedan fijos; si no (7 u 8 dias, o en movil) la tira se desliza de lado DENTRO de la tarjeta, con scroll-snap, sin mover la pagina. */ .card__dias { display: flex; gap: .4rem; list-style: none; padding: 0 0 .2rem; margin: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; } .card__dias li { flex: none; max-width: 15rem; scroll-snap-align: start; padding: .3rem .55rem; border-radius: 8px; border: 1px solid var(--rl); font-size: var(--fs-xs); color: var(--mu); } .card__dias .mo { color: var(--tx); font-weight: 700; } .card__extra { display: block; font-size: var(--fs-xs); color: var(--mu); } .card__pago { display: block; font-size: var(--fs-xs); color: var(--mu); } /* BLOQUE 5.1 p4: etiqueta del modo de pago */ .card__specs { display: flex; border-block: 1px solid var(--gBr); margin-top: auto; } .card__specs div { flex: 1; padding: .45rem .2rem; text-align: center; border-right: 1px solid var(--gBr); } .card__specs div:last-child { border-right: 0; } .card__specs span { display: block; font-family: var(--mo-f); font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .card__specs b { font-size: var(--fs-base); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .card__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .card__price span { display: block; font-family: var(--mo-f); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .card__price b { font-size: 1.05rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .card__price s { color: var(--dim); font-weight: 500; font-size: var(--fs-sm); margin-left: .3rem; } /* Numero gigante del Top 10 (cuenta regresiva 10 -> 01) */ .card__n { position: absolute; bottom: -.15em; right: .3rem; z-index: 2; font-weight: 800; font-size: 4.2rem; line-height: .8; letter-spacing: -.06em; background: var(--grad-casa); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; pointer-events: none; } /* --- 13.4 · CARRUSEL PROFUNDIDAD (laboratorio Tres Carruseles, C; CORRECCION-CARRUSEL-HOME-1) ---- La activa casi llena su zona (min(86vw, 420px); 420 px en escritorio), centrada; las vecinas asoman a los lados, DETRAS, a escala .92, opacidad .55 y desenfocadas 2 px, sin sombra. Una tarjeta por gesto: scroll-snap con scroll-snap-stop (la friccion y los umbrales de siempre). El estado de vecina se ata a la distancia de UNA tarjeta (animation-range en largos), asi que vale igual en el telefono y en el escritorio. */ @property --activa { syntax: ''; inherits: true; initial-value: 1; } .track { --slide-w: min(86vw, 420px); --slide-gap: 14px; /* lo que la vecina se mete detras de la activa: lo que encoge al escalar (4 % por lado) + el hueco + un filo */ --asomo: calc(var(--slide-w) * .04 + var(--slide-gap) + 10px); display: flex; gap: var(--slide-gap); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; padding: 12px calc((100% - var(--slide-w)) / 2) 20px; scrollbar-width: none; margin: 0; list-style: none; } .track::-webkit-scrollbar { display: none; } .slide { flex: 0 0 var(--slide-w); scroll-snap-align: center; scroll-snap-stop: always; will-change: transform; list-style: none; border-radius: 20px; } @media (min-width: 760px) { .track { --slide-w: 420px; } } /* El vidrio del carrusel se desenfoca en el SLIDE, no en la tarjeta: el slide es el elemento animado (opacidad y filtro) y eso lo vuelve raiz de fondo; desde dentro, la tarjeta no ve lo que hay detras y se veia como un espejo (§8). Y solo en los slides a la vista (theme.js §1c pone .is-vista con IntersectionObserver; sin JS, los tres primeros): medido con CPU x4, diez tarjetas con desenfoque bajaban el desplazamiento a 24 cuadros/s. */ .track .card { backdrop-filter: none; -webkit-backdrop-filter: none; } /* B-CIERRE2 §9: los tres primeros lo llevan siempre (con o sin JS). Antes lo perdian al entrar track--io y lo recuperaban con .is-vista en el primer cuadro: dos cambios de desenfoque por slide al cargar, y cada uno sacaba y metia la tarjeta del diseño (DIAGNOSTICO-VELOCIDAD-1 causa 4). */ .slide.is-vista, .track .slide:nth-child(-n + 3) { backdrop-filter: var(--vidrio-blur); -webkit-backdrop-filter: var(--vidrio-blur); } /* La sombra, solo en la activa: va en un pseudo de la tarjeta que sigue a --activa (1 al centro, 0 en las vecinas). */ .track .card { position: relative; box-shadow: inset 0 1px 0 var(--vidrio-filo), inset 0 0 0 1px var(--vidrio-borde); } .track .card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--sombra-card); opacity: var(--activa); pointer-events: none; } @supports (animation-timeline: view()) { .track .slide { animation: c100-vecina linear both; animation-timeline: view(inline); animation-range: cover calc(50% - var(--slide-w) - var(--slide-gap)) cover calc(50% + var(--slide-w) + var(--slide-gap)); } /* Con movimiento reducido, sin escala ni desenfoque animados: solo la opacidad. */ @media (prefers-reduced-motion: reduce) { .track .slide { animation-name: c100-vecina-quieta; } } } @keyframes c100-vecina { 0% { transform: translateX(calc(-1 * var(--asomo))) scale(.92); opacity: .55; filter: blur(2px); z-index: 0; --activa: 0; } 50% { transform: translateX(0) scale(1); opacity: 1; filter: blur(0); z-index: 2; --activa: 1; } 100% { transform: translateX(var(--asomo)) scale(.92); opacity: .55; filter: blur(2px); z-index: 0; --activa: 0; } } @keyframes c100-vecina-quieta { 0%, 100% { opacity: .55; --activa: 0; } 50% { opacity: 1; --activa: 1; } } /* La tarjeta del carrusel (CORRECCION-CARRUSEL-HOME-1 §3): todas del mismo alto, el contenido arriba y la fila del precio pegada abajo; titulo y resumen en 2 renglones como maximo, sin partir palabras. */ .card--carrusel .card__bd { gap: .55rem; } .card--carrusel h3, .card--carrusel .card__sub, .card--carrusel .card__porque { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: manual; } .card--carrusel .card__val { border-top: 0; padding-top: 0; margin: 0; font-size: var(--fs-xs); } .card--carrusel .card__foot { margin-top: auto; } /* --- 13.5 · APILADO NAIPES (laboratorio Tarjetas que se Apilan, C) ------- Maximo 5-6 tarjetas: pasando de seis el usuario pierde la nocion de donde esta y el scroll se siente atrapado (nota del laboratorio). */ .naipes { display: block; padding: 0; margin: 0; list-style: none; --pin: 84px; } .naipes > li { position: sticky; margin-bottom: 22px; top: calc(var(--pin) + var(--i) * 7px); list-style: none; } .naipes > li:last-child { margin-bottom: 0; } .naipe { border-radius: 18px; border: 1px solid var(--rl); background: var(--s); box-shadow: var(--sombra-naipe); transform-origin: 50% 0%; transform: rotate(var(--rot)); will-change: transform; display: flex; flex-direction: column; gap: var(--sp3); padding: var(--sp5); } :root[data-theme="light"] .naipe { box-shadow: var(--gSh); } .naipe h3 { font-size: var(--fs-2xl); } .naipe p { color: var(--mu); font-size: var(--fs-sm); max-width: 44ch; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .naipe { animation: c100-hundir linear both; animation-timeline: view(); animation-range: exit-crossing 0% exit-crossing 100%; } } } @keyframes c100-hundir { to { transform: rotate(var(--rot)) scale(.90) translateY(-6px); filter: brightness(.55) saturate(.75) } } /* --- 13.6 · MARQUESINA — dos escalas: tarjetas (S8) y chips (S3/S9) ------ */ .mq { display: flex; overflow: hidden; padding: 4px 0; } .mq__run { display: flex; gap: 10px; padding-right: 10px; flex: none; animation: c100-mq 42s linear infinite; } .mq--lenta .mq__run { animation-duration: 54s; } .mq--inv .mq__run { animation-direction: reverse; } .mq:hover .mq__run, .mq:focus-within .mq__run { animation-play-state: paused; } @keyframes c100-mq { to { transform: translateX(-100%) } } @media (prefers-reduced-motion: reduce) { .mq__run { animation: none; } .mq { overflow-x: auto; scrollbar-width: none; } .mq::-webkit-scrollbar { display: none; } } /* --- 13.6b · LETRERO LED (ORDEN-HOME-2 §1) --------------------------------- El tablero de debajo del heroe: dos hileras en sentidos opuestos, blanco en matriz de puntos sobre negro, estrellas amarillas. Bajito y con alto fijo (cero CLS): 64 px en escritorio, 52 en movil, bordes incluidos. Solo se anima transform; la pista lleva el grupo dos veces y corre la mitad por vuelta. La rejilla de puntos (::after) tapa todo menos un circulo por celda de 3 px: la tecnica del LED de Ofertas de A (.o-led). */ .led { position: relative; overflow: hidden; height: 64px; padding-block: 3px; display: grid; align-content: center; gap: 2px; background: var(--led-f); border-block: 1px solid color-mix(in srgb, var(--led-t) 10%, var(--led-f)); } .led__h { display: flex; width: max-content; animation: c100-led var(--led-dur) linear infinite; will-change: transform; } .led__h--b { animation-direction: reverse; } .led:hover .led__h, .led:focus-within .led__h { animation-play-state: paused; } .led__g { display: flex; align-items: center; flex: none; } .led__g span { font-family: var(--mo-f); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; /* B-HERO-ENCAJE: las dos hileras iguales (Marco: la de arriba se veia mas grande). Misma letra, mismo renglon, misma separacion y misma estrella: 18/27 px y 14 px; 2 x 27 + 2 de separacion + 6 de relleno caben en los 64. */ color: var(--led-t); font-size: 18px; line-height: 27px; padding-inline: .7em; text-shadow: 0 0 10px color-mix(in srgb, var(--led-t) 35%, transparent); } .led__g svg { flex: none; width: 14px; height: 14px; color: var(--led-e); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--led-e) 70%, transparent)); } .led::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 0 var(--led-punto), var(--led-f) calc(var(--led-punto) + .35px)) 0 0 / 3px 3px; } .led::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--led-f), transparent 7%, transparent 93%, var(--led-f)); } @keyframes c100-led { to { transform: translateX(-50%) } } @media (max-width: 700px) { .led { height: 52px; padding-block: 2px; } /* las dos hileras iguales tambien aqui: 2 x 22 + 2 + 4 caben en los 52 */ .led__g span { font-size: 14px; line-height: 22px; } .led__g svg { width: 12px; height: 12px; } } @media (prefers-reduced-motion: reduce) { .led__h { animation: none; } } /* --- 13.6c · LA CAMPAÑA CON ENFASIS Y LOS H2 DE LA PORTADA (ORDEN-HOME-2 §2 y §4b) La franja de campaña es de A (cancun100-campanas, .c100-cfranja; la tarjeta redondeada es __in): aqui solo el enfasis que pidio Marco, sin cambiar su forma: el filo de 1.5 px con el degradado de la casa y una sombra un punto mas marcada. El filo es un anillo enmascarado (::after), porque border-image no respeta el radio de 24 px; el borde de A se queda, transparente, para que nada se mueva. */ .home .c100-cfranja__in { position: relative; border-color: transparent; box-shadow: var(--sombra-campana); } .home .c100-cfranja__in::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: var(--grad-casa); -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* De dia, el de cada H2 del sitio lleva el pincel de marcatexto; de noche, sin pincel. El pincel y el degradado son DOS elementos con fondos independientes (CORRECCION-DEGRADADO-DIA-4): el pinta solo el pincel (una capa, color solido del tema dentro de su imagen, linea por linea con box-decoration-break) y el degradado va en el .c100-grad de dentro. Antes eran dos capas del mismo con background-clip: text, border-box (B-G3): Firefox con aceleracion grafica pintaba el pincel con el degradado y el titulo no se leia. Un sin .c100-grad (la franja de campañas de A, hasta que lo ponga) queda en tinta solida sobre el pincel: se lee siempre. */ :root[data-theme="light"] :is(.shead h2 em, .c100-cfranja__t em):not([data-theme="dark"] *, .lab *) { background: var(--brocha-img) var(--brocha-pos) / 100% var(--brocha-alto) no-repeat; -webkit-background-clip: border-box; background-clip: border-box; color: var(--tx); -webkit-text-fill-color: var(--tx); padding-inline: .1em; margin-inline: -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* --- 13.7 · HEROE "CENTRO DE MANDO" + ARO DE PUNTOS --------------------- Transcrito del laboratorio "El Buscador — Centro de Mando", idea A. SIN IMAGEN DE FONDO: el LCP de la portada es el H1 en texto. Es la razon de que este heroe pueda pintarse instantaneo, y por eso no lleva foto. NADA DE PASTILLAS AQUI. La caja va a 20px y los chips y botones a 11-14px: semi-rectangulo. border-radius:100px esta prohibido dentro del heroe y herramientas-medir-hero.mjs lo comprueba en cada verificacion. */ .hero { padding: 2.4rem var(--gut) 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; /* Contenedor para las consultas de abajo: las etiquetas largas y cortas de los filtros dependen del ancho DEL HEROE, no del viewport. */ container-type: inline-size; } .hero .kick { color: var(--dim); margin-bottom: .9rem; } .hero h1 { margin: 0 0 .55rem; font-size: clamp(1.85rem, 1.2rem + 3.2vw, 3.2rem); /* 9.4357em = los 14ch de antes con Manrope 800: ch depende del «0» de la fuente que este puesta, y con el respaldo el H1 se partia en 3 lineas; al llegar Manrope volvia a 2 y todo subia 7 px (CLS 0.10 con el critico de la home) */ line-height: 1; font-weight: 800; letter-spacing: -.05em; max-width: 9.4357em; } .hero h1 em { font-style: normal; } /* El heroe ya no lleva parrafo, linea de datos ni atajos (CORRECCION-HOME-3 §1): se mudaron a .porque (13.20). */ /* --- 13.6b · LA PRIMERA PANTALLA TERMINA EN EL LETRERO (B-HERO-ENCAJE, Marco 5-oct) --- Al abrir la portada se ve del menu al letrero LED corriendo, en cualquier alto, solo con CSS (0 KB, sin medir con script, CLS 0). El heroe mide el alto util de la pantalla menos lo de arriba (el header: 67 px; en el telefono el hueco de las islas, 64 px), el letrero (64 o 52 px) y la barra de abajo del telefono (--pila-muelle); el titulo y el buscador van centrados en lo que queda. Todo lo que tiene alto (aire, titulo, halo) se encoge con vh, para que en una laptop baja (1366 x 768 con barras: ~620 px utiles) baje junto en vez de empujar el letrero fuera. Topes: en un monitor muy alto la primera pantalla no pasa de 900 px (sin hueco); con menos de 560 px de alto (telefono acostado) vuelve al flujo normal y se desplaza. */ :root { --enc-arriba: 67px; --enc-led: 64px; --enc-pie: 0px; } @media (max-width: 999px) { :root { --enc-arriba: calc(64px + env(safe-area-inset-top)); } /* la barra de abajo mide 68 px (medido: .65rem arriba y abajo, el boton y el borde); --pila-muelle reserva 84 con su aire, y con ese el letrero quedaba 16 px antes del borde */ body.has-muelle { --enc-pie: calc(68px + env(safe-area-inset-bottom)); } } @media (max-width: 700px) { :root { --enc-led: 52px; } } .hero { --enc-util: calc(100vh - var(--enc-arriba) - var(--enc-led) - var(--enc-pie)); min-height: min(var(--enc-util), calc(900px - var(--enc-arriba) - var(--enc-led))); justify-content: center; padding-top: clamp(.6rem, 3.5vh, 2.4rem); padding-bottom: clamp(.5rem, 3.4vh, 2rem); } @supports (height: 100svh) { .hero { --enc-util: calc(100svh - var(--enc-arriba) - var(--enc-led) - var(--enc-pie)); } } @media (max-height: 559px) { .hero { min-height: 0; } } .hero .kick { margin-bottom: clamp(.4rem, 1.6vh, .9rem); } .hero h1 { font-size: clamp(1.85rem, min(1.2rem + 3.2vw, 6.4vh), 3.2rem); } .hero .halo { --pad: clamp(20px, 5vh, 42px); } @container (min-width: 900px) { .hero .halo { --pad: clamp(28px, 7vh, 76px); } } /* --- LA AURORA · utilidad del tema ------------------------------------- Campos de color girando despacio debajo de una mascara. Nace en la cinta de sellos sin nombre y aqui pasa a ser utilidad con nombre propio: .c100-aurora se puede poner donde haga falta. POR QUE NO PESA. Cero imagenes, cero peticiones: son gradientes y dos rotaciones. Usarla diez veces cuesta LO MISMO que usarla una, porque las reglas ya estan en la hoja y solo se anaden nodos. Y como lo que se anima es transform, va por GPU: sin reflow ni repintado, ni en moviles viejos. LA REGLA QUE NO SE SALTA: lo que se mueve es un HIJO con transform, nunca el elemento enmascarado. Animar background-position sobre un area grande repinta en cada fotograma; rotar un hijo, no. Y un transform sobre el elemento que lleva la mascara se escapa del recorte — nos paso con la cinta. De ahi que la utilidad exija hijos y no se pueda montar sobre un ::before, que no los admite. NADIE VE EL BUCLE. Dos capas en sentidos opuestos a 32 s y 47 s, que no son multiplos: el ciclo completo tarda 1.504 s en repetirse. Veinticinco minutos. Nadie mira un halo veinticinco minutos. CON MODERACION. Candidatas: el marco de la oferta de la semana, la banda de correo, el fondo del pop-up de salida. Pero si baila todo, no baila nada. */ /* LA UTILIDAD ES EL MOTOR, NO LA MASCARA. Antes traia dentro una malla de puntos de 10 px, y eso la ataba a un solo look: el halo v3 dibuja la suya con circulos de verdad y la cinta no lleva ninguna. Cada quien pone su mascara; esto pone el campo de color que gira. */ .c100-aurora { position: relative; overflow: hidden; pointer-events: none; } .c100-aurora > i { /* Un CUADRADO de 210 % del ancho, centrado (URGENTE-HOME-1): con inset:-55% la capa media 210 % x 210 % de su caja, y en una caja ancha (el aro del buscador, 872 x 330) era larga y baja; al girar 90 grados ya no cubria la caja y su orilla asomaba como un borde recto en diagonal. El cuadrado cubre a cualquier angulo mientras la caja no sea mas de 1.8 veces alta que ancha; en lo ancho mide lo mismo que antes. translate va aparte: el giro es del transform. */ position: absolute; left: 50%; top: 50%; width: 210%; height: auto; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle at 18% 16%, var(--d1), transparent 46%), radial-gradient(circle at 82% 20%, var(--d3), transparent 44%), radial-gradient(circle at 50% 6%, var(--d5), transparent 40%), radial-gradient(circle at 12% 78%, var(--d2), transparent 46%), radial-gradient(circle at 88% 82%, var(--d4), transparent 44%), radial-gradient(circle at 50% 96%, var(--d2), transparent 40%), radial-gradient(circle at 50% 50%, var(--d4), transparent 62%); animation: c100-baile 32s linear infinite; } .c100-aurora > i + i { animation: c100-baile2 47s linear infinite; opacity: .75; } @keyframes c100-baile { to { transform: rotate(360deg) } } @keyframes c100-baile2 { to { transform: rotate(-360deg) scale(1.12) } } @media (prefers-reduced-motion: reduce) { .c100-aurora > i { animation: none } } /* ── EL HALO v3 · UNA CAPA, Y LA MASCARA SE DIBUJA ───────────────────── * * Lo anterior eran CINCO capas con cortes en franjas diagonales, y mordia el * borde solo ARRIBA Y ABAJO. Al buscar por que, aparecieron dos bugs * distintos tapandose el uno al otro: * * 1 · EL CORTE TAPABA LOS LADOS. .cut era tan ancho como el aro entero, no * como la caja, y pintaba encima de las columnas laterales. Los puntos * estaban ahi desde el principio, debajo. Por eso los intentos de * arreglar los cortes no servian: el problema estaba en la tapa. * * 2 · LA EROSION SE MEDIA CON EL MARGEN DE ARRIBA. Se normalizaba con --pad * en todas direcciones, asi que en los lados —mas estrechos— la cuenta * nunca llegaba a la parte rala de la curva. Aunque el corte hubiera * funcionado, los laterales estaban condenados a salir densos. * * Y ademas los puntos habian dejado de ser puntos: cinco radios distintos y * cortes diagonales partian cada circulo y lo desalineaban con el de al lado. * Se leian como rayas. * * AHORA: una sola capa, y la mascara es un SVG con circulos DE VERDAD, cada * uno en su posicion exacta de la malla. Lo dibuja theme.js. * * SIN JAVASCRIPT: la spec decia «nunca un rectangulo solido» y ERA SOLO UNA * FRASE — no habia una linea de CSS que lo garantizara. Sin --m, mask-image * recibia un valor invalido, el navegador no aplicaba mascara ninguna y salia * exactamente el rectangulo de degradado con bordes duros que la spec juraba * que no podia pasar. Se vio en una captura, no en una comprobacion. * * Ahora el respaldo esta EN EL CODIGO: --m lleva un valor por defecto. Cuando * el JS pinta los puntos, gana la mascara de puntos; cuando no —error de JS, * script bloqueado, medidas a cero— queda un resplandor con los bordes * desvanecidos. Una degradacion prometida en un documento no existe. */ .halo { position: relative; width: 100%; display: flex; justify-content: center; padding: var(--pad) var(--padx); --pad: 42px; --padx: 40px; --malla: 8px; --ancho: 720px; --aw: min(100%, calc(var(--ancho) + 2 * var(--padx))); } /* UNA capa. El transform:translateX(-50%) es ESTATICO y por eso no rompe la mascara; lo que no se puede es ANIMAR transform en el elemento enmascarado, que se escapa del recorte. Por eso quien gira son los de dentro. */ .aura { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); width: var(--aw); pointer-events: none; overflow: hidden; /* El segundo argumento de var() es el respaldo, y es toda la red. */ --m-alt: radial-gradient(ellipse 70% 60% at 50% 50%, #000 42%, transparent 76%); -webkit-mask-image: var(--m, var(--m-alt)); mask-image: var(--m, var(--m-alt)); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* EL CORTE CALCA LA CAJA, Y NUNCA ES MAS ANCHO QUE ELLA. Ese era el bug 1: con el ancho del aro entero, tapaba las columnas laterales. inset con las dos medidas —vertical y horizontal— es exactamente el hueco del buscador. */ .cut { position: absolute; left: 50%; transform: translateX(-50%); top: var(--pad); bottom: var(--pad); /* EL ANCHO DE LA CAJA, NO EL DEL HALO. La spec pedia inset: var(--pad) var(--padx), que en el laboratorio cuadra porque alli el halo mide casi lo mismo que el aro. En el tema .halo ocupa el ancho del heroe —1.192 px— y el aro solo 872, asi que ese inset daba un corte de 1.040 y volvia a tapar las columnas laterales: exactamente el bug que la v3 venia a arreglar, con otra formula. Medido: cut 1040 contra caja 720. Se ata al ancho de la CAJA, que es lo que la spec queria decir. */ /* El ancho del ARO menos sus dos margenes laterales. Es la unica formula que da la caja en los dos anchos, y lo medi en los dos: escritorio 872 - 2x76 = 720 la caja mide 720 movil 356 - 2x40 = 276 la caja mide 276 min(100%, --ancho) fallaba en movil (daba 356 contra 276) y el inset de la spec fallaba en escritorio (1.040 contra 720). Las dos formulas dan bien en el ancho donde se probaron y mal en el otro: el corte hay que comprobarlo SIEMPRE en las dos, porque es el que tapa las columnas. */ width: calc(var(--aw) - 2 * var(--padx)); border-radius: var(--rad); background: var(--g); pointer-events: none; } .halo .in { position: relative; z-index: 1; width: 100%; max-width: var(--ancho); } /* --- la caja --- */ .box { background: var(--s); border: 1px solid var(--rl); border-radius: 20px; box-shadow: var(--gSh); text-align: left; padding: 1.1rem 1.15rem 1rem; min-height: 152px; display: flex; flex-direction: column; gap: .9rem; transition: border-color 200ms var(--ez); } .box:hover, .box:focus-within { border-color: var(--mu); } .box__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; position: relative; } .box__bot { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: auto; } /* ANTISALTO (CLS = 0): dos renglones reservados desde el primer pintado. Sin esto, cuando la frase salta a la segunda linea empuja los filtros y el boton hacia abajo, y eso es layout shift. Medido: la caja se queda en 152px durante todo el ciclo de tecleo. */ .q, .q__in { font-size: clamp(.9375rem, .85rem + .6vw, 1.25rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.35; } .q { margin: 0; flex: 1; min-width: 0; color: var(--tx); display: flex; align-items: baseline; gap: .1rem; flex-wrap: wrap; min-height: calc(2 * 1.35em); pointer-events: none; /* cada letra que se escribe maqueta solo esta caja, no el heroe (CORRECCION-RENDIMIENTO-ESCRITORIO-1) */ contain: layout paint; } /* Lo que cambia o se mueve solo, contenido en su caja: el contador de la franja (cada segundo) y las marquesinas. */ .c100-cfranja__reloj { contain: layout paint; } .mq { contain: layout paint; } .mq__run { will-change: transform; } .mq.mq--quieta .mq__run { animation-play-state: paused; } .q .pre { color: var(--dim); } .q .car { display: inline-block; width: 2px; height: 1.05em; background: var(--go); translate: 0 2px; animation: c100-bl 1s steps(2) infinite; } @keyframes c100-bl { 50% { opacity: 0 } } /* El input REAL, encima del fantasma y transparente: es quien recibe el foco y el teclado. El fantasma solo se ve mientras el campo esta vacio. */ .q__in { position: absolute; inset: 0; width: 100%; background: none; border: 0; outline: none; padding: 0; margin: 0; font-family: inherit; color: var(--tx); } .q__in::placeholder { color: transparent; } .box:focus-within .q, .box.is-escrito .q { opacity: 0; } /* Sin JS el fantasma se queda vacio y manda el placeholder nativo. */ .box.sin-js .q { display: none; } .box.sin-js .q__in::placeholder { color: var(--dim); } .ia { display: inline-flex; align-items: center; gap: .3rem; flex: none; font-family: var(--mo-f); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--aico); border: 1px solid var(--aico); border-radius: 8px; padding: .2rem .45rem; position: relative; z-index: 1; } .ia > svg { width: 10px; height: 10px; fill: var(--aico); } /* --- los tres filtros --- */ .chips { display: flex; gap: .4rem; flex-wrap: nowrap; min-width: 0; border: 0; padding: 0; margin: 0; } .chip { font-size: .6875rem; font-weight: 700; letter-spacing: -.01em; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; border-radius: 11px; padding: .3rem .5rem; min-height: 30px; border: 1px solid var(--rl); background: var(--s); color: var(--mu); white-space: nowrap; transition: color 160ms var(--ez), border-color 160ms var(--ez), box-shadow 160ms var(--ez); } .chip > svg { width: 12px; height: 12px; flex: none; } .chip:hover { color: var(--tx); border-color: var(--mu); } /* El estado activo lo manda el radio, no una clase de JS: sin JS sigue vivo. */ .chips input:checked + .chip { color: var(--tx); border-color: var(--aico); background: color-mix(in oklab, var(--ac) 18%, var(--s)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ac) 22%, transparent); } .chips input:checked + .chip > svg { color: var(--aico); } .chips input:focus-visible + .chip { outline: 2px solid var(--aico); outline-offset: 2px; } .go { width: var(--c100-btn-alto); height: var(--c100-btn-alto); border-radius: 14px; flex: none; border: 1.5px solid var(--goedge); background: var(--go); color: var(--ongo); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 var(--c100-btn-canto) 0 var(--goedge); transition: transform 90ms var(--ez), box-shadow 90ms var(--ez); } .go:active { transform: translateY(var(--c100-btn-canto)); box-shadow: 0 0 0 var(--goedge); } .go > svg { width: 19px; height: 19px; } /* Etiquetas cortas en movil, largas cuando cabe. Container query, no media: depende del ancho del heroe, no del viewport. */ .largo { display: none; } .corto { display: inline; } /* Por debajo de este ancho los tres filtros CON etiqueta no caben en una fila, y la fila es innegociable (la spec no admite que se envuelvan ni que se salgan). Medido con herramientas-medir-hero.mjs: a 320px la fila necesita 224px y solo hay 154; a 360px hay 194. El laboratorio se construyo a 390, donde caben justos, asi que estos dos anchos no estaban cubiertos. La salida: el filtro ACTIVO conserva su etiqueta —que es la informacion que de verdad importa, cual esta seleccionado— y los otros dos se quedan en icono. Una sola fila, cero desborde, y no se pierde el estado. El umbral es 335px de CAJA DE CONTENIDO del heroe, no de viewport: con --gut a cada lado, 360px de pantalla son 326 de contenedor (colapsa) y 375px son 341 (no colapsa, y ahi la fila cabe con 6px de sobra). */ @container (max-width: 335px) { .chips input:not(:checked) + .chip .largo, .chips input:not(:checked) + .chip .corto { display: none; } .chips input:not(:checked) + .chip { padding-inline: .4rem; } } @container (min-width: 900px) { .hero { padding: 3.6rem var(--gut) 3rem; } /* El halo v3: los laterales suben de 40 a 76 px para que quepan puntos a los lados, no solo arriba y abajo — y la malla pasa a 9 px, que es lo que aprovecha ese ancho sin que el marco se lea macizo. */ .halo { --pad: 76px; --padx: 76px; --malla: 9px; } .q { min-height: 1.35em; } .largo { display: inline; } .corto { display: none; } .chip { font-size: .75rem; min-height: 36px; padding: .4rem .75rem; border-radius: var(--r); gap: .35rem; } .chip svg { width: 14px; height: 14px; } .go { border-radius: 16px; } /* el alto, el de todos (--c100-btn-alto) */ .box { min-height: 170px; padding: 1.4rem 1.5rem 1.2rem; } } /* --- 13.8 · ICONOS VIVOS (todo el sitio, no solo el heroe) -------------- Cada SVG traza su contorno UNA vez al entrar en pantalla. Es CSS puro: stroke-dasharray + dashoffset animados con animation-timeline: view(). Degrada bien por construccion: si el navegador no soporta scroll timelines no entra en el @supports, y el icono se queda dibujado y quieto — nunca invisible. Ese es el motivo de que el estado "sin trazar" viva DENTRO del @supports y no fuera. Al pasar el dedo o el cursor el icono crece un punto y suelta un destello detras. El destello es un ::before del contenedor, no un filtro sobre el SVG: un drop-shadow sobre un trazo se ve sucio. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .ico-vivo svg path, .ico-vivo svg circle, .ico-vivo svg rect, .chip > svg > * { stroke-dasharray: 120; animation: c100-trazo .9s var(--ez) both; animation-timeline: view(); animation-range: entry 10% cover 28%; } } } @keyframes c100-trazo { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } } .ico-vivo, .chip > svg { transition: transform 180ms var(--ez); } .chip:hover > svg { transform: scale(1.13); } /* El destello vive ahora en el medallon de la franja (13.9). */ @media (prefers-reduced-motion: reduce) { .chip:hover > svg { transform: none; } .q .car { animation: none; } } /* --- 13.9 · FRANJA DE CONFIANZA ------------------------------------------ Laboratorio "Sellos de Confianza", vista Definitiva. Sustituye a la franja .trust que traia la spec del heroe. LA REGLA QUE MANDA SOBRE TODO LO DEMAS: el protagonista del heroe es el buscador. La franja acompana, nunca compite. De ahi salen las dos composiciones — y de ahi que en movil no lleve aurora ni etiqueta corta. UN SOLO DOM. Lo que cambia entre movil y escritorio es este CSS, no el markup. Si algun dia hay dos bloques distintos en el HTML, esta mal resuelto y el medidor lo va a delatar. */ .c100-franja { padding: 2.1rem var(--gut) 1.6rem; } /* Movil: 2x2 compacto. Toda la franja ocupa poco mas de 180px. */ .c100-cinta { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; /* overflow VISIBLE: los medallones sobresalen del borde superior. Es la razon por la que la aurora no puede animarse con transform — ver abajo. */ overflow: visible; } /* La aurora de la cinta se posiciona SIEMPRE, aunque solo se pinte en escritorio. Si no, en movil el seria una celda mas de la rejilla 2x2 y desmontaria los cuatro sellos. Los estilos de color y el giro estan en la consulta de 900px; esto es solo sacarlo del flujo. */ .c100-cinta__aurora { position: absolute; inset: 0; pointer-events: none; } .c100-sello { position: relative; cursor: pointer; text-align: left; border: 1px solid var(--rl); background: var(--s); border-radius: 14px; box-shadow: var(--gSh); padding: 1.5rem .7rem .7rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 84px; overflow: visible; color: inherit; font: inherit; transition: transform 240ms var(--ez), border-color 240ms var(--ez); } .c100-sello:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--aico) 50%, var(--rl)); } .c100-tt b { display: block; font-size: .8125rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .c100-tt small { display: block; font-size: .65rem; color: var(--mu); margin-top: .1rem; line-height: 1.25; } /* La etiqueta corta solo en escritorio: en movil el titulo y el detalle bastan, y lo demas vive en la ficha. */ .c100-tt em { display: none; font-style: normal; font-family: var(--mo-f); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ai); margin-top: .35rem; } .c100-mas { position: absolute; top: .6rem; right: .7rem; font-family: var(--mo-f); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); opacity: 0; transition: opacity 200ms var(--ez); } .c100-sello:hover .c100-mas, .c100-sello:focus-visible .c100-mas { opacity: 1; } /* --- EL MEDALLON --------------------------------------------------------- Cuadrado redondeado que SOBRESALE del borde. 36px en movil, 56 en escritorio, con el icono al 46% de su lado. Dos animaciones de fondo, ambas solo transform y opacity (no cuestan layout): un halo que respira y un aro que se expande como sonar. */ .c100-med { position: absolute; top: -13px; left: .7rem; --mw: 36px; width: var(--mw); height: var(--mw); flex: none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(150deg, color-mix(in oklab, var(--ac) 22%, var(--s)), var(--s)); border: 1px solid color-mix(in oklab, var(--aico) 45%, var(--rl)); box-shadow: 0 8px 20px -12px color-mix(in oklab, var(--aico) 70%, transparent), inset 0 1px 0 var(--gIn); transition: box-shadow 300ms var(--ez); } .c100-med::before { content: ""; position: absolute; inset: -14%; border-radius: 16px; z-index: -1; background: radial-gradient(circle, color-mix(in oklab, var(--aico) 42%, transparent), transparent 68%); animation: c100-respira 5s ease-in-out infinite; } .c100-med::after { content: ""; position: absolute; inset: 0; border-radius: 12px; z-index: -1; border: 1px solid color-mix(in oklab, var(--aico) 60%, transparent); animation: c100-sonar 5s ease-out infinite; } @keyframes c100-respira { 0%, 100% { transform: scale(.92); opacity: .5 } 50% { transform: scale(1.06); opacity: .95 } } @keyframes c100-sonar { 0% { transform: scale(1); opacity: .7 } 70%, 100% { transform: scale(1.5); opacity: 0 } } .c100-med svg { width: calc(var(--mw) * .46); height: calc(var(--mw) * .46); color: var(--aico); overflow: visible; transition: transform 300ms var(--ez); } .c100-sello:hover .c100-med svg { transform: scale(1.1); } .c100-sello:hover .c100-med { box-shadow: 0 10px 26px -10px color-mix(in oklab, var(--aico) 85%, transparent), inset 0 1px 0 var(--gIn); } /* El trazo se dibuja UNA vez al entrar en pantalla. Dentro del @supports para que, sin scroll timelines, el icono aparezca dibujado y quieto en vez de invisible. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .c100-med svg > * { stroke-dasharray: 120; stroke-dashoffset: 120; animation: c100-trazo 1s var(--ez) forwards; animation-timeline: view(); animation-range: entry 0% cover 30%; } } } @keyframes c100-trazo { to { stroke-dashoffset: 0 } } @media (prefers-reduced-motion: reduce) { .c100-med::before, .c100-med::after { animation: none; opacity: .5; } .c100-med svg > * { animation: none; stroke-dashoffset: 0; } .c100-sello:hover { transform: none; } .c100-sello:hover .c100-med svg { transform: none; } } /* --- LA FICHA DE CADA SELLO ---------------------------------------------- nativo: el navegador atrapa el foco, cierra con Escape y devuelve el foco al disparador. El JS solo abre y anade el clic fuera. VA EN EL HTML aunque este cerrada: es contenido de confianza real y tiene que ser rastreable. Un modal construido en JS es invisible para Google. */ .c100-ficha { width: min(520px, calc(100vw - 2 * var(--gut))); max-height: 88vh; padding: 0; overflow: hidden auto; border: 1px solid var(--rl); border-radius: 22px; background: var(--el); color: var(--tx); box-shadow: var(--gSh); position: fixed; inset: 0; margin: auto; } .c100-ficha::backdrop { background: color-mix(in oklab, #05070C 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .c100-ficha__foto { height: 150px; position: relative; overflow: hidden; border-radius: 22px 22px 0 0; background: linear-gradient(150deg, var(--rl), var(--mu)); } /* Un degradado por sello mientras no haya foto real. Cuando lleguen las fotos se sustituye la regla, no el bloque. */ .c100-ficha__foto--cancel { background: linear-gradient(150deg, #243447, #4E6B84 60%, #9FB8C9); } .c100-ficha__foto--sectur { background: linear-gradient(150deg, #3A2F0E, #8A6E00 60%, #E8CE73); } .c100-ficha__foto--pago { background: linear-gradient(150deg, #1B2A45, #4A5FBF 60%, #A9B6F2); } .c100-ficha__foto--wa { background: linear-gradient(150deg, #0E3A2E, #1E8F63 62%, #8FE3C0); } .c100-ficha__foto::after { content: ""; position: absolute; inset: 0; mix-blend-mode: overlay; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 1.5px); background-size: 14px 14px; } .c100-ficha__foto .mo { position: absolute; left: .7rem; bottom: .6rem; z-index: 1; color: rgba(255,255,255,.85); background: rgba(4,10,16,.45); padding: .25rem .5rem; border-radius: 7px; } /* El boton de cierre siempre visible sobre la foto (spec §4). */ .c100-ficha__x { position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--gBr); background: rgba(10,14,20,.45); color: #fff; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .c100-ficha__bd { padding: 1.2rem 1.2rem 1.4rem; } .c100-ficha__bd > .kick { color: var(--dim); margin-bottom: .35rem; } .c100-ficha__bd h2 { margin: 0 0 .5rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; } .c100-ficha__bd > p { font-size: var(--fs-sm); color: var(--mu); margin: 0 0 .8rem; max-width: 62ch; } .c100-datos { margin: 0 0 .5rem; } .c100-datos > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--rl2); font-size: var(--fs-sm); } .c100-datos dt { color: var(--mu); } .c100-datos dd { margin: 0; font-weight: 700; text-align: right; } /* --- ESCRITORIO: la cinta de cuatro columnas ----------------------------- */ @media (min-width: 900px) { .c100-franja { padding: 3.2rem var(--gut) 2rem; } .c100-cinta { grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rl); background: var(--s); border-radius: 22px; box-shadow: var(--gSh); } /* LA AURORA DE LA CINTA — mismo motor, otro look. No adopta los cinco tonos del halo: lleva los DOS de marca deslizandose. Si las dos hacen lo mismo, ninguna destaca — «si baila todo, no baila nada» tambien vale entre dos bloques, no solo dentro de uno. Lo que SI cambia es el motor: antes animaba background-position sobre un background-size de 200%, y eso repinta la banda entera en cada fotograma. Ahora gira un hijo con transform, que va por GPU y no repinta nada. Y el bug que nos mordio la primera vez tiene solucion limpia: el recorte lo hace .c100-cinta__aurora, un elemento REAL con overflow:hidden, no la cinta. La cinta conserva su overflow:visible y los medallones siguen sobresaliendo por arriba. Tenia que ser un elemento y no un ::before porque un pseudoelemento no admite hijos, y aqui el hijo es el motor. */ .c100-cinta__aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 22px; pointer-events: none; } .c100-cinta__aurora > i { /* un cuadrado centrado, como .c100-aurora > i (URGENTE-HOME-1): la cinta es ancha y baja y el inset no la cubria al girar */ position: absolute; left: 50%; top: 50%; width: 220%; height: auto; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(40% 120% at 12% 50%, color-mix(in oklab, var(--ac) 26%, transparent), transparent 70%), radial-gradient(40% 120% at 88% 50%, color-mix(in oklab, var(--go) 14%, transparent), transparent 70%); animation: c100-baile 38s linear infinite; } .c100-sello { border: 0; background: none; box-shadow: none; border-radius: 0; z-index: 1; min-height: 0; padding: 2.4rem 1rem 1.3rem; align-items: center; text-align: center; gap: .4rem; justify-content: flex-start; } .c100-sello:hover { transform: none; border-color: transparent; } .c100-sello + .c100-sello { border-left: 1px solid var(--rl2); } .c100-med { top: -24px; left: 50%; translate: -50% 0; --mw: 56px; border-radius: 18px; } .c100-med::after { border-radius: 18px; } .c100-med::before { border-radius: 24px; } .c100-tt b { font-size: .9375rem; line-height: 1.2; } .c100-tt small { font-size: .75rem; margin-top: .15rem; } .c100-tt em { display: block; } } /* c100-aurora (background-position) retirado: la cinta usa ya c100-baile, y prefers-reduced-motion lo cubre la regla general de .c100-aurora > i. */ @media (prefers-reduced-motion: reduce) { .c100-cinta__aurora > i { animation: none; } } /* --- 13.9b · MUELLE MOVIL ------------------------------------------------- */ .muelle { position: fixed; inset: auto 0 0 0; z-index: 80; display: flex; gap: .5rem; padding: .65rem var(--gut) calc(.65rem + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--g) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--rl); } .muelle .btn { flex: 1; } @media (min-width: 1000px) { .muelle { display: none; } } @media (max-width: 999px) { body.has-muelle { padding-bottom: 84px; } } /* --- 13.9c · LA PILA DE ABAJO: muelle, chat flotante y espacio seguro ----- (ORDEN-DISENO-GLOBAL-1 §5) Una sola pila de posiciones: --pila-muelle es lo que ocupa la barra inferior (o el dock de la ficha) en movil, y el chat flotante se coloca encima, a la derecha, sin tapar nada. Escritorio: abajo a la derecha. El boton es el .btn del tema, cuadrado de 60 y radio 20 (la misma geometria del boton de agencias, que solo cambia de color). */ /* Las capas (CORRECCION-KOMITO-BOTON-1 §4), de abajo arriba: contenido < barras pegajosas < encabezado < boton de Komito < modales. --c100-dock-h es lo que ocupa la barra de abajo en movil (el muelle o el dock de la ficha). */ :root { --pila-muelle: 0px; --c100-dock-h: var(--pila-muelle); --z-pegajoso: 40; --z-encabezado: 90; --z-komito: 96; --z-modal: 100; } @media (max-width: 999px) { body.has-muelle { --pila-muelle: 84px; --c100-dock-h: 84px; } body.has-dock { --pila-muelle: 84px; --c100-dock-h: 96px; } /* el dock es la pildora flotante: 14 px del borde + su alto */ } /* El boton de Komito NO SE MUEVE NUNCA (CORRECCION-KOMITO-BOTON-1): una sola posicion fija por ancho (en movil, a 12 px sobre la barra de abajo; en escritorio, abajo a la derecha). Es hijo directo de body (footer.php), sin ancestros con transform, filter ni contain. Solo dos estados, visible u oculto, con fundido de opacidad (theme.js 1c3): data-espera (la home con el buscador a la vista) y data-oculto (menu, mega menu, hoja de reserva, calendario o teclado abiertos). Ni translate ni top: nada brinca. */ .c100-chat { position: fixed; right: var(--gut); z-index: var(--z-komito); bottom: calc(var(--c100-dock-h) + 12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: opacity 200ms var(--ez), visibility 0s; } @media (min-width: 1000px) { .c100-chat { right: 24px; bottom: 24px; } } body.c100-locked .c100-chat { display: none; } .c100-chat:is([data-espera], [data-oculto]) { opacity: 0; visibility: hidden; transition: opacity 160ms var(--ez), visibility 0s 160ms; } @media (prefers-reduced-motion: reduce) { .c100-chat, .c100-chat:is([data-espera], [data-oculto]) { transition: none; } } .c100-chat-flotante { position: relative; width: var(--c100-btn-alto); height: var(--c100-btn-alto); min-height: var(--c100-btn-alto); padding: 0; border-radius: 18px; } /* BOTONES 3D: el alto de todos (antes 60) */ .c100-chat-flotante > svg { width: 26px; height: 26px; transition: opacity 150ms var(--ez); } /* Estados (ORDEN-KOMITO-BOTON-1 §1): cargando (giro + aria-busy) y con no leidos (sello, solo si hay mensajes). El punto gris de «fuera de horario» se quito (CORRECCION-KOMITO-BOTON-1 §5): era un cuadrito vacio; el aviso de horario sale al abrir. */ .c100-chat-flotante__giro { position: absolute; inset: 0; display: none; border-radius: 20px; } .c100-chat-flotante__giro::after { content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid color-mix(in oklab, var(--btn-tinta) 35%, transparent); border-top-color: var(--btn-tinta); animation: c100-giro .8s linear infinite; } .c100-chat-flotante[aria-busy="true"] > svg { opacity: .2; } .c100-chat-flotante[aria-busy="true"] .c100-chat-flotante__giro { display: block; } .c100-chat-flotante__sello { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 10px; background: var(--ac); color: var(--onac); font-family: var(--mo-f); font-size: 11px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px var(--g); } .c100-chat-aviso { max-width: min(320px, calc(100vw - 2 * var(--gut))); padding: 12px 14px; border: 1px solid var(--rl); border-radius: 14px; background: var(--s); color: var(--tx); font-size: 13px; line-height: 1.45; box-shadow: var(--gSh); } .c100-chat-aviso p { margin: 0; } .c100-chat-aviso a { color: var(--tx); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; } @keyframes c100-giro { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .c100-chat-flotante__giro::after { animation: none; border-top-color: transparent; } } /* --- 13.10 · MARQUESINAS: ENVOLTORIO Y PIEZAS ---------------------------- El bloque parts/marquesina.php sirve las TRES de la home. Lo unico que cambia entre ellas es la escala de la pieza — chips de 38px frente a tarjetas de resena — y eso lo decide el 'render', no una copia del bloque. Riman, no se repiten. */ .mqs { display: flex; flex-direction: column; gap: 10px; } .mqs--grande { gap: 14px; } /* Termino de vocabulario (S3): tipografia grande, sin caja. Es una tira de palabras que se leen de un vistazo, no una fila de botones. */ .mqtxt { flex: none; white-space: nowrap; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; color: var(--mu); padding-inline: .35rem; transition: color 140ms var(--ez); } .mqtxt:hover { color: var(--ai); } /* Sin pilar todavia: apagado y sin subrayado de enlace. Nunca un 404. */ .mqtxt.is-off, .chip.is-off { color: var(--dim); cursor: default; } .chip.is-off:hover { transform: none; } /* Los separa un punto medio en vez de un margen: se lee como una lista. */ .mq__run > .mqtxt:not(:last-child)::after { content: "·"; color: var(--dim); margin-left: .55rem; font-weight: 400; } /* Tarjeta de resena (S8). glass-panel porque cae sobre el fondo bokeh y con glass suelto el texto pelearia con lo de detras. */ .rev { flex: 0 0 clamp(258px, 76vw, 340px); border-radius: var(--r-lg); padding: var(--sp4); display: flex; flex-direction: column; gap: .55rem; margin: 0; } .rev blockquote { margin: 0; font-size: var(--fs-sm); color: var(--tx); line-height: 1.55; } .rev figcaption { display: flex; align-items: baseline; gap: .5rem; font-size: var(--fs-xs); } .rev figcaption b { color: var(--tx); font-weight: 700; } .rev figcaption span { color: var(--dim); } /* --- 13.11 · REJILLA DE ENLACES (S6 destinos · S7 guias) ----------------- */ .rej { display: grid; gap: var(--sp4); list-style: none; padding: 0; margin: 0; grid-template-columns: minmax(0, 1fr); /* minmax(0, …): una palabra larga no ensancha la columna (360 px media 366) */ } @media (min-width: 720px) { .rej--2, .rej--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .rej--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .rejc { display: flex; flex-direction: column; gap: .45rem; height: 100%; min-width: 0; overflow-wrap: anywhere; border-radius: var(--r-lg); padding: var(--sp5); color: var(--tx); transition: transform 160ms var(--ez), border-color 160ms var(--ez); } .rejc > .mo { color: var(--dim); } .rejc h3 { font-size: var(--fs-xl); letter-spacing: -.03em; } .rejc p { color: var(--mu); font-size: var(--fs-sm); margin: 0; } a.rejc:hover { transform: translateY(-2px); border-color: var(--gIn); } a.rejc:hover h3 { color: var(--ai); } .rejc.is-off { opacity: .55; } /* --- 13.11b · ¿POR QUE RESERVAR CON CANCUN100? (CORRECCION-HOME-3 §2) ----- La entrada, las cifras de la agencia en fila y grandes, la franja de sellos (13.9, la misma que antes iba bajo el heroe) y el enlace a la agencia. Las cifras: el numero arriba y grande, la etiqueta abajo en mono; el orden del HTML (dt, dd) es el de un lector, el visual lo da order. */ .porque__lead { max-width: 62ch; } .porque__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp4) var(--sp5); margin: 0; } .porque__datos > div { display: flex; flex-direction: column; gap: var(--sp1); padding-top: var(--sp3); border-top: 1px solid var(--rl); min-width: 0; } .porque__datos dt { order: 2; font-size: var(--fs-xs); letter-spacing: .06em; color: var(--mu); } .porque__datos dt a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .porque__datos dd { order: 1; margin: 0; display: flex; align-items: center; gap: var(--sp2); font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--tx); } .porque__datos dd svg { flex: none; width: .55em; height: .55em; color: var(--ac); } .porque__datos .porque__rnt { font-family: var(--mo-f); font-size: var(--fs-xl); font-weight: 700; letter-spacing: .02em; min-height: var(--fs-4xl); overflow-wrap: anywhere; } .porque .c100-franja { padding-inline: 0; margin-top: var(--sp5); } .porque__mas { margin: var(--sp2) 0 0; } @media (min-width: 900px) { .porque__datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- 13.12 · FAQ (injerto 4)---------------------------------------------
      nativo: el navegador ya sabe abrirlo, ya lo anuncia al lector de pantalla y ya funciona sin JS. Reimplementarlo con divs seria mas codigo para hacer peor lo que el navegador hace bien. */ .faq { display: flex; flex-direction: column; gap: .5rem; } .faq details { border: 1px solid var(--rl); border-radius: var(--r); background: var(--s); transition: border-color 160ms var(--ez); } .faq details[open] { border-color: var(--rl); background: var(--el); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp4); padding: var(--sp4); cursor: pointer; list-style: none; font-weight: 700; font-size: var(--fs-base); color: var(--tx); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--ai); } .faq summary svg { width: 16px; height: 16px; flex: none; color: var(--mu); transition: transform 220ms var(--ez); } .faq details[open] summary svg { transform: rotate(180deg); } .faq p { margin: 0; padding: 0 var(--sp4) var(--sp4); color: var(--mu); font-size: var(--fs-sm); max-width: 72ch; } @media (prefers-reduced-motion: reduce) { .faq summary svg { transition: none; } } /* --- 13.13 · VISTOS RECIENTEMENTE (injerto 6) ---------------------------- Nace vacio y con [hidden]: el JS lo rellena desde localStorage y solo entonces lo revela. Asi el HTML servido es identico para todos y la cache de pagina no se rompe. */ .vistos { display: flex; gap: .5rem; overflow-x: auto; list-style: none; padding: 0 0 4px; margin: 0; scrollbar-width: none; } .vistos::-webkit-scrollbar { display: none; } .vistos a { display: block; flex: 0 0 auto; max-width: 240px; border: 1px solid var(--rl); border-radius: var(--r); padding: .6rem .8rem; background: var(--s); color: var(--tx); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vistos a:hover { border-color: var(--gIn); color: var(--ai); } /* =========================================================================== 14 · CONTROLES DEL HEADER — toggle de tema + pastilla de idioma Transcrito del laboratorio "El Toggle de Tema", variante A Doble Circulo, ya con la concentricidad corregida. Los valores son los del laboratorio. ======================================================================== */ /* gap 9px: el mismo aire que separa las piezas dentro de una isla. */ .controles { display: flex; align-items: center; gap: 9px; } /* --- 14.1 · TOGGLE A · DOBLE CIRCULO ------------------------------------- GEOMETRIA (no tocar sin volver a medir): pista 76x38 con borde 1px -> caja interna 74x36 iconos y knob comparten tamano (28) y offsets (4px) translateX(38) = 74 interna - 28 knob - 4 margen - 4 left inicial REGLA DE CONCENTRICIDAD: el centro del knob y el del icono activo tienen que coincidir en los DOS estados. Se verifica midiendo con getBoundingClientRect(), nunca a ojo: aqui ya hubo dos bugs (un translate:-50% mezclado con offsets sobre caja con borde, y un translateX de 42 que dejaba el aro 4px a la derecha de la luna). */ .sw { position: relative; border: 0; padding: 0; cursor: pointer; background: none; display: block; flex: none; } .sw:focus-visible { outline: 2px solid var(--aico); outline-offset: 4px; border-radius: 16px; } .sw svg { stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* Area tactil >= 44px sin agrandar la pista: el envoltorio pone el resto. */ .sw-hit { display: grid; place-items: center; min-width: 44px; min-height: 44px; } /* Zona de toque de 44 px en el header, sin cambio visible (B-CIERRE2 §10): una capa invisible centrada en cada control (el logo, la hamburguesa, el sol y la luna, los enlaces del menu de escritorio), de al menos 44 x 44. Un toque en el pseudo cuenta como toque en su elemento; nada se mueve ni cambia de tamaño. El pie no entra (decide Marco). */ :is(.hdr, .islas) :is(.logo, .burger, .navlink), .sw { position: relative; } :is(.hdr, .islas) :is(.logo, .burger, .navlink)::after, .sw::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); } .swA { width: 76px; height: 38px; border-radius: 100px; background: linear-gradient(155deg, var(--gA), var(--gB)); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid var(--gBr); box-shadow: inset 0 1px 0 var(--gIn); } .swA .ic { position: absolute; top: 4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; transition: color 300ms var(--ez); } .swA .ic svg { width: 14px; height: 14px; stroke: currentColor; display: block; } .swA .sun { left: 4px; color: var(--dim); } .swA .mn { right: 4px; color: var(--aico); } :root[data-theme="light"] .swA .sun { color: var(--aico); } :root[data-theme="light"] .swA .mn { color: var(--dim); } .swA .knob { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--aico); box-shadow: 0 0 12px color-mix(in oklab, var(--aico) 45%, transparent); transform: translateX(38px); transition: transform 340ms var(--ez), border-color 300ms; } :root[data-theme="light"] .swA .knob { transform: translateX(0); } /* VARIANTE DESNUDA — la unica valida dentro de una superficie de cristal. La de arriba, con pista, solo puede usarse sobre una superficie que NO sea de cristal: la ley dice que un cristal no contiene otro cristal. GEOMETRIA (no tocar sin volver a medir): caja 50x26 sin borde -> no hay caja interna que descontar circulos e iconos 26, pegados a los extremos (left:0 / right:0) translateX(24) = 50 caja - 26 knob CONCENTRICIDAD: apagado, knob y sol centran en x=13; encendido, knob y luna centran en x=37. Los dos estados coinciden por construccion, y se comprueba midiendo con herramientas-medir-toggle.mjs. */ .swA[data-variante="desnudo"] { width: 50px; height: 26px; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .swA[data-variante="desnudo"] .ic { top: 0; width: 26px; height: 26px; } .swA[data-variante="desnudo"] .ic svg { width: 13px; height: 13px; } .swA[data-variante="desnudo"] .sun { left: 0; } .swA[data-variante="desnudo"] .mn { right: 0; } .swA[data-variante="desnudo"] .knob { top: 0; left: 0; width: 26px; height: 26px; transform: translateX(24px); } :root[data-theme="light"] .swA[data-variante="desnudo"] .knob { transform: translateX(0); } /* El area tactil la pone el envoltorio, no la pieza: 26px de alto serian pocos para un dedo, pero agrandar el toggle romperia la geometria. */ .sw-hit { min-width: 44px; min-height: 44px; } @media (prefers-reduced-motion: reduce) { .swA .knob, .swA .ic { transition: none; } } /* --- 14.2 · SELECTOR DE IDIOMA Y MONEDA (ORDEN-SELECTOR-1, opcion A) ------ Cerrado: un boton [bandera] ES | MXN. La bandera va con el idioma; la moneda va sin bandera. Abierto: nativo. Escritorio: panel de 340px bajo el boton, alineado a su derecha (--sel-top/--sel-right las pone el JS al abrir). Movil: hoja desde abajo con asa, velo --velo. Solo tokens. */ /* Sin borde (ORDEN-DISENO-GLOBAL-1 §2): es parte nativa del menu, como un enlace mas; al pasar o enfocar cambia apenas el fondo, y el foco de teclado lleva el anillo del tema. Cerrado solo muestra la bandera y el codigo. */ .sel { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px; border-radius: var(--r); border: 0; background: transparent; color: var(--tx); font: inherit; cursor: pointer; white-space: nowrap; flex: none; transition: background 160ms var(--ez); } .sel:hover, .sel[aria-expanded="true"] { background: color-mix(in oklab, var(--tx) 7%, transparent); } .sel:focus-visible { outline: 2px solid var(--aico); outline-offset: 2px; } .sel .fl { display: block; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px var(--gBr); } .sel__cod { font-family: var(--mo-f); font-size: 14px; font-weight: 700; letter-spacing: .02em; } .sel__sep { display: block; width: 1px; height: 16px; background: var(--rl); } .sel__v { width: 12px; height: 12px; flex: none; stroke: var(--mu); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* En la isla de 390px cada pixel cuenta: mas compacto y sin flecha. */ .sel--compacto { gap: 7px; padding: 0 10px; } .sel--compacto .sel__cod { font-size: 13px; } .sel--compacto .sel__sep { height: 14px; } .sel--compacto .sel__v { display: none; } /* --- el panel: --- */ .sel-panel { padding: 16px; border: 1px solid var(--rl); border-radius: var(--r-lg); background: var(--s); color: var(--tx); display: none; flex-direction: column; gap: 6px; margin: 0; box-shadow: var(--sombra-card); max-height: 88vh; overflow: auto; box-sizing: border-box; } .sel-panel[open] { display: flex; } /* El de idioma, en escritorio, de la misma superficie que el mega menu. */ @media (min-width: 1000px) { .sel-panel { background: linear-gradient(155deg, var(--gA), var(--gB)), var(--mega-fondo); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); } } .sel-panel::backdrop { background: var(--velo); } .sel-panel__asa { display: none; width: 40px; height: 4px; border-radius: 2px; background: var(--rl); align-self: center; margin-bottom: 6px; } .sel-panel__cab { display: none; align-items: center; justify-content: space-between; padding: 0 4px 6px; } .sel-panel__cab h2 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin: 0; } .sel-panel__x { width: 44px; height: 44px; flex: none; border: 1px solid var(--rl); border-radius: var(--r); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--tx); } .sel-panel__x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } .sel-panel__rot { color: var(--mu); padding: 4px 6px; margin: 0; font-size: 11px; letter-spacing: .08em; } .sel-panel__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .sel-panel__linea { border: 0; height: 1px; background: var(--rl); margin: 8px 0; } .sel-panel__nota { font-size: 12px; color: var(--mu); line-height: 1.45; padding: 8px 6px 2px; margin: 0; } /* --- cada fila: idioma (enlace) o moneda (boton), mismo estado activo --- */ .sel-fila { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r); box-sizing: border-box; border: 1.5px solid transparent; background: transparent; color: var(--tx); font: inherit; text-align: left; cursor: pointer; } .sel-fila:hover { background: color-mix(in oklab, var(--tx) 5%, transparent); } .sel-fila .fl { display: block; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px var(--gBr); } .sel-fila b { font-size: 15px; font-weight: 700; } .sel-fila > .mo { color: var(--mu); font-size: 12px; letter-spacing: .04em; text-transform: none; } .sel-fila__ok { width: 18px; height: 18px; margin-left: auto; flex: none; stroke: var(--ac); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .sel-fila[aria-current="true"], .sel-fila[aria-pressed="true"] { border-color: var(--ac); background: var(--el); } /* --- escritorio: cuelga del boton, alineado a su derecha --- */ @media (min-width: 1000px) { .sel-panel { position: fixed; width: 340px; max-width: calc(100vw - 2 * var(--gut)); top: var(--sel-top, 76px); right: var(--sel-right, var(--gut)); left: auto; bottom: auto; } .sel-panel::backdrop { background: transparent; } } /* --- movil: hoja desde abajo --- */ @media (max-width: 999px) { .sel-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: none; padding: 10px 16px calc(28px + env(safe-area-inset-bottom)); border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; animation: c100-sube .3s var(--ez) both; } .sel-panel__asa { display: block; } .sel-panel__cab { display: flex; } .sel-fila { height: 52px; } .sel-fila b { font-size: 16px; } .sel-fila__ok { width: 20px; height: 20px; } } @media (prefers-reduced-motion: reduce) { .sel-panel { animation: none; } } /* --- 13.16 · LA TIENDA — rejilla, vista lista y banda cruzada ------------ UN SOLO MOTOR para /tours/, /combos/ y /paquetes/. La vista de lista NO es otra tarjeta: es la misma card-producto.php con una clase en el contenedor. Si algun dia hay dos tarjetas, esta seccion es la prueba de que algo se duplico. */ .tienda__barra { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; } .vista { margin-left: auto; display: flex; gap: 2px; border: 1px solid var(--rl); border-radius: 11px; padding: 2px; background: var(--s); } .vista button { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .7rem; font-weight: 700; border: 0; background: transparent; color: var(--mu); padding: .3rem .55rem; border-radius: 8px; cursor: pointer; min-height: 34px; } .vista button svg { width: 14px; height: 14px; flex: none; } .vista button[aria-pressed="true"] { background: var(--el); color: var(--tx); } /* minmax(0, 1fr) y no 1fr: con 1fr la columna no baja de su contenido y en el movil la tarjeta empujaba la pagina (blog 25 px, tienda 198 px a 360; revisar-diseno.mjs --solo-ancho, CORRECCION-TIENDA-1). */ .rej { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .rej--lista { grid-template-columns: 1fr; } /* La misma .card en dos formas: rejilla y lista (13.16b). «Reservar» se ve en las dos. */ .card__adulto { display: none; } .rej--lista .card__adulto { display: block; font-size: var(--fs-xs); color: var(--mu); } .tienda__vacio { color: var(--mu); padding: var(--sp5) 0; } .tienda__pie { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin-top: 1.1rem; } /* La paginacion son ENLACES REALES aunque exista "ver mas": sin ellos el rastreador no pasa de la primera pagina y el catalogo queda invisible. */ .pag { display: flex; gap: .3rem; font-family: var(--mo-f); font-size: 10px; color: var(--dim); } .pag a { color: var(--mu); border: 1px solid var(--rl2); border-radius: 8px; padding: .25rem .5rem; } .pag a[aria-current] { background: var(--tx); color: var(--g); border-color: var(--tx); } /* La banda entre las tres puertas. Va al FINAL: primero se ve lo que se vino a ver. */ .banda { display: flex; align-items: center; gap: var(--sp4); flex-wrap: wrap; border-radius: var(--r-lg); padding: var(--sp5); margin-top: var(--sp5); } .banda b { display: block; font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; } .banda p { margin: .2rem 0 0; color: var(--mu); font-size: var(--fs-sm); max-width: 52ch; } .banda .btn { margin-left: auto; flex: none; } @media (min-width: 900px) { .rej { grid-template-columns: repeat(4, 1fr); } .rej--lista { grid-template-columns: 1fr; } } /* --- 13.16b · LA TIENDA COMO EL BLOG (CORRECCION-TIENDA-1, B-T1) ---------- Marco: «que tome lo mejor del blog y lo replique, que no invente». La misma rejilla de 3 con su aire, la misma tarjeta (calibre de .card--entrada) y la misma barra; lo unico propio de la tienda es el precio, «Reservar» y la valoracion. Todo con tokens: noche y dia cambian solos. */ /* Rejilla: 3 columnas en escritorio, como el blog (antes 4 y apretadas). */ @media (min-width: 900px) { .tienda-pagina .rej:not(.rej--lista) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* «Reservar» siempre, el boton de presion de la casa a la derecha del precio. */ /* Si precio y boton no caben en una fila, el boton baja a todo lo ancho: nunca se sale de la tarjeta. */ .rej .card__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem; margin-top: auto; } .rej .card__foot .btn { flex: 1 0 auto; max-width: 100%; } /* Los «incluye»: 2 columnas que se parten en 2 lineas, nunca se cortan. */ .rej .card__hl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .75rem; } .rej .card__hl li { display: flex; align-items: flex-start; gap: .4rem; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } .rej .card__hl li svg { flex: none; margin-top: 1px; } .rej .card__hl li span { min-width: 0; overflow-wrap: break-word; white-space: normal; overflow: visible; text-overflow: clip; } /* Tarjeta angosta (2 columnas en el movil): los «incluye» en una columna, asi «Transporte» no se parte a la mitad. */ .rej .card { container-type: inline-size; } @container (max-width: 240px) { .rej .card__hl { grid-template-columns: minmax(0, 1fr); } } /* La valoracion, abajo de la tarjeta, separada por una linea fina. */ /* En linea y no en flex: si no cabe, se parte por palabras como una frase (el «·» no se queda colgando solo). */ .card__val { display: block; line-height: 1.5; margin: .2rem 0 0; padding-top: .7rem; border-top: 1px solid var(--rl); font-size: var(--fs-sm); color: var(--mu); } .card__val .estrellas { display: inline-flex; gap: 1px; color: var(--aico); vertical-align: -2px; margin-right: .35rem; } .card__val .estrellas svg { width: 14px; height: 14px; } .card__val b { color: var(--tx); font-variant-numeric: tabular-nums; } .card__val a { color: var(--mu); text-decoration: underline; text-underline-offset: 3px; } .card__val a:hover { color: var(--tx); } /* La descripcion corta: solo en lista (2 lineas, la de la ficha recortada). */ .rej:not(.rej--lista) .card:not(.card--entrada) .card__sub { display: none; } /* LISTA: la misma tarjeta, otra disposicion (la referencia: foto · centro · precio). */ .rej--lista .card { display: grid; grid-template-columns: 260px minmax(0, 1fr) 200px; grid-auto-flow: row dense; gap: 0; align-items: stretch; padding: 8px; } /* dense: en movil la valoracion sube bajo el titulo */ .rej--lista .card__ph { width: auto; height: 100%; min-height: 170px; aspect-ratio: auto; grid-row: 1 / span 6; grid-column: 1; } .rej--lista .card__bd { display: contents; } .rej--lista .card__bd > :not(.card__foot) { grid-column: 2; margin-inline: 20px; } .rej--lista .card__bd > :first-child { margin-top: 14px; } .rej--lista .card__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-block: .35rem 0; } .rej--lista .card__hl { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .6rem; } .rej--lista .card__hl li { white-space: nowrap; } .rej--lista .card__val { border-top: 0; padding: .55rem 0 14px; margin-top: auto; } .rej--lista .card__foot { grid-column: 3; grid-row: 1 / span 6; flex-direction: column; align-items: stretch; justify-content: center; gap: .7rem; margin: 0; padding: 14px 14px 14px 18px; border-left: 1px solid var(--rl); } .rej--lista .card__foot .btn { width: 100%; margin-left: 0; } .rej--lista .card__price small { display: block; } @media (max-width: 760px) { .rej--lista .card { grid-template-columns: 110px minmax(0, 1fr); } .rej--lista .card__ph { min-height: 0; height: 110px; grid-row: 1 / span 2; } .rej--lista .card__bd > :not(.card__foot) { margin-inline: 12px 4px; } .rej--lista .card__bd > :first-child { margin-top: 6px; } .rej--lista .card__sub, .rej--lista .card__hl { display: none; } .rej--lista .card__val { padding: .3rem 0 0; } .rej--lista .card__foot { grid-column: 1 / -1; grid-row: auto; flex-direction: row; align-items: center; justify-content: space-between; border-left: 0; border-top: 1px solid var(--rl); padding: 10px 6px 4px; margin-top: 8px; } .rej--lista .card__foot .btn { width: auto; } } .card__val .estrellas svg.apagada { opacity: .3; } /* --- 13.17 · VENTA CRUZADA — la propuesta con la cuenta a la vista ------- No es un carrusel de "tambien te puede interesar": es una propuesta con la resta hecha, y por eso la cuenta se ve. Un "-15%" no se verifica; un "$1,989 -> $1,649" si. Va DESPUES del itinerario en la ficha y antes de pagar en el carrito: en los dos casos, cuando la persona ya se convencio. Antes de convencerse es ruido. */ .cruzada { border-radius: var(--r-lg); padding: var(--sp5); display: flex; flex-direction: column; gap: .55rem; margin-block: var(--sp5); } .cruzada h3 { margin: 0; font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.025em; } .cruzada__gancho { margin: 0; color: var(--mu); font-size: var(--fs-sm); } .cruzada__gancho b { color: var(--tx); } /* El ahorro en rosa: es la accion, no la estructura. */ .cruzada__ahorro { color: var(--go); font-weight: 800; } /* La cuenta, en mono y con la resta legible de un vistazo. */ .cruzada__cuenta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem var(--sp4); font-family: var(--mo-f); font-size: var(--fs-xs); color: var(--dim); padding-top: .5rem; border-top: 1px solid var(--gBr); } .cruzada__cuenta b { color: var(--tx); font-size: var(--fs-sm); font-weight: 700; } .cruzada .btn { align-self: flex-start; margin-top: .3rem; } /* En el carrito el bloque es mas apretado: ahi compite con el resumen de la compra y no debe empujarlo fuera de pantalla. */ .cruzada[data-lugar="carrito"] { padding: var(--sp4); margin-block: var(--sp4); } .cruzada[data-lugar="carrito"] h3 { font-size: var(--fs-base); } /* --- DATOS PROVISIONALES · solo en el banco de pruebas ------------------- Un dato inventado tiene que VERSE inventado mientras esté ahí. El contorno de puntos y el title con su clave hacen que no haya que acordarse de cuál era cuál. En produccion la clase `sandbox` no existe, asi que esto no pinta nada — y ademas el guardian del despliegue no deja subir ni uno. */ body.sandbox [data-pnd] { outline: 1px dashed var(--go); outline-offset: 2px; cursor: help; } /* ============================================================================= 13.20 · CONTACTO · primero el motivo, después el canal ========================================================================== */ .c100-contacto-pag { display: grid; gap: var(--sp7); padding-block: var(--sp6) var(--sp8); } /* EL MISMO CONTENEDOR QUE LA HOME, y no solo su padding. Antes solo llevaban padding-inline: sin max-width, el texto se pegaba al borde izquierdo y el mapa se iba al derecho con un vacio en medio. Eso es lo que se ve «disparejo»: no es la pagina, es que no comparte contenedor. .wrap ya lo resuelve en toda la home — aqui se usa el mismo, no uno igual. */ .c100-contacto, .c100-mapa, .c100-form-sec { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); } /* Y las dos columnas empiezan arriba las dos, no una a media altura. */ .c100-mapa { display: grid; gap: var(--sp5); align-items: start; } @media (min-width: 900px) { .c100-mapa { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } } .c100-contacto__head { max-width: 46ch; } .c100-contacto__head h1 { margin: .4rem 0 .5rem; font-size: var(--fs-4xl); line-height: 1.02; font-weight: 800; letter-spacing: -.05em; } /* --- el marcador de estado (parts/estado-vivo.php) ---------------------- Pastilla SEMIRRECTANGULAR y punto CUADRADO: ley 42. El sonar es un cuadrado que crece y se desvanece, con el mismo radio de 2 px que el punto — un sonar redondo alrededor de un punto cuadrado se ve como un error. */ .c100-estado { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .45rem .8rem; border-radius: var(--r); border: 1px solid var(--rl); background: var(--el); font-size: .8125rem; } .c100-estado b { font-weight: 700; } .c100-estado small { color: var(--mu); } .c100-estado__punto { position: relative; width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--dim); } .c100-estado__punto::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: inherit; animation: c100-sonar 2.4s ease-out infinite; } @keyframes c100-sonar { 0% { transform: scale(1); opacity: .85 } 70% { transform: scale(2.8); opacity: 0 } 100% { opacity: 0 } } /* El estado va en el COLOR y en el TEXTO, nunca solo en el movimiento: quien tenga el movimiento reducido lee lo mismo. */ [data-estado="abierto"] .c100-estado__punto { background: var(--ok); } [data-estado="guardia"] .c100-estado__punto { background: var(--ac); } [data-estado="cerrado"] .c100-estado__punto { background: var(--dim); } [data-estado="cerrado"] .c100-estado__punto::after { animation: none; } @media (prefers-reduced-motion: reduce) { .c100-estado__punto::after { animation: none } } /* --- los motivos, sin JavaScript ---------------------------------------- Radios de verdad con sus labels: el panel se ensena con :checked ~ , asi que la pagina funciona con el JS apagado. Un contacto que necesita JS para dar un telefono es un contacto que a veces no da nada. */ .c100-motivos { border: 0; padding: 0; margin: var(--sp6) 0 0; display: flex; flex-wrap: wrap; gap: .5rem; } .c100-motivo { cursor: pointer; font-size: .875rem; font-weight: 600; border: 1px solid var(--rl); border-radius: var(--r); padding: .6rem .9rem; background: transparent; color: var(--mu); min-height: 44px; display: inline-flex; align-items: center; transition: border-color 200ms, color 200ms; } /* EL RADIO NATIVO SOBRA, Y NO SOLO POR REDONDO: el chip ya dice lo elegido con su borde amarillo. El circulo de al lado repite el mismo dato y ensucia la fila. Se oculta a la VISTA pero sigue en el DOM — el teclado tabula por el, el lector de pantalla lo anuncia, y el :checked ~ que abre los paneles sigue funcionando sin una linea de JavaScript. display:none lo habria roto todo eso a la vez. */ .c100-motivos input { position: absolute; opacity: 0; width: 0; height: 0; } .c100-motivo:hover { color: var(--tx); } .c100-motivos input:focus-visible + .c100-motivo { outline: 2px solid var(--aico); outline-offset: 2px; } .c100-motivos input:checked + .c100-motivo { border-color: var(--aico); color: var(--tx); background: color-mix(in oklab, var(--ac) 10%, transparent); } .c100-panel { display: none; flex-basis: 100%; margin-top: .5rem; } .c100-panel p { margin: 0 0 .75rem; color: var(--mu); max-width: 52ch; } .c100-panel__cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .c100-panel__mas { font-size: .8125rem; } /* Un panel por motivo. El selector general de hermanos solo alcanza a los que vienen DESPUES, y por eso en el marcado los paneles van todos al final. */ #c100-m-reservar:checked ~ [data-para="reservar"], #c100-m-duda:checked ~ [data-para="duda"], #c100-m-cambio:checked ~ [data-para="cambio"], #c100-m-factura:checked ~ [data-para="factura"], #c100-m-agencia:checked ~ [data-para="agencia"], #c100-m-otra:checked ~ [data-para="otra"] { display: block; } /* --- la fila fija de canales --- */ .c100-canales { margin-top: var(--sp6); } .c100-canales__t { color: var(--dim); font-size: .8125rem; margin: 0 0 .6rem; } .c100-canales ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; } .c100-canales a { display: block; padding: .7rem 1rem; border-radius: var(--r-lg); border: 1px solid var(--rl); background: var(--s); text-decoration: none; min-height: 44px; } .c100-canales b { display: block; font-size: .8125rem; } .c100-canales span { color: var(--mu); font-size: .8125rem; } /* --- el mapa dibujado --- */ .c100-mapa { display: grid; gap: var(--sp5); } .c100-mapa h2 { font-size: var(--fs-2xl); margin: 0 0 .4rem; letter-spacing: -.03em; } .c100-datos { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 1rem 0 0; font-size: .875rem; } .c100-datos dt { color: var(--dim); } .c100-datos dd { margin: 0; } .c100-mapa__svg { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rl); } .c100-mapa__svg svg { display: block; width: 100%; height: auto; } .c100-mapa__abrir { position: absolute; right: .6rem; bottom: .6rem; background: var(--s); border: 1px solid var(--rl); border-radius: 11px; padding: .4rem .7rem; font-size: .75rem; font-weight: 700; } /* --- el formulario --- */ .c100-form { max-width: 46rem; margin-top: 1rem; display: grid; gap: 1rem; } .c100-campo { margin: 0; display: grid; gap: .3rem; } .c100-campo label { font-size: .8125rem; font-weight: 600; } .c100-campo small { color: var(--dim); font-size: .75rem; } .c100-campo input, .c100-campo select, .c100-campo textarea { font: inherit; color: var(--tx); background: var(--s); border: 1px solid var(--rl); border-radius: var(--r); padding: .7rem .8rem; min-height: 44px; width: 100%; } .c100-campo textarea { min-height: 7rem; resize: vertical; } .c100-consent { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: .8125rem; } .c100-consent input { margin-top: .2rem; width: 18px; height: 18px; flex: none; border-radius: 2px; } .c100-form__pie { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0; } .c100-form__pie small { color: var(--mu); } @media (min-width: 900px) { .c100-mapa { grid-template-columns: 1fr 1.2fr; align-items: center; gap: var(--sp7); } .c100-contacto__head h1 { max-width: 18ch; } } /* ============================================================================= 13.21 · CENTRO DE AYUDA · 76 preguntas que se leen ========================================================================== */ .c100-faq { padding: var(--sp6) var(--gut) var(--sp8); max-width: 62rem; margin-inline: auto; } .c100-faq__head h1 { margin: .4rem 0 .5rem; font-size: var(--fs-4xl); line-height: 1.02; font-weight: 800; letter-spacing: -.05em; } /* --- el buscador. Con 17 preguntas era comodo; con 76 es obligatorio. --- */ .c100-faq__buscar { margin: var(--sp5) 0 var(--sp4); } .c100-faq__buscar input { font: inherit; width: 100%; color: var(--tx); background: var(--s); border: 1px solid var(--rl); border-radius: var(--r-lg); padding: .8rem 1rem; min-height: 48px; } .c100-faq__cuenta { margin: .5rem 0 0; color: var(--mu); font-size: .8125rem; min-height: 1.2em; } /* --- los chips, con su cuenta ------------------------------------------ Saber que «Pagos» tiene nueve ANTES de tocar evita el clic que no lleva a ninguna parte. El numero no es decoracion: es lo que hace util al chip. */ .c100-faq__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--sp6); } .c100-chip { font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; border: 1px solid var(--rl); border-radius: var(--r); padding: .5rem .8rem; background: transparent; color: var(--mu); min-height: 40px; display: inline-flex; align-items: center; gap: .4rem; transition: border-color 200ms, color 200ms; } .c100-chip:hover { color: var(--tx); } .c100-chip b { color: var(--dim); font-weight: 700; font-size: .75rem; } .c100-chip[aria-pressed="true"] { border-color: var(--aico); color: var(--tx); background: color-mix(in oklab, var(--ac) 10%, transparent); } .c100-chip[aria-pressed="true"] b { color: var(--ai); } /* --- los grupos y las preguntas --- */ .c100-faq__grupo { margin-bottom: var(--sp6); } .c100-faq__grupo h2 { font-size: var(--fs-lg); letter-spacing: -.02em; margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rl2); } .c100-faq__p { border-bottom: 1px solid var(--rl2); } .c100-faq__p summary { cursor: pointer; list-style: none; padding: .9rem 2rem .9rem 0; font-weight: 600; position: relative; min-height: 44px; display: flex; align-items: center; } .c100-faq__p summary::-webkit-details-marker { display: none; } /* El indicador es un signo +, no un triangulo: el triangulo lo pone el navegador con su propia forma y no hay dos iguales. */ .c100-faq__p summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; translate: 0 -50%; color: var(--ai); font-weight: 700; font-size: 1.15rem; transition: rotate 200ms var(--ez); } .c100-faq__p[open] summary::after { content: "−"; } .c100-faq__p summary:focus-visible { outline: 2px solid var(--aico); outline-offset: -2px; } .c100-faq__r { padding: 0 0 1.1rem; color: var(--mu); max-width: 68ch; } .c100-faq__r p:first-child { margin-top: 0; } .c100-faq__r ul, .c100-faq__r ol { padding-left: 1.2rem; } .c100-faq__r table { width: 100%; border-collapse: collapse; font-size: .8125rem; } .c100-faq__r td, .c100-faq__r th { border-bottom: 1px solid var(--rl2); padding: .4rem .5rem; text-align: left; } /* --- copiar. Es la prueba, no el adorno. --- */ .c100-faq__acc { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 0; } .c100-faq__btn { font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; border: 1px solid var(--rl); border-radius: 11px; padding: .4rem .7rem; background: transparent; color: var(--mu); min-height: 34px; } .c100-faq__btn:hover:not(:disabled) { color: var(--tx); border-color: var(--aico); } .c100-faq__btn:disabled { color: var(--ai); border-color: var(--aico); cursor: default; } /* --- el estado vacio: no se disculpa, ofrece el canal que resuelve --- */ .c100-faq__nada { border: 1px dashed var(--rl); border-radius: var(--r-lg); padding: var(--sp5); text-align: center; color: var(--mu); } .c100-faq__nada b { color: var(--tx); } /* ============================================================================= 13.22 · FILTROS DE LA TIENDA · cada casilla es un enlace No hay estado en CSS que sincronizar con la URL, porque no hay estado: lo que esta puesto lo dice el servidor con aria-pressed. Eso hace que el panel no pueda desincronizarse de los resultados, que es el fallo clasico de los filtros. Ver inc/tienda.php. ========================================================================== */ /* --- el boton que abre la hoja. Solo movil: en escritorio no existe. --- */ .tienda-abrir { display: flex; align-items: center; gap: var(--sp2); width: 100%; font: inherit; font-size: .8125rem; font-weight: 800; border: 1px solid var(--rl); background: var(--s); color: var(--tx); padding: .65rem .85rem; border-radius: var(--r-lg); cursor: pointer; min-height: 48px; margin-bottom: var(--sp3); } .tienda-abrir svg { width: 15px; height: 15px; stroke: var(--tx); fill: none; stroke-width: 1.9; stroke-linecap: round; } .tienda-abrir em { font-style: normal; margin-left: auto; font-family: var(--mo-f); font-size: 9px; letter-spacing: .08em; color: var(--ai); background: color-mix(in oklab, var(--ac) 20%, transparent); padding: .15rem .4rem; border-radius: 6px; } /* --- lo aplicado, FUERA del panel --------------------------------------- En movil el panel esta cerrado casi siempre. Si los chips viven dentro, el visitante no ve lo que lleva puesto justo cuando mas lo necesita. */ .tienda-aplicados { display: flex; align-items: center; gap: var(--sp1); flex-wrap: wrap; margin-bottom: var(--sp3); } .fchip { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; text-decoration: none; border: 1px solid var(--aico); background: color-mix(in oklab, var(--ac) 14%, var(--s)); color: var(--ai); padding: .3rem .5rem; border-radius: 10px; min-height: 34px; } /* La cruz la pone el CSS y no el HTML: es un adorno del control, y en el marcado solo estorbaria al lector de pantalla, que ya oye «Quitar el filtro X» por el aria-label. */ .fchip::after { content: "\00d7"; font-family: var(--mo-f); font-size: 12px; } .fchip:hover { border-width: 1.5px; } .tienda-limpiar { font-size: .75rem; font-weight: 700; color: var(--mu); padding: .3rem; } /* --- el panel ---------------------------------------------------------- */ .tienda-filtros { border: 1px solid var(--rl); background: var(--s); border-radius: 20px; overflow: hidden; display: none; } .tienda-filtros__cab { display: flex; align-items: center; gap: var(--sp2); padding: .85rem var(--sp4); border-bottom: 1px solid var(--rl2, var(--rl)); } .tienda-filtros__cab .mo { color: var(--dim, var(--mu)); } .tienda-filtros__cab a { margin-left: auto; font-size: .75rem; font-weight: 800; color: var(--ai); } /* --- cada bloque es un
      nativo: plegable sin una linea de JS --- */ .tienda-filtros .bloque { border-bottom: 1px solid var(--rl2, var(--rl)); } .tienda-filtros .bloque:last-of-type { border-bottom: 0; } .tienda-filtros summary { display: flex; align-items: center; gap: var(--sp2); font-size: .8125rem; font-weight: 800; letter-spacing: -.015em; padding: .85rem var(--sp4); cursor: pointer; list-style: none; } .tienda-filtros summary::-webkit-details-marker { display: none; } /* El triangulo se dibuja aqui para que gire; el nativo no se puede animar. */ .tienda-filtros summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--dim, var(--mu)); border-bottom: 2px solid var(--dim, var(--mu)); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ez, ease); } .tienda-filtros details[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); } .tienda-filtros summary em { font-style: normal; font-family: var(--mo-f); font-size: 8.5px; letter-spacing: .08em; color: var(--ai); background: color-mix(in oklab, var(--ac) 18%, transparent); padding: .12rem .35rem; border-radius: 6px; } .tienda-filtros .bloque__cuerpo { padding: 0 var(--sp4) var(--sp4); } /* --- el histograma: ver donde vive el catalogo antes de elegir --------- Un deslizador pelado obliga a elegir a ciegas. Con la distribucion encima se ve que casi todo esta en una franja y que subir el tope no suma nada. */ /* Un con una por barra: la altura va en el atributo, no en un style="" por barra. preserveAspectRatio="none" estira el viewBox al ancho. */ .hist { display: block; width: 100%; height: 46px; margin-bottom: .15rem; } .hist rect { fill: color-mix(in oklab, var(--mu) 35%, transparent); transition: fill .18s; } .hist rect.on { fill: var(--tx); } /* solo sale con 8 productos o mas (listado-lateral.php) */ /* --- el rango doble ---------------------------------------------------- Dos