/* Mariachis Bogotá Nueva Era — sistema visual Paleta: pastel fucsia (fondo claro) + acento fucsia profundo + oro charro de apoyo. Los nombres de variable se conservan del tema anterior (--ink*, --gold*, --paper*) para no tener que tocar 400 líneas de reglas: lo que cambia es su valor. --ink* = fondos, del más claro al más saturado --gold* = acento (hoy fucsia; es el color de precios, títulos y llamadas) --paper* = texto sobre fondo claro Todo el texto se verificó ≥ 4.5:1 sobre su fondo. Sin dependencias. */ :root { --ink: #f2ebdd; /* 4-sep-2026: el dueño pidió beis, no blanco */ --ink-2: #e9e0cd; --ink-3: #fbf6ea; /* las tarjetas ya no son blanco puro */ --gold: #0f5132; --gold-2: #0a3a24; --gold-dim: #8fb6a2; --oro: #c9962b; --red: #0f5132; --red-2: #0a3a24; --green: #128c4a; --paper: #08160f; --paper-dim: #123020; --muted: #5a6b60; --line: rgba(15, 81, 50, .16); --ff-head: "Cormorant Garamond", Georgia, "Times New Roman", serif; --ff-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --w: 1140px; --r: 14px; --shadow: 0 18px 46px -20px rgba(8, 22, 15, .34); --t: .22s cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); --glow: 0 22px 48px -20px rgba(15, 81, 50, .42); } *, *::before, *::after { box-sizing: border-box; } /* 4-sep-2026: el dueño pidió que el salto a los paquetes fuera inmediato. El desplazamiento suave animaba el recorrido y se sentía lento. Instantáneo. */ html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; /* 4-sep-2026: el primer pintado era blanco y luego pasaba a beis. Con el fondo puesto en el navegador ya pinta beis desde el primer fotograma. */ background: #f2ebdd; color-scheme: light; } body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--ff-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--gold-2); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--ff-head); line-height: 1.13; margin: 0 0 .42em; font-weight: 700; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.02em; } h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); letter-spacing: -.015em; } h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); } p { margin: 0 0 1.1em; } .ne-wrap { width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: 22px; } .ne-section { padding: clamp(34px, 5.5vw, 76px) 0; } .ne-center { text-align: center; } .ne-muted { color: var(--muted); } .ne-lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--paper-dim); } .ne-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Cinta tricolor decorativa --- */ .ne-ribbon { height: 4px; background: linear-gradient(90deg, var(--green) 0 33.33%, var(--oro) 33.33% 66.66%, var(--red) 66.66% 100%); } /* --- Encabezado --- */ .ne-hdr { position: sticky; top: 0; z-index: 60; background: rgba(246, 244, 236, .86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .3s var(--ease-out), background .3s var(--ease-out); } .ne-hdr.ne-scrolled { box-shadow: 0 10px 30px -18px rgba(10, 58, 36, .5); background: rgba(246, 244, 236, .96); } .ne-hdr .ne-wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; } .ne-brand { display: flex; align-items: center; gap: 11px; font-family: var(--ff-head); font-size: 1.12rem; color: var(--paper); font-weight: 700; letter-spacing: .01em; } .ne-brand:hover { text-decoration: none; } .ne-brand .ne-star { width: 30px; height: 30px; flex: 0 0 30px; } .ne-brand small { display: block; font-family: var(--ff-body); font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; } .ne-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; } /* `:not(.ne-btn)` es necesario: si no, esta regla gana por especificidad al color del botón dorado y deja el teléfono ilegible sobre el fondo dorado. */ .ne-nav a:not(.ne-btn) { color: var(--paper-dim); font-size: .92rem; font-weight: 500; } .ne-nav a:not(.ne-btn):hover { color: var(--gold-2); text-decoration: none; } .ne-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; } .ne-burger span { display: block; width: 24px; height: 2px; background: var(--gold); margin: 5px 0; transition: var(--t); } /* --- Botones --- */ .ne-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: .97rem; letter-spacing: .01em; cursor: pointer; transition: var(--t); white-space: nowrap; font-family: inherit; } .ne-btn { position: relative; overflow: hidden; } /* Destello que cruza el botón al pasar por encima: 200 bytes de CSS, cero JS. */ .ne-btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); transition: left .6s var(--ease-out); pointer-events: none; } .ne-btn:hover::after { left: 115%; } .ne-btn:hover { text-decoration: none; transform: translateY(-2px); } .ne-btn:active { transform: translateY(0); } .ne-btn-gold { background: linear-gradient(160deg, #0f5132, var(--gold)); color: #fff; box-shadow: 0 10px 26px -10px rgba(15, 81, 50, .5); } .ne-btn-gold:hover { box-shadow: 0 16px 32px -10px rgba(15, 81, 50, .62); } .ne-btn-wa { background: #12a150; color: #fff; box-shadow: 0 10px 26px -10px rgba(18, 161, 80, .45); } .ne-btn-ghost { border-color: rgba(15, 81, 50, .35); color: var(--gold-2); background: rgba(255, 255, 255, .72); } .ne-btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: #fbf6ea; } .ne-btn-lg { padding: 17px 34px; font-size: 1.04rem; } .ne-btn-sm { padding: 10px 18px; font-size: .87rem; } /* --- Hero --- */ .ne-hero { position: relative; padding: clamp(20px, 4vw, 56px) 0 clamp(34px, 5vw, 72px); overflow: hidden; } .ne-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(15, 81, 50, .22), transparent 62%), radial-gradient(ellipse 70% 50% at 88% 12%, rgba(201, 150, 43, .14), transparent 60%), linear-gradient(180deg, #fde7f2, var(--ink)); } .ne-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09; background-image: radial-gradient(var(--gold) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(180deg, #000, transparent 78%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%); } .ne-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px, 5vw, 62px); align-items: start; } /* En pantalla grande la foto va bajo el titular, como en el móvil, pero acotada: si se deja a su alto natural, el texto y los botones caen fuera de la primera vista y el formulario queda flotando en un hueco. */ @media (min-width: 961px) { .ne-hero-foto img { max-height: 320px; width: 100%; object-fit: cover; object-position: center 35%; } .ne-quote-card { position: sticky; top: 92px; } /* En el móvil la foto va justo bajo el titular. En pantalla grande hay sitio de sobra, así que primero van el texto y los botones —lo que convierte— y la foto queda debajo, todo dentro de la primera vista. El orden del HTML no cambia. */ .ne-hero-grid > div:first-child { display: flex; flex-direction: column; } .ne-hero-grid .ne-eyebrow { order: 1; align-self: flex-start; } .ne-hero-grid h1 { order: 2; } .ne-hero-grid .ne-lead { order: 3; } .ne-hero-grid .ne-hero-cta { order: 4; margin-top: 22px; } .ne-hero-grid .ne-hero-foto { order: 5; margin-top: 6px; } .ne-hero-grid .ne-hero-trust { order: 6; margin-top: 18px; } } /* Fila superior del hero: el botón a los paquetes y el distintivo, que ahora es un enlace directo a WhatsApp con el mensaje ya escrito. */ .ne-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; } .ne-hero-top .ne-eyebrow { margin-bottom: 0; } a.ne-eyebrow:hover { text-decoration: none; border-color: var(--gold); background: rgba(15, 81, 50, .16); transform: translateY(-1px); } .ne-eyebrow { display: inline-flex; align-items: center; gap: 9px; transition: var(--t); padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(15, 81, 50, .28); background: rgba(15, 81, 50, .09); font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; } .ne-eyebrow .ne-dot { width: 7px; height: 7px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 0 rgba(53, 208, 127, .7); animation: pulse 2.4s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(53, 208, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); } } .ne-hero h1 .ne-gold { color: var(--gold); display: block; } .ne-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 16px; } .ne-hero-trust { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: .88rem; color: var(--muted); } .ne-hero-trust span { display: inline-flex; align-items: center; gap: 7px; } .ne-hero-trust svg { flex: 0 0 15px; color: var(--gold); } /* --- Tarjeta de cotización --- */ .ne-quote-card { background: linear-gradient(165deg, #fdf9ef, #efe7d6); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(16px, 2vw, 22px); box-shadow: var(--shadow); } /* El cuadro compite con el titular por la primera pantalla: va compacto a propósito —dos campos por fila, sin subtítulo— para que quepa junto al resto del hero. */ .ne-quote-card h3 { margin-bottom: 14px; color: var(--gold-2); font-size: 1.15rem; } .ne-quote-card > p { font-size: .86rem; color: var(--muted); margin-bottom: 14px; } .ne-field { margin-bottom: 10px; } .ne-field label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 4px; } .ne-field input, .ne-field select, .ne-field textarea { width: 100%; padding: 9px 12px; font-size: .95rem; font-family: inherit; color: var(--paper); background: #fbf6ea; border: 1px solid rgba(15, 81, 50, .28); border-radius: 10px; transition: var(--t); appearance: none; } .ne-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.ne-w3.ne-org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4165f' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 17px; padding-right: 40px; } .ne-field input:focus, .ne-field select:focus, .ne-field textarea:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(15, 81, 50, .16); background: #fbf6ea; } .ne-field input::placeholder, .ne-field textarea::placeholder { color: #a1839a; } .ne-field .ne-err { display: none; margin-top: 3px; font-size: .75rem; color: var(--red-2); } .ne-field.ne-invalid input, .ne-field.ne-invalid select { border-color: var(--red-2); } .ne-field.ne-invalid .ne-err { display: block; } .ne-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ne-form-note { margin: 9px 0 0; font-size: .73rem; color: var(--muted); text-align: center; line-height: 1.4; } #quote-form .ne-btn-gold, .ne-lp-form .ne-btn-gold { padding: 11px 22px; font-size: .95rem; } /* --- Franja de credibilidad --- */ .ne-stats { border-block: 1px solid var(--line); background: var(--ink-2); } .ne-stats .ne-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-block: 38px; } .ne-stat { text-align: center; } .ne-stat b { display: block; font-family: var(--ff-head); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-size: clamp(1.8rem, 3.4vw, 2.5rem); color: var(--gold); line-height: 1.1; letter-spacing: -.01em; } .ne-stat span { font-size: .82rem; color: var(--muted); letter-spacing: .04em; } /* --- Rejillas genéricas --- */ /* El header es sticky: cualquier ancla debe frenar por debajo de él. */ [id] { scroll-margin-top: 86px; } /* «Ver paquetes» debe dejar la PRIMERA TARJETA completa bajo el encabezado, no el título de la sección: por eso el ancla está en la parrilla, con su propio margen. */ #paquetes { scroll-margin-top: 106px; } .ne-grid { display: grid; gap: 22px; } .ne-g-2 { grid-template-columns: repeat(2, 1fr); } .ne-g-3 { grid-template-columns: repeat(3, 1fr); } .ne-g-4 { grid-template-columns: repeat(4, 1fr); } .ne-g-5 { grid-template-columns: repeat(5, 1fr); gap: 16px; } .ne-g-5 .ne-price-card { padding: 18px 15px 16px; } .ne-g-5 .ne-price small { font-size: .68rem; } /* «10 canciones · 5 integrantes» es la línea más larga: a este cuerpo entra de una sola vez en las cinco tarjetas y sus listas arrancan a la misma altura. */ .ne-g-5 .ne-price-card > span.ne-muted { white-space: nowrap; } /* Texto un 40 % más grande sin que la tarjeta crezca: lo que sube en cuerpo de letra se recupera apretando interlineado, separación entre viñetas y márgenes. */ .ne-g-5 .ne-price-card li { font-size: 1.22rem; line-height: 1.24; margin-bottom: 3px; padding-left: 23px; } .ne-g-5 .ne-price-card li::before { top: .3em; width: 16px; height: 16px; } .ne-g-5 .ne-price-card ul { margin: 9px 0 10px; } .ne-g-5 .ne-price-card h3 { font-size: 1.62rem; margin-bottom: 2px; } .ne-g-5 .ne-price { font-size: 1.9rem; margin: 2px 0 0; } .ne-g-5 .ne-price-card > span.ne-muted { font-size: 1rem; } .ne-g-5 .ne-price-card .ne-btn { padding: 10px 16px; font-size: 1rem; } .ne-card { background: linear-gradient(165deg, #fdf9ef, #efe7d6); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; transition: var(--t); } .ne-card { border-radius: 16px; } .ne-card:hover { border-color: rgba(15, 81, 50, .45); transform: translateY(-5px); box-shadow: var(--glow); } .ne-card:hover .ne-ico { background: linear-gradient(140deg, #0f5132, var(--gold)); color: #fff; transform: rotate(-6deg) scale(1.06); } .ne-card .ne-ico { transition: var(--t); } .ne-card h3 { color: var(--paper); font-variant-numeric: lining-nums; } .ne-card p { margin-bottom: 0; font-size: .94rem; color: var(--paper-dim); } .ne-card .ne-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(15, 81, 50, .1); border: 1px solid var(--line); color: var(--gold); margin-bottom: 16px; } /* --- Precios --- El borde es un gradiente real, no un color plano: se pinta en la caja del borde con dos capas de fondo (padding-box para el relleno, border-box para el trazo). Es la única forma de tener degradado en el borde sin un pseudo-elemento extra. */ .ne-price-card { display: flex; flex-direction: column; position: relative; border: 1.5px solid transparent; border-radius: 18px; background-image: linear-gradient(168deg, #fdf9ef, #efe7d6), linear-gradient(150deg, rgba(15, 81, 50, .55), rgba(201, 150, 43, .5) 55%, rgba(15, 81, 50, .3)); background-origin: border-box; background-clip: padding-box, border-box; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-image .45s var(--ease-out); will-change: transform; } .ne-price-card.ne-pop { background-image: linear-gradient(168deg, #fdf9ef, #f6ece0), linear-gradient(150deg, var(--gold), #e8b53f 55%, var(--gold)); box-shadow: var(--glow); } /* Al pasar por delante: la tarjeta se adelanta. En escritorio lo dispara el ratón; en el móvil, donde no hay hover, lo marca el observador cuando la tarjeta queda en el centro de la pantalla (.ne-ahead). */ .ne-price-card:hover { transform: translateY(-10px) scale(1.025); box-shadow: 0 0 0 4px rgba(15, 81, 50, .1), 0 30px 56px -24px rgba(10, 58, 36, .55), 0 0 34px -10px rgba(15, 81, 50, .45); z-index: 2; } .ne-price-card:hover .ne-price { transform: scale(1.04); } .ne-price-card:hover .ne-btn { transform: translateY(-2px); } /* El realce por «estar enfrente» es solo para pantallas apiladas: en escritorio las cinco tarjetas caben a la vez en la franja central y encenderlas todas no destaca ninguna. Ahí manda el ratón. */ @media (max-width: 900px) { .ne-price-card.ne-ahead { transform: translateY(-6px) scale(1.03); box-shadow: 0 0 0 4px rgba(15, 81, 50, .1), 0 30px 56px -24px rgba(10, 58, 36, .55), 0 0 34px -10px rgba(15, 81, 50, .45); z-index: 2; } .ne-price-card.ne-ahead .ne-price { transform: scale(1.04); } } @media (hover: none) { .ne-price-card:hover { transform: none; box-shadow: none; } .ne-price-card.ne-pop:hover { box-shadow: var(--glow); } } .ne-price-card .ne-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #0f5132, var(--gold)); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 15px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(15, 81, 50, .7); } /* El precio va en la misma serif del título. Lo que se fuerza es la FORMA de las cifras: `lining-nums` las deja todas a la misma altura y `tabular-nums` las alinea. Sin esto, la serif las dibuja al estilo antiguo —unas altas y otras bajas— y un precio se lee torcido. El respaldo de la familia también usa cifras de caja alta. */ .ne-price { font-family: var(--ff-head); font-weight: 700; letter-spacing: -.005em; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-size: 2.4rem; line-height: 1.2; margin: 4px 0 2px; white-space: nowrap; /* el «COP» nunca debe caer a la línea de abajo */ color: var(--gold); transition: transform .45s var(--ease-out); transform-origin: left center; } .ne-price small { font-size: .8rem; font-family: var(--ff-body); color: var(--muted); font-weight: 400; } .ne-price-card ul { list-style: none; padding: 0; margin: 20px 0 26px; flex: 1; } .ne-price-card li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: .93rem; color: var(--paper-dim); } .ne-price-card li::before { content: ""; position: absolute; left: 0; top: .42em; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.ne-w3.ne-org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4165f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } /* --- Foto del hero --- */ .ne-hero-foto { margin: 0 0 18px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); } .ne-hero-foto img { width: 100%; height: auto; display: block; } /* --- Foto dentro de un bloque de prosa --- */ .ne-foto-prosa { margin: 26px 0; } /* Las fotos verticales llegan a 967 px de alto: sin tope se comen la pantalla entera y empujan el resto del texto fuera de vista. */ .ne-foto-prosa img { width: auto; max-width: 100%; max-height: 460px; margin-inline: auto; border-radius: var(--r); border: 1px solid var(--line); } .ne-foto-prosa figcaption { margin-top: 10px; font-size: .84rem; color: var(--muted); text-align: center; } /* --- Galería --- */ .ne-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .ne-gal-item { margin: 0; } .ne-gal-btn { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #f2dbe9; cursor: zoom-in; transition: var(--t); aspect-ratio: 4 / 3; } .ne-gal-btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.4,0,.2,1); } .ne-gal-btn:hover { border-color: var(--gold); box-shadow: var(--glow); transform: translateY(-3px); } .ne-gal-btn:hover img { transform: scale(1.05); } .ne-gal-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* --- Visor de imagen --- */ .ne-viewer { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 24px; background: rgba(8, 22, 15, .94); backdrop-filter: blur(6px); } .ne-viewer.ne-open { display: grid; } .ne-viewer img { max-width: min(94vw, 1100px); max-height: 84vh; border-radius: 10px; box-shadow: var(--shadow); transition: filter .35s ease; } /* Mientras llega la foto grande se ve la miniatura ampliada, desenfocada a propósito para que se lea como «cargando» y no como una foto de mala calidad. */ .ne-viewer.ne-cargando img { filter: blur(12px) saturate(1.1); } .ne-viewer.ne-cargando figure::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: girar .8s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } .ne-viewer figcaption { margin-top: 14px; text-align: center; font-size: .88rem; color: #f3dcea; max-width: 62ch; } .ne-viewer-close, .ne-viewer-nav { position: absolute; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32); color: #fff; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 1.4rem; line-height: 1; transition: var(--t); } .ne-viewer-close:hover, .ne-viewer-nav:hover { background: var(--gold); color: #fff; border-color: var(--gold); } .ne-viewer-close { top: 20px; right: 20px; } .ne-viewer-nav.ne-prev { left: 18px; top: 50%; transform: translateY(-50%); } .ne-viewer-nav.ne-next { right: 18px; top: 50%; transform: translateY(-50%); } /* --- Reseñas --- */ .ne-review { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; } .ne-review .ne-stars { color: var(--gold); letter-spacing: 3px; font-size: 1.02rem; margin-bottom: 12px; } .ne-review blockquote { margin: 0 0 16px; font-size: .96rem; color: var(--paper-dim); font-style: italic; } .ne-review footer { display: flex; align-items: center; gap: 11px; font-size: .86rem; } .ne-review .ne-av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(150deg, var(--gold), var(--red)); display: grid; place-items: center; color: #241a06; font-weight: 800; flex: 0 0 36px; } .ne-review .ne-av + div b { display: block; color: var(--paper); } .ne-review .ne-av + div span { color: var(--muted); font-size: .8rem; } /* --- Zonas --- */ .ne-zones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .ne-zones a, .ne-zones span { padding: 9px 17px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .72); color: var(--paper-dim); font-size: .89rem; transition: var(--t); } .ne-zones span.ne-hi { border-color: rgba(15, 81, 50, .55); color: var(--gold); background: rgba(15, 81, 50, .1); font-weight: 700; } .ne-zones span { transition: var(--t); } .ne-zones span:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } .ne-zones a:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; background: rgba(15, 81, 50, .1); } /* --- FAQ --- */ .ne-faq { max-width: 780px; margin-inline: auto; } .ne-faq details { border-bottom: 1px solid var(--line); } .ne-faq summary { padding: 20px 40px 20px 0; cursor: pointer; list-style: none; position: relative; font-weight: 600; font-size: 1.03rem; color: var(--paper); font-family: var(--ff-head); } .ne-faq summary::-webkit-details-marker { display: none; } .ne-faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--gold); font-weight: 300; transition: var(--t); } .ne-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); } .ne-faq details > div { padding: 0 0 22px; color: var(--paper-dim); font-size: .95rem; } .ne-faq details > div p:last-child { margin-bottom: 0; } /* --- CTA final --- */ .ne-cta-band { position: relative; background: linear-gradient(150deg, #f9d4e8, var(--ink-2) 62%); border-block: 1px solid var(--line); overflow: hidden; } .ne-cta-band::after { content: ""; position: absolute; inset: 0; opacity: .1; background-image: radial-gradient(var(--gold) 1px, transparent 1px); background-size: 22px 22px; } .ne-cta-band .ne-wrap { position: relative; z-index: 1; } /* --- Pie --- */ .ne-ftr { background: #2b1524; border-top: 1px solid var(--line); padding: 56px 0 26px; font-size: .9rem; } .ne-ftr-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; margin-bottom: 38px; } .ne-ftr h4 { font-family: var(--ff-body); font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; color: #8fb6a2; margin-bottom: 15px; } .ne-ftr ul { list-style: none; padding: 0; margin: 0; } .ne-ftr li { margin-bottom: 9px; } .ne-ftr a, .ne-ftr p, .ne-ftr li { color: #e7cddc; } .ne-ftr a:hover { color: #fff; } .ne-ftr p { margin-bottom: .6em; } .ne-ftr-btm { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; color: #c9a8bc; font-size: .82rem; } .ne-ftr .ne-brand { color: #fff; } .ne-ftr .ne-brand small { color: #8fb6a2; } /* --- Barra móvil fija --- */ .ne-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; gap: 9px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(246, 244, 236, .96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); } .ne-mobile-bar .ne-btn { flex: 1; padding: 13px 10px; font-size: .9rem; } /* --- Migas --- */ .ne-crumbs { font-size: .78rem; color: var(--muted); padding: 18px 0 6px; } .ne-crumbs a { color: var(--muted); } .ne-crumbs a:hover { color: var(--gold); } /* --- Prosa (páginas SEO) --- */ .ne-prose { max-width: 760px; } .ne-prose h2 { margin-top: 1.8em; } .ne-prose h3 { margin-top: 1.5em; color: var(--gold-2); } .ne-prose ul, .ne-prose ol { padding-left: 1.3em; color: var(--paper-dim); } .ne-prose li { margin-bottom: .55em; } .ne-prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .92rem; } .ne-prose th, .ne-prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; } .ne-prose th { color: var(--gold); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; } .ne-prose td { color: var(--paper-dim); } /* --- Animación de entrada --- Por defecto el contenido es visible. El JS marca `.ne-pre` justo antes de observar, así que si el script falla o está bloqueado nunca queda contenido invisible. */ .ne-reveal { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .ne-reveal.ne-pre { opacity: 0; transform: translateY(26px); } /* Escalonado: las tarjetas de una rejilla no entran todas a la vez. */ .ne-reveal.ne-pre > *:nth-child(1) { transition-delay: 0s; } .ne-reveal > * { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .ne-reveal.ne-pre > * { opacity: 0; transform: translateY(14px); } .ne-reveal.ne-in > *:nth-child(1) { transition-delay: .04s; } .ne-reveal.ne-in > *:nth-child(2) { transition-delay: .12s; } .ne-reveal.ne-in > *:nth-child(3) { transition-delay: .2s; } .ne-reveal.ne-in > *:nth-child(4) { transition-delay: .28s; } .ne-reveal.ne-in > *:nth-child(5) { transition-delay: .36s; } .ne-reveal.ne-in > *:nth-child(6) { transition-delay: .44s; } .ne-reveal.ne-in > * { opacity: 1; transform: none; } .ne-reveal.ne-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .ne-reveal, .ne-reveal > * { opacity: 1 !important; transform: none !important; } .ne-price-card:hover, .ne-price-card.ne-ahead { transform: none; } html { scroll-behavior: auto; } } /* --- Adaptativo --- */ @media (max-width: 960px) { .ne-hero-grid { grid-template-columns: 1fr; } .ne-g-4 { grid-template-columns: repeat(2, 1fr); } .ne-g-5 { grid-template-columns: repeat(2, 1fr); } .ne-gal { grid-template-columns: repeat(3, 1fr); } .ne-ftr-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { body { font-size: 16px; } .ne-nav { position: fixed; inset: 68px 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--ink-2); border-bottom: 1px solid var(--line); padding: 8px 22px 18px; transform: translateY(-130%); transition: var(--t); } .ne-nav.ne-open { transform: none; } .ne-nav a { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); } .ne-nav .ne-btn { margin-top: 12px; } .ne-burger { display: block; margin-left: auto; } .ne-g-2, .ne-g-3, .ne-g-4, .ne-g-5 { grid-template-columns: 1fr; } /* En el móvil los bloques respiraban demasiado: se recorta el aire muerto sin apretar el texto, que mantiene su interlineado. */ .ne-section { padding: 30px 0; } .ne-hero { padding: 14px 0 26px; } .ne-grid { gap: 14px; } .ne-section .ne-center .ne-lead { margin-bottom: 4px; } .ne-stats .ne-wrap { padding-block: 24px; } .ne-faq { margin-top: 6px; } .ne-cta-band { padding: 34px 0; } .ne-ftr { padding: 34px 0 20px; } .ne-ftr-grid { gap: 22px; margin-bottom: 24px; } /* Servicios: seis tarjetas apiladas eran ~2.400 px de scroll antes de los paquetes. En móvil se compactan a tres por fila —icono y título— y el detalle se lee en la página del servicio. La sección pasa a ocupar dos filas. */ .ne-svc { grid-template-columns: repeat(3, 1fr) !important; gap: 9px; } .ne-svc .ne-card { padding: 15px 8px 14px; text-align: center; border-radius: 12px; } .ne-svc .ne-card .ne-ico { width: 34px; height: 34px; border-radius: 10px; margin: 0 auto 9px; } .ne-svc .ne-card .ne-ico svg { width: 17px; height: 17px; } .ne-svc .ne-card h3 { font-size: .78rem; line-height: 1.25; margin: 0; hyphens: auto; } .ne-svc .ne-card p { display: none; } /* Las tablas de datos no caben en 390 px: se apilan fila a fila, con la etiqueta de columna delante de cada valor (data-l). */ .ne-prose table { display: block; margin: 1.4em 0; } .ne-prose table thead { display: none; } .ne-prose table tbody, .ne-prose table tr, .ne-prose table td { display: block; width: 100%; } .ne-prose table tr { border: 1px solid var(--line); border-radius: 14px; padding: 12px 15px; margin-bottom: 12px; background: rgba(255, 255, 255, .72); } .ne-prose table td { border: 0; padding: 5px 0; display: flex; gap: 16px; justify-content: space-between; align-items: baseline; text-align: right; } .ne-prose table td > span { flex: 1 1 auto; } .ne-prose table td::before { content: attr(data-l); color: var(--gold); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: left; flex: 0 0 auto; } .ne-gal { grid-template-columns: 1fr 1fr; gap: 10px; } .ne-viewer { padding: 14px; } .ne-viewer-nav { width: 40px; height: 40px; } .ne-viewer-nav.ne-prev { left: 8px; } .ne-viewer-nav.ne-next { right: 8px; } .ne-stats .ne-wrap { grid-template-columns: 1fr 1fr; gap: 26px 18px; } /* Los cuatro campos caben de a dos incluso en 360 px: apilarlos duplicaba el alto del cuadro de cotización, que es lo primero que se ve en el móvil. */ .ne-row-2 { grid-template-columns: 1fr 1fr; gap: 8px; } .ne-quote-card { padding: 15px 14px; } .ne-quote-card h3 { font-size: 1.05rem; margin-bottom: 11px; } .ne-field label { font-size: .64rem; letter-spacing: .04em; } .ne-field input, .ne-field select { padding: 8px 10px; font-size: .9rem; } .ne-mobile-bar { display: flex; } body { padding-bottom: 74px; } .ne-ftr-grid { grid-template-columns: 1fr; gap: 26px; } } /* El signo de moneda va en la tipografía del cuerpo y algo más pequeño: el `$` de Playfair a 2.3rem tiene barras que sobresalen y ensucian la cifra. */ .ne-price .ne-cur { font-size: .58em; font-weight: 700; vertical-align: .18em; margin-right: .07em; color: #0f5132; } /* paquete en promoción (lunes a viernes) */ .ne-price-card.ne-promo{border:2px dashed var(--oro)} .ne-price-card.ne-promo .ne-tag{background:var(--oro);color:#08160f} .ne-grid.ne-g-5{grid-template-columns:repeat(5,1fr)} @media(max-width:1100px){.ne-grid.ne-g-5{grid-template-columns:repeat(3,1fr)}} @media(max-width:720px){.ne-grid.ne-g-5{grid-template-columns:1fr}} /* ═══════════════════════════════════════════════════════════════════ NIVEL PREMIUM — hereda el lenguaje visual de los artes del grupo: fondo casi negro verdoso, filetes dorados, tipografía display grande. Añadido 3-sep-2026. ═══════════════════════════════════════════════════════════════════ */ /* — cinta superior tricolor mexicana, más fina y con dorado — */ .ne-ribbon{height:4px;background:linear-gradient(90deg,var(--green) 0 33%,var(--oro) 33% 67%,var(--red) 67% 100%)} /* — HERO oscuro: es lo primero que se ve y lo que fija el nivel — */ .ne-hero{background: radial-gradient(1200px 520px at 78% -10%, rgba(201,150,43,.16), transparent 62%), radial-gradient(900px 460px at 8% 105%, rgba(18,140,74,.14), transparent 60%), linear-gradient(168deg,#08160f 0%,#0c2418 55%,#08160f 100%); color:#f3f1e6;position:relative;overflow:hidden} .ne-hero::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(201,150,43,.09) 1px,transparent 1px);background-size:22px 22px;opacity:.5} .ne-hero>*{position:relative;z-index:1} .ne-hero h1{color:#fbf8ee;text-shadow:0 2px 30px rgba(0,0,0,.4)} .ne-hero h1 .ne-gold{background:linear-gradient(180deg,#f4d98b 0%,var(--oro) 55%,#a97c1c 100%); -webkit-background-clip:text;background-clip:text;color:transparent;display:block} .ne-hero .ne-lead{color:#ddd9c9} .ne-hero .ne-lead b{color:#fbf8ee} .ne-hero-trust span{color:#c8c3b1} .ne-hero-trust svg{color:var(--oro)} .ne-hero .ne-eyebrow{background:rgba(255,255,255,.07);border:1px solid rgba(201,150,43,.42);color:#f0ecdc; backdrop-filter:blur(4px)} .ne-hero .ne-eyebrow .ne-dot{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18)} .ne-hero-foto picture,.ne-hero-foto img{border-radius:16px} .ne-hero-foto{position:relative;padding:9px;border-radius:22px; background:linear-gradient(140deg,rgba(201,150,43,.85),rgba(201,150,43,.14) 45%,rgba(201,150,43,.7)); box-shadow:0 30px 70px -28px rgba(0,0,0,.75)} .ne-hero .ne-btn-ghost{border-color:rgba(201,150,43,.55);color:#f6f2e4} .ne-hero .ne-btn-ghost:hover{background:rgba(201,150,43,.14);border-color:var(--oro)} /* la tarjeta de cotización flota sobre el fondo oscuro */ .ne-quote-card{background:rgba(255,255,255,.97);border:1px solid rgba(201,150,43,.35); box-shadow:0 34px 80px -30px rgba(0,0,0,.7)} .ne-quote-card h3{color:var(--gold-2)} /* — franja de cifras: sobre verde oscuro, no sobre beige — */ .ne-stats{background:linear-gradient(180deg,#0a1c12,#0d2418);border-block:1px solid rgba(201,150,43,.22)} .ne-stats .ne-stat b{background:linear-gradient(180deg,#f4d98b,var(--oro));-webkit-background-clip:text;background-clip:text;color:transparent} .ne-stats .ne-stat span{color:#b9b5a4} /* — títulos de sección con filete dorado — */ .ne-section h2{position:relative} .ne-section .ne-center h2::after{content:"";display:block;width:64px;height:2px;margin:14px auto 0; background:linear-gradient(90deg,transparent,var(--oro),transparent)} /* — tarjetas: menos “plantilla”, más pieza — */ .ne-card{border:1px solid var(--line);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s} .ne-card:hover{transform:translateY(-4px);border-color:rgba(201,150,43,.5);box-shadow:0 24px 54px -26px rgba(8,22,15,.45)} .ne-svc .ne-card{background:linear-gradient(170deg,#fff, #f7f5ec)} .ne-svc .ne-card h3{color:var(--gold-2)} /* — PAQUETES — */ .ne-price-card{background:linear-gradient(178deg,#fff 60%,#f7f4e9);border:1px solid rgba(15,81,50,.16)} .ne-price-card .ne-price{color:var(--gold-2)} .ne-price-card.ne-pop{border:1px solid var(--oro); box-shadow:0 26px 60px -26px rgba(201,150,43,.5), inset 0 0 0 1px rgba(201,150,43,.22)} .ne-price-card.ne-promo{border:2px dashed var(--oro);background:linear-gradient(178deg,#fffdf6,#faf3e2)} .ne-price-card .ne-tag{background:linear-gradient(135deg,#f4d98b,var(--oro));color:#3a2a06;font-weight:800} .ne-price-card.ne-promo .ne-tag{background:linear-gradient(135deg,var(--oro),#a97c1c);color:#fff} /* — GALERÍA DE ARTES: las piezas del grupo, a tamaño digno — */ /* la fila de artes rompe el ancho del .ne-wrap para que las piezas se vean grandes */ .ne-artes{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:46px; width:min(1460px,94vw);margin-left:50%;transform:translateX(-50%)} @media(max-width:1180px){.ne-artes{grid-template-columns:repeat(3,1fr);width:min(980px,92vw)}} .ne-arte{position:relative;border-radius:16px;overflow:hidden;background:#08160f; border:1px solid rgba(201,150,43,.35);box-shadow:0 20px 48px -24px rgba(8,22,15,.6); transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)} .ne-arte:hover{transform:translateY(-6px);box-shadow:0 30px 66px -26px rgba(8,22,15,.72);border-color:var(--oro)} .ne-arte .ne-gal-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in; aspect-ratio:auto;border-radius:0;box-shadow:none;transform:none} .ne-arte .ne-gal-btn:hover{transform:none;box-shadow:none;border-color:transparent} .ne-arte .ne-gal-btn img{display:block;width:100%;height:auto;aspect-ratio:1/1.45;object-fit:contain; background:#08160f;transform:none} .ne-arte .ne-gal-btn:hover img{transform:none} .ne-arte .ne-gal-btn:focus-visible{outline:2px solid var(--oro);outline-offset:3px} .ne-arte figcaption{padding:11px 12px;color:#efe9d6;font-size:.92rem;font-weight:700;text-align:center; background:linear-gradient(180deg,#0d2418,#08160f);border-top:1px solid rgba(201,150,43,.28); letter-spacing:.01em} .ne-arte figcaption b{color:var(--oro)} /* — banda final oscura — */ .ne-cta-band{background: radial-gradient(760px 320px at 50% -30%, rgba(201,150,43,.2), transparent 65%), linear-gradient(168deg,#0a1c12,#08160f);color:#f3f1e6;border-block:1px solid rgba(201,150,43,.25)} .ne-cta-band h2{color:#fbf8ee} .ne-cta-band h2::after{content:"";display:block;width:64px;height:2px;margin:14px auto 0; background:linear-gradient(90deg,transparent,var(--oro),transparent)} .ne-cta-band .ne-lead{color:#d9d5c5} .ne-cta-band .ne-btn-ghost{border-color:rgba(201,150,43,.6);color:#f6f2e4} .ne-cta-band .ne-btn-ghost:hover{background:rgba(201,150,43,.15)} /* — pie oscuro — */ .ne-ftr{background:linear-gradient(180deg,#08160f,#050f0a);color:#c4c0b0;border-top:2px solid var(--oro)} .ne-ftr h4{color:var(--oro)} .ne-ftr a{color:#e8e4d4} .ne-ftr a:hover{color:var(--oro)} .ne-ftr .ne-brand span{color:#f3f1e6} .ne-ftr .ne-copy{color:#7d7a6e;border-top:1px solid rgba(201,150,43,.16)} /* — cabecera: filete dorado al hacer scroll — */ .ne-hdr{border-bottom:1px solid rgba(15,81,50,.12)} .ne-hdr .ne-brand span{color:var(--gold-2)} .ne-hdr .ne-brand small{color:var(--muted);letter-spacing:.12em} /* — tabla de precios más señorial — */ .ne-ptable thead th{background:var(--gold-2);color:#f6f2e4;border-color:var(--gold-2)} .ne-ptable tbody tr:nth-child(even){background:#f7f5ec} @media (max-width:720px){ /* en móvil los artes van en carrusel: se ven grandes, no en miniatura */ .ne-artes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px; padding:4px 16px 14px;margin-inline:0;-webkit-overflow-scrolling:touch; scrollbar-width:none} .ne-artes::-webkit-scrollbar{display:none} .ne-arte{flex:0 0 78%;scroll-snap-align:center} .ne-arte figcaption{font-size:.9rem} } /* el paquete destacado no debe desalinear la fila */ .ne-grid.ne-g-5{align-items:stretch} .ne-price-card{display:flex;flex-direction:column} .ne-price-card ul{flex:1} .ne-price-card.ne-promo{background:linear-gradient(178deg,#fffdf6,#faf3e2);box-shadow:0 22px 52px -26px rgba(201,150,43,.42)} /* botón secundario sobre el hero oscuro: que se lea como acción, no como texto apagado */ .ne-hero .ne-btn-ghost,.ne-cta-band .ne-btn-ghost{background:rgba(255,255,255,.06);border:1.5px solid rgba(201,150,43,.6); color:#f7f3e6;font-weight:700} .ne-hero .ne-btn-ghost:hover,.ne-cta-band .ne-btn-ghost:hover{background:rgba(201,150,43,.18);border-color:var(--oro);color:#fff} /* En móvil el CSS heredado escondía el texto de las tarjetas de servicio y las dejaba como rejilla de solo títulos. Aquí no hay iconos, así que quedaban cajas vacías: se muestran a dos columnas con su texto. */ @media (max-width:720px){ .ne-svc{grid-template-columns:1fr 1fr !important;gap:12px} .ne-svc .ne-card{padding:16px 14px;text-align:left} .ne-svc .ne-card h3{font-size:.98rem;line-height:1.3;margin:0 0 7px} .ne-svc .ne-card p{display:block;font-size:.84rem;line-height:1.5} } @media (max-width:430px){ .ne-svc{grid-template-columns:1fr !important} .ne-svc .ne-card p{font-size:.88rem} } /* ═══════════════════════════════════════════════════════════════════════════ CAPA 2026-2027 — 4-sep-2026 Tres decisiones, todas nativas del navegador y sin una línea de JavaScript: transiciones de vista entre páginas, animaciones ligadas al scroll (liberan el hilo principal, que era la causa real de que las interacciones se sintieran pesadas) y saltos de línea tipográficos que el navegador calcula solo. ═══════════════════════════════════════════════════════════════════════════ */ /* 1 · Navegación entre páginas con fundido, como una aplicación. */ @view-transition { navigation: auto; } ::view-transition-old(root){animation:vtOut .07s linear both} ::view-transition-new(root){animation:vtIn .1s linear both} @keyframes vtOut{to{opacity:0}} @keyframes vtIn{from{opacity:0}} /* 2 · La aparición al bajar la hace el compositor, no el JavaScript. Donde el navegador soporte `animation-timeline`, se apaga el observador de JS (main.ne-js quita la clase `pre`) y el efecto lo lleva el scroll directamente. */ @supports (animation-timeline: view()) { .ne-reveal > *, .ne-gal-item, .ne-paq { animation: aparecer linear both; animation-timeline: view(); /* El rango termina dentro de `entry`: así cualquier elemento que asome queda completamente visible. Con `cover` los del final de la página no alcanzaban a terminar y se quedaban a media opacidad (medidos 10 en la portada). */ animation-range: entry 0% entry 55%; } @keyframes aparecer { from { opacity:0; transform: translateY(18px) } to { opacity:1; transform:none } } } @media (prefers-reduced-motion: reduce) { @supports (animation-timeline: view()) { .ne-reveal > *, .ne-gal-item, .ne-paq { animation: none } } } /* 3 · El navegador no pinta lo que aún no se ve: menos trabajo en cada scroll. */ /* 4-sep-2026: se RETIRA `content-visibility:auto`. Ahorraba un poco de trabajo al pintar, pero al desplazarse rápido el navegador muestra estados intermedios mal maquetados —el dueño fotografió dos: una tarjeta corrida a la izquierda y la tabla de adicionales partida junto al arte—. Ninguno se reprodujo en pruebas a 360, 390, 412, 430, 540, 600, 768 y 820 px, porque no es un defecto de la maqueta sino del pintado diferido. La velocidad ya está resuelta por otras vías (pixel, tamaño de imágenes y animaciones nativas). */ /* 4 · Tipografía que se acomoda sola: titulares sin una palabra huérfana. */ h1, h2, h3, .ne-lead { text-wrap: balance; } p { text-wrap: pretty; } /* 5 · Encabezado de cristal esmerilado sobre el beis. */ @supports (backdrop-filter: blur(12px)) { .ne-hdr { background: color-mix(in srgb, var(--ink) 78%, transparent); backdrop-filter: blur(14px) saturate(1.3); } } /* 6 · Encabezado con foto: texto y grupo lado a lado; en móvil la foto va primero. */ .ne-hero-con-foto .ne-hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,54px);align-items:center} .ne-hero-con-foto .ne-hero-foto{margin:0} .ne-hero-con-foto .ne-hero-foto img{width:100%;height:auto;display:block} @media(max-width:900px){ .ne-hero-con-foto .ne-hero-split{display:flex;flex-direction:column} .ne-hero-con-foto .ne-hero-foto{order:-1;margin:0 0 20px} } /* 7 · Roce de los botones: respuesta inmediata, sin recalcular diseño. */ .ne-btn{will-change:transform} .ne-btn:active{transform:translateY(1px) scale(.985)} /* ═══ RÓTULO DEL GRUPO — 4-sep-2026 (v2) ═══ Las dos líneas miden EXACTAMENTE lo mismo. No hay forma honesta de lograrlo con texto corriente: «MARIACHI» y «NUEVA ERA» tienen anchos distintos y `text-align:justify` no estira una palabra sola. Se resuelve con SVG y `textLength` + `lengthAdjust`, que fija el ancho de cada línea en 100 unidades del lienzo. De paso el rótulo escala sin perder nitidez y los degradados van en el propio SVG. MARIACHI en azul, NUEVA ERA en oro. */ .ne-wordmark{ display:block;width:100%;max-width:min(560px,92%);height:auto;margin:0 0 8px; font-family:var(--ff-head);font-weight:900;overflow:visible; filter:drop-shadow(0 6px 26px rgba(0,0,0,.42)); } .ne-wordmark text{font-size:12.6px;letter-spacing:0} @media(min-width:961px){ .ne-wordmark{max-width:min(620px,100%);margin-bottom:12px} } @media(prefers-reduced-motion:no-preference){ .ne-wordmark text{animation:wmEntra .75s cubic-bezier(.22,1,.36,1) both} .ne-wordmark text:last-of-type{animation-delay:.1s} @keyframes wmEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} } /* ═══════════════════════════════════════════════════════════════════ ENCABEZADO CENTRADO — 4-sep-2026, pedido del dueño: «esa parte es donde quiero las letras y el título moderno, y quiero centrado todo». Composición editorial: estrella y nombre al centro, la ciudad debajo entre filetes de oro, y el menú en su propia fila, también centrado. Al bajar, el encabezado se encoge para no robar pantalla. ═══════════════════════════════════════════════════════════════════ */ :root{ --hdr-h: 96px; } .ne-hdr .ne-wrap{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px;min-height:var(--hdr-h);position:relative;padding-block:12px; transition:min-height .28s var(--ease-out),padding-block .28s var(--ease-out); } .ne-brand{ flex-direction:row;align-items:center;justify-content:center;gap:14px;text-align:center; font-size:clamp(1.42rem,5.6vw,2.15rem);letter-spacing:.075em;line-height:1; } .ne-brand > span{display:flex;flex-direction:column;align-items:center;gap:7px} .ne-brand .ne-star{width:clamp(30px,7vw,42px);height:clamp(30px,7vw,42px);flex:0 0 auto; filter:drop-shadow(0 3px 10px rgba(201,150,43,.45)); transition:transform .5s var(--ease-out)} .ne-brand:hover .ne-star{transform:rotate(-12deg) scale(1.06)} /* La ciudad, entre dos filetes de oro que se estiran con el texto. */ .ne-brand small{ display:flex;align-items:center;justify-content:center;gap:10px; font-size:clamp(.6rem,2.1vw,.72rem);letter-spacing:.3em;text-indent:.3em; color:var(--oro);font-weight:700;margin:0; } .ne-brand small::before,.ne-brand small::after{ content:"";display:block;width:clamp(18px,7vw,46px);height:1px; background:linear-gradient(90deg,transparent,var(--oro)); } .ne-brand small::after{background:linear-gradient(90deg,var(--oro),transparent)} /* El menú, en su propia fila y centrado. */ .ne-nav{margin-left:0;justify-content:center;flex-wrap:wrap;gap:clamp(16px,2.4vw,30px)} .ne-burger{position:absolute;right:0;top:50%;transform:translateY(-50%)} /* Al bajar la página el encabezado se compacta: menos alto, sin la ciudad. */ .ne-hdr.ne-scrolled .ne-wrap{min-height:64px;padding-block:8px} .ne-hdr.ne-scrolled .ne-brand{font-size:clamp(1.16rem,4.4vw,1.5rem)} .ne-hdr.ne-scrolled .ne-brand small{display:none} .ne-hdr.ne-scrolled .ne-brand .ne-star{width:26px;height:26px} @media(min-width:721px){ :root{ --hdr-h: 132px; } .ne-hdr .ne-wrap{gap:14px} .ne-hdr.ne-scrolled .ne-wrap{min-height:70px;gap:8px} .ne-hdr.ne-scrolled .ne-nav{gap:20px} } @media(max-width:720px){ :root{ --hdr-h: 92px; } /* El menú desplegable cuelga del alto real del encabezado, no de un 68 px fijo. */ .ne-nav{inset:var(--hdr-h) 0 auto} .ne-burger{margin-left:0} /* Se reserva el mismo aire a lado y lado para que el nombre quede ópticamente centrado y nunca toque el botón del menú, que va suelto a la derecha. */ .ne-hdr .ne-wrap{padding-inline:52px} .ne-brand{font-size:clamp(1.16rem,4.9vw,1.55rem);letter-spacing:.06em;gap:10px} .ne-brand .ne-star{width:26px;height:26px} .ne-brand small{letter-spacing:.24em;gap:8px} .ne-brand small::before,.ne-brand small::after{width:16px} } @media(max-width:360px){ .ne-brand{font-size:1.02rem;letter-spacing:.04em} .ne-hdr .ne-wrap{padding-inline:46px} } /* El ancla de paquetes se ajusta al encabezado nuevo. */ #paquetes{scroll-margin-top:calc(var(--hdr-h) + 12px)} /* ═══ FOTO DEL ENCABEZADO MÁS GRANDE — 4-sep-2026 ═══ En el móvil rompe el margen del contenedor y se va casi de borde a borde; en escritorio gana altura. El marco dorado se mantiene, más fino, para que la foto pese más que el marco. */ .ne-hero-foto{padding:6px;border-radius:20px} @media(max-width:900px){ /* Se anula el relleno lateral del contenedor (22 px) en vez de usar el truco de `margin-left:50%`, que dentro de un contenedor flexible descentraba la foto y la recortaba por la derecha. Con márgenes negativos llega al borde y queda centrada. */ .ne-hero-con-foto .ne-hero-foto{ width:auto;max-width:none;margin-inline:-22px; border-radius:0;padding:0;border:0;box-shadow:0 26px 60px -34px rgba(0,0,0,.75); } .ne-hero-con-foto .ne-hero-foto picture,.ne-hero-con-foto .ne-hero-foto img{border-radius:0} .ne-hero-con-foto .ne-hero-foto img{width:100%;height:auto;display:block} } @media(min-width:901px){ .ne-hero-con-foto .ne-hero-split{grid-template-columns:.94fr 1.06fr} .ne-hero-con-foto .ne-hero-foto img{max-height:none} } /* ═══════════════════════════════════════════════════════════════════ 1) LA FRANJA DE ARRIBA: más baja y azul — 4-sep-2026, orden del dueño. Azul profundo con el nombre en crema y la ciudad en oro. Es el mismo azul del rótulo, en su versión oscura, para que el sitio sea uno solo. ═══════════════════════════════════════════════════════════════════ */ :root{ --azul: #10314f; --azul-2: #0b2440; --hdr-h: 74px; } .ne-hdr{ background:linear-gradient(180deg,var(--azul) 0%,var(--azul-2) 100%); border-bottom:1px solid rgba(201,150,43,.42); } .ne-hdr.ne-scrolled{background:linear-gradient(180deg,var(--azul) 0%,var(--azul-2) 100%); box-shadow:0 10px 30px -18px rgba(4,18,32,.85)} @supports (backdrop-filter: blur(12px)){ .ne-hdr{background:color-mix(in srgb, var(--azul) 88%, transparent);backdrop-filter:blur(14px) saturate(1.25)} } .ne-hdr .ne-wrap{min-height:var(--hdr-h);gap:5px;padding-block:9px} .ne-hdr .ne-brand span,.ne-hdr .ne-brand{color:#f3f7fb} .ne-hdr .ne-brand small{color:var(--oro)} .ne-hdr .ne-brand small::before{background:linear-gradient(90deg,transparent,var(--oro))} .ne-hdr .ne-brand small::after{background:linear-gradient(90deg,var(--oro),transparent)} .ne-burger span{background:#f3f7fb} .ne-hdr .ne-nav a:not(.ne-btn){color:#d7e4ef} .ne-hdr .ne-nav a:not(.ne-btn):hover{color:var(--oro)} /* Más baja: el nombre baja de tamaño y la estrella se ajusta. */ .ne-hdr .ne-brand{font-size:clamp(1.06rem,4.4vw,1.45rem);letter-spacing:.05em;gap:9px} .ne-hdr .ne-brand .ne-star{width:24px;height:24px} .ne-hdr .ne-brand small{font-size:.56rem;letter-spacing:.24em} .ne-hdr .ne-brand small::before,.ne-hdr .ne-brand small::after{width:14px} .ne-hdr.ne-scrolled .ne-wrap{min-height:56px;padding-block:6px} .ne-hdr.ne-scrolled .ne-brand{font-size:clamp(.98rem,3.9vw,1.24rem)} @media(min-width:721px){ :root{ --hdr-h: 104px; } .ne-hdr .ne-wrap{gap:10px} .ne-hdr .ne-brand{font-size:1.7rem} .ne-hdr .ne-brand .ne-star{width:32px;height:32px} .ne-hdr .ne-brand small{font-size:.66rem} .ne-hdr.ne-scrolled .ne-wrap{min-height:62px} } @media(max-width:720px){ :root{ --hdr-h: 74px; } .ne-nav{inset:var(--hdr-h) 0 auto;background:var(--azul-2)} .ne-nav a{border-bottom-color:rgba(255,255,255,.1)} .ne-hdr .ne-wrap{padding-inline:50px} } /* ═══════════════════════════════════════════════════════════════════ 2) ORDEN DEL ENCABEZADO EN MÓVIL: nombre → foto → «Ver paquetes». `display:contents` disuelve la rejilla de dos columnas para que la foto y el texto se puedan ordenar como hermanos del rótulo. ═══════════════════════════════════════════════════════════════════ */ @media(max-width:900px){ .ne-hero-con-foto .ne-wrap{display:flex;flex-direction:column} .ne-hero-con-foto .ne-hero-split{display:contents} .ne-hero-con-foto .ne-wordmark{order:1} .ne-hero-con-foto .ne-hero-foto{order:2;margin-block:0 22px} .ne-hero-con-foto .ne-hero-top{order:3} .ne-hero-con-foto .ne-hero-split > div{order:4} /* La portada usa otra rejilla. Sin declarar el contenedor como flexible, `order` no hace nada: por eso seguía saliendo en el orden del código (rótulo, botón, titular, foto). */ .ne-hero-grid > div:first-child{display:flex;flex-direction:column} .ne-hero-grid .ne-wordmark{order:0} .ne-hero-grid .ne-hero-foto{order:1;margin:0 0 20px} .ne-hero-grid .ne-hero-top{order:2;margin-bottom:14px} .ne-hero-grid h1{order:3} .ne-hero-grid .ne-lead{order:4} .ne-hero-grid .ne-hero-cta{order:5;margin-top:20px} .ne-hero-grid .ne-hero-trust{order:6} } /* ═══════════════════════════════════════════════════════════════════════════ BARROCO DORADO — el lenguaje de las piezas del grupo, ahora en todo el sitio. 4-sep-2026, orden del dueño: «que sea el estilo que domine». Todo con código: filigrana, esquinas y letra metálica salen de CSS y de un par de SVG en línea. Ni una imagen, así que se lee a cualquier tamaño, Google lo indexa y la página adelgaza medio megabyte. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --oro-cl:#f6dc9a; --oro-md:#c9962b; --oro-os:#8a6516; --noche:#0a0d0b; --noche-2:#12160f; } /* Letra metálica: el mismo recurso del rótulo, reutilizable en cualquier título. */ .ne-metal{ background:linear-gradient(180deg,var(--oro-cl) 0%,var(--oro-md) 52%,var(--oro-os) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .ne-metal{color:var(--oro-md);background:none} } /* Filigrana divisoria. Un solo SVG, sin peticiones al servidor. */ .ne-orn{height:22px;margin:12px auto 14px;width:100%;max-width:230px; background:center/contain no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.ne-w3.ne-org/2000/svg' viewBox='0 0 240 22' fill='none' stroke='%23c9962b' stroke-width='1.5'%3E%3Cpath d='M4 11h78' opacity='.75'/%3E%3Cpath d='M158 11h78' opacity='.75'/%3E%3Cpath d='M96 11c8-9 16-9 24 0-8 9-16 9-24 0z'/%3E%3Cpath d='M144 11c-8-9-16-9-24 0 8 9 16 9 24 0z'/%3E%3Ccircle cx='120' cy='11' r='2.6' fill='%23c9962b' stroke='none'/%3E%3C/svg%3E")} /* ── LAS TARJETAS DE PAQUETE ────────────────────────────────────────────── */ .ne-paqs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px; margin-inline:auto;max-width:1180px} .ne-paq{position:relative;margin:0;border-radius:20px; background: radial-gradient(120% 78% at 50% -12%, rgba(201,150,43,.20), transparent 62%), linear-gradient(168deg,#121611 0%,var(--noche) 62%,#080b09 100%); border:1px solid rgba(201,150,43,.42); box-shadow:0 26px 60px -30px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.03); transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s; } .ne-paq:hover{transform:translateY(-7px);border-color:var(--oro-md); box-shadow:0 36px 78px -32px rgba(0,0,0,.9), 0 0 0 1px rgba(201,150,43,.4)} .ne-paq-alto{border-color:rgba(201,150,43,.62)} .ne-paq-promo{border-color:var(--oro-md);box-shadow:0 26px 60px -26px rgba(201,150,43,.42)} /* El marco interior de hilo de oro y las cuatro esquinas, con puro borde. */ .ne-paq-marco{position:relative;padding:34px 24px 28px;text-align:center; border:1px solid rgba(201,150,43,.28);border-radius:14px;margin:11px} .ne-paq-marco::before,.ne-paq-marco::after,.ne-paq::before,.ne-paq::after{ content:"";position:absolute;width:22px;height:22px;border:2px solid var(--oro-md);pointer-events:none} .ne-paq-marco::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:12px 0 0 0} .ne-paq-marco::after{top:-1px;right:-1px;border-left:0;border-bottom:0;border-radius:0 12px 0 0} .ne-paq::before{bottom:10px;left:10px;border-right:0;border-top:0;border-radius:0 0 0 12px} .ne-paq::after{bottom:10px;right:10px;border-left:0;border-top:0;border-radius:0 0 12px 0} .ne-paq-cinta{position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:linear-gradient(135deg,var(--oro-cl),var(--oro-md) 55%,var(--oro-os)); color:#1a1305;font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase; padding:6px 16px;border-radius:999px;white-space:nowrap; box-shadow:0 8px 20px -8px rgba(0,0,0,.8)} .ne-paq-eyebrow{margin:0;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase; color:rgba(246,220,154,.62);font-weight:700} .ne-paq-nombre{font-family:var(--ff-head);font-size:clamp(2rem,4.6vw,2.5rem);line-height:1.04; margin:.18em 0 0;text-transform:uppercase;letter-spacing:.02em; background:linear-gradient(180deg,var(--oro-cl) 0%,var(--oro-md) 54%,var(--oro-os) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 2px 18px rgba(201,150,43,.22)} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .ne-paq-nombre{color:var(--oro-cl);background:none} } .ne-paq-precio{margin:0;font-family:var(--ff-head);font-weight:900;color:#fdfaf2; font-size:clamp(2.5rem,6vw,3.1rem);line-height:1;letter-spacing:-.02em} .ne-paq-precio .ne-sig{font-size:.56em;vertical-align:.34em;color:var(--oro-cl);margin-right:.06em} .ne-paq-precio .ne-cop{display:block;font-family:var(--ff-body);font-size:.7rem;font-weight:700; letter-spacing:.3em;color:rgba(246,220,154,.6);margin-top:8px} .ne-paq-nota{margin:12px 0 0;font-size:.94rem;color:#cfc9b6} .ne-paq-nota b{color:var(--oro-cl)} .ne-paq-lista{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:11px;text-align:left} .ne-paq-lista li{position:relative;padding-left:28px;font-size:1.01rem;line-height:1.42;color:#ece7d8} .ne-paq-lista li::before{content:"";position:absolute;left:2px;top:.44em;width:13px;height:13px; background:center/contain no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.ne-w3.ne-org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l1.5 4.5L12 6 7.5 7.5 6 12 4.5 7.5 0 6l4.5-1.5z' fill='%23c9962b'/%3E%3C/svg%3E")} .ne-btn-oro{display:flex;align-items:center;justify-content:center;width:100%; padding:14px 20px;border-radius:999px;font-weight:800;font-size:1rem;letter-spacing:.02em; color:#1a1305;text-decoration:none;border:1px solid rgba(255,255,255,.28); background:linear-gradient(135deg,var(--oro-cl) 0%,var(--oro-md) 52%,#a97c1c 100%); box-shadow:0 14px 30px -14px rgba(201,150,43,.75);transition:var(--t)} .ne-btn-oro:hover{filter:brightness(1.08);transform:translateY(-2px);text-decoration:none; box-shadow:0 20px 40px -16px rgba(201,150,43,.85)} .ne-btn-oro:active{transform:translateY(0)} @media(max-width:1100px){ .ne-paqs{grid-template-columns:repeat(2,1fr);gap:20px} } @media(max-width:720px){ .ne-paqs{grid-template-columns:1fr;gap:22px;max-width:520px} .ne-paq-marco{padding:30px 18px 24px;margin:9px} .ne-paq-lista li{font-size:1rem} } /* ── SERVICIOS ADICIONALES, mismo lenguaje ──────────────────────────────── */ .ne-adic{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:26px 0 0; max-width:840px;margin-inline:auto} .ne-adic-it{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:15px 20px;border-radius:14px; background:linear-gradient(168deg,#121611,var(--noche)); border:1px solid rgba(201,150,43,.3);color:#ece7d8;font-size:1rem} .ne-adic-it b{font-family:var(--ff-head);font-size:1.22rem;white-space:nowrap; background:linear-gradient(180deg,var(--oro-cl),var(--oro-md) 60%,var(--oro-os)); -webkit-background-clip:text;background-clip:text;color:transparent} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .ne-adic-it b{color:var(--oro-cl);background:none} } @media(max-width:620px){ .ne-adic{grid-template-columns:1fr} } /* ── LA SECCIÓN QUE LOS CONTIENE: noche con brillo de oro ───────────────── */ #paquetes-zona{ background: radial-gradient(900px 420px at 50% -8%, rgba(201,150,43,.14), transparent 60%), linear-gradient(180deg,#0d110c 0%,var(--noche) 55%,#0b0f0c 100%); border-block:1px solid rgba(201,150,43,.34);color:#ece7d8} #paquetes-zona h2,#paquetes-zona h3{color:#fbf6e8} #paquetes-zona .ne-prose p,#paquetes-zona .ne-lead,#paquetes-zona .ne-muted{color:#cfc9b6} #paquetes-zona .ne-prose b{color:var(--oro-cl)} #paquetes-zona .ne-eyebrow{color:var(--oro-cl);border-color:rgba(201,150,43,.4)} /* ── EL RESTO DEL SITIO recibe el mismo acento ──────────────────────────── */ .ne-section .ne-cab h2::after,.ne-section .ne-center h2::after{content:"";display:block;height:20px; margin:14px auto 0;max-width:210px; background:center/contain no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.ne-w3.ne-org/2000/svg' viewBox='0 0 240 22' fill='none' stroke='%23c9962b' stroke-width='1.5'%3E%3Cpath d='M4 11h78' opacity='.75'/%3E%3Cpath d='M158 11h78' opacity='.75'/%3E%3Cpath d='M96 11c8-9 16-9 24 0-8 9-16 9-24 0z'/%3E%3Cpath d='M144 11c-8-9-16-9-24 0 8 9 16 9 24 0z'/%3E%3Ccircle cx='120' cy='11' r='2.6' fill='%23c9962b' stroke='none'/%3E%3C/svg%3E")} .ne-gal-btn{border-color:rgba(201,150,43,.4)} .ne-faq details{border-color:rgba(201,150,43,.28)} /* El nombre del grupo, en versales. (Se perdió al limpiar las reglas de los artes: vivía al final de aquel bloque.) */ .ne-brand{text-transform:uppercase} .ne-ftr .ne-brand{font-size:1.5rem} /* Enlaces dentro de la zona noche: en verde oscuro sobre negro no se leían. */ #paquetes-zona a:not(.ne-btn):not(.ne-btn-oro){color:var(--oro-cl);text-decoration-color:rgba(246,220,154,.45)} #paquetes-zona a:not(.ne-btn):not(.ne-btn-oro):hover{color:#fff} #paquetes-zona .ne-muted{color:#bdb7a4} /* ═══ LA LISTA DE LA ZONA NOCHE — 5-sep-2026 ═══ `.ne-prose ul` heredaba `--paper-dim`, un verde muy oscuro pensado para fondo claro. Sobre el negro quedaba casi invisible: se leía la parte en negrita y el resto no. Además, al posarse encima el punto se aclara del todo y se adelanta un paso, como pidió el dueño. En el celular no hay «posarse», así que el estado normal ya es legible y el efecto se activa también al tocar (`:active`). */ #paquetes-zona .ne-prose ul, #paquetes-zona .ne-prose ol { color: #d9d3c2; } #paquetes-zona .ne-prose li { color: #d9d3c2; padding: 10px 14px 10px 12px; margin-left: -12px; border-radius: 12px; border: 1px solid transparent; transition: color .18s var(--ease-out), background .22s var(--ease-out), transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out); } #paquetes-zona .ne-prose li b, #paquetes-zona .ne-prose li strong { color: var(--oro-cl); } @media (hover: hover) { #paquetes-zona .ne-prose li:hover { color: #fff; background: linear-gradient(120deg, rgba(201,150,43,.16), rgba(201,150,43,.05)); border-color: rgba(201,150,43,.42); transform: translateX(6px) scale(1.012); box-shadow: 0 16px 34px -18px rgba(0,0,0,.9); } #paquetes-zona .ne-prose li:hover b, #paquetes-zona .ne-prose li:hover strong { color: #fff; } } #paquetes-zona .ne-prose li:active { color: #fff; background: linear-gradient(120deg, rgba(201,150,43,.18), rgba(201,150,43,.06)); border-color: rgba(201,150,43,.5); transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { #paquetes-zona .ne-prose li { transition: color .18s linear } #paquetes-zona .ne-prose li:hover { transform: none } } /* ═══ GALERÍA: más grande, centrada y con vida — 5-sep-2026 ═══ Tres cosas que pidió el dueño. Las fotos crecen un 10 % robándole aire al margen del contenedor. La última, cuando queda impar en dos columnas, se centra en vez de quedar colgando a la izquierda. Y al posarse encima la foto se acerca, se enmarca en oro y levanta, con una capa de brillo que la recorre. */ .ne-gal { gap: 12px; } @media (max-width: 720px) { /* -16 px a cada lado del relleno del .ne-wrap: cada celda pasa de 168 a 184 px, un 9,5 % más. */ .ne-gal { width: calc(100% + 32px); margin-inline: -16px; gap: 11px; } } /* La última foto, si queda sola en la fila, se centra. */ .ne-gal .ne-gal-item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); } @media (min-width: 721px) { .ne-gal .ne-gal-item:last-child:nth-child(odd) { grid-column: auto; justify-self: auto; width: auto; } .ne-gal .ne-gal-item:last-child:nth-child(3n+1) { grid-column: 2 / 3; } } @media (min-width: 981px) { .ne-gal .ne-gal-item:last-child:nth-child(3n+1) { grid-column: auto; } .ne-gal .ne-gal-item:last-child:nth-child(4n+1) { grid-column: 2 / 4; justify-self: center; width: calc(50% - 7px); } } .ne-gal-btn { position: relative; background: #efe7d6; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s; } .ne-gal-btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%); transform: translateX(-120%); transition: opacity .2s; } @media (hover: hover) { .ne-gal-btn:hover { transform: translateY(-6px) scale(1.02); border-color: var(--oro); box-shadow: 0 22px 44px -20px rgba(10,58,36,.55), 0 0 0 1px rgba(201,150,43,.45); } .ne-gal-btn:hover img { transform: scale(1.09); } .ne-gal-btn:hover::after { opacity: 1; animation: brilloGal .75s var(--ease-out) forwards; } } @keyframes brilloGal { to { transform: translateX(120%) } } .ne-gal-btn:active { transform: translateY(-2px) scale(1.01); border-color: var(--oro); } @media (prefers-reduced-motion: reduce) { .ne-gal-btn, .ne-gal-btn img { transition: none } .ne-gal-btn:hover { transform: none } .ne-gal-btn:hover img { transform: none } .ne-gal-btn::after { display: none } } /* ═══ LA RUTA DEL PIE, con estilo ═══ Antes era una línea de texto suelta bajo la galería. Ahora va centrada, en versalitas, entre un filete de oro, y el separador es un rombo en vez de un signo mayor que. */ .ne-crumbs { padding: 26px 0 22px; text-align: center; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-top: 1px solid rgba(201,150,43,.28); } .ne-crumbs a { color: var(--gold-2); text-decoration: none; transition: color .2s } .ne-crumbs a:hover { color: var(--oro); text-decoration: none } .ne-crumbs span { color: var(--muted) } .ne-crumbs .ne-sep { color: var(--oro); font-size: .58rem; margin: 0 .5em; vertical-align: .12em } /* El rótulo pegado a lo que tiene arriba y abajo — 5-sep-2026, pedido del dueño. Sobraba aire por tres lados a la vez: el relleno del encabezado, el margen del rótulo y el aire que el propio lienzo del SVG dejaba alrededor de las letras. */ .ne-hero-con-foto .ne-wordmark { margin-top: 0 } @media (max-width: 900px) { .ne-hero-con-foto { padding-top: 10px !important } .ne-hero-con-foto .ne-hero-foto { margin-block: 4px 18px } } /* ═══ LATIDO EN LOS BOTONES QUE INVITAN A PULSAR — 5-sep-2026 ═══ Pedido del dueño: que «Ver paquetes», «Disponibles 24/7», «WhatsApp» y «Llamar» palpiten. El latido es lento (2,6 s) y crece apenas un 2 %: llama la atención sin marear ni tapar nada. Van desfasados para que no pulsen los cuatro a la vez, que se vería nervioso. Se detiene mientras el dedo está encima y con `prefers-reduced-motion`. */ @keyframes latido { 0%, 62%, 100% { transform: scale(1); } 72% { transform: scale(1.022); } 82% { transform: scale(.998); } 90% { transform: scale(1.012); } } @keyframes latidoAura { 0%, 58%, 100% { box-shadow: 0 0 0 0 rgba(201,150,43,0); } 72% { box-shadow: 0 0 0 9px rgba(201,150,43,0); } 73% { box-shadow: 0 0 0 0 rgba(201,150,43,.42); } } @keyframes latidoAuraVerde { 0%, 58%, 100% { box-shadow: 0 10px 26px -10px rgba(18,161,80,.45), 0 0 0 0 rgba(18,161,80,0); } 72% { box-shadow: 0 10px 26px -10px rgba(18,161,80,.45), 0 0 0 11px rgba(18,161,80,0); } 73% { box-shadow: 0 10px 26px -10px rgba(18,161,80,.45), 0 0 0 0 rgba(18,161,80,.5); } } .ne-hero-top .ne-btn-gold, .ne-hero-top .ne-eyebrow, .ne-mobile-bar .ne-btn-wa, .ne-mobile-bar .ne-btn-gold { animation: latido 2.6s ease-in-out infinite; will-change: transform; } .ne-hero-top .ne-btn-gold { animation-delay: 0s; } .ne-hero-top .ne-eyebrow { animation-delay: .5s; } .ne-mobile-bar .ne-btn-wa { animation-delay: 1s; } .ne-mobile-bar .ne-btn-gold { animation-delay: 1.5s; } /* El aura va en un segundo plano para no pelear con la sombra propia del botón. */ .ne-hero-top .ne-btn-gold::after, .ne-hero-top .ne-eyebrow::after, .ne-mobile-bar .ne-btn-gold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: latidoAura 2.6s ease-in-out infinite; animation-delay: inherit; } .ne-mobile-bar .ne-btn-wa::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: latidoAuraVerde 2.6s ease-in-out infinite; animation-delay: 1s; } .ne-hero-top .ne-btn-gold, .ne-hero-top .ne-eyebrow, .ne-mobile-bar .ne-btn-wa, .ne-mobile-bar .ne-btn-gold { position: relative; } /* Mientras el dedo o el puntero está encima, el latido para: manda la interacción. */ .ne-hero-top .ne-btn-gold:hover, .ne-hero-top .ne-eyebrow:hover, .ne-mobile-bar .ne-btn-wa:hover, .ne-mobile-bar .ne-btn-gold:hover, .ne-hero-top .ne-btn-gold:active, .ne-hero-top .ne-eyebrow:active, .ne-mobile-bar .ne-btn-wa:active, .ne-mobile-bar .ne-btn-gold:active { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .ne-hero-top .ne-btn-gold, .ne-hero-top .ne-eyebrow, .ne-mobile-bar .ne-btn-wa, .ne-mobile-bar .ne-btn-gold, .ne-hero-top .ne-btn-gold::after, .ne-hero-top .ne-eyebrow::after, .ne-mobile-bar .ne-btn-wa::after, .ne-mobile-bar .ne-btn-gold::after { animation: none } } /* ═══ LETRA DE LOS PAQUETES UN 15 % MÁS GRANDE, SIN QUE CREZCA LA TARJETA — 5-sep-2026 ═══ Subir la letra sin más alargaría la tarjeta. Para que el cuadro conserve su alto, cada punto que gana el texto se le resta al aire: menos relleno, menos separación entre líneas de la lista y menos margen entre bloques. Medido antes y después. */ .ne-paq-eyebrow { font-size: .76rem; letter-spacing: .3em; } .ne-paq-nombre { font-size: clamp(2.3rem, 5.3vw, 2.88rem); margin-top: .1em; } .ne-paq-precio { font-size: clamp(2.88rem, 6.9vw, 3.57rem); } .ne-paq-precio .ne-cop { font-size: .8rem; margin-top: 5px; letter-spacing: .26em; } .ne-paq-nota { font-size: 1.08rem; margin-top: 8px; } .ne-paq-lista { margin: 14px 0 18px; gap: 8px; } .ne-paq-lista li{ font-size: 1.16rem; line-height: 1.34; padding-left: 30px; } .ne-paq-lista li::before { width: 14px; height: 14px; top: .38em; } .ne-btn-oro { font-size: 1.15rem; padding: 13px 18px; } .ne-paq-marco { padding: 26px 20px 22px; } .ne-orn { height: 18px; margin: 8px auto 10px; } .ne-paq-cinta { font-size: .74rem; padding: 6px 15px; } @media (max-width: 720px) { .ne-paq-marco { padding: 24px 15px 20px; margin: 8px; } .ne-paq-lista li { font-size: 1.15rem; padding-left: 28px; } } /* ═══ TARJETA UN 10 % MÁS COMPACTA, CON LA MISMA LETRA — 5-sep-2026 ═══ El alto de la tarjeta lo manda el aire, no el tamaño del texto. Se aprieta todo lo que no es letra: relleno del marco, separación entre puntos, altura de la filigrana, margen de la lista y del botón. Ni un tamaño de fuente se toca. */ .ne-paq-marco { padding: 18px 18px 16px; margin: 7px; } .ne-orn { height: 13px; margin: 5px auto 7px; } .ne-paq-nombre { margin-top: .04em; line-height: 1.0; } .ne-paq-precio { line-height: .96; } .ne-paq-precio .ne-cop { margin-top: 3px; } .ne-paq-nota { margin-top: 6px; line-height: 1.3; } .ne-paq-lista { margin: 11px 0 12px; gap: 5px; } .ne-paq-lista li { line-height: 1.24; } .ne-paq-lista li::before { top: .32em; } .ne-btn-oro { padding: 11px 16px; } .ne-paq-cinta { top: -11px; padding: 5px 14px; } @media (max-width: 720px) { .ne-paq-marco { padding: 17px 14px 15px; margin: 6px; } .ne-paqs { gap: 16px; } } /* Ajuste fino: la compactación anterior se pasó (−15 % medido, se pedía −10 %). Se devuelve parte del aire, siempre sin tocar el tamaño de la letra. */ .ne-paq-marco { padding: 22px 18px 19px; } .ne-orn { height: 15px; margin: 6px auto 8px; } .ne-paq-lista { margin: 14px 0 16px; gap: 7px; } .ne-btn-oro { padding: 12px 16px; } @media (max-width: 720px) { .ne-paq-marco { padding: 21px 15px 18px; } } /* 9-sep-2026 — franja de localidades en el pie: da a las 21 páginas de zona el enlace entrante que no tenían desde la portada (Search Console: «página de referencia, ninguna»). */ .ne-ftr-zonas { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; margin-bottom: 22px; } .ne-ftr-zonas p { line-height: 2; margin: 0; font-size: .86rem; } .ne-ftr-zonas a { white-space: nowrap; }