/* ═══ edisonbeni.com — piezas compartidas ═══
   1. Header navegable (lógica calcada de Palo Seco: celdas-píldora, paneles al hover/click, scrim, cajón móvil)
   2. Bloque "Otros servicios" (venta cruzada al cierre de cada página)
   Se carga después del CSS inline de cada página para ganar en cascada. */

/* Curvas de resorte (la idea de Motion / Framer Motion, sin librería): calculadas con la física de un resorte amortiguado
   y escritas como easing linear(). --spring frena con un sobrepaso apenas perceptible (≈4 %); --spring-bounce rebota más
   (≈16 %), solo para movimientos de pocos píxeles. Sin soporte de linear(), caen a curvas cubic-bezier parecidas. */
:root { --spring: cubic-bezier(0.22, 1, 0.36, 1); --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.0113, 0.0418, 0.0871, 0.1431, 0.2065, 0.2744, 0.3444, 0.4146, 0.4834, 0.5496, 0.6123, 0.6708, 0.7247, 0.7737, 0.8178, 0.857, 0.8914, 0.9213, 0.9469, 0.9684, 0.9863, 1.0009, 1.0126, 1.0216, 1.0284, 1.0331, 1.0362, 1.0379, 1.0384, 1.038, 1.0368, 1.0351, 1.0329, 1.0305, 1.0279, 1.0252, 1.0225, 1.0199, 1.0173, 1.0149, 1.0127, 1.0106, 1.0087, 1.007, 1.0055, 1.0042, 1.003, 1);
    --spring-bounce: linear(0, 0.0298, 0.1082, 0.2199, 0.351, 0.4896, 0.6262, 0.7534, 0.866, 0.9609, 1.0367, 1.0933, 1.1319, 1.1542, 1.1628, 1.1601, 1.1488, 1.1316, 1.1108, 1.0883, 1.0659, 1.0447, 1.0258, 1.0096, 0.9965, 0.9866, 0.9797, 0.9755, 0.9736, 0.9737, 0.9752, 0.9778, 0.9811, 0.9848, 0.9884, 0.992, 0.9951, 0.9979, 1.0001, 1.0019, 1.0031, 1.0039, 1.0043, 1.0043, 1.0041, 1.0037, 1.0032, 1.0026, 1); }
}
.is-magnet-back { transition: transform 650ms var(--spring-bounce) !important; }
@media (prefers-reduced-motion: reduce) { .is-magnet-back { transition: none !important; } }
:root { --nav-h: 52px; --nav-pad: clamp(.6rem, 1.4vw, .95rem); --nav-x: clamp(.6rem, 1.6vw, 1.1rem); }

/* ─── 1. Header ─── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: var(--nav-pad) var(--nav-x); background: rgba(10,10,10,0.97); border-bottom: 1px solid rgba(242,239,234,0.06); font-family: 'Figtree', 'Inter', system-ui, sans-serif; box-sizing: border-box; }
.nav *, .nav *::before, .nav *::after { box-sizing: border-box; }
/* Desenfoque de la barra en un pseudo-elemento: si fuera en .nav, el velo fijo quedaría confinado a la barra */
/* Sin backdrop-filter en la barra: mientras el título del Home entra palabra por palabra, Chrome dibujaba dos líneas verticales
   fantasma dentro del menú (sobre "Servicios" y "Casos de éxito"), alineadas con los bordes del título. La barra pasa de 94 % a 97 %
   de opacidad y se ve igual. El velo (.nav__scrim) sí conserva su desenfoque: solo existe con un panel abierto. */
.nav a { text-decoration: none; }
.nav__bar { display: flex; align-items: stretch; gap: 8px; height: var(--nav-h); }
.nav__brand { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 clamp(.5rem, 1.4vw, 1.1rem); }
.nav__brand img { height: 32px; width: auto; display: block; filter: invert(1); }
.nav__tag { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #8F8C8A; border-left: 1px solid rgba(242,239,234,0.2); padding-left: 12px; white-space: nowrap; }
/* El logo ocupa siempre el mismo ancho (logo + la etiqueta más larga, "Contenido"), tenga o no etiqueta: así "Servicios" y los
   demás botones arrancan en el mismo lugar en todas las páginas. Antes, al pasar al Home (sin etiqueta) el botón saltaba ~70-100 px
   y se veía como un parpadeo. 163 px de logo + 12 de separación + 91 de la etiqueta "Contenido". */
@media (min-width: 1280px) { .nav:not(.nav--minimal) .nav__brand { min-width: calc(266px + 2 * clamp(.5rem, 1.4vw, 1.1rem)); } }
/* Entre 1025 y 1279 px no entra: la etiqueta se oculta en todas las páginas (el logo queda solo, igual que en el Home) y los botones no se montan. */
@media (min-width: 1025px) and (max-width: 1279px) { .nav:not(.nav--minimal) .nav__tag { display: none; } }
.nav__cells { flex: 1; display: flex; align-items: stretch; gap: 8px; min-width: 0; }
/* Sin backdrop-filter en los botones (ver la nota de la barra, arriba): no volver a ponérselo. */
.nav__cell { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: 0 clamp(.9rem, 1.6vw, 1.5rem); color: #F2EFEA; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; font-size: .94rem; font-weight: 500; white-space: nowrap; transition: background .18s; }
.nav__cell:hover { background: rgba(255,255,255,0.16); }
/* Sección actual: tinte y borde naranja + una línea abajo, para que se lea de un vistazo (antes era casi igual a las demás) */
.nav__cell.is-current { position: relative; background: rgba(255,90,31,0.14); border-color: rgba(255,90,31,0.6); color: #fff; font-weight: 600; }
.nav__cell.is-current::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 5px; height: 2px; border-radius: 2px; background: #FF5A1F; pointer-events: none; }
.nav__cell.is-current:hover { background: rgba(255,90,31,0.22); }
.nav__group { position: relative; }
.nav__trigger { all: unset; cursor: pointer; width: 100%; height: 100%; color: inherit; font: inherit; display: flex; align-items: center; justify-content: center; gap: .4rem; }
.nav__caret { display: inline-flex; opacity: .7; transition: transform .2s; }
.nav__caret svg { width: 12px; height: 12px; display: block; }
.nav__group:hover .nav__caret, .nav__group.is-open .nav__caret { transform: rotate(180deg); }
.nav__panel { position: absolute; top: 100%; left: 0; z-index: 10; margin-top: 8px; width: 340px; padding: 20px; background: #0e0e0e; border: 1px solid rgba(242,239,234,0.14); border-radius: 14px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility .16s; white-space: normal; text-align: left; font-weight: 400; cursor: default; }
.nav__group:hover .nav__panel, .nav__group:focus-within .nav__panel, .nav__group.is-open .nav__panel { opacity: 1; visibility: visible; transform: none; }
.nav__panel--services { width: min(640px, 94vw); }
.nav__panel--about { width: min(560px, 94vw); left: 50%; transform: translate(-50%, 6px); }
.nav__group:hover .nav__panel--about, .nav__group:focus-within .nav__panel--about, .nav__group.is-open .nav__panel--about { transform: translate(-50%, 0); }
.nav__panel--contact { left: auto; right: 0; }
/* Menú en reposo (nav.js, hasta el primer movimiento real del mouse): el hover no abre nada. Así, si la página carga
   con el cursor quieto sobre un botón, no aparece el panel ni el velo de golpe. El clic y el teclado funcionan igual. */
.nav.is-resting .nav__group:hover:not(.is-open):not(:focus-within) .nav__panel { opacity: 0; visibility: hidden; transform: translateY(6px); }
.nav.is-resting .nav__group:hover:not(.is-open):not(:focus-within) .nav__panel--about { transform: translate(-50%, 6px); }
.nav.is-resting .nav__group:hover:not(.is-open) .nav__caret { transform: none; }
/* El botón tampoco se aclara en reposo: el tono más claro del hover era el "algo blanco" que aparecía sobre "Servicios" al llegar al Home. */
.nav.is-resting .nav__cell:hover:not(.is-current) { background: rgba(255,255,255,0.08); }
.nav.is-resting .nav__cell.is-current:hover { background: rgba(255,90,31,0.14); }
[data-theme="paper"] .nav.is-resting .nav__cell:hover:not(.is-current) { background: rgba(10,10,10,0.05); }
[data-theme="paper"] .nav.is-resting .nav__cell.is-current:hover { background: rgba(255,90,31,0.12); }
.nap__head { padding: 0 .4rem .9rem; }
.np__hi { color: #8F8C8A; margin: 0 0 .15rem; font-size: .9rem; }
.np__title { margin: 0; font-size: 1.4rem; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: #F2EFEA; }
.np__title .em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; letter-spacing: 0; color: #FF5A1F; }
.np__role { color: #8F8C8A; margin: .25rem 0 .9rem; font-size: .88rem; line-height: 1.45; }
.nsv__grid, .nap__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.nsv__item { display: flex; align-items: flex-start; gap: .8rem; padding: .7rem; border-radius: 10px; color: #F2EFEA; transition: background .15s; }
.nsv__item:hover { background: rgba(255,255,255,0.06); }
.nsv__icon { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(242,239,234,0.08); font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 17px; color: #FF5A1F; }
.nsv__text { display: flex; flex-direction: column; min-width: 0; }
.nsv__item strong { font-size: .95rem; font-weight: 600; line-height: 1.25; }
.nsv__desc { color: #8F8C8A; margin-top: .15rem; font-size: .8rem; line-height: 1.35; }
.nap__cta { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: 12px; padding: .85rem 1rem; border-radius: 12px; background: rgba(42,42,232,0.10); border: 1px solid rgba(42,42,232,0.45); color: #F2EFEA; transition: background .15s, border-color .15s; }
.nap__cta:hover { background: rgba(42,42,232,0.18); border-color: #4545F2; }
.nap__cta-text { display: flex; flex-direction: column; gap: .15rem; }
.nap__cta-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6B6BFF; }
.nap__cta-text strong { font-size: 1rem; font-weight: 600; }
.nap__cta-desc { color: #8F8C8A; font-size: .85rem; }
.nap__cta-arrow { color: #6B6BFF; font-size: 1.2rem; transition: transform .15s; }
.nap__cta:hover .nap__cta-arrow { transform: translateX(3px); }
.np__photo { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; margin-bottom: .9rem; background: #141414; }
.np__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1); display: block; }
.np__text { color: #8F8C8A; margin: 0 0 1rem; font-size: .88rem; line-height: 1.5; }
.np__social { display: flex; gap: .4rem; padding: .5rem 0; margin-bottom: 1rem; border-top: 1px solid rgba(242,239,234,0.08); border-bottom: 1px solid rgba(242,239,234,0.08); }
.np__social a { flex: 1; display: flex; align-items: center; justify-content: center; padding: .5rem .3rem; border-radius: 8px; color: #8F8C8A; font-size: .78rem; font-weight: 600; transition: color .15s, background .15s; }
.np__social a:hover { color: #F2EFEA; background: rgba(255,255,255,0.06); }
.np__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.np__btn { display: flex; align-items: center; justify-content: center; padding: .75rem; border-radius: 10px; border: 1px solid rgba(242,239,234,0.14); color: #F2EFEA; font-size: .9rem; font-weight: 600; transition: background .15s; }
.np__btn:hover { background: rgba(255,255,255,0.06); }
.np__btn--solid { background: #2A2AE8; border-color: #2A2AE8; color: #fff; }
.np__btn--solid:hover { background: #1f1fc0; }
.nav .theme-toggle { align-self: center; flex: none; margin: 0 2px; }
.nav__cta { flex: none; display: flex; align-items: center; justify-content: center; padding: 0 clamp(1.1rem, 2vw, 1.6rem); border-radius: 12px; background: #2A2AE8; color: #fff; font-size: .94rem; font-weight: 600; white-space: nowrap; transition: background .2s, transform .2s; }
.nav__cta:hover { background: #1f1fc0; transform: translateY(-1px); }
.nav__scrim { position: fixed; inset: 0; z-index: -1; background: rgba(8,8,8,0.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility .35s; }
.nav:not(.is-resting):has(.nav__group:hover) .nav__scrim, .nav:has(.nav__group.is-open) .nav__scrim, .nav.has-open .nav__scrim, .nav[data-open] .nav__scrim { opacity: 1; visibility: visible; }
.nav__burger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 8px; align-self: center; margin-left: auto; }
.nav__burger span { display: block; width: 24px; height: 2px; background: #F2EFEA; border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav[data-open] .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav[data-open] .nav__burger span:nth-child(2) { opacity: 0; }
.nav[data-open] .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__drawer[hidden] { display: none; }
.nav__drawer { display: grid; gap: .15rem; margin-top: 10px; padding: .6rem clamp(1rem, 4vw, 2rem) 1.4rem; background: #0a0a0a; border: 1px solid rgba(242,239,234,0.1); border-radius: 14px; max-height: calc(100vh - 96px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.nav__drawer > a, .nav__drawer summary { color: #F2EFEA; border-bottom: 1px solid rgba(242,239,234,0.08); cursor: pointer; padding: .85rem .25rem; font-size: 1.05rem; font-weight: 500; list-style: none; }
.nav__drawer summary::-webkit-details-marker { display: none; }
.nav__drawer summary::after { content: '+'; float: right; color: #8F8C8A; }
.nav__drawer details[open] summary::after { content: '–'; }
.nav__drawer-sub { display: grid; gap: .1rem; padding: .25rem 0 .5rem .75rem; }
.nav__drawer-sub a { color: #8F8C8A; padding: .5rem 0; font-size: .98rem; }
.nav__drawer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: .8rem .25rem 0; color: #8F8C8A; font-size: .9rem; }
.nav__drawer-cta { margin-top: .9rem; display: flex; justify-content: center; padding: 15px; border-radius: 12px; background: #2A2AE8; color: #fff; font-weight: 600; font-size: 16px; }
.nav-spacer { height: calc(var(--nav-h) + 2 * var(--nav-pad)); }
@media (max-width: 1024px) {
  .nav__bar { height: 48px; }
  .nav__cells, .nav__cta, .nav__bar .theme-toggle { display: none; }
  .nav__drawer-row .theme-toggle { display: inline-flex; }
  .nav__burger { display: flex; }
  .nav-spacer { height: calc(48px + 2 * var(--nav-pad)); }
  .nav__tag { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nav__panel, .nav__scrim, .nav__caret, .nav__cta { transition: none; } }

/* Tema día (solo las páginas que lo tienen) */
[data-theme="paper"] .nav { background: rgba(242,239,234,0.97); border-bottom-color: rgba(10,10,10,0.08); }
[data-theme="paper"] .nav__brand img { filter: none; }
[data-theme="paper"] .nav__tag { color: #5c5a58; border-left-color: rgba(10,10,10,0.15); }
[data-theme="paper"] .nav__cell { color: #0A0A0A; background: rgba(10,10,10,0.05); border-color: rgba(10,10,10,0.12); }
[data-theme="paper"] .nav__cell:hover { background: rgba(10,10,10,0.1); }
[data-theme="paper"] .nav__cell.is-current { background: rgba(255,90,31,0.12); border-color: rgba(194,65,12,0.55); color: #0A0A0A; }
[data-theme="paper"] .nav__cell.is-current::after { background: #C2410C; }
[data-theme="paper"] .nav__panel, [data-theme="paper"] .nav__drawer { background: #fff; border-color: rgba(10,10,10,0.12); box-shadow: 0 30px 60px rgba(10,10,10,0.18); }
[data-theme="paper"] .np__title, [data-theme="paper"] .nsv__item, [data-theme="paper"] .np__btn, [data-theme="paper"] .nav__drawer > a, [data-theme="paper"] .nav__drawer summary, [data-theme="paper"] .nap__cta { color: #0A0A0A; }
[data-theme="paper"] .nsv__item:hover, [data-theme="paper"] .np__btn:hover, [data-theme="paper"] .np__social a:hover { background: rgba(10,10,10,0.05); color: #0A0A0A; }
[data-theme="paper"] .nsv__icon { background: rgba(10,10,10,0.04); border-color: rgba(10,10,10,0.1); }
[data-theme="paper"] .np__btn { border-color: rgba(10,10,10,0.15); }
[data-theme="paper"] .np__btn--solid { color: #fff; }
[data-theme="paper"] .np__social, [data-theme="paper"] .nav__drawer > a, [data-theme="paper"] .nav__drawer summary { border-color: rgba(10,10,10,0.1); }
[data-theme="paper"] .nav__burger span { background: #0A0A0A; }
[data-theme="paper"] .nav__scrim { background: rgba(242,239,234,0.45); }
[data-theme="paper"] .nav__drawer-sub a, [data-theme="paper"] .np__social a, [data-theme="paper"] .np__hi, [data-theme="paper"] .np__role, [data-theme="paper"] .np__text, [data-theme="paper"] .nsv__desc, [data-theme="paper"] .nap__cta-desc, [data-theme="paper"] .nav__drawer-row { color: #5c5a58; }

/* ─── 2. Otros servicios (venta cruzada al cierre: anatomía de Palo Seco) ─── */
.others { padding: clamp(72px, 9vw, 110px) clamp(20px, 4vw, 48px); border-top: 1px solid rgba(242,239,234,0.08); font-family: 'Figtree', 'Inter', system-ui, sans-serif; }
.others__inner { max-width: 1240px; margin: 0 auto; }
.others__head { max-width: 760px; margin: 0 0 clamp(32px, 4vw, 48px); text-align: left; }
.others__eyebrow { display: flex; align-items: center; gap: 16px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #8F8C8A; font-weight: 600; margin: 0 0 18px; }
.others__eyebrow::before { content: ''; width: 34px; height: 1px; background: rgba(242,239,234,0.14); }
.others__title { font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em; margin: 0; color: inherit; }
.others__title em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; letter-spacing: 0; color: #FF5A1F; }
.others__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(242,239,234,0.10); border: 1px solid rgba(242,239,234,0.10); border-radius: 18px; overflow: hidden; }
.ocard { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 2.4vw, 36px); min-height: 300px; background: #0d0d0d; color: inherit; transition: background .25s; }
.ocard:hover { background: #121212; }
.ocard.is-inview { background: #121212; }
.ocard__num { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 42px; line-height: 1; color: rgba(242,239,234,0.4); margin: 0 0 24px; transition: color .25s; }
.ocard:hover .ocard__num { color: #FF5A1F; }
.ocard.is-inview .ocard__num { color: #FF5A1F; }
.ocard__title { font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 12px; }
.ocard__text { font-size: 15px; line-height: 1.6; color: #8F8C8A; margin: 0 0 24px; }
.ocard__link { margin-top: auto; font-size: 14px; font-weight: 600; color: #F2EFEA; transition: color .25s; }
.ocard:hover .ocard__link { color: #FF5A1F; }
.ocard.is-inview .ocard__link { color: #FF5A1F; }
.ocard--cta { background: linear-gradient(135deg, rgba(42,42,232,0.16), #0d0d0d 60%); }
.ocard--cta:hover { background: linear-gradient(135deg, rgba(42,42,232,0.22), #121212 60%); }
.ocard__btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; border-radius: 12px; background: #2A2AE8; color: #fff; font-size: 16px; font-weight: 600; transition: background .28s, transform .28s; }
.ocard__btn:hover { background: #1f1fc0; transform: translateY(-2px); }
[data-theme="paper"] .others { border-top-color: rgba(10,10,10,0.08); }
[data-theme="paper"] .others__grid { background: rgba(10,10,10,0.1); border-color: rgba(10,10,10,0.1); }
[data-theme="paper"] .ocard { background: #fff; }
[data-theme="paper"] .ocard:hover { background: #faf8f4; }
[data-theme="paper"] .ocard.is-inview { background: #faf8f4; }
[data-theme="paper"] .ocard__num { color: rgba(10,10,10,0.3); }
[data-theme="paper"] .ocard__link { color: #0A0A0A; }
[data-theme="paper"] .ocard--cta { background: linear-gradient(135deg, rgba(42,42,232,0.08), #fff 60%); }
[data-theme="paper"] .others__eyebrow::before { background: rgba(10,10,10,0.14); }
@media (max-width: 900px) { .others__grid { grid-template-columns: 1fr; } .ocard { min-height: 0; } }

/* ─── 3. Columna de Palo Seco: contenido 1144 dentro de 1240 con gutter fluido ─── */
:root { --maxw: 1240px; --colw: 1144px; --gutter: clamp(1.25rem, 4vw, 3rem); --section-y: clamp(4.5rem, 9vw, 8.5rem); }
.np__more { display: block; margin-top: 12px; text-align: center; font-size: .85rem; color: #8F8C8A; transition: color .15s; }
.np__more:hover { color: #F2EFEA; }

/* ─── 4. Header mínimo (briefing y contacto de Palo Seco): logo + volver ─── */
.nav--minimal .nav__cells, .nav--minimal .nav__burger, .nav--minimal .nav__drawer, .nav--minimal .nav__scrim { display: none !important; }
.nav__back { margin-left: auto; display: flex; align-items: center; justify-content: center; padding: 0 clamp(1.1rem, 2vw, 1.6rem); border-radius: 12px; background: #F2EFEA; color: #0A0A0A; font-size: .94rem; font-weight: 600; white-space: nowrap; transition: background .2s, transform .2s; }
.nav__back:hover { background: #e4e0d8; transform: translateY(-1px); }
[data-theme="paper"] .nav__back { background: #0A0A0A; color: #F2EFEA; }

/* ─── 5. Resplandor (glowsec + gg de Palo Seco): blobs animados y uno que sigue al cursor ─── */
.glowsec { position: relative; overflow: hidden; }
.glowsec::before, .glowsec::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; height: clamp(90px, 14vh, 180px); }
.glowsec::before { top: 0; background: linear-gradient(180deg, var(--glow-bg, #0A0A0A) 0%, rgba(10,10,10,0) 100%); }
.glowsec::after { bottom: 0; background: linear-gradient(0deg, var(--glow-bg, #0A0A0A) 0%, rgba(10,10,10,0) 100%); }
.glowsec > :not(.gg) { position: relative; z-index: 2; }
.gg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .62; --c1: 255,90,31; --c2: 255,122,70; --c3: 214,70,20; --c4: 255,150,100; --c5: 255,90,31; --cp: 255,122,70; --size: 80%; --blend: screen; -webkit-mask-image: radial-gradient(125% 118% at 50% 45%, #000 48%, transparent 90%); mask-image: radial-gradient(125% 118% at 50% 45%, #000 48%, transparent 90%); }
.gg--left { opacity: .52; } .gg--left .gg__stage { transform: translateX(-16%); }
.gg--right { opacity: .46; } .gg--right .gg__stage { transform: translateX(16%); }
.gg--top { opacity: .5; } .gg--top .gg__stage { transform: translateY(-16%); }
.gg__stage { position: absolute; inset: 0; filter: blur(60px); }
.gg__blob { position: absolute; width: var(--size); height: var(--size); top: calc(50% - var(--size) / 2); left: calc(50% - var(--size) / 2); mix-blend-mode: var(--blend); will-change: transform; }
.gg__b1 { background: radial-gradient(circle at center, rgba(var(--c1), .6) 0, rgba(var(--c1), 0) 50%) no-repeat; transform-origin: 50%; animation: ggVertical 30s ease-in-out infinite paused; }
.gg__b2 { background: radial-gradient(circle at center, rgba(var(--c2), .5) 0, rgba(var(--c2), 0) 50%) no-repeat; transform-origin: calc(50% - 400px); animation: ggCircle 20s linear infinite reverse paused; }
.gg__b3 { background: radial-gradient(circle at center, rgba(var(--c3), .5) 0, rgba(var(--c3), 0) 50%) no-repeat; transform-origin: calc(50% + 400px); animation: ggCircle 40s linear infinite paused; }
.gg__b4 { background: radial-gradient(circle at center, rgba(var(--c4), .5) 0, rgba(var(--c4), 0) 50%) no-repeat; transform-origin: calc(50% - 200px); opacity: .6; animation: ggHorizontal 40s ease-in-out infinite paused; }
.gg__b5 { background: radial-gradient(circle at center, rgba(var(--c5), .5) 0, rgba(var(--c5), 0) 50%) no-repeat; transform-origin: calc(50% - 800px) calc(50% + 800px); animation: ggCircle 20s linear infinite paused; }
.gg__pointer { opacity: .4; background: radial-gradient(circle at center, rgba(var(--cp), .7) 0, rgba(var(--cp), 0) 50%) no-repeat; width: 100%; height: 100%; top: -50%; left: -50%; }
/* Los blobs nacen en pausa. Corren con la sección en pantalla (.is-on) y después del primer pintado (.fx-on): las dos clases las pone motion.js */
html.fx-on .gg.is-on .gg__blob { animation-play-state: running; }
@keyframes ggVertical { 0% { transform: translateY(-50%); } 50% { transform: translateY(50%); } 100% { transform: translateY(-50%); } }
@keyframes ggCircle { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes ggHorizontal { 0% { transform: translateX(-50%) translateY(-10%); } 50% { transform: translateX(50%) translateY(10%); } 100% { transform: translateX(-50%) translateY(-10%); } }
[data-theme="paper"] .gg { --blend: multiply; opacity: .35; }
[data-theme="paper"] .glowsec::before { background: linear-gradient(180deg, var(--glow-bg-paper, #F2EFEA) 0%, rgba(242,239,234,0) 100%); }
[data-theme="paper"] .glowsec::after { background: linear-gradient(0deg, var(--glow-bg-paper, #F2EFEA) 0%, rgba(242,239,234,0) 100%); }
@media (prefers-reduced-motion: reduce) { .gg__blob { animation: none !important; } }

/* ─── 6. Manifiesto en bloques (mblock de Palo Seco): número · etiqueta · título | subtítulo · párrafos ─── */
.mani__inner { max-width: var(--colw); margin: 0 auto; }
.mblock { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 96px); padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid rgba(242,239,234,0.10); align-items: start; }
.mblock:first-of-type { border-top: 0; padding-top: 0; }
.mblock__num { display: block; font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 44px; line-height: 1; color: rgba(255,90,31,0.6); margin: 0 0 18px; }
.mblock__eyebrow { display: flex; align-items: center; gap: 14px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #8F8C8A; font-weight: 600; margin: 0 0 16px; }
.mblock__eyebrow::before { content: ''; width: 34px; height: 1px; background: rgba(242,239,234,0.2); }
.mblock__title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.06; letter-spacing: -.02em; margin: 0; font-weight: 600; max-width: 16ch; }
.mblock__title em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; letter-spacing: 0; color: #FF5A1F; }
.mblock__sub { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.3; font-weight: 600; letter-spacing: -.015em; margin: 0 0 18px; }
.mblock__body p { font-size: 16.5px; line-height: 1.65; color: rgba(242,239,234,0.78); margin: 0 0 14px; max-width: 52ch; }
.mblock__who { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 16px 8px 8px; border: 1px solid rgba(242,239,234,0.12); border-radius: 999px; background: rgba(10,10,10,0.5); }
.mblock__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; filter: grayscale(1); }
.mblock__who span { font-size: 13.5px; color: #8F8C8A; }
.mblock__who b { color: #F2EFEA; font-weight: 600; }
[data-theme="paper"] .mblock { border-color: rgba(10,10,10,0.1); }
[data-theme="paper"] .mblock__body p { color: rgba(10,10,10,0.75); }
[data-theme="paper"] .mblock__who { background: #fff; border-color: rgba(10,10,10,0.12); }
[data-theme="paper"] .mblock__who b { color: #0A0A0A; }
@media (max-width: 900px) { .mblock { grid-template-columns: 1fr; gap: 18px; } .mblock__title { max-width: none; } }

/* Panel Servicios: Web Express con sus entradas internas (SEO y GEO · IA aplicada) */
.nsv__item--wide { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: .35rem; padding-bottom: .8rem; }
.nsv__item--wide .nsv__main { display: flex; align-items: flex-start; gap: .8rem; color: inherit; }
.nsv__sub { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding-left: calc(40px + .8rem); }
.nsv__sublabel { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #8F8C8A; font-weight: 600; margin-right: .25rem; }
.nsv__sub a { font-size: .8rem; font-weight: 600; color: #F2EFEA; border: 1px solid rgba(242,239,234,0.16); border-radius: 999px; padding: .3rem .7rem; transition: border-color .15s, color .15s; }
.nsv__sub a:hover { border-color: #FF5A1F; color: #FF5A1F; }
.nav__drawer-subsub { padding-left: 1rem !important; }
.nav__drawer-subsub::before { content: "↳ "; color: #8F8C8A; }
[data-theme="paper"] .nsv__sub a { color: #0A0A0A; border-color: rgba(10,10,10,0.16); }

/* ─── 7. Filas deslizables en móvil (data-snap): grilla → carrusel con snap, puntos y entrada animada ───
   overflow con !important: la grilla de servicios (.svc-grid, sección 13) trae overflow:hidden para sus esquinas redondeadas
   y, como se carga después, bloqueaba el deslizamiento en el celular (Home, Casos, Web, Blog). */
@media (max-width: 820px) {
  .is-snap { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 14px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 20px 10px !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: 100vw; max-width: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; overscroll-behavior-x: contain; }
  .is-snap.is-ready { scroll-snap-type: x mandatory; } /* recién cuando terminó la entrada: antes, el snap se recalcula con las tarjetas en movimiento y la fila salta */
  .is-snap::-webkit-scrollbar { display: none; }
  .is-snap:focus-visible { outline: 2px solid rgba(242,239,234,0.7); outline-offset: -4px; } /* fila sin enlaces: toma el foco para poder recorrerla con el teclado */
  .is-snap > *, .is-snap > .hslide > * { flex: 0 0 min(84vw, 360px) !important; width: auto !important; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; min-height: 0 !important; transform: translateX(28px); transition: transform 700ms cubic-bezier(0.22,1,0.36,1); transition-delay: calc(var(--si, 0) * 70ms); }
  .is-snap > .hslide { display: contents !important; }
  .is-snap.is-seen > *, .is-snap.is-seen > .hslide > * { transform: none; }
  .is-snap > .svc, .is-snap > .ocard { border: 1px solid rgba(242,239,234,0.12) !important; border-radius: 18px !important; }
  /* Indicadores: puntos, y una línea para la tarjeta que está en pantalla (mismo criterio que los carruseles de Contenido) */
  .snap__dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 20px; }
  .snap__dot { width: 8px; height: 8px; padding: 0; margin: 0; border: 0; border-radius: 999px; background: rgba(242,239,234,0.3); transition: width .3s ease, background .3s ease; cursor: pointer; -webkit-appearance: none; appearance: none; }
  .snap__dot.is-on { width: 28px; background: #FF5A1F; }
  /* "Para quién" (web): sin pestañas, cada panel es una tarjeta deslizable */
  .has-snap > .tabs { display: none !important; }
  .panels.is-snap > .panel { display: flex !important; flex-direction: column; gap: 0; animation: none; }
  .panels.is-snap > .panel > .box { border-radius: 0; }
  .panels.is-snap > .panel > .box:first-child { border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: 14px; }
  .panels.is-snap > .panel > .box:last-child { border-radius: 0 0 18px 18px; padding-top: 14px; flex: 1; }
  [data-theme="paper"] .snap__dot { background: rgba(10,10,10,0.2); } [data-theme="paper"] .snap__dot.is-on { background: #FF5A1F; }
  [data-theme="paper"] .is-snap:focus-visible { outline-color: rgba(10,10,10,0.6); }
  [data-theme="paper"] .is-snap > .svc, [data-theme="paper"] .is-snap > .ocard { border-color: rgba(10,10,10,0.12) !important; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) { .is-snap > *, .is-snap > .hslide > * { transform: none; transition: none; } }

/* ─── 8. Acordeón en móvil (data-accordion): razones del método y bloques del manifiesto ─── */
.acc__toggle { display: none; }
@media (max-width: 820px) {
  .is-acc .acc__head { cursor: pointer; position: relative; padding-right: 44px; }
  .is-acc .acc__toggle { display: block; position: absolute; right: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(242,239,234,0.3); background: transparent; color: #F2EFEA; cursor: pointer; padding: 0; transition: transform .3s cubic-bezier(.22,1,.36,1), background .2s, border-color .2s; }
  .is-acc .acc__toggle::before { content: "+"; font-size: 18px; line-height: 1; display: block; }
  .is-acc .acc.is-open .acc__toggle { transform: rotate(45deg); background: #FF5A1F; border-color: #FF5A1F; color: #fff; }
  .is-acc .acc__body { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0 !important; transition: max-height .5s cubic-bezier(.22,1,.36,1), opacity .35s, margin .3s; }
  .is-acc .acc.is-open .acc__body { max-height: 1200px; opacity: 1; margin-top: 12px !important; }
  .is-acc .reason.acc { padding: 20px 0; }
  .is-acc .reason.acc .reason__title { margin: 0; }
  .is-acc .mblock.acc { padding: 26px 0; gap: 0; }
  .is-acc .mblock.acc .mblock__title { margin: 0; }
  [data-theme="paper"] .is-acc .acc__toggle { border-color: rgba(10,10,10,0.3); color: #0A0A0A; }
}

/* ─── 9. En foco (móvil / táctil): motion.js pone .is-inview cuando la card se ve en pantalla ─── */
.glare-host.is-inview > .glare { background-position: 0% 0%; }
.spot.is-inview { --sx: 76%; --sy: 14%; } /* sin cursor, la luz se apoya arriba a la derecha */
.spot.is-inview > .spot-light { opacity: 1; }

/* ─── 10. Títulos en móvil: líneas equilibradas y cortes por sentido ("1 mes de / contenido / en 1 día.") ─── */
.m-br { display: none; }
@media (max-width: 820px) {
  h1, h2, h3 { text-wrap: balance; }
  .m-br { display: inline; }
  .m-ln { display: block; } /* cada oración del título, en su propio bloque: se equilibra por separado */
}

/* ─── 11. "En pocas palabras": respuesta directa al comienzo de cada servicio (AEO). Una pregunta, una respuesta
   que se lee sola (40–60 palabras) y tres datos. Contenido en naranja, Paid Media en azul. ─── */
.ans { --ans-accent: #FF5A1F; padding: clamp(56px, 7vw, 88px) clamp(1.25rem, 4vw, 3rem); border-top: 1px solid rgba(242,239,234,0.08); border-bottom: 1px solid rgba(242,239,234,0.08); font-family: 'Figtree', 'Inter', system-ui, sans-serif; }
.ans--ads { --ans-accent: #4545F2; }
.ans__in { max-width: 1144px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.ans__k { display: flex; align-items: center; gap: 16px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #8F8C8A; margin: 0 0 18px; }
.ans__k::before { content: ''; width: 34px; height: 1px; background: var(--ans-accent); }
.ans__q { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; margin: 0; max-width: 18ch; color: inherit; }
.ans__a { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: rgba(242,239,234,0.88); margin: 0 0 24px; max-width: 58ch; }
.ans__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ans__facts li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.5; color: #8F8C8A; }
.ans__facts li::before { content: ''; position: absolute; left: 1px; top: 0.46em; width: 10px; height: 5px; border-left: 2px solid var(--ans-accent); border-bottom: 2px solid var(--ans-accent); transform: rotate(-45deg); }
[data-theme="paper"] .ans { border-color: rgba(10,10,10,0.08); }
[data-theme="paper"] .ans__a { color: rgba(10,10,10,0.82); }
[data-theme="paper"] .ans__k, [data-theme="paper"] .ans__facts li { color: #5c5a58; }
[data-theme="paper"] .ans--ads { --ans-accent: #2A2AE8; }
@media (max-width: 820px) { .ans__in { grid-template-columns: 1fr; gap: 18px; } .ans__q { max-width: none; } }

/* ─── 12. Enlace al blog debajo de las preguntas frecuentes ─── */
.blog-link { display: block; width: fit-content; margin-top: 18px; font-size: 14.5px; font-weight: 600; color: inherit; opacity: 0.85; border-bottom: 1px solid rgba(255,90,31,0.6); padding-bottom: 2px; transition: opacity .2s, color .2s; }
.blog-link:hover { opacity: 1; color: #FF5A1F; }

/* ─── 13. Grilla de los tres servicios (la del Home), reutilizada al cierre de Casos y del blog ─── */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 1144px; margin: 0 auto; background: rgba(242,239,234,0.10); border: 1px solid rgba(242,239,234,0.10); border-radius: 18px; overflow: hidden; }
.svc { position: relative; display: flex; flex-direction: column; background: #0d0d0d; padding: clamp(28px, 2.6vw, 40px); min-height: 460px; color: inherit; text-decoration: none; transition: background-color .25s ease; }
.svc:hover, .svc.is-inview { background: #121212; }
.svc__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 30px; }
.svc__num { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 46px; line-height: 1; color: rgba(242,239,234,0.4); transition: color .25s ease; }
.svc:hover .svc__num, .svc.is-inview .svc__num, .svc:hover .svc__link, .svc.is-inview .svc__link { color: var(--svc-accent, #FF5A1F); }
.svc__link { font-size: 12px; letter-spacing: 0.04em; color: #8F8C8A; transition: color .25s ease; }
.svc__title { font-family: 'Figtree', 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; }
.svc__text { font-size: 15px; line-height: 1.6; color: #8F8C8A; margin: 0 0 28px; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.svc__tags span { font-size: 11px; letter-spacing: 0.02em; color: rgba(242,239,234,0.8); border: 1px solid rgba(242,239,234,0.14); border-radius: 999px; padding: 5px 11px; }
.svc.contenido { --svc-accent: #FF5A1F; }
.svc.ads { --svc-accent: #4545F2; --spot: rgba(69,69,242,0.20); }
.svc.web { --svc-accent: #e0d5c2; --spot: rgba(224,213,194,0.11); }
[data-theme="paper"] .svc-grid { background: rgba(10,10,10,0.1); border-color: rgba(10,10,10,0.1); }
[data-theme="paper"] .svc { background: #ffffff; }
[data-theme="paper"] .svc:hover, [data-theme="paper"] .svc.is-inview { background: #faf8f4; }
[data-theme="paper"] .svc__num { color: rgba(10,10,10,0.3); }
[data-theme="paper"] .svc__tags span { color: rgba(10,10,10,0.75); border-color: rgba(10,10,10,0.14); }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } .svc { min-height: 0; } }
#servicios .others__head { max-width: 1144px; margin-left: auto; margin-right: auto; } /* alinea el título con la grilla, como en el Home */
#servicios .others__title { max-width: 18ch; }

/* ─── 14. Animaciones atadas al scroll, nativas (motion.js las activa solo si el navegador las soporta) ───
   La sección lateral de Paid Media ([data-hscroll]) y las cards apiladas ([data-stack]) las mueve el navegador por su cuenta,
   fuera del hilo principal: van más fluidas en celulares modestos. JS solo mide los rangos (--hs-*, --s-*) al cargar y al
   cambiar el tamaño. Sin soporte, motion.js sigue con el cálculo por scroll de antes. */
@supports (animation-timeline: view()) {
  .hs-sda { view-timeline-name: --hs; view-timeline-axis: block; }
  .hs-sda [data-track] { animation: hs-move linear both; animation-timeline: --hs; animation-range: cover var(--hs-a, 100vh) cover var(--hs-b, 300vh); }
  .hs-sda [data-hprogress] { animation: hs-bar linear both; animation-timeline: --hs; animation-range: cover var(--hs-a, 100vh) cover var(--hs-b, 300vh); transition: none; }
  @keyframes hs-move { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--hs-dist, 0px)), 0, 0); } }
  @keyframes hs-bar { from { transform: scaleX(0.05); } to { transform: scaleX(1); } }
  .stack-sda .stack__card { animation: stack-shrink linear both; animation-timeline: view(block); animation-range: cover var(--s-a, 0px) cover var(--s-b, 1px); }
  @keyframes stack-shrink { from { transform: scale(1); } to { transform: scale(var(--s-to, 1)); } }
}
@media (prefers-reduced-motion: reduce) { .hs-sda [data-track], .hs-sda [data-hprogress], .stack-sda .stack__card { animation: none !important; } }

/* ─── 15. Visor de cámara ([data-viewfinder], motion.js 9b) ───
   Sección alta con un "pin" sticky: la foto del set va oscura y en blanco y negro; .vf__win es la misma foto a color,
   recortada con clip-path al tamaño del visor. motion.js anima formato, recorte y desplazamiento con el scroll. */
.vf { position: relative; height: 300vh; background: #0A0A0A; --u: min(3.9vh, 3.9vw); --vf-cy: 53%; } /* --vf-cy: centro del visor; deja libre el menú arriba y la frase abajo */
.vf__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.vf__bg, .vf__img { position: absolute; top: 50%; left: 0; width: max(130vw, 178vh); height: auto; max-width: none; transform: translate(0, -50%); will-change: transform; user-select: none; pointer-events: none; }
.vf__bg { filter: grayscale(1) brightness(0.36) contrast(1.05); }
.vf__win { position: absolute; inset: 0; clip-path: inset(50% 50% 50% 50%); }
.vf__img { filter: saturate(1.05) brightness(1.04); }
.vf__frame { position: absolute; left: 50%; top: var(--vf-cy); transform: translate(-50%, -50%); width: calc(var(--u) * 9); height: calc(var(--u) * 16); border: 1px solid rgba(242,239,234,0.55); border-radius: 2px; pointer-events: none;
  background-image: linear-gradient(rgba(242,239,234,0.16), rgba(242,239,234,0.16)), linear-gradient(rgba(242,239,234,0.16), rgba(242,239,234,0.16)), linear-gradient(90deg, rgba(242,239,234,0.16), rgba(242,239,234,0.16)), linear-gradient(90deg, rgba(242,239,234,0.16), rgba(242,239,234,0.16));
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%; background-position: 0 33.333%, 0 66.666%, 33.333% 0, 66.666% 0; background-repeat: no-repeat; }
.vf__c { position: absolute; width: 18px; height: 18px; border: 0 solid #F2EFEA; }
.vf__c--tl { top: -3px; left: -3px; border-top-width: 2px; border-left-width: 2px; }
.vf__c--tr { top: -3px; right: -3px; border-top-width: 2px; border-right-width: 2px; }
.vf__c--bl { bottom: -3px; left: -3px; border-bottom-width: 2px; border-left-width: 2px; }
.vf__c--br { bottom: -3px; right: -3px; border-bottom-width: 2px; border-right-width: 2px; }
.vf__fmt { position: absolute; left: 0; bottom: calc(100% + 12px); display: inline-flex; align-items: center; gap: 8px; font-family: 'Figtree', 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #F2EFEA; white-space: nowrap; }
.vf__fmt i { width: 7px; height: 7px; border-radius: 50%; background: #FF5A1F; box-shadow: 0 0 10px rgba(255,90,31,0.8); }
.vf__cap { position: absolute; left: 0; right: 0; bottom: clamp(20px, 5vh, 52px); padding: 0 20px; text-align: center; color: #F2EFEA; }
.vf__cap p { margin: 0 auto; max-width: 46ch; font-family: 'Figtree', 'Inter', system-ui, sans-serif; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5; text-wrap: balance; }
.vf__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.vf__dots span { width: 6px; height: 6px; border-radius: 999px; background: rgba(242,239,234,0.3); transition: width 0.45s var(--spring), background 0.3s ease; }
.vf__dots span.is-on { width: 22px; background: #FF5A1F; }
@media (max-width: 820px) { .vf { height: 260vh; --u: min(3.4vh, 4vw); --vf-cy: 44%; } .vf__cap { bottom: 150px; } } /* la frase queda arriba del botón de WhatsApp y de la barra fija de presupuesto */
@media (prefers-reduced-motion: reduce) { .vf { height: auto; } .vf__pin { position: relative; } }