/* ============================================================
   PÁGINA WEB ARGENTINA — diseño C "Collage vivo" (15-oct-2026)
   Fotos y videos reales recortados con formas (ventana, círculo, píldora, arco), pegados en capas, con
   stickers y cintas, que se mueven con el scroll. Prototipo y guía: _fuentes/prototipos/concepto-c/
   (SISTEMA.md = componentes para las páginas internas).
   PALETA SOBRIA (Mauro, 15-oct-2026: «que no sea muy colorido… con muchos colores que mareen»):
   base blanca y azul muy claro · azul rey = único color fuerte · las fotos ponen el color ·
   amarillo sol SOLO en el botón principal, una palabra resaltada por pantalla y el sticker "500+" ·
   verde solo en el ícono de WhatsApp · nunca negro ni azul noche de fondo · sin sol decorativo.
   Diseño anterior: _fuentes/sin-uso/diseno-v3-azul-rey/
   ============================================================ */

:root {
  /* -- Color -- */
  --rey: #1B55D0;
  --rey-2: #2F6EEA;
  --rey-hondo: #143FA6;
  --rey-link: #1D4FC0;
  --azul-1: #DBE7FF;
  --azul-2: #E9F0FF;
  --azul-3: #F6F9FF;
  --azul-suave: #C7D8FF;          /* etiquetas y detalles sobre el azul rey */
  --sol: #FFC21A;
  --sol-hondo: #D99A00;
  --tinta: #0D1A3C;
  --tinta-2: #3B4869;
  --apagado: #64729E;
  --blanco: #FFFFFF;
  --wa: #25D366;
  --wa-hondo: #128C4A;
  --rey-rgb: 27, 85, 208;
  --rey2-rgb: 47, 110, 234;
  --hondo-rgb: 20, 63, 166;
  --tinta-rgb: 13, 26, 60;
  --sol-rgb: 255, 194, 26;
  --linea: rgba(var(--tinta-rgb), .12);
  --linea-2: rgba(var(--tinta-rgb), .22);

  /* -- Tipografía -- */
  --f-titulo: 'Sora', 'Figtree', system-ui, sans-serif;
  --f-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --t-mega: clamp(2.6rem, 1.2rem + 5.2vw, 6.2rem);
  --t-xl: clamp(2.3rem, 1rem + 4.4vw, 5.2rem);
  --t-l: clamp(2rem, 1.1rem + 3vw, 3.7rem);
  --t-m: clamp(1.3rem, 1rem + 1vw, 1.75rem);
  --t-bajada: clamp(1.06rem, 1rem + .3vw, 1.25rem);

  /* -- Grilla, forma y movimiento -- */
  --margen: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --header: 84px;
  --radio: 18px;
  --borde: 8px;
  --sombra: 0 1px 2px rgba(var(--tinta-rgb), .08), 0 16px 36px -12px rgba(var(--hondo-rgb), .34), 0 34px 70px -36px rgba(var(--tinta-rgb), .4);
  --sombra-sticker: 0 2px 0 rgba(var(--tinta-rgb), .12), 0 10px 20px -8px rgba(var(--tinta-rgb), .35);
  --rebote: cubic-bezier(.2, 1.45, .4, 1);
  --suave: cubic-bezier(.2, .8, .2, 1);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 6.5Q10 .5 20 6.5T40 6.5' fill='none' stroke='%232F6EEA' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --puntos: radial-gradient(rgba(var(--rey-rgb), .13) 1.2px, transparent 1.5px) 0 0 / 22px 22px;

  /* -- Nombres del diseño anterior: los usan el chat, el demo-kit, las demos y estilos en línea -- */
  --cielo: var(--rey); --cielo-2: var(--rey-2); --cielo-claro: var(--azul-1);
  --hueso: var(--azul-3); --hueso-2: var(--azul-2); --texto: #1C2C57; --texto-2: #41507A;
  --sobre-cielo: #FFFFFF; --sobre-cielo-2: #E3EDFF; --claro: #F6F9FF; --claro-2: #D4E1F7; --claro-3: #A7B8DA;
  --accion: var(--sol); --accion-2: #FFD24D; --accion-claro: #E3EDFF; --accion-osc: var(--rey-link);
  --celeste: #3B7BF0; --celeste-osc: var(--rey-link); --sol-2: #FFD24D; --sol-claro: #FFF1C7; --sol-palido: #FFE9A8; --sol-osc: #8A5A00;
  --wa-2: #1DA851; --linea-cielo: rgba(255, 255, 255, .3);
  --cielo-rgb: var(--rey-rgb); --osc-rgb: 29, 79, 192; --hueso2-rgb: 233, 240, 255;
  --en-bloque: #FFFFFF; --en-bloque-rgb: 255, 255, 255;
  --r-s: 6px; --r: 10px; --r-l: 16px; --ancho: 1240px; --ease: var(--suave);
  --papel: var(--hueso); --papel-2: var(--hueso-2); --card: var(--blanco); --muted: var(--apagado); --dim: var(--claro-3);
  --borde-2: var(--linea-2); --bg: var(--hueso); --bg-2: var(--hueso-2); --bg-3: #D0E0FF;
  --border: var(--linea); --border-2: var(--linea-2); --text: var(--texto); --text-2: var(--texto-2); --ink: var(--tinta);
  --accent: var(--rey-link); --accent-2: #153D96; --accent-light: #E3EDFF; --accent-rgb: var(--osc-rgb);
  --font-display: var(--f-titulo); --font-body: var(--f-texto); --font-mono: var(--f-mono);
  --shadow-sm: 0 1px 2px rgba(var(--tinta-rgb), .06); --shadow-md: 0 8px 24px rgba(var(--tinta-rgb), .08); --shadow-lg: 0 24px 60px rgba(var(--tinta-rgb), .14);
  --r-lg: var(--r); --r-xl: var(--r-l); --card-2: #F0F5FF; --green: #16A34A;
  --celeste-50: #E3EDFF; --celeste-2: var(--rey-link); --celeste-claro: var(--celeste); --celeste-rgb: var(--osc-rgb); --sol-50: var(--sol-claro);
}

/* == BASE == */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--azul-3); color: var(--texto);
  font-family: var(--f-texto); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--azul-1); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--rey-link); outline-offset: 3px; border-radius: 6px; }
.bloque-rey :focus-visible, .cielo :focus-visible, .cierre :focus-visible, .menu-total :focus-visible { outline-color: #fff; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; left: 12px; top: -80px; z-index: 300; background: var(--sol); color: var(--tinta); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.saltar:focus { top: 12px; }
body.menu-abierto { overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: var(--tinta); }
.mono { font-family: var(--f-mono); }
.ico { flex: none; }

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); position: relative; z-index: 1; }
.container-angosto { max-width: calc(820px + 2 * var(--margen)); }

/* == TIPOGRAFÍA == */
.t-mega, .t-xl, .t-l, .titulo-xxl, .titulo-l, .t-cierre { font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.045em; color: var(--tinta); }
.t-mega, .titulo-xxl { font-size: var(--t-mega); line-height: .95; }
.t-xl { font-size: var(--t-xl); line-height: 1.04; letter-spacing: -.04em; }
.t-l, .titulo-l { font-size: var(--t-l); line-height: 1.08; letter-spacing: -.035em; }
.t-m, .titulo-m { font-size: var(--t-m); line-height: 1.12; letter-spacing: -.03em; }
.bajada { font-size: var(--t-bajada); line-height: 1.55; color: var(--tinta-2); max-width: 56ch; }
.t-l + .bajada, .t-xl + .bajada, .titulo-l + .bajada, h1 + .bajada { margin-top: 22px; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--f-mono); font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--rey-link);
}
.etiqueta::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: currentColor; }
.etiqueta:has(svg)::before { display: none; }
.bloque-rey .etiqueta, .cielo .etiqueta, .cierre .etiqueta { color: var(--azul-suave); }

/* Una sola palabra resaltada por pantalla: sticker amarillo detrás */
.resalte { position: relative; z-index: 0; white-space: nowrap; padding: 0 .06em; background: none; color: inherit; }
.resalte::before {
  content: ''; position: absolute; inset: .1em -.08em .02em; z-index: -1;
  background: var(--sol); border-radius: .14em; transform: rotate(-2.5deg); box-shadow: 0 .05em 0 var(--sol-hondo);
}
.bloque-rey .resalte, .cielo .resalte, .cierre .resalte { color: var(--tinta); }
/* Subrayado ondulado azul (sin color extra) */
.subraya { background: var(--onda) 0 100% / auto .26em repeat-x; padding-bottom: .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.link-flecha { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-family: var(--f-titulo); font-weight: 700; color: var(--rey-link); }
.link-flecha::after { content: '→'; transition: transform .3s var(--rebote); }
.link-flecha:hover::after { transform: translateX(5px); }
.bloque-rey .link-flecha, .cielo .link-flecha { color: #fff; }

/* == BOTONES (con "tecla": sombra sólida abajo) == */
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--f-titulo); font-weight: 700; font-size: 1rem; line-height: 1.1; text-align: center;
  transition: transform .25s var(--suave), box-shadow .25s var(--suave), background-color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); }
.btn-primario, .btn-sol { background: var(--sol); color: var(--tinta); box-shadow: 0 4px 0 var(--sol-hondo), 0 12px 24px -12px rgba(var(--sol-rgb), .8); }
.btn-rey, .btn-tinta { background: var(--rey); color: #fff; box-shadow: 0 4px 0 var(--rey-hondo), 0 12px 24px -12px rgba(var(--rey-rgb), .7); }
.btn-blanco { background: #fff; color: var(--tinta); box-shadow: 0 4px 0 rgba(var(--tinta-rgb), .18); }
.btn-contorno, .btn-borde { border-color: var(--tinta); color: var(--tinta); background: rgba(255, 255, 255, .7); }
.btn-contorno:hover, .btn-borde:hover { background: #fff; }
.bloque-rey .btn-contorno, .cielo .btn-contorno, .cierre .btn-contorno { border-color: #fff; color: #fff; background: transparent; }
/* WhatsApp: botón blanco, el verde queda solo en el ícono */
.btn-wa { background: #fff; color: var(--tinta); border-color: rgba(var(--tinta-rgb), .14); box-shadow: 0 4px 0 rgba(var(--tinta-rgb), .14); }
.btn-wa .ico, .btn .ico-wa { color: var(--wa-hondo); }
.btn-lg, .btn-grande { min-height: 56px; padding: 14px 26px; font-size: 1.05rem; }
.btn-sm, .btn-chico { min-height: 42px; padding: 8px 18px; font-size: .92rem; }
.con-flecha::after { content: '→'; font-family: var(--f-mono); transition: transform .25s var(--suave); }
.con-flecha:hover::after { transform: translateX(4px); }

/* == STICKERS (blancos o azules; el amarillo solo para el "500+") == */
.sticker {
  display: inline-flex; align-items: center; gap: .4em; white-space: nowrap;
  font-family: var(--f-titulo); font-weight: 800; font-size: .95rem; line-height: 1.1; letter-spacing: -.01em;
  padding: .55em .9em; border-radius: 10px; background: #fff; color: var(--rey);
  transform: rotate(var(--r, 0deg)); box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .07), var(--sombra-sticker);
}
.sticker b { font-size: 1.3em; letter-spacing: -.03em; }
.sticker-rey { background: var(--rey); color: #fff; box-shadow: 0 0 0 3px #fff, var(--sombra-sticker); }
.sticker-sol { background: var(--sol); color: var(--tinta); box-shadow: 0 0 0 3px #fff, var(--sombra-sticker); }
.sticker.mono { font-family: var(--f-mono); font-weight: 500; font-size: .76rem; letter-spacing: 0; color: var(--tinta); }
.sticker-xl { font-size: clamp(1.05rem, .9rem + .5vw, 1.3rem); }
body:not(.sin-js) .pegar { animation: pegar .75s var(--rebote) var(--d, 0s) both; }
@keyframes pegar {
  0% { opacity: 0; transform: scale(1.5) rotate(calc(var(--r, 0deg) - 12deg)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); }
}

/* == MARCOS Y RECORTES == */
.marco { margin: 0; position: relative; background: #fff; padding: var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.marco > img, .marco > video { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radio) - var(--borde) + 2px); }
.forma-ventana { aspect-ratio: 4 / 3; }
.forma-circulo { aspect-ratio: 1; border-radius: 50%; }
.forma-circulo > img, .forma-circulo > video { border-radius: 50%; }
.forma-pildora { border-radius: 999px; }
.forma-pildora > img, .forma-pildora > video { border-radius: 999px; }
.forma-pildora-h { aspect-ratio: 2 / 1; border-radius: 999px; }
.forma-pildora-h > img, .forma-pildora-h > video { border-radius: 999px; }
.forma-arco { border-radius: 999px 999px var(--radio) var(--radio); }
.forma-arco > img, .forma-arco > video { border-radius: 999px 999px 10px 10px; }
.gira { transform: rotate(var(--r, 0deg)); }
.capa { position: absolute; }
/* Arco azul rey detrás de los collages */
.arco {
  position: absolute; border-radius: 999px 999px 0 0; pointer-events: none;
  background: radial-gradient(60% 50% at 35% 25%, rgba(255, 255, 255, .24), transparent 70%), linear-gradient(160deg, var(--rey-2), var(--rey) 50%, var(--rey-hondo));
}
.arco::before, .arco::after { content: ''; position: absolute; border-radius: inherit; border: 2px solid rgba(255, 255, 255, .18); border-bottom: 0; }
.arco::before { inset: 7% 7% 0; }
.arco::after { inset: 15% 15% 0; border-color: rgba(255, 255, 255, .1); }

/* Teléfono blanco con la web de un cliente */
.tel, .telefono { position: relative; display: block; background: #fff; padding: 7px; border-radius: 30px; box-shadow: var(--sombra), inset 0 0 0 1px rgba(var(--tinta-rgb), .06); }
.tel::before, .telefono::before { content: ''; position: absolute; z-index: 2; top: 14px; left: 50%; width: 26%; height: 7px; border-radius: 9px; background: rgba(var(--tinta-rgb), .55); transform: translateX(-50%); }
.tel img, .telefono img { width: 100%; aspect-ratio: 540 / 1169; object-fit: cover; object-position: top; border-radius: 23px; }

/* Grano sutil */
.grano { position: relative; }
.grano::after { content: ''; position: absolute; inset: 0; background-image: var(--grano); opacity: .2; mix-blend-mode: soft-light; pointer-events: none; z-index: 0; }
.bloque-rey.grano::after, .cierre.grano::after { opacity: .3; mix-blend-mode: overlay; }

/* == HEADER: píldora flotante == */
.site-header { position: fixed; top: 12px; left: 0; right: 0; z-index: 100; padding: 0 var(--margen); pointer-events: none; }
.site-header .barra {
  pointer-events: auto; max-width: var(--max); margin: 0 auto; padding: 7px 7px 7px 14px;
  display: flex; align-items: center; gap: 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .06), 0 12px 30px -14px rgba(var(--hondo-rgb), .45); transition: background-color .3s;
}
.site-header.scrolled .barra, .menu-abierto .site-header .barra { background: rgba(255, 255, 255, .95); }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); }
.marca-icono { flex: none; width: 36px; height: 36px; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; font-family: var(--f-titulo); }
.marca-texto b { font-weight: 800; font-size: .86rem; letter-spacing: .02em; }
.marca-texto span { font-family: var(--f-mono); font-weight: 600; font-size: .56rem; letter-spacing: .34em; color: var(--rey-link); margin-top: 4px; }
.barra-links { display: none; margin-left: auto; gap: 2px; }
.barra-links a { padding: 10px 14px; border-radius: 999px; color: var(--tinta); font-weight: 600; font-size: .95rem; transition: background-color .2s; }
.barra-links a:hover, .barra-links a.activo { background: var(--azul-2); }
.barra-links a.activo { color: var(--rey-link); }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.barra-cotizar { padding: 8px 16px; min-height: 44px; }
.btn-menu {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--rey); color: #fff; font-family: var(--f-mono); font-weight: 600; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
}
.btn-menu-lineas { position: relative; width: 16px; height: 10px; }
.btn-menu-lineas i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--suave), top .3s var(--suave); }
.btn-menu-lineas i:first-child { top: 0; }
.btn-menu-lineas i:last-child { top: 8px; }
.btn-menu[aria-expanded="true"] .btn-menu-lineas i:first-child { top: 4px; transform: rotate(45deg); }
.btn-menu[aria-expanded="true"] .btn-menu-lineas i:last-child { top: 4px; transform: rotate(-45deg); }

/* Menú a pantalla completa (azul rey, con una tira de recortes) */
.menu-total {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto; color: #fff; padding: calc(var(--header) + 28px) 0 40px;
  background: radial-gradient(700px 500px at 100% 0%, rgba(255, 255, 255, .16), transparent 60%), linear-gradient(160deg, var(--rey-2), var(--rey) 55%, var(--rey-hondo));
  clip-path: circle(0 at calc(100% - 60px) 40px); transition: clip-path .5s var(--suave);
}
.menu-total.abierto { clip-path: circle(150% at calc(100% - 60px) 40px); }
.menu-total-grid { display: grid; gap: 28px; }
.menu-total h2 { font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul-suave); margin-bottom: 12px; }
.menu-grande a { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.6rem, 6vw, 2.4rem); letter-spacing: -.04em; line-height: 1.12; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.menu-grande small { font-family: var(--f-mono); font-size: .74rem; font-weight: 500; letter-spacing: .08em; color: var(--azul-suave); }
.menu-lista li a { display: block; padding: 7px 0; font-weight: 600; font-size: 1.05rem; color: #fff; }
.menu-grande a:hover, .menu-lista a:hover { color: var(--azul-suave); }
.menu-collage { display: flex; align-items: flex-end; gap: 12px; margin: 34px 0 26px; }
.menu-collage .marco { --borde: 5px; --radio: 14px; width: 30%; max-width: 130px; }
.menu-collage .forma-arco { aspect-ratio: 3 / 4; transform: rotate(-5deg); }
.menu-collage .forma-circulo { transform: translateY(-14px); }
.menu-collage .forma-pildora { aspect-ratio: 3 / 4.6; transform: rotate(6deg); }
.menu-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.menu-pie p { font-family: var(--f-mono); font-size: .82rem; color: var(--azul-suave); }
.sin-js .menu-total[hidden] { display: block !important; position: static; clip-path: none; padding-top: calc(var(--header) + 24px); }

/* == SECCIONES == */
.seccion { position: relative; padding: clamp(84px, 11vw, 150px) 0; overflow: clip; }
.seccion-ajustada { padding: clamp(56px, 7vw, 90px) 0; }
/* Clara con profundidad: brillos suaves + puntos (ninguna sección lisa) */
.clara, .seccion { background: radial-gradient(900px 520px at 90% 0%, rgba(var(--rey2-rgb), .1), transparent 62%), radial-gradient(800px 600px at 0% 100%, rgba(var(--rey2-rgb), .08), transparent 60%), var(--azul-3); }
.alterna, .con-columnas { background: var(--puntos), radial-gradient(900px 520px at 88% 8%, rgba(var(--rey2-rgb), .15), transparent 62%), radial-gradient(760px 600px at 0% 92%, rgba(var(--rey2-rgb), .1), transparent 60%), var(--azul-2); }
.rayas { background: repeating-linear-gradient(135deg, rgba(var(--rey-rgb), .045) 0 2px, transparent 2px 26px), radial-gradient(800px 600px at 100% 50%, rgba(var(--rey2-rgb), .14), transparent 62%), var(--azul-3); }
/* Bloque azul rey: único color fuerte, texto blanco */
.bloque-rey, .cielo {
  position: relative; overflow: clip; color: #fff; padding: clamp(96px, 12vw, 170px) 0;
  background: radial-gradient(900px 620px at 88% 0%, rgba(255, 255, 255, .18), transparent 60%), radial-gradient(1000px 700px at 0% 100%, rgba(var(--hondo-rgb), .95), transparent 70%), linear-gradient(160deg, var(--rey-2), var(--rey) 50%, var(--rey-hondo));
}
.bloque-rey h1, .bloque-rey h2, .bloque-rey h3, .bloque-rey .t-xl, .bloque-rey .t-l, .cielo h2, .cielo h3 { color: #fff; }
.bloque-rey .bajada, .cielo .bajada, .cielo p { color: rgba(255, 255, 255, .88); }
.bloque-hondo { background: radial-gradient(900px 640px at 100% 0%, rgba(var(--rey2-rgb), .7), transparent 62%), radial-gradient(800px 600px at 10% 90%, rgba(var(--rey2-rgb), .3), transparent 60%), linear-gradient(170deg, var(--rey) 0%, var(--rey-hondo) 75%); }
.arcos-fondo {
  position: absolute; left: 50%; bottom: -1px; width: max(130vw, 1100px); aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 999px 999px 0 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 100%, transparent 0 70px, rgba(255, 255, 255, .07) 70px 72px);
  -webkit-mask-image: radial-gradient(circle at 50% 100%, #000 30%, transparent 72%); mask-image: radial-gradient(circle at 50% 100%, #000 30%, transparent 72%);
}
.cabeza-2col, .cabecera-fila { display: grid; gap: 14px 56px; margin-bottom: clamp(34px, 5vw, 64px); align-items: end; }
.cabeza-2col .link-flecha, .cabecera-fila .link-flecha { margin-top: 18px; }
.grilla-2, .grilla-3, .grilla-4 { display: grid; gap: 24px; }
.split, .split-5-7 { display: grid; gap: 40px; align-items: start; }

/* == CABECERA INTERNA: título grande + piezas recortadas sobre el arco (versión liviana) == */
.cabeza { position: relative; overflow: clip; padding: calc(var(--header) + 46px) 0 clamp(60px, 7vw, 100px); background: var(--puntos), radial-gradient(900px 600px at 0% 0%, #fff, transparent 65%), linear-gradient(180deg, var(--azul-3), var(--azul-2)); }
.cabeza-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; }
.cabeza h1 { font-size: clamp(2.2rem, 1rem + 3.6vw, 4.4rem); line-height: 1.04; letter-spacing: -.045em; max-width: 18ch; }
.cabeza-collage { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 520 / 430; container-type: inline-size; }
.cabeza-collage .arco { left: 6%; right: -30%; top: 10%; bottom: -24%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.cabeza-collage .marco { --borde: clamp(4px, 1.4cqw, 8px); --radio: clamp(10px, 3cqw, 18px); }
.cabeza-collage .pieza-a { left: 0; top: 4%; width: 64%; z-index: 2; }
.cabeza-collage .pieza-b { right: 4%; top: 36%; width: 34%; z-index: 3; }
.cabeza-collage .pieza-c { left: 40%; top: 74%; z-index: 4; }
.cabeza-collage .sticker { font-size: clamp(.72rem, 2.6cqw, 1rem); }
.cabeza-video, .cabeza-media { display: none; }   /* cabeceras viejas: la pieza ahora va en .cabeza-collage */

/* Migas */
.migas { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 26px; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .03em; color: var(--apagado); }
.migas li { display: inline-flex; align-items: center; gap: 8px; }
.migas li + li::before { content: '/'; color: var(--claro-3); }
.migas a { color: var(--rey-link); }
.migas a:hover { text-decoration: underline; }

/* Chips, pastillas, iconos */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--linea); font-size: .86rem; font-weight: 600; color: var(--tinta-2); }
.bloque-rey .chip, .cielo .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .38); color: #fff; }
a.chip:hover { border-color: var(--rey-link); color: var(--rey-link); }
.pastilla { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: var(--azul-2); color: var(--rey-link); font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.icono-caja { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--azul-2); color: var(--rey); }
.lista-tilde li, .lista-check li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.lista-tilde li::before, .lista-check li::before { content: ''; position: absolute; left: 2px; top: .38em; width: 14px; height: 8px; border-left: 2.5px solid var(--rey); border-bottom: 2.5px solid var(--rey); transform: rotate(-45deg); }

/* == TARJETAS == */
/* Servicio: tarjeta blanca con la foto recortada que sobresale arriba */
.tarjeta-servicio {
  position: relative; display: flex; flex-direction: column; padding: 0 14px 22px; margin-top: 58px; border-radius: 24px;
  background: #fff; color: var(--tinta); box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .05), var(--sombra);
  transform: rotate(var(--r, 0deg)); transition: transform .45s var(--rebote), box-shadow .3s;
}
.tarjeta-servicio:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .05), 0 30px 60px -24px rgba(var(--hondo-rgb), .5); }
.tarjeta-foto { --borde: 6px; --radio: 16px; width: 80%; margin: -58px auto 4px; aspect-ratio: 4 / 3; transform: rotate(var(--fr, 0deg)); transition: transform .5s var(--rebote); }
.tarjeta-servicio:hover .tarjeta-foto { transform: rotate(0deg) scale(1.04); }
.tarjeta-foto.forma-arco { width: 72%; aspect-ratio: 4 / 4.2; }
.tarjeta-foto.forma-circulo { width: 62%; aspect-ratio: 1; box-shadow: 0 0 0 1px rgba(var(--rey-rgb), .15), var(--sombra); }
.tarjeta-foto.forma-pildora-h { width: 90%; aspect-ratio: 2 / 1; }
.tarjeta-num { margin: 14px 4px 0; font-family: var(--f-mono); font-weight: 600; font-size: .76rem; letter-spacing: .1em; color: var(--rey-link); }
.tarjeta-servicio h3 { margin: 4px 4px 8px; font-size: clamp(1.3rem, 1rem + .7vw, 1.6rem); line-height: 1.1; letter-spacing: -.03em; }
.tarjeta-servicio p { margin: 0 4px 16px; font-size: .96rem; line-height: 1.5; color: var(--tinta-2); }
.tarjeta-ir { margin: auto 4px 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-titulo); font-weight: 700; font-size: .92rem; color: var(--rey-link); }
.tarjeta-ir::after { content: '→'; transition: transform .3s var(--rebote); }
.tarjeta-servicio:hover .tarjeta-ir::after, .tarjeta-cta:hover .tarjeta-ir::after { transform: translateX(5px); }
/* Tarjeta llamado (azul rey) para cerrar una grilla */
.tarjeta-cta {
  display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 26px 24px; border-radius: 24px; color: #fff;
  background: radial-gradient(70% 60% at 30% 10%, rgba(255, 255, 255, .2), transparent 70%), linear-gradient(160deg, var(--rey-2), var(--rey) 55%, var(--rey-hondo));
  box-shadow: 0 0 0 4px #fff, var(--sombra); transform: rotate(var(--r, 0deg)); transition: transform .45s var(--rebote);
}
.tarjeta-cta:hover { transform: rotate(0deg) scale(1.03); }
.tarjeta-cta .mono { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-suave); }
.tarjeta-cta b { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); line-height: 1.15; letter-spacing: -.03em; }
.tarjeta-cta .tarjeta-ir { margin: 6px 0 0; color: #fff; }
/* Sistema: ícono + nombre + frase, con sello "Demo" */
.tarjeta-sistema { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; background: #fff; color: var(--tinta); box-shadow: 0 0 0 1px var(--linea), 0 14px 30px -20px rgba(var(--hondo-rgb), .45); transition: transform .35s var(--rebote), box-shadow .3s; }
.tarjeta-sistema:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 0 0 1px rgba(var(--rey-rgb), .3), 0 24px 44px -22px rgba(var(--hondo-rgb), .55); }
.tarjeta-sistema h3 { font-size: 1.12rem; line-height: 1.2; letter-spacing: -.02em; }
.tarjeta-sistema p { font-size: .94rem; color: var(--tinta-2); line-height: 1.45; }
.tarjeta-sistema small { font-size: .8rem; color: var(--apagado); }
.tarjeta-sistema .sticker { position: absolute; top: -10px; right: 16px; font-size: .72rem; font-family: var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
/* Blog: portada recortada + categoría + título */
.tarjeta-blog { display: flex; flex-direction: column; gap: 12px; color: var(--tinta); }
.tarjeta-blog .marco { --borde: 6px; aspect-ratio: 16 / 9; transform: rotate(var(--r, 0deg)); transition: transform .45s var(--rebote); }
.tarjeta-blog:hover .marco { transform: rotate(0deg) scale(1.02); }
.tarjeta-blog-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.tarjeta-blog-meta b { color: var(--rey-link); font-weight: 600; }
.tarjeta-blog h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -.02em; }
.tarjeta-blog:hover h3 { color: var(--rey-link); }
.tarjeta-blog p { font-size: .95rem; color: var(--tinta-2); }

/* Fila de servicio (/servicios): recorte grande + texto, alternando lados */
.filas-servicio { display: grid; gap: clamp(48px, 6vw, 84px); }
.fila-servicio { display: grid; gap: 26px; align-items: center; color: var(--tinta); }
.fila-servicio .marco { --borde: 8px; width: 100%; max-width: 460px; transform: rotate(var(--r, 0deg)); transition: transform .5s var(--rebote); }
.fila-servicio:hover .marco { transform: rotate(0deg) scale(1.02); }
.fila-servicio-foto { position: relative; }
.fila-servicio-foto .sticker { position: absolute; left: 6%; bottom: -12px; z-index: 2; }
.fila-servicio h2 { font-size: var(--t-l); line-height: 1.04; margin: 6px 0 14px; }
.fila-servicio p { color: var(--tinta-2); max-width: 52ch; }
.fila-servicio .chips { margin-top: 20px; }
.fila-servicio .forma-arco { aspect-ratio: 5 / 4.4; }
.fila-servicio .forma-circulo { max-width: 420px; margin-inline: auto; }
.fila-servicio .etiqueta { margin-bottom: 4px; }
.fila-servicio:hover h2 { color: var(--rey-link); }

/* == MOSAICO DE RUBROS == */
.mosaico { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; grid-auto-flow: dense; }
.mo { position: relative; overflow: hidden; isolation: isolate; display: block; border-radius: 18px; color: #fff; background: var(--rey); box-shadow: 0 14px 30px -18px rgba(var(--tinta-rgb), .55); }
.mo-grande { grid-column: span 2; grid-row: span 2; }
.mo-alto { grid-row: span 2; }
.mo-ancho { grid-column: span 2; }
.mo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--suave); }
.mo::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(var(--tinta-rgb), .3)); }
.mo:hover img, .mo.abierto img { transform: scale(1.07); }
.mo-nombre { position: absolute; left: 10px; bottom: 10px; z-index: 2; max-width: calc(100% - 20px); padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--tinta); font-family: var(--f-titulo); font-weight: 700; font-size: .82rem; line-height: 1.2; box-shadow: var(--sombra-sticker); transition: opacity .25s, transform .35s var(--suave); }
.mo:hover .mo-nombre, .mo:focus-visible .mo-nombre, .mo.abierto .mo-nombre { opacity: 0; transform: translateY(8px); }
.mo-capa {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 13px 13px 12px;
  background: linear-gradient(180deg, rgba(var(--rey2-rgb), .38) 0%, rgba(var(--rey-rgb), .86) 46%, rgba(var(--hondo-rgb), .97) 100%);
  clip-path: inset(100% 0 0 0); transition: clip-path .55s var(--suave);
}
.mo:hover .mo-capa, .mo:focus-visible .mo-capa, .mo.abierto .mo-capa { clip-path: inset(0 0 0 0); }
.mo-capa b { font-family: var(--f-titulo); font-weight: 800; font-size: 1rem; line-height: 1.1; letter-spacing: -.02em; }
.mo-capa small { margin: 5px 0 7px; font-family: var(--f-mono); font-weight: 600; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--azul-suave); }
.mo-capa ul { display: grid; gap: 4px; font-size: .8rem; line-height: 1.28; }
.mo-capa li { position: relative; padding-left: 15px; }
.mo-capa li::before { content: ''; position: absolute; left: 1px; top: .4em; width: 6px; height: 6px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
.mo-chico .mo-capa li:nth-child(n+2), .mo-chico .mo-capa small { display: none; }
.mo-chico .mo-capa ul { margin-top: 6px; }
.mo-ir { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-family: var(--f-titulo); font-weight: 700; font-size: .74rem; text-decoration: underline; text-underline-offset: 3px; }
.mo-cta { display: flex; flex-direction: column; justify-content: space-between; padding: 14px; background: radial-gradient(80% 60% at 20% 0%, rgba(255, 255, 255, .2), transparent 70%), linear-gradient(160deg, var(--rey-2), var(--rey-hondo)); color: #fff; }
.mo-cta::after { display: none; }
.mo-cta .mono { font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-suave); }
.mo-cta b { font-family: var(--f-titulo); font-weight: 800; font-size: .98rem; line-height: 1.18; letter-spacing: -.02em; }
.mo-cta i { font-style: normal; font-size: 1.4rem; transition: transform .3s var(--rebote); }
.mo-cta:hover i { transform: translateX(6px); }
.solo-tactil { display: none; }
@media (hover: none) { .solo-hover { display: none; } .solo-tactil { display: inline; } }

/* == CELULARES DE TRABAJOS (vidriera) == */
.vidriera { position: relative; overflow: clip; padding: clamp(80px, 10vw, 120px) 0; background: radial-gradient(800px 500px at 80% 100%, rgba(var(--rey2-rgb), .12), transparent 62%), var(--puntos), linear-gradient(180deg, var(--azul-2), var(--azul-1)); }
.vd-pegado { position: relative; }
.vd-fondo { position: absolute; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 0; white-space: nowrap; line-height: 1; }
.vd-fondo span { display: inline-block; font-family: var(--f-titulo); font-weight: 800; font-size: clamp(6rem, 19vw, 21rem); letter-spacing: -.05em; color: rgba(var(--rey-rgb), .06); will-change: transform; }
.vd-pista { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: 210px; gap: 34px 26px; align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margen); scrollbar-width: none; padding: 10px var(--margen) 40px; }
.vd-pista::-webkit-scrollbar { display: none; }
.vd-intro { grid-row: 1; grid-column: 1 / span 20; position: sticky; left: 0; width: min(100%, calc(100vw - 2 * var(--margen))); max-width: 460px; }
.vd-intro .bajada { margin: 16px 0 26px; }
.vd-hint { display: none; align-items: center; gap: 8px; margin-top: 26px; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rey-link); }
.vd-item, .obra-tel { grid-row: 2; position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 14px; scroll-snap-align: start; transform: translateY(calc(var(--y, 0px) * .5)) rotate(var(--r, 0deg)); }
.vd-item .tel, .obra-tel .telefono { width: 100%; }
.vd-item .sticker, .obra-tel .sticker { position: absolute; top: -12px; left: -12px; z-index: 3; font-size: .88rem; }
.vd-item:nth-of-type(even) .sticker, .obra-tel:nth-of-type(even) .sticker { left: auto; right: -12px; }
.vd-meta { margin: 18px 0 2px; text-align: center; font-size: .92rem; line-height: 1.35; color: var(--tinta-2); }
.vd-meta b { display: block; margin-bottom: 3px; font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rey-link); }
.vd-url { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-family: var(--f-mono); font-size: .74rem; color: var(--tinta); border-bottom: 1px solid rgba(var(--tinta-rgb), .2); }
.vd-url:hover { color: var(--rey-link); }
.vd-fin { grid-row: 2; align-self: center; scroll-snap-align: start; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 26px; border-radius: 999px 999px 26px 26px; color: #fff; background: radial-gradient(70% 50% at 40% 20%, rgba(255, 255, 255, .22), transparent 70%), linear-gradient(160deg, var(--rey-2), var(--rey) 55%, var(--rey-hondo)); box-shadow: 0 0 0 6px #fff, var(--sombra); transition: transform .4s var(--rebote); }
.vd-fin:hover { transform: rotate(-2deg) scale(1.03); }
.vd-fin .mono { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-suave); }
.vd-fin b { font-family: var(--f-titulo); font-weight: 800; font-size: 1.5rem; line-height: 1.05; letter-spacing: -.03em; }
.vd-nav { display: flex; gap: 10px; }
.vd-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--linea-2); background: #fff; color: var(--tinta); font-size: 1.1rem; }
.vd-nav button:hover { border-color: var(--rey); color: var(--rey); }
/* Escritorio: la vidriera del inicio se fija y el scroll la mueve en horizontal (lo activa main.js) */
.vidriera.vd-activa { padding: 0; }
.vd-activa .vd-pegado { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.vd-activa .vd-pista { display: flex; align-items: center; width: max-content; overflow: visible; gap: clamp(40px, 4vw, 64px); padding: 70px clamp(56px, 7vw, 120px) 0; will-change: transform; scroll-snap-type: none; }
.vd-activa .vd-intro { position: relative; flex: 0 0 430px; width: auto; }
.vd-activa .vd-item { flex: 0 0 clamp(200px, 29vh, 270px); margin-top: 0; transform: translateY(var(--y, 0px)) rotate(var(--r, 0deg)); }
.vd-activa .vd-hint { display: inline-flex; }
.vd-activa .vd-fin { flex: 0 0 clamp(220px, 30vh, 280px); }

/* == PASOS (postales con cinta adhesiva) == */
.pasos { position: relative; display: grid; gap: 22px; counter-reset: paso; }
.paso {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 16px; align-items: start;
  padding: 10px 14px 14px 10px; border-radius: 22px; background: #fff; color: var(--tinta);
  box-shadow: 0 24px 46px -26px rgba(var(--tinta-rgb), .55), 0 2px 0 rgba(var(--tinta-rgb), .05);
  transform: rotate(var(--r, 0deg)); transition: transform .45s var(--rebote);
}
.paso:hover { transform: rotate(0deg) translateY(-4px); }
.postal { grid-row: 1 / 4; position: relative; margin: 0; aspect-ratio: 3 / 4; }
.postal img, .postal video { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.adhesiva { position: absolute; top: -12px; left: 50%; z-index: 2; width: 74px; height: 24px; transform: translateX(-50%) rotate(-5deg); background: rgba(219, 231, 255, .85); box-shadow: 0 2px 6px rgba(var(--tinta-rgb), .15); clip-path: polygon(0 12%, 5% 0, 95% 0, 100% 14%, 97% 50%, 100% 86%, 95% 100%, 5% 100%, 0 88%, 3% 50%); }
.paso-num { display: block; margin: 6px 0 0; font-family: var(--f-titulo); font-weight: 800; font-size: 2.2rem; line-height: 1; letter-spacing: -.04em; color: var(--rey); }
.paso h3 { font-size: 1.2rem; line-height: 1.15; letter-spacing: -.02em; margin: 4px 0; }
.paso p { font-size: .93rem; line-height: 1.48; color: var(--tinta-2); }
/* Tarjetas blancas dentro de un bloque azul: el texto vuelve a tinta */
.bloque-rey .paso h3, .cielo .paso h3, .bloque-rey .tarjeta-sistema h3, .cielo .tarjeta-sistema h3, .bloque-rey .tarjeta-servicio h3, .cielo .tarjeta-servicio h3, .bloque-rey .tarjeta-blog h3 { color: var(--tinta); }
.cielo .paso p, .cielo .tarjeta-sistema p, .cielo .tarjeta-servicio p, .cielo .demo p { color: var(--tinta-2); }
.pasos-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: clamp(40px, 5vw, 64px); }

/* == ACORDEÓN (preguntas) == */
.acordeon details, .faq details { margin-bottom: 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .06), 0 16px 32px -22px rgba(var(--hondo-rgb), .45); overflow: hidden; }
.acordeon summary, .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 18px 22px; font-family: var(--f-titulo); font-weight: 700; font-size: 1.06rem; line-height: 1.3; letter-spacing: -.01em; color: var(--tinta); }
.acordeon summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.acordeon summary::after, .faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--azul-2); color: var(--rey); font-family: var(--f-mono); font-size: 1.3rem; font-weight: 500; transition: transform .3s var(--suave), background-color .25s, color .25s; }
.acordeon details[open] summary::after, .faq details[open] summary::after { content: '–'; background: var(--rey); color: #fff; }
.acordeon .acordeon-r, .faq .faq-r { padding: 0 22px 20px; color: var(--tinta-2); }
.acordeon-r p + p, .faq-r p + p, .acordeon-r ul, .faq-r ul { margin-top: 10px; }
.acordeon-r a, .faq-r a { color: var(--rey-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.acordeon-r li, .faq-r li { position: relative; padding-left: 20px; margin-top: 6px; }
.acordeon-r li::before, .faq-r li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--rey); transform: rotate(45deg); }

/* == CIERRE "¿Te dieron ganas?" (reutilizable: bloque_cierre() en bloques.php) == */
.cierre { position: relative; overflow: clip; color: #fff; text-align: center; padding: 210px 0 200px; background: radial-gradient(900px 620px at 88% 0%, rgba(255, 255, 255, .18), transparent 60%), radial-gradient(1000px 700px at 0% 100%, rgba(var(--hondo-rgb), .95), transparent 70%), linear-gradient(160deg, var(--rey-2), var(--rey) 50%, var(--rey-hondo)); }
.cierre-centro { display: flex; flex-direction: column; align-items: center; }
.t-cierre { color: #fff; font-size: clamp(3.3rem, 1.2rem + 8vw, 8.6rem); line-height: .94; letter-spacing: -.055em; margin: 0 0 clamp(30px, 3vw, 44px); }
.t-cierre > span { display: block; }
.t-cierre.largo { font-size: clamp(2.4rem, 1rem + 4.6vw, 5.4rem); line-height: 1; letter-spacing: -.045em; max-width: 16ch; }
.cierre .bajada { margin-inline: auto; max-width: 48ch; color: rgba(255, 255, 255, .9); }
.cierre-label { margin: 38px 0 14px; font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul-suave); }
.cierre-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 860px; margin: 0 auto; }
.cierre-chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 22px 22px 22px 6px; background: #fff; color: var(--tinta); font-weight: 600; font-size: .98rem; line-height: 1.25; text-align: left; box-shadow: 0 12px 26px -14px rgba(5, 15, 50, .6); transition: transform .35s var(--rebote), background-color .2s; }
.cierre-chips .ico { color: var(--wa-hondo); }
.cierre-chips a:hover { transform: translateY(-3px) rotate(-1.5deg); background: var(--azul-2); }
.cierre .botones { justify-content: center; margin-top: 34px; }
.cierre .btn-wa { border-color: #fff; }
.cierre-dato { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; font-size: .95rem; color: rgba(255, 255, 255, .85); }
.cierre-dato a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cierre-piezas { position: absolute; inset: 0; pointer-events: none; }
.cierre-piezas .capa { z-index: 1; }
.cierre-piezas .marco { --borde: 6px; }
.ci-a { left: -7%; top: 34px; width: 140px; }
.ci-b { right: 6%; top: 40px; width: 88px; }
.ci-b .tel { border-radius: 18px; padding: 5px; }
.ci-b .tel img { border-radius: 14px; }
.ci-b .tel::before { top: 9px; height: 5px; }
.ci-c { left: 4%; bottom: 26px; width: 110px; }
.ci-c .marco { aspect-ratio: 3 / 4; }
.ci-d { right: -6%; bottom: 30px; width: 170px; }

/* == PROSE (artículos del blog) == */
.prose { font-size: 1.08rem; line-height: 1.75; color: var(--texto); max-width: 70ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.12; margin-top: 2em; scroll-margin-top: calc(var(--header) + 20px); }
.prose h3 { font-size: 1.3rem; margin-top: 1.6em; }
.prose a { color: var(--rey-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 0; }
.prose li { position: relative; padding-left: 26px; margin-top: .5em; }
.prose ul > li::before { content: ''; position: absolute; left: 4px; top: .68em; width: 8px; height: 8px; border-radius: 2px; background: var(--rey); transform: rotate(45deg); }
.prose ol { counter-reset: item; }
.prose ol > li::before { counter-increment: item; content: counter(item); position: absolute; left: 0; top: .1em; font-family: var(--f-mono); font-size: .85em; font-weight: 600; color: var(--rey-link); }
.prose strong { color: var(--tinta); }
.prose blockquote { margin: 1.8em 0; padding: 22px 26px; border-radius: 0 18px 18px 0; border-left: 4px solid var(--rey); background: var(--azul-2); font-family: var(--f-titulo); font-weight: 600; font-size: 1.2rem; line-height: 1.45; color: var(--tinta); }
.prose img { border-radius: 16px; border: 6px solid #fff; box-shadow: var(--sombra); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--linea); text-align: left; }
.prose code { font-family: var(--f-mono); font-size: .9em; background: var(--azul-2); padding: 2px 6px; border-radius: 6px; }
.prose .art-cta-inline { padding: 24px; border-radius: 20px; background: linear-gradient(160deg, var(--rey-2), var(--rey-hondo)); color: #fff; }
.prose .art-cta-inline a { color: #fff; }
.prose .art-faq { padding: 22px 24px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--linea); }

/* == FORMULARIOS (presupuesto y contacto) == */
.form { display: grid; gap: 18px; }
.form-fila { display: grid; gap: 18px; }
.campo { display: grid; gap: 7px; }
.campo > span, .campo label, .form label > span { font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea, .form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .form select, .form textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--linea-2); background: #fff; color: var(--tinta); font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.campo textarea, .form textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--rey); box-shadow: 0 0 0 4px rgba(var(--rey-rgb), .15); }
.campo-ayuda { font-size: .85rem; color: var(--apagado); }
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--linea-2); background: #fff; font-weight: 600; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.opcion input:checked + span { border-color: var(--rey); background: var(--rey); color: #fff; }
.opcion input:focus-visible + span { outline: 3px solid var(--rey-link); outline-offset: 2px; }
.aviso { padding: 14px 18px; border-radius: 14px; background: var(--azul-2); color: var(--tinta); }
.aviso-error { background: #FBECE9; color: #8E2A23; }
.trampa { position: absolute; left: -9999px; }
.form-tarjeta { padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--linea), var(--sombra); }

/* == COMPATIBILIDAD v3 (mínima): piezas de las páginas internas que la fase 2 reemplaza. Ver SISTEMA.md == */
.ficha { display: block; padding: 26px; border-radius: 22px; background: #fff; color: var(--tinta); box-shadow: 0 0 0 1px var(--linea), 0 16px 34px -24px rgba(var(--hondo-rgb), .5); }
.ficha h3 { font-size: 1.15rem; margin: 10px 0 8px; }
.ficha p { color: var(--tinta-2); font-size: .96rem; }
.ficha-num { font-family: var(--f-mono); font-size: .76rem; font-weight: 600; letter-spacing: .1em; color: var(--rey-link); }
.con-lateral { display: grid; gap: 40px; align-items: start; }
.lateral { display: grid; gap: 18px; }
.lateral-cta, .lateral-caja { padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 16px 34px -24px rgba(var(--hondo-rgb), .5); }
.lateral-cta { display: grid; gap: 12px; color: #fff; background: linear-gradient(160deg, var(--rey-2), var(--rey-hondo)); }
.lateral-cta h3 { color: #fff; font-size: 1.3rem; }
.lateral-caja h2 { font-size: 1.1rem; margin-bottom: 14px; }
.declaraciones { display: grid; gap: 14px; counter-reset: dec; }
.declaraciones li { position: relative; padding-left: 56px; font-family: var(--f-titulo); font-weight: 700; font-size: 1.15rem; line-height: 1.35; color: var(--tinta); }
.declaraciones li::before { counter-increment: dec; content: '0' counter(dec); position: absolute; left: 0; top: 0; font-family: var(--f-mono); font-size: .85rem; color: var(--rey-link); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.filtro { padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--linea-2); background: #fff; font-weight: 600; font-size: .92rem; color: var(--tinta-2); }
.filtro.activo, .filtro[aria-pressed="true"] { background: var(--rey); border-color: var(--rey); color: #fff; }
.cita-grande { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.6rem); line-height: 1.2; letter-spacing: -.03em; color: var(--tinta); max-width: 30ch; }
.cifras { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cifra b { display: block; font-family: var(--f-titulo); font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -.05em; color: var(--rey); }
.cifra span { font-size: .92rem; color: var(--tinta-2); }
.cabeza-datos { display: grid; gap: 10px; }
.cabeza-datos li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: .95rem; }
.cabeza-datos li span:first-child { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.confianza { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: .92rem; font-weight: 600; color: var(--tinta-2); }

/* ══ INICIO ══ */
/* Portada collage */
.portada { position: relative; overflow: clip; padding: calc(var(--header) + 20px) 0 clamp(120px, 15vh, 180px); background: radial-gradient(900px 600px at 0% 0%, #fff 0%, rgba(255, 255, 255, 0) 65%), linear-gradient(180deg, var(--azul-3), var(--azul-2) 70%, var(--azul-1)); }
.portada-fondo { position: absolute; inset: 0; pointer-events: none; background: var(--puntos); -webkit-mask-image: linear-gradient(90deg, #000, transparent 55%); mask-image: linear-gradient(90deg, #000, transparent 55%); }
.portada-grid { display: flex; flex-direction: column; }
.portada-texto { display: contents; }
.portada .etiqueta { order: 1; }
.portada h1 { order: 2; margin-bottom: 4px; }
.collage { order: 3; }
.portada .botones { order: 4; margin-top: 18px; }
.portada .bajada { order: 5; margin-top: 26px; }
.checks { order: 6; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: .92rem; font-weight: 600; color: var(--tinta-2); }
.checks li { display: inline-flex; align-items: center; gap: 7px; }
.checks .ico { color: var(--rey); }
.portada .botones .btn { flex: 1 1 100%; }
.t-mega .ln { display: block; }
body:not(.sin-js) .t-mega .ln > span { display: inline-block; animation: sube .95s var(--suave) both; }
body:not(.sin-js) .t-mega .ln:nth-child(2) > span { animation-delay: .1s; }
body:not(.sin-js) .t-mega .ln:nth-child(3) > span { animation-delay: .2s; }
@keyframes sube { from { opacity: 0; transform: translateY(.45em) rotate(1.5deg); } }
body:not(.sin-js) .t-mega .resalte::before { animation: tira .6s var(--rebote) .55s both; transform-origin: 0 50%; }
@keyframes tira { from { transform: rotate(-2.5deg) scaleX(0); } }

.collage { position: relative; container-type: inline-size; width: 100%; max-width: 640px; margin: 18px auto 10px; aspect-ratio: 640 / 700; }
.collage .arco { left: -14%; right: -40%; top: 16%; bottom: 2%; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.collage .marco { --borde: clamp(4px, 1.25cqw, 8px); --radio: clamp(10px, 2.8cqw, 18px); }
.collage .sticker { font-size: clamp(.7rem, 2.5cqw, 1.02rem); }
.collage .sticker.mono { font-size: clamp(.58rem, 1.9cqw, .78rem); }
.c-video { left: 0; top: 9%; width: 62%; z-index: 2; }
.c-video video { object-position: 72% 50%; }
.c-tel { left: 61%; top: 0; width: 35%; z-index: 3; }
.c-tel .tel { border-radius: clamp(16px, 4.6cqw, 30px); padding: clamp(4px, 1.1cqw, 7px); }
.c-tel .tel img { border-radius: clamp(12px, 3.6cqw, 23px); }
.c-tel .tel::before { top: clamp(8px, 2.2cqw, 14px); height: clamp(4px, 1.1cqw, 7px); }
.c-arco { left: 4%; top: 53%; width: 30%; z-index: 4; }
.c-arco .marco { aspect-ratio: 3 / 4; }
.c-arco img { object-position: 42% 50%; }
.c-pildora { left: 37%; top: 59%; width: 21%; z-index: 5; }
.c-pildora .marco { aspect-ratio: 9 / 15.5; }
.c-pildora video { object-position: 40% 50%; }
.c-circulo { left: 62%; top: 69%; width: 26%; z-index: 6; }
.c-circulo img { object-position: 55% 50%; }
.c-aviso { left: 22%; top: 44%; width: 60%; z-index: 8; }
.c-s1 { left: -3%; top: 3%; z-index: 9; }
.c-s2 { left: 64%; top: 94%; z-index: 9; }
.c-s3 { left: 52%; top: 62.5%; z-index: 7; display: none; }
.aviso-wa { display: flex; align-items: center; gap: .7em; padding: .7em 1em .7em .7em; border-radius: 1.1em; font-size: clamp(.66rem, 2.25cqw, .95rem); line-height: 1.3; color: var(--tinta); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--sombra); transform: rotate(var(--r, 0deg)); }
.aviso-wa-icono { flex: none; width: 2.5em; height: 2.5em; border-radius: .7em; display: grid; place-items: center; background: var(--wa); color: #fff; }
.aviso-wa-icono .ico { width: 1.4em; height: 1.4em; }
.aviso-wa b { display: block; font-family: var(--f-mono); font-weight: 600; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: var(--rey-link); margin-bottom: .15em; }

/* Cintas cruzadas: azul y blanca, nunca amarillas */
.cintas { position: relative; z-index: 5; height: clamp(150px, 15vw, 220px); margin: clamp(-150px, -10vw, -84px) 0 clamp(-90px, -6vw, -40px); overflow: clip; pointer-events: none; }
.cinta { position: absolute; left: -12vw; width: 124vw; top: 50%; padding: clamp(11px, 1.1vw, 16px) 0; transform: translateY(-50%) rotate(var(--r)); pointer-events: auto; box-shadow: 0 16px 30px -14px rgba(var(--tinta-rgb), .45); }
.cinta-blanca { --r: -4deg; background: #fff; color: var(--rey); z-index: 2; box-shadow: inset 0 0 0 1px rgba(var(--rey-rgb), .1), 0 16px 30px -14px rgba(var(--tinta-rgb), .4); }
.cinta-rey { --r: 3deg; background: var(--rey); color: #fff; z-index: 1; }
.cinta-pista { display: flex; width: max-content; will-change: transform; }
.cinta-pista span { display: inline-flex; align-items: center; gap: .9em; padding-right: .9em; white-space: nowrap; font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1rem, .8rem + .9vw, 1.6rem); letter-spacing: -.01em; text-transform: uppercase; }
.cinta-pista span::after { content: ''; width: .4em; height: .4em; border-radius: 2px; transform: rotate(45deg); background: var(--azul-1); }
.cinta-rey .cinta-pista span::after { background: rgba(255, 255, 255, .45); }
.cinta-pista .cinta-tag { font-family: var(--f-mono); font-size: clamp(.68rem, .6rem + .3vw, .84rem); letter-spacing: .12em; color: var(--azul-suave); }

/* Servicios del inicio */
.mesa { background: var(--puntos), radial-gradient(900px 520px at 88% 8%, rgba(var(--rey2-rgb), .14), transparent 62%), radial-gradient(760px 600px at 0% 92%, rgba(var(--rey2-rgb), .1), transparent 60%), var(--azul-3); }
.servicios-inicio { padding-top: clamp(120px, 13vw, 190px); }
.sv-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--margen)); padding: 12px var(--margen) 38px; }
.sv-grid::-webkit-scrollbar { display: none; }
.sv-grid > * { flex: 0 0 min(76%, 300px); scroll-snap-align: center; }
.sv-grid > .tarjeta-servicio { margin-top: 58px; }

/* Manifiesto: titular blanco con fotos adentro */
.mf-texto { max-width: 1240px; margin: 0 0 clamp(44px, 6vw, 84px); line-height: 1.12; }
.mf-palabra { white-space: nowrap; }
.mf-media { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; position: relative; top: -.05em; height: .96em; width: 2.1em; max-width: 2.1em; margin: 0 .06em; overflow: hidden; border-radius: 999px; background: #fff; box-shadow: 0 0 0 .05em #fff, 0 .12em .3em rgba(var(--tinta-rgb), .35); }
.mf-media > video, .mf-media > img { width: 100%; height: 100%; object-fit: cover; }
.mf-media.forma-circulo { width: .96em; max-width: .96em; aspect-ratio: auto; border-radius: 50%; }
.mf-wa { width: auto; max-width: 3em; padding: 0 .28em 0 .2em; gap: .1em; color: var(--tinta); }
.mf-wa .ico { width: .5em; height: .5em; color: var(--wa-hondo); }
.mf-wa b { font-size: .36em; letter-spacing: -.02em; }
body:not(.sin-js) .mf-media { max-width: 0; margin: 0; box-shadow: none; transition: max-width 1.1s var(--suave), margin 1.1s var(--suave), box-shadow .6s .6s; }
body:not(.sin-js) .mf-texto.visible .mf-media { max-width: 3em; margin: 0 .06em; box-shadow: 0 0 0 .05em #fff, 0 .12em .3em rgba(var(--tinta-rgb), .35); }
body:not(.sin-js) .mf-texto.visible .mf-media:nth-of-type(2) { transition-delay: .25s; }
body:not(.sin-js) .mf-texto.visible .mf-media:nth-of-type(3) { transition-delay: .5s; }
.mf-pie { display: grid; gap: 30px; align-items: center; }
.mf-cifras { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 16px; }

/* Sistemas y demos */
.si-grid { display: grid; gap: 22px; }
.si-info .bajada { margin-top: 0; }
.si-grupos { margin: 24px 0 4px; }
.si-demos { display: grid; gap: 22px; margin-top: 34px; }
.demo { position: relative; display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 9px; border-radius: 20px; background: #fff; color: var(--tinta); box-shadow: 0 30px 50px -24px rgba(5, 15, 50, .6); transform: rotate(var(--r, 0deg)); transition: transform .45s var(--rebote); }
.demo:hover, .demo:focus-visible { transform: rotate(0deg) scale(1.03); z-index: 6; }
.demo .marco { --borde: 0px; --radio: 13px; box-shadow: none; aspect-ratio: 1; grid-row: 1 / 3; }
.demo-tag { position: absolute; top: -12px; right: 16px; z-index: 2; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.demo-txt { display: block; align-self: end; padding-top: 8px; }
.demo-txt b { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; line-height: 1.15; }
.demo-txt span { display: block; margin-top: 4px; font-size: .88rem; color: var(--tinta-2); line-height: 1.35; }
.demo-ir { align-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--f-titulo); font-weight: 700; font-size: .9rem; color: var(--rey-link); }
.demo-ir::after { content: '→'; }

/* Dónde trabajamos: postales */
.co-grid { display: grid; gap: 50px; align-items: center; }
.co-provincias { margin: 26px 0 24px; max-width: 62ch; font-family: var(--f-titulo); font-weight: 600; font-size: .98rem; line-height: 1.85; color: var(--tinta-2); }
.co-paises { display: flex; flex-wrap: wrap; gap: 12px; }
.co-paises .sticker { font-size: .9rem; }
.postales { position: relative; width: 100%; max-width: 620px; margin-inline: auto; aspect-ratio: 1 / .92; container-type: inline-size; }
.postal-foto { position: absolute; margin: 0; padding: clamp(5px, 1.3cqw, 9px) clamp(5px, 1.3cqw, 9px) clamp(22px, 5.4cqw, 34px); border-radius: 6px; background: #fff; box-shadow: var(--sombra); transform: rotate(var(--r, 0deg)); transition: transform .45s var(--rebote); }
.postal-foto:hover { transform: rotate(0deg) scale(1.04); z-index: 9; }
.postal-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.postal-foto figcaption { position: absolute; left: clamp(7px, 2cqw, 13px); bottom: clamp(5px, 1.4cqw, 9px); font-family: var(--f-mono); font-weight: 600; font-size: clamp(.58rem, 1.9cqw, .74rem); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); }
.p1 { left: 0; top: 3%; width: 47%; z-index: 2; }
.p2 { left: 51%; top: 0; width: 45%; z-index: 1; }
.p3 { left: 23%; top: 33%; width: 52%; z-index: 4; }
.p4 { left: 1%; top: 63%; width: 40%; z-index: 3; }
.p5 { left: 57%; top: 57%; width: 42%; z-index: 5; }
.sello { position: absolute; right: 2%; top: 37%; z-index: 6; padding: .6em .8em; transform: rotate(9deg); font-family: var(--f-mono); font-weight: 600; font-size: clamp(.6rem, 2cqw, .78rem); line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--rey); background: rgba(255, 255, 255, .92); border: 2px dashed var(--rey); border-radius: 8px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .9); }

/* Preguntas */
.pr-grid { display: grid; gap: 40px; }
.pr-foto { position: relative; margin: 30px 0 0; max-width: 420px; }
.pr-foto .marco { display: block; aspect-ratio: 16 / 11; }
.pr-sticker { position: absolute; right: -8px; bottom: 26px; font-size: .95rem; }
.pr-sticker .ico { color: inherit; }
.etiqueta .marca-icono { width: 20px; height: 20px; }
.pr-lista .link-flecha { margin-top: 14px; }

/* == FOOTER == */
.site-footer { position: relative; overflow: clip; padding: clamp(64px, 8vw, 100px) 0 22px; background: radial-gradient(800px 520px at 100% 0%, rgba(var(--rey2-rgb), .16), transparent 62%), var(--puntos), var(--azul-1); color: var(--tinta); }
.pie-cols { display: grid; gap: 34px 24px; grid-template-columns: 1fr 1fr; }
.pie-marca { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pie-marca p { max-width: 40ch; color: var(--tinta-2); font-size: .98rem; }
.pie-redes { display: flex; gap: 8px; }
.pie-redes a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--rey); box-shadow: 0 0 0 1px var(--linea); transition: transform .3s var(--rebote); }
.pie-redes a:hover { transform: translateY(-3px); }
.pie-label { margin: 0 0 10px; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rey-link); }
.pie-cols ul { display: grid; gap: 9px; font-size: .96rem; }
.pie-cols a { color: var(--tinta); font-weight: 500; }
.pie-cols a:hover { color: var(--rey-link); text-decoration: underline; }
.pie-cols span { color: var(--tinta-2); }
.pie-contacto { display: grid; gap: 10px; justify-items: start; font-size: .96rem; }
.pie-contacto .ico { color: var(--wa-hondo); }
.pie-contacto a { display: inline-flex; align-items: center; gap: 6px; }
.pie-gigante { margin: clamp(44px, 6vw, 80px) 0 0; padding: 0 var(--margen); text-align: center; font-family: var(--f-titulo); font-weight: 800; line-height: .86; letter-spacing: -.055em; white-space: nowrap; font-size: 13.4vw; color: rgba(var(--rey-rgb), .16); }
.pie-gigante span { display: block; }
.pie-gigante span + span { color: var(--rey); }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: .85rem; color: var(--tinta-2); }
.pie-legal button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font-weight: 600; color: var(--tinta); }
.pie-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie-legal-links a { color: var(--tinta-2); text-decoration: underline; text-decoration-color: rgba(var(--rey-rgb), .35); text-underline-offset: 3px; }
.pie-legal-links a:hover { color: var(--rey-link); }
.wa-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 110; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--wa-hondo); box-shadow: var(--sombra); }

/* == REVEAL (sin JS todo queda visible) == */
body:not(.sin-js) .reveal { opacity: 0; translate: 0 30px; transition: opacity .8s var(--suave), translate .8s var(--suave), transform .45s var(--rebote), box-shadow .3s; }
body:not(.sin-js) .reveal.visible { opacity: 1; translate: 0 0; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }

/* ══ TABLET ≥ 760 ══ */
@media (min-width: 760px) {
  .portada .botones .btn { flex: 0 0 auto; }
  .cabeza-2col, .cabecera-fila { grid-template-columns: 1.1fr .9fr; }
  .grilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-pie { grid-template-columns: minmax(0, 1fr) auto; gap: 60px; }
  .mosaico { grid-auto-rows: 190px; }
  .mo-chico .mo-capa li:nth-child(n+2) { display: block; }
  .mo-chico .mo-capa small { display: block; }
  .mo-chico .mo-capa ul { margin-top: 0; }
  .mo-capa { padding: 16px 16px 14px; }
  .mo-capa b { font-size: 1.15rem; }
  .mo-capa ul { font-size: .86rem; gap: 5px; }
  .mo-nombre { font-size: .9rem; left: 12px; bottom: 12px; padding: 7px 14px; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .paso { display: block; padding: 12px 12px 22px; }
  .postal { aspect-ratio: 4 / 3; }
  .paso-num { font-size: 3rem; margin: 18px 8px 4px; }
  .paso h3 { margin: 0 8px 8px; font-size: 1.3rem; }
  .paso p { margin: 0 8px; }
  .adhesiva { width: 92px; height: 28px; top: -14px; }
  .si-demos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 54px; }
  .demo { display: block; padding: 9px 9px 18px; }
  .demo .marco { aspect-ratio: 16 / 10; }
  .demo-txt { padding: 14px 8px 0; }
  .demo-txt b { font-size: 1.15rem; }
  .demo-ir { margin: 10px 8px 0; }
  .demo:nth-child(2) { margin-top: 34px; }
  .fila-servicio { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
  .fila-servicio:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .fila-servicio:nth-child(even) .fila-servicio-foto .marco { margin-left: auto; }
  .fila-servicio:nth-child(even) .fila-servicio-foto { order: 2; }
  .pie-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ci-a { width: 180px; left: -3%; top: 50px; }
  .ci-b { width: 110px; top: 44px; }
  .ci-c { left: 4%; bottom: 40px; width: 150px; }
  .ci-d { width: 230px; bottom: 50px; }
  .cierre { padding: 260px 0; }
}

/* ══ ESCRITORIO ≥ 1040 ══ */
@media (min-width: 1040px) {
  .barra-links { display: flex; }
  .btn-menu { display: none; }
  .barra-acciones { margin-left: 4px; }
  .grilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; }
  .pegado { position: sticky; top: calc(var(--header) + 26px); align-self: start; }
  .con-lateral { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; }
  .lateral { position: sticky; top: calc(var(--header) + 26px); }
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu-total-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; }

  .portada { min-height: 100vh; display: flex; align-items: center; padding-top: calc(var(--header) + 30px); }
  .portada-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 40px; align-items: center; }
  .portada-texto { display: block; position: relative; z-index: 2; }
  .portada .bajada { margin-top: 26px; }
  .collage { margin: 0 0 0 auto; }
  .collage .arco { bottom: -40%; -webkit-mask-image: none; mask-image: none; }
  .c-s3 { display: block; }

  .cabeza-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; }
  .cabeza-collage { margin: 0 0 0 auto; }

  .sv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; overflow: visible; margin: 0; padding: 0; }
  .sv-grid > :nth-child(even) { margin-top: 102px; margin-bottom: -44px; }
  .sv-grid > .tarjeta-cta { align-self: center; }

  .si-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 0 70px; align-items: end; }
  .si-demos { grid-column: 1 / -1; gap: 34px; margin-top: 70px; }

  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(196px, 15.5vw, 232px); gap: 12px; }
  .mo-capa { padding: 18px 18px 16px; }
  .mo-grande .mo-capa, .mo-ancho .mo-capa { padding: 26px; }
  .mo-grande .mo-capa b, .mo-ancho .mo-capa b { font-size: 1.6rem; }
  .mo-grande .mo-capa ul, .mo-ancho .mo-capa ul { font-size: .98rem; gap: 7px; }
  .mo-grande .mo-ir, .mo-ancho .mo-ir { font-size: .9rem; }
  .mo-ir { font-size: .82rem; }
  .mo-cta { padding: 20px; }
  .mo-cta b { font-size: 1.15rem; }

  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
  .pasos::before { content: ''; position: absolute; left: 4%; right: 4%; top: 30%; height: 3px; background: repeating-linear-gradient(90deg, currentColor 0 12px, transparent 12px 22px); opacity: .35; }
  .paso:nth-child(even) { margin-top: 76px; }

  .co-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 60px; }
  .pr-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; }
  .pr-lado { position: sticky; top: 110px; align-self: start; }
  .pr-foto .marco { aspect-ratio: 4 / 3.6; }

  .cierre { min-height: 100vh; display: flex; align-items: center; padding: 150px 0; }
  .cierre > .container { width: 100%; }
  .t-cierre { font-size: clamp(5rem, 2rem + 6.6vw, 8.4rem); }
  .t-cierre.largo { font-size: clamp(3rem, 1.2rem + 3.6vw, 5.2rem); }
  .ci-a { left: 3%; top: 10%; width: clamp(170px, 14vw, 230px); }
  .ci-b { right: 7%; top: 7%; width: clamp(110px, 9vw, 145px); }
  .ci-c { left: 7%; bottom: 8%; width: clamp(150px, 12vw, 190px); }
  .ci-d { right: 3%; bottom: 10%; width: clamp(230px, 19vw, 300px); }

  .pie-cols { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.15fr; }
  .pie-marca { grid-column: auto; }
  .pie-gigante { font-size: 7.1vw; }
  .pie-gigante span { display: inline; }
}
@media (min-width: 1040px) and (max-height: 760px) { .portada { min-height: 0; } }

/* == REDUCIR MOVIMIENTO: todo quieto, todo visible == */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  body:not(.sin-js) .reveal { opacity: 1; translate: none; }
  body:not(.sin-js) .mf-media { max-width: 3em; margin: 0 .06em; }
  .menu-total { clip-path: none; }
}

/* ══ Ajustes compartidos (los marcaron los tres grupos de la fase 2, 15-oct-2026) ══ */
/* Tilde de .lista-check dentro del texto largo y del acordeón (el rombo de los li le ganaba) */
.prose ul.lista-check > li, .acordeon-r .lista-check li, .faq-r .lista-check li { padding-left: 36px; }
.prose ul.lista-check > li::before, .acordeon-r .lista-check li::before, .faq-r .lista-check li::before {
  left: 0; top: .2em; width: 24px; height: 24px; border: 0; border-radius: 50%; transform: none;
  background: var(--azul-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B55D0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") 50% 50% / 13px no-repeat;
}
/* <ol class="pasos"> dentro de un texto (blog, variaciones, servicios-data) no es la grilla de postales de bloque_pasos() */
.prose ol.pasos { display: block; gap: 0; grid-template-columns: none; }
.prose ol.pasos::before { content: none; }
/* Columna con lateral: una tabla ancha no empuja la página en el celular */
.con-lateral > * { min-width: 0; }

/* ══════ Rediseño v4 · contenido ══════ */
/* ============================================================
   Rediseño v4 "Collage vivo" · fase 2 · grupo CONTENIDO
   /blog · /blog/{slug} · /presupuesto · /contacto · /zonas (+ provincia, país y localidad) · páginas por localidad
   Usa los tokens y componentes de style.css (ver _fuentes/prototipos/concepto-c/SISTEMA.md).
   Prefijos propios: ct- (piezas comunes), blog-, art-, presu-, contacto-, zn- (zonas), loc- (páginas por localidad).
   Color sobrio: blanco y azul muy claro de base, azul rey como único fuerte, amarillo solo en el botón principal
   y en una palabra resaltada.
   ============================================================ */

/* ── Piezas comunes ─────────────────────────────────────── */
/* Buscador en píldora (blog y zonas) */
.ct-buscar, .zn-buscador {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 540px; margin-top: 30px;
  padding: 6px 6px 6px 18px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px var(--linea), 0 18px 36px -22px rgba(var(--hondo-rgb), .55); transition: box-shadow .25s;
}
.zn-buscador { padding-right: 18px; }
.ct-buscar > .ico, .zn-buscador > .ico { flex: none; color: var(--rey); }
.ct-buscar input, .zn-buscador input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: none; outline: none; font-size: 1rem; color: var(--tinta); }
.ct-buscar input::placeholder, .zn-buscador input::placeholder { color: var(--apagado); }
.ct-buscar input::-webkit-search-cancel-button { cursor: pointer; }
.ct-buscar:focus-within, .zn-buscador:focus-within { box-shadow: 0 0 0 2px var(--rey), 0 0 0 6px rgba(var(--rey-rgb), .14), 0 18px 36px -22px rgba(var(--hondo-rgb), .55); }
.ct-buscar .btn { flex: none; }
/* Resultados del buscador de localidades (los arma main.js) */
.buscador-resultados {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30; display: none; max-height: 340px; overflow-y: auto;
  padding: 6px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 30px 60px -20px rgba(var(--hondo-rgb), .55);
}
.buscador-resultados.visible { display: block; }
.buscador-resultados a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 14px; border-radius: 14px; font-weight: 600; color: var(--tinta); }
.buscador-resultados a small { font-family: var(--f-mono); font-size: .7rem; font-weight: 500; color: var(--apagado); text-align: right; }
.buscador-resultados a:hover, .buscador-resultados a.sel { background: var(--azul-2); color: var(--rey-link); }
.buscador-resultados p { padding: 12px 14px; font-size: .95rem; color: var(--tinta-2); }

/* Pastillas de categorías (blog): en el celular corren de costado */
.ct-temas {
  display: flex; gap: 8px; margin: 0 calc(-1 * var(--margen)) clamp(28px, 4vw, 48px); padding: 4px var(--margen) 20px;
  overflow-x: auto; scrollbar-width: none;
}
.ct-temas::-webkit-scrollbar { display: none; }
.ct-tema {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px 8px 16px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px var(--linea); font-weight: 600; font-size: .95rem; color: var(--tinta-2); white-space: nowrap;
  transition: box-shadow .2s, color .2s, background-color .2s;
}
.ct-tema small { padding: 2px 8px; border-radius: 999px; background: var(--azul-2); font-family: var(--f-mono); font-size: .7rem; font-weight: 600; color: var(--rey-link); }
.ct-tema:hover { box-shadow: 0 0 0 1.5px var(--rey); color: var(--rey-link); }
.ct-tema.activo { background: var(--rey); color: #fff; box-shadow: 0 4px 0 var(--rey-hondo), 0 12px 22px -12px rgba(var(--rey-rgb), .8); }
.ct-tema.activo small { background: rgba(255, 255, 255, .2); color: #fff; }

/* Páginas del listado */
.ct-paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(60px, 7vw, 96px); }
.ct-paginas a, .ct-paginas span {
  display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px var(--linea); font-family: var(--f-mono); font-weight: 600; color: var(--tinta); transition: box-shadow .2s, color .2s;
}
.ct-paginas a:hover { box-shadow: 0 0 0 1.5px var(--rey); color: var(--rey-link); }
.ct-paginas span[aria-current] { background: var(--rey); color: #fff; box-shadow: 0 4px 0 var(--rey-hondo); }

.ct-vacio { display: grid; justify-items: center; gap: 14px; max-width: 640px; margin: 0 auto; padding: 48px 28px; text-align: center; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--linea), var(--sombra); }
.ct-vacio .link-flecha { margin-top: 4px; }

/* Arcos azules de las piezas propias: asoman arriba de la foto y se esfuman abajo */
.blog-destacada-foto .arco, .art-portada .arco, .loc-collage .arco, .presu-mesa .arco, .contacto-mesa .arco {
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 94%); mask-image: linear-gradient(180deg, #000 52%, transparent 94%);
}

/* ── /blog ──────────────────────────────────────────────── */
.blog-lista { padding-top: clamp(56px, 7vw, 90px); }
/* El último artículo, grande, con la portada sobre el arco */
.blog-destacada { display: grid; gap: 30px; align-items: center; margin-bottom: clamp(70px, 9vw, 120px); color: var(--tinta); }
.blog-destacada-foto { position: relative; padding: 13% 8% 4% 0; }
.blog-destacada-foto .arco { left: 28%; right: 0; top: 0; bottom: 0; }
.blog-destacada .marco { --borde: 8px; aspect-ratio: 16 / 9; z-index: 1; transition: transform .5s var(--rebote); }
.blog-destacada:hover .marco { transform: rotate(0deg) scale(1.02); }
.blog-destacada-foto .sticker { position: absolute; z-index: 2; left: -6px; top: 8%; }
.blog-destacada h2 { margin: 16px 0 14px; font-size: clamp(1.75rem, 1rem + 2.3vw, 3rem); line-height: 1.06; letter-spacing: -.04em; transition: color .2s; }
.blog-destacada:hover h2 { color: var(--rey-link); }
.blog-destacada p { max-width: 50ch; font-size: 1.08rem; color: var(--tinta-2); }
/* Grilla de tarjetas (.tarjeta-blog del sistema) */
.blog-grilla { display: grid; gap: 52px 30px; }
.blog-grilla .tarjeta-blog p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── /blog/{slug} ───────────────────────────────────────── */
.art-progreso { position: fixed; left: 0; right: 0; top: 0; z-index: 101; height: 4px; pointer-events: none; }
.art-progreso i { display: block; height: 100%; background: linear-gradient(90deg, var(--rey-2), var(--rey)); transform: scaleX(0); transform-origin: 0 50%; }
.art-cabeza > .container, .art-cuerpo > .container { max-width: calc(1080px + 2 * var(--margen)); }
.art-cabeza h1 { max-width: 22ch; font-size: clamp(1.95rem, 1rem + 2.3vw, 3.1rem); line-height: 1.07; }
.art-cabeza .migas li:last-child { min-width: 0; max-width: 100%; }
.art-cabeza .migas li:last-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-cabeza .etiqueta:hover { text-decoration: underline; text-underline-offset: 4px; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.art-meta > span { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--linea); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .02em; color: var(--tinta-2); }
.art-portada { position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding: 13% 7% 6% 0; }
.art-portada .arco { left: 26%; right: 0; top: 0; bottom: 0; }
.art-portada .marco { aspect-ratio: 16 / 9; z-index: 1; }
.art-portada .sticker { position: absolute; z-index: 2; right: 2%; bottom: 3%; }

.art-cuerpo { padding-top: clamp(56px, 7vw, 96px); }
.art-compartir .chips .chip { min-height: 40px; }
.art-rel .cabeza-2col > .link-flecha { justify-self: start; margin-top: 0; }
.art-indice ol { display: grid; counter-reset: ia; }
.art-indice li + li { border-top: 1px solid var(--linea); }
.art-indice a { counter-increment: ia; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding: 9px 0; font-size: .92rem; line-height: 1.35; color: var(--tinta-2); transition: color .2s; }
.art-indice a::before { content: counter(ia, decimal-leading-zero); padding-top: 2px; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; color: var(--apagado); transition: color .2s; }
.art-indice a:hover, .art-indice a.activo { color: var(--rey-link); }
.art-indice a.activo { font-weight: 700; }
.art-indice a.activo::before { color: var(--rey); }

/* ── Páginas legales (/terminos-y-condiciones, /politica-de-cookies): reusan el artículo ── */
.lg-cabeza h1 { text-wrap: balance; }
.lg-collage .sticker { white-space: nowrap; }
.prose.lg-resumen { max-width: none; margin-bottom: clamp(30px, 4vw, 52px); padding: 24px 24px 20px; border-radius: 22px; background: var(--azul-2); box-shadow: inset 0 0 0 1px rgba(var(--rey-rgb), .12); transform: rotate(-.3deg); }
.art-cuerpo .lg-resumen > .etiqueta:first-child { margin-bottom: 4px; font-size: .76rem; line-height: 1.4; color: var(--rey-link); }   /* le gana a «.art-cuerpo .prose > p:first-child» */
.lg-resumen ul.lista-check > li { font-weight: 600; color: var(--tinta); }
.lg-cuerpo .art-indice a { padding-block: 7px; }
@media (min-width: 760px) { .lg-resumen ul.lista-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; } }
@media (max-width: 1039px) { .lg-cuerpo .lateral { order: -1; } }   /* en el celular, el índice antes del texto */
/* Tablas de cookies en el celular: cada fila es una ficha (nombre, para qué sirve y cuánto dura) */
@media (max-width: 599px) {
  .lg-cuerpo .ct-prose :is(table, tbody, tr, td) { display: block; }
  .lg-cuerpo .ct-prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lg-cuerpo .ct-prose td { padding: 2px 18px; border-top: 0; }
  .lg-cuerpo .ct-prose td:first-child { padding-top: 16px; border-top: 1px solid var(--linea); }
  .lg-cuerpo .ct-prose tr:first-child td:first-child { border-top: 0; }
  .lg-cuerpo .ct-prose td:last-child { padding-bottom: 16px; font-size: .9rem; }
  .lg-cuerpo .ct-prose td:nth-child(3)::before { content: 'Dura: '; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rey-link); }
}
.ct-prose .lg-leyenda { margin-top: 1.4em; padding: 18px 20px; border-left: 4px solid var(--rey); border-radius: 4px 14px 14px 4px; background: var(--azul-3); font-size: .86rem; line-height: 1.6; color: var(--tinta-2); }
.ct-prose td code { white-space: nowrap; font-size: .82em; }
.lg-otra { display: grid; gap: 4px; transition: transform .3s var(--rebote), box-shadow .2s; }
.lg-otra .mono { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rey-link); }
.lg-otra b { font-family: var(--f-titulo); font-size: 1.15rem; letter-spacing: -.01em; color: var(--tinta); }
.lg-otra b::after { content: ' →'; color: var(--rey); }
.lg-otra span:last-child { font-size: .92rem; line-height: 1.45; color: var(--tinta-2); }
.lg-otra:hover { transform: translateY(-2px) rotate(-.6deg); box-shadow: 0 0 0 1.5px var(--rey-link), 0 16px 34px -24px rgba(var(--hondo-rgb), .5); }

/* ── Texto largo (artículos y páginas por localidad): cubre lo que traen las bases ── */
:is(.art-cuerpo, .loc-cuerpo) .con-lateral > * { min-width: 0; }
.ct-prose { font-size: clamp(1.03rem, .98rem + .3vw, 1.1rem); line-height: 1.75; }
.art-cuerpo .prose { margin-inline: auto; counter-reset: h2n; }
.art-cuerpo .prose > p:first-child { font-size: clamp(1.18rem, 1.05rem + .4vw, 1.32rem); line-height: 1.6; color: var(--tinta); }
.ct-prose > h2 { margin-top: 2.1em; font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.3rem); line-height: 1.1; letter-spacing: -.035em; }
.art-cuerpo .prose > h2 { counter-increment: h2n; }
.art-cuerpo .prose > h2::before {
  content: counter(h2n, decimal-leading-zero); display: block; width: max-content; margin-bottom: 14px; padding: 4px 11px; border-radius: 999px;
  background: var(--azul-1); font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .1em; color: var(--rey-link);
}
.ct-prose > h3 { margin-top: 1.7em; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem); letter-spacing: -.02em; }
.ct-prose > h2 + *, .ct-prose > h3 + * { margin-top: .7em; }
/* Lista con tilde */
.ct-prose ul.lista-check > li { padding-left: 36px; margin-top: .7em; }
.ct-prose ul.lista-check > li::before {
  left: 0; top: .2em; width: 24px; height: 24px; border: 0; border-radius: 50%; transform: none;
  background: var(--azul-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B55D0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
/* Pasos numerados (ol.pasos del contenido): filas con número grande. Anula la grilla de postales de bloque_pasos() */
.ct-prose ol.pasos { display: block; gap: 0; grid-template-columns: none; counter-reset: pp; border-top: 1px solid var(--linea-2); }
.ct-prose ol.pasos::before { content: none; }
.ct-prose ol.pasos > li { counter-increment: pp; min-height: 76px; margin: 0; padding: 20px 0 20px 72px; border-bottom: 1px solid var(--linea-2); }
.ct-prose ol.pasos > li::before {
  content: counter(pp, decimal-leading-zero); left: 0; top: 18px; font-family: var(--f-titulo); font-weight: 800; font-size: 2.3rem; line-height: 1;
  letter-spacing: -.05em; color: var(--rey);
}
.ct-prose ol.pasos strong { display: block; margin-bottom: 2px; font-family: var(--f-titulo); font-size: 1.06rem; letter-spacing: -.01em; }
/* Cita: tarjeta blanca apenas girada, con comillas grandes */
.ct-prose blockquote {
  position: relative; margin: 2.2em 0 2em; padding: 34px 28px 26px 30px; border: 0; border-left: 5px solid var(--rey); border-radius: 6px 22px 22px 6px;
  background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 22px 44px -28px rgba(var(--hondo-rgb), .55);
  font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); line-height: 1.4; letter-spacing: -.015em; color: var(--tinta);
  transform: rotate(-.6deg);
}
.ct-prose blockquote::before { content: '“'; position: absolute; right: 22px; top: -30px; font-family: var(--f-titulo); font-size: 5.4rem; font-weight: 800; line-height: 1; color: var(--rey); }
.ct-prose blockquote p + p { margin-top: .6em; }
/* Tablas */
.ct-prose table {
  width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px var(--linea), 0 16px 34px -24px rgba(var(--hondo-rgb), .45); font-size: .95rem; line-height: 1.5;
}
.ct-prose th { padding: 14px 16px; border: 0; background: var(--azul-2); font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rey-link); vertical-align: bottom; }
.ct-prose td { padding: 13px 16px; border: 0; border-top: 1px solid var(--linea); vertical-align: top; color: var(--tinta-2); }
.ct-prose td:first-child { font-weight: 600; color: var(--tinta); }
.ct-prose tbody tr:nth-child(even) td { background: var(--azul-3); }
/* Llamado dentro del texto: caja azul rey con flecha */
.ct-prose .art-cta-inline {
  position: relative; overflow: hidden; margin: 2.2em 0; padding: 74px 24px 24px; border-radius: 24px; color: #fff;
  background: radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, .12), transparent 70%), linear-gradient(160deg, var(--rey-2), var(--rey) 55%, var(--rey-hondo));
  box-shadow: 0 0 0 4px #fff, var(--sombra); font-family: var(--f-titulo); font-weight: 600; font-size: 1.1rem; line-height: 1.45; transform: rotate(-.5deg);
}
.ct-prose .art-cta-inline::before {
  content: '→'; position: absolute; left: 24px; top: 22px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--rey); font-family: var(--f-mono); font-size: 1.15rem;
}
.ct-prose .art-cta-inline::after {
  content: ''; position: absolute; right: -60px; bottom: -120px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 22px, rgba(255, 255, 255, .1) 22px 24px);
}
.ct-prose .art-cta-inline p { position: relative; z-index: 1; margin: 0; }
.ct-prose .art-cta-inline a { color: #fff; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Preguntas del artículo */
.ct-prose .art-faq {
  margin-top: 2.6em; padding: clamp(24px, 3.4vw, 38px); border-radius: 26px; box-shadow: 0 0 0 1px var(--linea), var(--sombra);
  background: var(--puntos), linear-gradient(180deg, #fff 40%, var(--azul-3));
}
.ct-prose .art-faq h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.035em; }
.ct-prose .art-faq h3 { position: relative; margin: 0; padding: 20px 0 6px 42px; border-top: 1px solid var(--linea); font-size: 1.1rem; line-height: 1.3; letter-spacing: -.015em; }
.ct-prose .art-faq h2 + h3 { border-top: 0; }
.ct-prose .art-faq h3::before {
  content: '?'; position: absolute; left: 0; top: 18px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--rey); color: #fff; font-family: var(--f-mono); font-size: .85rem; font-weight: 600;
}
.ct-prose .art-faq p { margin: 0 0 16px; padding-left: 42px; font-size: 1rem; line-height: 1.6; color: var(--tinta-2); }
/* Nota y tarjetas del texto de las páginas por localidad */
.ct-prose .nota {
  position: relative; padding: 20px 22px 20px 62px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 14px 30px -24px rgba(var(--hondo-rgb), .45);
  font-size: 1.02rem; color: var(--tinta);
}
.ct-prose .nota::before {
  content: 'i'; position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--rey); color: #fff; font-family: var(--f-titulo); font-weight: 800; font-size: .9rem;
}
.ct-prose .nota p + p { margin-top: .6em; }
.ct-prose .grid-2 { display: grid; gap: 14px; }
.ct-prose .tarjeta { padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 14px 30px -22px rgba(var(--hondo-rgb), .45); transform: rotate(var(--r, -.5deg)); }
.ct-prose .tarjeta:nth-child(even) { --r: .6deg; }
.ct-prose .tarjeta h3 { margin: 0 0 6px; font-size: 1.1rem; letter-spacing: -.015em; }
.ct-prose .tarjeta p { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--tinta-2); }

/* Barra lateral: lo de arriba acompaña al principio y lo último queda fijo al bajar */
:is(.art-cuerpo, .loc-cuerpo) .lateral { align-self: stretch; align-content: start; gap: 16px; }
:is(.art-cuerpo, .loc-cuerpo) .lateral-cta { padding: 24px; }
:is(.art-cuerpo, .loc-cuerpo) .lateral-cta p { color: rgba(255, 255, 255, .9); font-size: .98rem; }
:is(.art-cuerpo, .loc-cuerpo) .lateral-cta .btn { width: 100%; }
:is(.art-cuerpo, .loc-cuerpo) .lateral-caja h2 { font-size: 1.05rem; letter-spacing: -.015em; }

/* ── /presupuesto ───────────────────────────────────────── */
.presu-escena { padding-bottom: clamp(80px, 10vw, 140px); }
.presu-grid { display: grid; gap: 34px; align-items: start; }
.presu-escena h1 { max-width: 13ch; font-size: clamp(2.3rem, 1rem + 3.3vw, 4.1rem); }
.presu-escena h1 .subraya { white-space: nowrap; }
.presu-mapa { display: none; }
.presu-mesa { position: relative; }
.presu-mesa .arco { left: 30%; right: -6%; top: -30px; bottom: 60%; }
.presu-pieza { display: none; }
.presu-sticker { position: absolute; z-index: 3; left: -4px; bottom: -18px; font-size: .86rem; }
.presu {
  position: relative; z-index: 1; overflow: hidden; border-radius: 28px; background: #fff; scroll-margin-top: calc(var(--header) + 20px);
  box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .06), 0 40px 80px -40px rgba(var(--hondo-rgb), .65);
}
.presu-progreso { height: 6px; background: var(--azul-2); }
.presu-progreso i { display: block; width: 0; height: 100%; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, var(--rey-2), var(--rey)); transition: width .45s var(--suave); }
.presu-cuenta { padding: 22px clamp(20px, 4vw, 40px) 0; font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--rey-link); }
.presu fieldset { min-width: 0; margin: 0; border: 0; }
.presu-paso { display: none; padding: 8px clamp(20px, 4vw, 40px) 28px; }
.presu-paso.activo { display: block; }
body:not(.sin-js) .presu-paso.activo { animation: presu-entra .45s var(--suave) both; }
@keyframes presu-entra { from { opacity: 0; transform: translateX(18px); } }
.presu-paso h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); letter-spacing: -.035em; }
.presu-paso h2 + p { margin: 6px 0 22px; color: var(--tinta-2); }
/* Opciones en tarjetas (anula las píldoras de .opcion del sistema) */
.presu .opciones { display: grid; gap: 10px; }
.presu .opcion {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px 10px 10px; border-radius: 18px; cursor: pointer;
  background: var(--azul-3); box-shadow: inset 0 0 0 1.5px var(--linea); transition: background-color .2s, box-shadow .2s, transform .3s var(--rebote);
}
.presu .opcion > span, .presu .opcion input:checked + span {
  display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-weight: inherit; cursor: inherit; transition: none;
}
.presu .opcion input:focus-visible + span { outline: none; }
.presu .opcion > .icono-caja, .presu .opcion input:checked + .icono-caja {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #fff; color: var(--rey); box-shadow: 0 0 0 1px var(--linea);
}
.presu .opcion b { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: 1rem; line-height: 1.2; letter-spacing: -.01em; color: var(--tinta); }
.presu .opcion small { display: block; margin-top: 2px; font-size: .86rem; line-height: 1.3; color: var(--apagado); }
.presu .opcion:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--rey); }
.presu .opcion:active { transform: scale(.98); }
.presu .opcion:has(input:focus-visible) { outline: 3px solid var(--rey-link); outline-offset: 2px; }
.presu .opcion.marcada, .presu .opcion:has(input:checked) { background: var(--rey); box-shadow: inset 0 0 0 1.5px var(--rey), 0 14px 26px -14px rgba(var(--rey-rgb), .9); }
.presu .opcion.marcada b, .presu .opcion:has(input:checked) b { color: #fff; }
.presu .opcion.marcada small, .presu .opcion:has(input:checked) small { color: var(--azul-1); }
.presu .opcion.marcada .icono-caja, .presu .opcion:has(input:checked) .icono-caja { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
/* Casilla de los extras (se pueden marcar varios) */
.presu .opcion:has(input[type="checkbox"])::after {
  content: ''; flex: none; width: 24px; height: 24px; margin-left: auto; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 2px var(--linea-2);
}
.presu .opcion:has(input[type="checkbox"]:checked)::after {
  box-shadow: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B55D0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.presu .form textarea { min-height: 100px; }
.presu .campo small { text-transform: none; letter-spacing: 0; font-family: var(--f-texto); font-weight: 500; color: var(--apagado); }
/* El pedido final, como un ticket */
.presu-resumen {
  position: relative; margin: 6px 0 4px; padding: 22px 24px 26px; border-radius: 10px; white-space: pre-line;
  background: var(--puntos), var(--azul-3); box-shadow: inset 0 0 0 1.5px var(--linea);
  font-family: var(--f-mono); font-size: .86rem; line-height: 1.8; color: var(--tinta); transform: rotate(-.6deg);
  -webkit-mask: radial-gradient(circle 11px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}
.presu-resumen::before { content: 'Pedido'; display: block; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px dashed var(--linea-2); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rey-link); }
.presu .botones { margin-top: 24px; }
#presu-aviso:not(:empty) { margin-top: 18px; }
.presu-nav { display: flex; align-items: center; gap: 12px; padding: 18px clamp(20px, 4vw, 40px) clamp(20px, 3vw, 30px); border-top: 1px solid var(--linea); background: var(--azul-3); }
.presu-nav #presu-sig { margin-left: auto; }

/* ── /contacto ──────────────────────────────────────────── */
.contacto-escena { padding-bottom: clamp(90px, 11vw, 150px); }
.contacto-grid { display: grid; gap: 64px; align-items: start; }
.contacto-escena h1 { max-width: none; font-size: clamp(2.1rem, 1rem + 2.6vw, 3.45rem); }
.ct-canales { display: grid; gap: 10px; margin-top: 36px; }
.ct-canal {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px 14px 14px; border-radius: 20px;
  background: #fff; color: var(--tinta); box-shadow: 0 0 0 1px var(--linea), 0 14px 30px -22px rgba(var(--hondo-rgb), .45);
  transition: transform .35s var(--rebote), box-shadow .3s;
}
.ct-canal .icono-caja { width: 48px; height: 48px; border-radius: 14px; }
.ct-canal b { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; line-height: 1.2; }
.ct-canal > span > span { display: block; margin-top: 2px; font-size: .94rem; line-height: 1.4; color: var(--tinta-2); overflow-wrap: anywhere; }
.ct-canal em { font-style: normal; font-family: var(--f-mono); font-size: 1.1rem; color: var(--rey-link); transition: transform .3s var(--rebote); }
a.ct-canal:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 0 0 1.5px var(--rey), 0 20px 36px -22px rgba(var(--hondo-rgb), .55); }
a.ct-canal:hover em { transform: translateX(5px); }
.ct-canal-wa { padding: 18px 20px 18px 16px; }
.ct-canal-wa .icono-caja { width: 56px; height: 56px; color: var(--wa-hondo); }
.ct-canal-wa { grid-template-columns: 56px minmax(0, 1fr) auto; }
.ct-canal-wa b { font-size: 1.35rem; }
.contacto-mesa { position: relative; }
.contacto-mesa .arco { left: 16%; right: -10%; top: -34px; bottom: 26%; }
.contacto-pieza { position: absolute; z-index: 2; right: -6px; top: -54px; width: 92px; }
.contacto-pieza .marco { --borde: 5px; }
.contacto-form { position: relative; z-index: 1; padding: clamp(22px, 3.4vw, 40px); border-radius: 28px; }
.contacto-form .t-m { padding-right: 70px; }
.contacto-nota { font-size: .85rem; color: var(--apagado); }
.contacto-nota a { color: var(--rey-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.contacto-sticker { position: absolute; z-index: 3; left: -4px; bottom: -20px; font-size: .84rem; }

/* ── /zonas (cobertura, provincia o país, localidad) ────── */
.zn-cabeza { z-index: 3; overflow-x: clip; overflow-y: visible; }   /* el desplegable del buscador puede pasar a la sección de abajo */
.zn-cabeza h1 { max-width: 16ch; line-height: 1.1; }
.zn-collage { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 520 / 440; container-type: inline-size; }
.zn-collage .arco { left: 16%; right: -24%; top: 10%; bottom: -8%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.zn-p1 { left: 0; top: 5%; width: 47%; z-index: 2; }
.zn-p2 { right: 0; top: 0; width: 46%; z-index: 1; }
.zn-p2 figcaption { left: auto; right: clamp(7px, 2cqw, 13px); }
.zn-p3 { left: 29%; top: 45%; width: 51%; z-index: 3; }
.zn-p-sola { left: 3%; top: 4%; width: 82%; z-index: 2; }
.zn-pieza { position: absolute; left: 3%; top: 6%; width: 80%; z-index: 2; --borde: clamp(4px, 1.4cqw, 8px); }
.zn-sticker { position: absolute; z-index: 5; left: 0; bottom: 8%; font-size: clamp(.74rem, 2.7cqw, 1rem); }
.zn-p-sola ~ .zn-sticker, .zn-pieza ~ .zn-sticker { left: auto; right: 6%; bottom: 10%; }
.zn-collage .sticker-rey .ico { color: #fff; }
/* Provincias y países */
.zn-regiones { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zn-region {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px 14px 18px; border-radius: 18px; background: #fff; color: var(--tinta);
  box-shadow: 0 0 0 1px var(--linea), 0 12px 26px -20px rgba(var(--hondo-rgb), .45); transition: transform .35s var(--rebote), box-shadow .3s;
}
.zn-region .icono-caja { flex: none; width: 40px; height: 40px; border-radius: 12px; transition: background-color .25s, color .25s; }
.zn-region b { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: .98rem; line-height: 1.2; letter-spacing: -.01em; }
.zn-region small { display: block; margin-top: 3px; font-family: var(--f-mono); font-size: .68rem; color: var(--apagado); }
.zn-region::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--rey) var(--p, 0%), var(--azul-2) var(--p, 0%)); }
.zn-region:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 0 0 1.5px var(--rey), 0 18px 34px -20px rgba(var(--hondo-rgb), .55); }
.zn-region:hover .icono-caja { background: var(--rey); color: #fff; }
.zn-paises .zn-region { padding: 18px; }
.zn-paises .zn-region b { font-size: 1.2rem; }
/* CABA entera (en /zonas/caba) */
.zn-destacado { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-bottom: 48px; padding: 22px 24px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--linea), var(--sombra); }
.zn-destacado p { flex: 1; min-width: 220px; color: var(--tinta-2); }
.zn-destacado strong { display: block; font-family: var(--f-titulo); font-size: 1.2rem; letter-spacing: -.02em; color: var(--tinta); }
/* Índice de localidades por partido o departamento */
.zn-indice { padding: clamp(22px, 4vw, 48px); border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--linea), var(--sombra); }
.zn-grupo { display: grid; gap: 14px 48px; padding: 28px 0; border-top: 1px solid var(--linea); }
.zn-grupo:first-child { padding-top: 0; border-top: 0; }
.zn-grupo:last-child { padding-bottom: 0; }
.zn-grupo h2 { font-size: 1.3rem; letter-spacing: -.025em; }
.zn-grupo h2 small { display: inline-grid; place-items: center; min-width: 2.4em; margin-left: 6px; padding: 3px 9px; border-radius: 999px; background: var(--azul-2); font-size: .58em; font-weight: 600; letter-spacing: 0; color: var(--rey-link); vertical-align: middle; }
.zn-lista { columns: 2 140px; column-gap: 24px; }
.zn-lista li { break-inside: avoid; }
.zn-lista a { display: inline-block; padding: 5px 0; font-size: .97rem; line-height: 1.35; color: var(--tinta-2); }
.zn-lista a:hover { color: var(--rey-link); text-decoration: underline; text-underline-offset: 3px; }
/* Servicios de una localidad, agrupados por tema */
.zn-temas { columns: 1; column-gap: 18px; }
.zn-tema { break-inside: avoid; margin-bottom: 18px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 16px 34px -24px rgba(var(--hondo-rgb), .5); }
.zn-tema .icono-caja { width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; }
.zn-tema h2 { margin-bottom: 10px; font-size: 1.25rem; letter-spacing: -.025em; }
.zn-tema a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: .95rem; line-height: 1.35; color: var(--tinta-2); }
.zn-tema li:last-child a { border-bottom: 0; padding-bottom: 0; }
.zn-tema a::after { content: '→'; flex: none; font-family: var(--f-mono); color: var(--rey-link); opacity: .45; transition: opacity .2s, transform .3s var(--rebote); }
.zn-tema a:hover { color: var(--rey-link); }
.zn-tema a:hover::after { opacity: 1; transform: translateX(4px); }
.zn-cercanas { margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--puntos), var(--azul-2); }
.zn-cercanas h2 { margin-bottom: 18px; }
.zn-cercanas .chip { min-height: 40px; }
.zn-cercanas .chip .ico { color: var(--rey); }

/* ── Páginas por localidad (seo-pagina.php) ─────────────── */
.loc-cabeza h1 { max-width: 20ch; font-size: clamp(2.05rem, 1rem + 2.9vw, 3.7rem); line-height: 1.05; }
.loc-confianza { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.loc-confianza li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 9px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px var(--linea); font-size: .88rem; font-weight: 600; color: var(--tinta-2); }
.loc-confianza .ico { color: var(--rey); }
.loc-collage { position: relative; width: 100%; max-width: 540px; margin: 0 auto; padding: 12% 7% 7% 0; }
.loc-collage .arco { left: 26%; right: 0; top: 0; bottom: 0; }
.loc-collage .marco { z-index: 1; }
.loc-sticker { position: absolute; z-index: 2; left: -4px; bottom: 1%; }
.loc-sticker .ico { color: #fff; }
.loc-cuerpo { padding-top: clamp(56px, 9vw, 150px); }
.loc-cuerpo .con-lateral > :first-child { max-width: 820px; }
.loc-cuerpo .prose { max-width: none; }
.loc-contexto { display: grid; gap: 14px 20px; margin-top: 52px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--linea), var(--sombra); }
.loc-contexto .icono-caja { background: var(--rey); color: #fff; }
.loc-contexto h2 { margin-bottom: 8px; font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); letter-spacing: -.025em; }
.loc-contexto p { color: var(--tinta-2); }
.loc-rubro {
  position: relative; overflow: hidden; margin-top: 52px; padding: clamp(24px, 4vw, 44px); border-radius: 28px; color: #fff;
  background: radial-gradient(80% 60% at 100% 0%, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(160deg, var(--rey-2), var(--rey) 50%, var(--rey-hondo));
  box-shadow: var(--sombra);
}
.loc-rubro::after { content: ''; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, transparent 0 34px, rgba(255, 255, 255, .08) 34px 36px); }
.loc-rubro > * { position: relative; z-index: 1; }
.loc-rubro .etiqueta { color: var(--azul-suave); }
.loc-rubro h2 { margin-bottom: 20px; color: #fff; font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.1rem); letter-spacing: -.035em; }
.loc-rubro .lista-tilde li { color: rgba(255, 255, 255, .92); }
.loc-rubro .lista-tilde li::before { border-color: #fff; }
.loc-rubro .grilla-2 { gap: 12px; margin: 24px 0 26px; }
.loc-rubro-ficha { padding: 20px; border-radius: 18px; background: #fff; color: var(--tinta); }
.loc-rubro-ficha h3 { margin-bottom: 6px; font-size: 1.05rem; letter-spacing: -.015em; color: var(--tinta); }
.loc-rubro-ficha p { font-size: .94rem; line-height: 1.5; color: var(--tinta-2); }
.loc-rubro .link-flecha { margin-top: 0; color: #fff; }
.loc-links a { color: var(--rey-link); font-weight: 600; }
.loc-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.loc-cuerpo .lateral-caja .lista-tilde li { font-size: .95rem; margin-bottom: 8px; }
.loc-faq .titulo-l { font-size: clamp(1.8rem, 1rem + 2.3vw, 2.9rem); }
.loc-faq-foto { display: none; }
.loc-mas .grilla-2 { gap: 48px; align-items: start; }
.loc-chips .chip { min-height: 40px; padding: 8px 14px; font-size: .9rem; }
.loc-chips .chip .ico { color: var(--rey); }
.loc-chips .chip-todo { background: var(--rey); border-color: var(--rey); color: #fff; }
.loc-chips .chip-todo .ico { color: #fff; }
.loc-chips a.chip-todo:hover { background: var(--rey-hondo); color: #fff; }

@media (max-width: 759px) {
  .ct-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .9rem; }
  .ct-prose th { padding: 12px 10px; letter-spacing: .04em; }
  .ct-prose td { padding: 11px 10px; }
  .presu .opcion { min-height: 58px; gap: 12px; }
  .zn-regiones:not(.zn-paises) .zn-region .icono-caja { display: none; }
  .zn-region { padding: 13px 14px 18px; }
  .presu .opcion > .icono-caja, .presu .opcion input:checked + .icono-caja { width: 38px; height: 38px; border-radius: 12px; }
}

/* ══ TABLET ≥ 560 / 760 ══ */
@media (min-width: 560px) {
  .presu .opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-canales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-canal-wa, .ct-canal:nth-child(2) { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .ct-temas { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .blog-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-cuerpo .prose .art-cta-inline, .loc-cuerpo .prose .art-cta-inline { padding: 28px 30px 28px 92px; }
  .art-cuerpo .prose .art-cta-inline::before, .loc-cuerpo .prose .art-cta-inline::before { left: 28px; top: 50%; margin-top: -22px; width: 44px; height: 44px; }
  .ct-prose .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-rel .cabeza-2col > .link-flecha { justify-self: end; }
  .presu-mesa .arco { left: 12%; right: -10%; top: -26px; bottom: 34%; }
  .presu-pieza { display: block; position: absolute; z-index: 2; right: -22px; top: -74px; width: 120px; }
  .presu-pieza .marco { --borde: 6px; }
  .presu-sticker { left: -20px; bottom: -22px; font-size: .95rem; }
  .contacto-pieza { right: -22px; top: -76px; width: 130px; }
  .contacto-pieza .marco { --borde: 6px; }
  .contacto-sticker { left: -22px; bottom: -22px; font-size: .92rem; }
  .zn-regiones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zn-lista { columns: 3 160px; }
  .zn-temas { columns: 2; }
  .loc-contexto { grid-template-columns: 52px minmax(0, 1fr); }
}

/* ══ ESCRITORIO ≥ 1040 ══ */
@media (min-width: 1040px) {
  .blog-destacada { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 64px; }
  .blog-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px 38px; }
  .blog-grilla > :nth-child(3n+2) { margin-top: 46px; }

  .art-cabeza .cabeza-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .art-portada { margin: 0 0 0 auto; }
  .art-cuerpo .con-lateral { grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; }
  .art-indice { position: sticky; top: calc(var(--header) + 26px); max-height: calc(100vh - var(--header) - 50px); overflow-y: auto; scrollbar-width: thin; }
  .loc-cuerpo .lateral-cta { position: sticky; top: calc(var(--header) + 26px); }
  .loc-faq-foto { display: block; width: 100%; max-width: 400px; margin-top: 34px; }
  :is(.art-cuerpo, .loc-cuerpo) .lateral { position: static; }

  .presu-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 80px; }
  .presu-lado { position: sticky; top: calc(var(--header) + 34px); }
  .presu-mapa { display: grid; margin-top: 34px; }
  .presu-mapa li { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 0; font-family: var(--f-titulo); font-weight: 700; font-size: 1.04rem; letter-spacing: -.01em; color: var(--apagado); transition: color .3s; }
  .presu-mapa li:not(:last-child)::after { content: ''; position: absolute; left: 19px; top: 49px; height: 14px; border-left: 2px dashed var(--linea-2); }
  .presu-mapa li span { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--linea-2); font-family: var(--f-mono); font-size: .76rem; font-weight: 600; color: var(--apagado); transition: background-color .3s, color .3s, box-shadow .3s; }
  .presu-mapa li.actual { color: var(--tinta); }
  .presu-mapa li.actual span { background: var(--rey); color: #fff; box-shadow: 0 0 0 6px rgba(var(--rey-rgb), .14); }
  .presu-mapa li.hecho { color: var(--tinta-2); }
  .presu-mapa li.hecho span { background: var(--azul-1); color: var(--rey); box-shadow: none; }
  .presu-mesa { margin-top: 40px; }
  .presu .opciones { gap: 12px; }

  .contacto-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 84px; }
  .contacto-mesa { margin-top: 64px; }

  .zn-collage { margin: 0 0 0 auto; }
  .zn-regiones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .zn-paises { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .zn-grupo { grid-template-columns: 280px minmax(0, 1fr); }
  .zn-grupo h2 { position: sticky; top: calc(var(--header) + 26px); align-self: start; }
  .zn-lista { columns: 4 170px; }
  .zn-temas { columns: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .presu-resumen, .ct-prose blockquote, .ct-prose .art-cta-inline { transform: none; }
}

/* ══════ Rediseño v4 · institucional ══════ */
/* ============================================================
   Rediseño v4 · fase 2 · grupo institucional (diseño C "Collage vivo")
   /nosotros (ns-) · /trabajos y caso_obra() (tb-) · /rubros (rb-) · /rubros/{slug} (ru-) ·
   /preguntas-frecuentes (pf-) · 404 (e404-). Se apoya en los tokens y componentes de style.css
   (ver _fuentes/prototipos/concepto-c/SISTEMA.md). Paleta sobria: blanco y azul claro de base,
   azul rey como único fuerte, amarillo solo en el botón principal, un resalte y el "500+".
   ============================================================ */

/* Títulos de las cabeceras sin palabras huérfanas */
.ns-cabeza h1, .tb-cabeza h1, .rb-cabeza h1, .ru-cabeza h1, .pf-cabeza h1 { text-wrap: balance; }

/* ══ NOSOTROS ══ */
/* Ficha del estudio, pegada con cinta debajo de la bajada */
.ns-ficha { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 660px; margin-top: 34px; padding: 4px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .06), var(--sombra); transform: rotate(-1.2deg); }
.ns-ficha::before { content: ''; position: absolute; z-index: 2; top: -12px; left: 34px; width: 84px; height: 24px; transform: rotate(-6deg); background: rgba(219, 231, 255, .9); box-shadow: 0 2px 6px rgba(var(--tinta-rgb), .15); clip-path: polygon(0 12%, 5% 0, 95% 0, 100% 14%, 97% 50%, 100% 86%, 95% 100%, 5% 100%, 0 88%, 3% 50%); }
.ns-ficha li { display: grid; align-content: start; gap: 5px; padding: 14px 16px; }
.ns-ficha li:nth-child(even) { border-left: 1.5px dashed var(--linea-2); }
.ns-ficha li:nth-child(n+3) { border-top: 1.5px dashed var(--linea-2); }
.ns-ficha span { font-family: var(--f-mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.ns-ficha b { font-family: var(--f-titulo); font-weight: 700; font-size: 1rem; line-height: 1.22; letter-spacing: -.01em; color: var(--tinta); }
.ns-pieza-d { right: 0; top: 0; z-index: 5; }
.ns-collage .sticker { white-space: nowrap; }

/* Cómo pensamos: la frase gigante con recortes adentro */
.ns-cita { padding: clamp(90px, 11vw, 160px) 0; }
.ns-comillas { position: absolute; z-index: -1; left: calc(var(--margen) - .1em); top: -.36em; font-family: var(--f-titulo); font-weight: 800; font-size: clamp(10rem, 6rem + 13vw, 22rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(var(--rey-rgb), .16); pointer-events: none; user-select: none; }
.ns-cita-texto { max-width: 1180px; margin: 0; font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.7rem, .95rem + 2.6vw, 3.45rem); line-height: 1.17; letter-spacing: -.035em; color: var(--tinta); }
.ns-cita-texto .mf-media { top: -.04em; }
.ns-mf-agenda .ico { color: var(--rey); }

/* De qué se trata y quién está detrás: hoja + tablero */
.ns-quien-grid { display: grid; gap: 70px; align-items: start; }
.ns-hoja { position: relative; max-width: none; padding: clamp(30px, 4.4vw, 56px); border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .05), var(--sombra); }
.ns-hoja .adhesiva { top: -13px; }
.ns-hoja > h2:first-of-type { margin-top: 0; }
.ns-hoja h2 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); }
.ns-tablero { position: relative; container-type: inline-size; }
.ns-postal { position: relative; display: block; width: min(76%, 340px); margin: 0 4% 22px auto; z-index: 3; }
.ns-postal:hover { z-index: 3; }
.ns-cifras { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ns-cifra { padding: 22px 20px 20px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 18px 36px -24px rgba(var(--hondo-rgb), .55); transform: rotate(var(--r, 0deg)); transition: transform .45s var(--rebote); }
.ns-cifra:hover { transform: rotate(0deg) translateY(-4px); }
.ns-cifra b { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: clamp(2.5rem, 1.8rem + 2.2vw, 4rem); line-height: .95; letter-spacing: -.05em; color: var(--rey); }
.ns-cifra span { display: block; margin-top: 10px; font-size: .92rem; line-height: 1.35; color: var(--tinta-2); }
.ns-cifra-rey { background: radial-gradient(80% 70% at 20% 0%, rgba(255, 255, 255, .2), transparent 70%), linear-gradient(160deg, var(--rey-2), var(--rey) 55%, var(--rey-hondo)); box-shadow: 0 0 0 4px #fff, var(--sombra); }
.ns-cifra-rey b { color: #fff; }
.ns-cifra-rey span { color: rgba(255, 255, 255, .9); }

/* Cuatro compromisos */
.ns-arcos { position: absolute; right: -16vw; top: 50%; width: min(80vw, 980px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, transparent 0 62px, rgba(var(--rey-rgb), .08) 62px 64px); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.ns-compromisos .cabeza-2col { margin-bottom: 0; }
.ns-compromisos-foto { width: min(78%, 380px); justify-self: end; margin-top: 10px; }
.ns-compromisos-foto .marco { --borde: 6px; }
.ns-promesas { display: grid; gap: 18px; margin-top: clamp(36px, 5vw, 64px); }
.ns-promesa { position: relative; overflow: hidden; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px 16px; padding: 22px 22px 26px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 22px 44px -28px rgba(var(--hondo-rgb), .55); transition: transform .45s var(--rebote), box-shadow .3s; }
.ns-promesa:hover { transform: translateY(-6px) rotate(-.8deg); box-shadow: 0 0 0 1px rgba(var(--rey-rgb), .25), 0 30px 50px -28px rgba(var(--hondo-rgb), .6); }
.ns-promesa::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--rey); transform: scaleX(.16); transform-origin: 0 50%; transition: transform .5s var(--suave); }
.ns-promesa:hover::after { transform: scaleX(1); }
.ns-promesa-num { position: absolute; right: 4px; top: -10px; font-family: var(--f-titulo); font-weight: 800; font-size: 4.4rem; line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px rgba(var(--rey-rgb), .18); pointer-events: none; }
.ns-promesa > :not(.ns-promesa-num) { position: relative; z-index: 1; }
.ns-promesa h3 { padding-right: 78px; font-size: 1.28rem; line-height: 1.12; letter-spacing: -.025em; }
.ns-promesa p { grid-column: 1 / -1; font-size: .97rem; line-height: 1.52; color: var(--tinta-2); }
.ns-hoja { line-height: 1.68; }

/* ══ TRABAJOS ══ */
.tb-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; margin-top: 30px; }
.tb-resumen .sticker { font-size: .84rem; }
.tb-collage .tel { border-radius: clamp(14px, 4.4cqw, 26px); padding: clamp(4px, 1.1cqw, 7px); }
.tb-collage .tel img { border-radius: clamp(10px, 3.4cqw, 20px); }
.tb-collage .tel::before { top: clamp(7px, 2cqw, 12px); height: clamp(4px, 1cqw, 6px); }
.tb-t1 { left: 3%; top: 15%; width: 29%; z-index: 2; }
.tb-t2 { left: 34%; top: 1%; width: 32%; z-index: 4; }
.tb-t3 { left: 66%; top: 17%; width: 29%; z-index: 3; }
.tb-video { left: -3%; top: 64%; width: 25%; z-index: 5; }
.tb-sello { left: 38%; top: 90%; z-index: 6; }
.tb-collage .sticker.mono { font-size: clamp(.6rem, 2cqw, .76rem); }

/* Barra de filtros: fija debajo del header al bajar */
.tb-obras { padding-top: clamp(44px, 5vw, 70px); }
.tb-barra { position: sticky; top: 80px; z-index: 20; display: flex; justify-content: center; margin-bottom: clamp(30px, 4.4vw, 54px); pointer-events: none; }
.tb-filtros { pointer-events: auto; display: flex; gap: 4px; max-width: 100%; padding: 5px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .07), 0 14px 30px -16px rgba(var(--hondo-rgb), .45); }
.tb-filtros::-webkit-scrollbar { display: none; }
.tb-filtro { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 15px; border: 0; border-radius: 999px; background: transparent; font-family: var(--f-titulo); font-weight: 700; font-size: .9rem; white-space: nowrap; color: var(--tinta-2); transition: background-color .2s, color .2s; }
.tb-filtro small { font-family: var(--f-mono); font-size: .68rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--azul-2); color: var(--rey-link); }
.tb-filtro:hover { color: var(--rey-link); background: var(--azul-3); }
.tb-filtro.activo, .tb-filtro[aria-pressed="true"] { background: var(--rey); color: #fff; }
.tb-filtro.activo small, .tb-filtro[aria-pressed="true"] small { background: rgba(255, 255, 255, .2); color: #fff; }

/* Tarjeta de cada trabajo (caso_obra) */
.tb-casos { display: grid; gap: clamp(26px, 3.6vw, 40px); }
.tb-caso { position: relative; display: grid; grid-template-columns: 124px minmax(0, 1fr); grid-template-areas: "escena cab" "txt txt"; gap: 18px 16px; align-items: end; padding: 12px 12px 22px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .05), 0 26px 50px -30px rgba(var(--hondo-rgb), .55); }
.tb-escena { grid-area: escena; position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: center; min-height: 100%; padding: 30px 12px 12px; border-radius: 20px; overflow: hidden; background: var(--puntos), linear-gradient(180deg, var(--azul-3), var(--azul-1)); }
.tb-escena::before { content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: 0; height: 64%; border-radius: 999px 999px 0 0; background: radial-gradient(60% 50% at 35% 20%, rgba(255, 255, 255, .25), transparent 70%), linear-gradient(160deg, var(--rey-2), var(--rey) 55%, var(--rey-hondo)); }
.tb-escena-circulo::before { left: 50%; right: auto; bottom: 14%; width: 92%; height: auto; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); }
.tb-escena .telefono { width: 100%; max-width: 236px; transform: rotate(var(--r, 0deg)); transition: transform .5s var(--rebote); }
.tb-caso:hover .tb-escena .telefono { transform: rotate(0deg) translateY(-8px); }
.tb-num { position: absolute; z-index: 2; left: 12px; top: 10px; font-family: var(--f-mono); font-size: .64rem; font-weight: 600; letter-spacing: .08em; color: var(--rey-link); }
.tb-cab { grid-area: cab; align-self: center; padding-right: 4px; }
.tb-cab .pastilla { margin-bottom: 10px; border-radius: 10px; line-height: 1.4; }
.tb-cab h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.15rem); line-height: 1.04; letter-spacing: -.035em; }
.tb-resultado { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; font-family: var(--f-titulo); font-weight: 700; font-size: .95rem; line-height: 1.3; letter-spacing: -.01em; color: var(--rey-link); }
.tb-resultado .ico { flex: none; margin-top: 1px; }
.tb-txt { grid-area: txt; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 6px; }
.tb-txt p { font-size: .97rem; line-height: 1.55; color: var(--tinta-2); }
.tb-datos { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-datos li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--azul-3); box-shadow: inset 0 0 0 1px var(--linea); font-size: .8rem; font-weight: 600; line-height: 1.25; color: var(--tinta-2); }
.tb-lugar .ico { color: var(--rey); }
.tb-visitar { max-width: 100%; overflow-wrap: anywhere; }

/* ══ RUBROS (mosaico con el texto a la vista) ══ */
.rb-collage .sticker { white-space: nowrap; }
.rb-rubros { padding-top: clamp(56px, 7vw, 100px); }
/* Celular: lista con la foto al costado */
.rb-mosaico { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
.rb-mosaico .rb-mo { grid-column: auto; grid-row: auto; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 22px; background: #fff; color: var(--tinta); box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .05), 0 16px 30px -22px rgba(var(--hondo-rgb), .55); }
.rb-mosaico .rb-mo::after { display: none; }
.rb-mosaico .rb-mo img { position: relative; inset: auto; align-self: stretch; width: 104px; height: 100%; min-height: 120px; border-radius: 15px; }
.rb-mo-icono { position: absolute; z-index: 2; left: 14px; top: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff; color: var(--rey); box-shadow: var(--sombra-sticker); }
.rb-mo-icono .ico { width: 17px; height: 17px; }
.rb-mo-txt { display: grid; gap: 4px; }
.rb-mo-nombre { font-family: var(--f-titulo); font-weight: 800; font-size: 1.12rem; line-height: 1.12; letter-spacing: -.025em; color: var(--tinta); }
.rb-mo-bajada { font-size: .86rem; line-height: 1.42; color: var(--tinta-2); }
.rb-mo-ir { display: block; margin-top: 4px; font-family: var(--f-titulo); font-weight: 700; font-size: .8rem; line-height: 1.3; color: var(--rey-link); }
.rb-mo-ir::after { content: '→'; display: inline-block; margin-left: 6px; transition: transform .3s var(--rebote); }
.rb-mo:hover .rb-mo-ir::after { transform: translateX(5px); }

/* ══ RUBRO (página de cada rubro) ══ */
/* Cabecera: foto en arco + mini web dibujada */
.ru-pieza-foto { left: 2%; top: 0; width: 56%; z-index: 2; }
.ru-pieza-foto .marco { aspect-ratio: 3 / 3.75; }
.ru-pieza-web { right: 0; top: 33%; width: 50%; z-index: 3; }
.ru-pieza-sticker { left: 6%; top: 86%; z-index: 4; }
.ru-collage .sticker { font-size: clamp(.72rem, 2.8cqw, 1.02rem); white-space: nowrap; }
.ru-miniweb { display: block; overflow: hidden; border-radius: clamp(10px, 3cqw, 16px); background: #fff; box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .06), var(--sombra); }
.ru-miniweb-barra { display: flex; gap: clamp(3px, 1cqw, 5px); padding: clamp(6px, 1.8cqw, 10px) clamp(8px, 2.4cqw, 13px); background: var(--azul-2); }
.ru-miniweb-barra i { width: clamp(5px, 1.5cqw, 8px); aspect-ratio: 1; border-radius: 50%; background: rgba(var(--rey-rgb), .3); }
.ru-miniweb-cuerpo { display: grid; gap: clamp(5px, 1.5cqw, 8px); padding: clamp(9px, 2.8cqw, 15px); }
.ru-miniweb .icono-caja { width: clamp(24px, 7.4cqw, 38px); height: clamp(24px, 7.4cqw, 38px); border-radius: clamp(7px, 2.2cqw, 12px); margin-bottom: clamp(2px, .8cqw, 4px); }
.ru-miniweb .icono-caja .ico { width: 55%; height: 55%; }
.ru-linea { display: block; width: 88%; height: clamp(5px, 1.5cqw, 8px); border-radius: 6px; background: var(--azul-1); }
.ru-linea-t { width: 74%; height: clamp(8px, 2.5cqw, 13px); background: rgba(var(--tinta-rgb), .82); }
.ru-linea-c { width: 58%; }
.ru-miniweb-wa { justify-self: start; display: inline-flex; align-items: center; gap: .4em; margin-top: clamp(2px, .8cqw, 5px); padding: .55em .95em; border-radius: 999px; background: var(--rey); color: #fff; font-family: var(--f-titulo); font-weight: 700; font-size: clamp(.5rem, 1.9cqw, .74rem); line-height: 1; }
.ru-miniweb-wa .ico { width: 1.2em; height: 1.2em; }
.ru-miniweb-cajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(4px, 1.2cqw, 7px); margin-top: clamp(2px, .8cqw, 5px); }
.ru-miniweb-cajas i { aspect-ratio: 4 / 3; border-radius: clamp(4px, 1.4cqw, 8px); background: var(--azul-2); }

/* Lo que vemos siempre: funciones + notas pegadas */
.ru-funciones { display: grid; margin-top: 30px; }
.ru-funciones li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .98rem; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.ru-funciones .ico { flex: none; margin-top: 2px; color: #fff; }
.ru-notas { display: grid; gap: 30px; }
.ru-nota { position: relative; padding: 32px 24px 28px; border-radius: 8px 8px 24px 8px; background: #fff; color: var(--tinta); font-family: var(--f-titulo); font-weight: 600; font-size: 1.08rem; line-height: 1.4; letter-spacing: -.01em; box-shadow: 0 26px 46px -24px rgba(5, 15, 50, .6); transform: rotate(var(--r, 0deg)); transition: transform .45s var(--rebote); }
.ru-nota:hover { transform: rotate(0deg) translateY(-4px); }
.ru-nota-num { display: block; margin-bottom: 12px; font-family: var(--f-titulo); font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -.05em; color: var(--rey); }

/* Estructura recomendada: ventana de navegador con las secciones */
.ru-navegador { position: relative; margin-top: clamp(36px, 5vw, 60px); border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .06), var(--sombra); }
.ru-navegador-barra { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.ru-navegador-barra i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--azul-1); }
.ru-navegador-barra span { flex: 0 1 420px; min-width: 0; margin-left: 12px; padding: 7px 14px; border-radius: 999px; background: var(--azul-3); font-family: var(--f-mono); font-size: .72rem; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ru-navegador-sticker { position: absolute; right: 22px; top: -18px; z-index: 2; }
.ru-bloques { display: grid; gap: 14px; padding: clamp(12px, 2.4vw, 26px); }
.ru-bloque { position: relative; padding: 22px 22px 24px; border-radius: 18px; background: var(--azul-3); border: 1.5px dashed rgba(var(--rey-rgb), .28); }
.ru-bloque::after { content: ''; display: block; height: 20px; margin-top: 18px; background: linear-gradient(var(--azul-1), var(--azul-1)) 0 0 / 72% 7px no-repeat, linear-gradient(var(--azul-1), var(--azul-1)) 0 13px / 46% 7px no-repeat; }
.ru-bloque-num { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em; color: var(--rey-link); }
.ru-bloque h3 { margin: 8px 0; font-size: 1.22rem; line-height: 1.15; letter-spacing: -.02em; }
.ru-bloque p { max-width: 62ch; font-size: .95rem; line-height: 1.52; color: var(--tinta-2); }
.ru-bloque-hero { padding: clamp(26px, 4vw, 50px); border: 0; color: #fff; background: radial-gradient(70% 120% at 100% 0%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(160deg, var(--rey-2), var(--rey) 55%, var(--rey-hondo)); }
.ru-bloque-hero::after { width: 150px; height: 38px; margin-top: 24px; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 0 rgba(var(--tinta-rgb), .18); }
.ru-bloque-hero .ru-bloque-num { color: var(--azul-suave); }
.ru-bloque-hero h3 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.05; letter-spacing: -.035em; }
.ru-bloque-hero p { color: rgba(255, 255, 255, .9); font-size: 1.02rem; }
.ru-bloque-pie { background: var(--azul-2); }

/* Texto largo en una hoja + lateral */
.ru-cuerpo-grid { display: grid; gap: 40px; align-items: start; }
.ru-hoja { max-width: none; padding: clamp(26px, 5vw, 64px); border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .05), var(--sombra); }
.ru-hoja > * { max-width: 68ch; }
.ru-hoja > h2:first-child { margin-top: 0; }
.ru-hoja ul.lista-check > li { padding-left: 36px; margin-top: .7em; }
.ru-hoja ul.lista-check > li::before { left: 0; top: .22em; width: 24px; height: 24px; border: 0; border-radius: 50%; transform: none; background: var(--azul-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B55D0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") 50% 50% / 13px no-repeat; }
.ru-hoja .nota { position: relative; margin-top: 1.6em; padding: 22px 24px 22px 66px; border-radius: 18px; background: var(--azul-2); box-shadow: inset 0 0 0 1px rgba(var(--rey-rgb), .12); }
.ru-hoja .nota::before { content: '!'; position: absolute; left: 22px; top: 22px; width: 28px; height: 28px; border-radius: 50%; background: var(--rey); color: #fff; font-family: var(--f-mono); font-weight: 600; font-size: .95rem; line-height: 28px; text-align: center; }
.ru-hoja .nota p { font-size: 1rem; line-height: 1.6; color: var(--tinta); }
.ru-lateral { display: grid; gap: 22px; }
.ru-llamado { position: relative; display: grid; gap: 12px; margin-top: 46px; padding: 66px 24px 26px; border-radius: 26px; color: #fff; background: radial-gradient(80% 60% at 20% 0%, rgba(255, 255, 255, .2), transparent 70%), linear-gradient(160deg, var(--rey-2), var(--rey) 55%, var(--rey-hondo)); box-shadow: 0 0 0 4px #fff, var(--sombra); }
.ru-llamado-foto { --borde: 5px; position: absolute; left: 22px; top: -46px; width: 100px; transform: rotate(-5deg); }
.ru-llamado h3 { color: #fff; font-size: 1.42rem; line-height: 1.1; letter-spacing: -.03em; }
.ru-llamado p { margin-bottom: 4px; font-size: .96rem; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.ru-llamado .btn { width: 100%; }
.ru-llamado .btn-wa { border-color: #fff; }
.ru-sistemas { padding: 24px 22px 14px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 18px 36px -26px rgba(var(--hondo-rgb), .5); }
.ru-sistemas h2 { margin-bottom: 10px; font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rey-link); }
.ru-sistemas a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--linea); font-family: var(--f-titulo); font-weight: 700; font-size: .98rem; line-height: 1.25; letter-spacing: -.01em; color: var(--tinta); }
.ru-sistemas li:first-child a { border-top: 0; }
.ru-sistemas a::after { content: '→'; margin-left: auto; color: var(--rey-link); transition: transform .3s var(--rebote); }
.ru-sistemas a:hover { color: var(--rey-link); }
.ru-sistemas a:hover::after { transform: translateX(4px); }
.ru-sistemas .icono-caja { flex: none; width: 40px; height: 40px; border-radius: 12px; }

/* Preguntas del rubro */
.ru-faq-foto { max-width: 360px; }

/* Ciudades (solo texto) con dos postales */
.ru-ciudades-grid { display: grid; gap: 34px; align-items: center; }
.ru-ciudades-lista { display: flex; flex-wrap: wrap; gap: 10px 22px; max-width: 760px; font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.02rem, .88rem + .6vw, 1.4rem); line-height: 1.3; letter-spacing: -.02em; color: var(--tinta); }
.ru-ciudades-lista li { display: inline-flex; align-items: center; gap: 6px; }
.ru-ciudades-lista .ico { color: var(--rey); }
.ru-postales { display: none; position: relative; height: 250px; container-type: inline-size; }
.ru-postales .postal-foto { width: 56%; }
.ru-postal-a { left: 0; top: 2%; z-index: 1; }
.ru-postal-b { right: 2%; top: 26%; z-index: 2; }

/* ══ PREGUNTAS FRECUENTES ══ */
.pf-indice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 660px; margin-top: 30px; }
.pf-indice a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 10px 20px -16px rgba(var(--hondo-rgb), .5); font-family: var(--f-titulo); font-weight: 700; font-size: .9rem; line-height: 1.2; letter-spacing: -.01em; color: var(--tinta); transition: transform .3s var(--rebote), box-shadow .2s, color .2s; }
.pf-indice small { flex: none; font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .06em; color: var(--rey-link); }
.pf-indice a:hover { color: var(--rey-link); transform: translateY(-2px) rotate(-1deg); box-shadow: 0 0 0 1.5px var(--rey-link), 0 14px 24px -16px rgba(var(--hondo-rgb), .6); }
.pf-collage .sticker { white-space: nowrap; }
.pf-tema { padding: clamp(72px, 8vw, 116px) 0; scroll-margin-top: 70px; }
.pf-lado { position: relative; }
.pf-num { display: block; margin: 0 0 6px -.04em; font-family: var(--f-titulo); font-weight: 800; font-size: clamp(5.4rem, 3rem + 6vw, 9.5rem); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px rgba(var(--rey-rgb), .3); }
.pf-foto { --borde: 6px; position: absolute; right: 0; top: 0; width: 104px; }
.pf-foto.forma-arco { aspect-ratio: 4 / 4.8; }
.pf-foto.forma-ventana { aspect-ratio: 4 / 3; width: 132px; }
.pf-lado h2 { max-width: 14ch; }

/* ══ 404 ══ */
.e404 { position: relative; overflow: clip; display: flex; align-items: center; padding: calc(var(--header) + 40px) 0 clamp(80px, 9vw, 120px); text-align: center; background: var(--puntos), radial-gradient(900px 600px at 50% 0%, #fff, transparent 65%), linear-gradient(180deg, var(--azul-3), var(--azul-2) 70%, var(--azul-1)); }
.e404 > .container { width: 100%; }
.e404-arcos { background: repeating-radial-gradient(circle at 50% 100%, transparent 0 70px, rgba(var(--rey-rgb), .08) 70px 72px); }
.e404-centro { display: flex; flex-direction: column; align-items: center; }
.e404-cifra { display: flex; align-items: center; justify-content: center; margin: 0 0 clamp(30px, 3.4vw, 46px); font-family: var(--f-titulo); font-weight: 800; font-size: clamp(7.4rem, 3rem + 19vw, 17rem); line-height: .8; letter-spacing: -.06em; color: var(--tinta); }
.e404-cero { position: relative; display: block; flex: none; width: .74em; aspect-ratio: 1; margin: 0 .05em 0 .02em; }
.e404-cero .arco { left: -26%; right: -26%; top: 22%; bottom: -8%; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 92%); mask-image: linear-gradient(180deg, #000 40%, transparent 92%); }
.e404-cero video { object-position: 40% 50%; }
.e404-cero .marco { --borde: clamp(5px, .045em, 10px); position: absolute; inset: 0; z-index: 1; }
.e404-ruta { position: absolute; z-index: 2; left: 50%; bottom: -10%; translate: -50% 0; max-width: 78vw; overflow: hidden; text-overflow: ellipsis; }
.e404 h1 { max-width: 20ch; text-wrap: balance; font-size: clamp(1.9rem, 1rem + 2.6vw, 3.2rem); line-height: 1.06; letter-spacing: -.04em; }
.e404 .bajada { margin: 18px auto 0; }
.e404 .botones { justify-content: center; }

/* ══ TABLETA ≥ 640 ══ */
@media (min-width: 640px) {
  .tb-caso { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); grid-template-areas: "escena cab" "escena txt"; grid-template-rows: auto 1fr; gap: 10px 26px; align-items: start; padding: 14px 18px 14px 14px; }
  .tb-escena { min-height: 400px; padding: 40px 14% 18px; }
  .tb-cab { align-self: start; padding: 22px 0 6px; }
  .tb-txt { padding: 0 0 12px; height: 100%; }
  .tb-visitar { margin-top: auto; }
  .tb-num { left: 16px; top: 14px; font-size: .7rem; }
  .tb-resumen { gap: 14px 12px; margin-top: 32px; }
  .tb-resumen .sticker { font-size: .95rem; }
}

/* ══ TABLETA ≥ 760 ══ */
@media (min-width: 760px) {
  .ns-ficha b { font-size: 1.05rem; }
  .e404 { min-height: min(100vh, 980px); padding-top: calc(var(--header) + 48px); }
  .ns-promesas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .rb-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 12px; }
  .rb-mosaico .rb-mo { display: block; padding: 0; background: var(--rey); color: #fff; box-shadow: 0 14px 30px -18px rgba(var(--tinta-rgb), .55); }
  .rb-mosaico .mo-grande { grid-column: span 2; grid-row: span 2; }
  .rb-mosaico .mo-alto { grid-row: span 2; }
  .rb-mosaico .mo-ancho { grid-column: span 2; }
  .rb-mosaico .rb-mo::after { display: block; background: linear-gradient(180deg, rgba(var(--tinta-rgb), .18), transparent 30%, transparent 55%, rgba(var(--tinta-rgb), .35)); }
  .rb-mosaico .rb-mo img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border-radius: 0; }
  .rb-mo-icono { width: 40px; height: 40px; border-radius: 12px; }
  .rb-mo-icono .ico { width: 20px; height: 20px; }
  .rb-mo-txt { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; gap: 5px; padding: 14px 16px 13px; border-radius: 15px; background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 26px -14px rgba(var(--tinta-rgb), .6); transition: transform .45s var(--rebote); }
  .rb-mo:hover .rb-mo-txt { transform: translateY(-4px); }
  .rb-mo-bajada { font-size: .84rem; line-height: 1.4; }
  .mo-grande .rb-mo-txt, .mo-ancho .rb-mo-txt { left: 16px; right: auto; bottom: 16px; max-width: min(430px, calc(100% - 32px)); padding: 20px 22px 18px; }
  .mo-grande .rb-mo-nombre { font-size: 1.85rem; }
  .mo-ancho .rb-mo-nombre { font-size: 1.5rem; }
  .mo-grande .rb-mo-bajada, .mo-ancho .rb-mo-bajada { font-size: .95rem; }
  .ru-notas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
  .ru-nota:nth-child(even) { margin-top: 46px; }
  .ru-bloques { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ru-bloque-hero, .ru-bloque-pie { grid-column: 1 / -1; }
  .ru-bloque-pie { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4px 30px; align-items: start; }
  .ru-bloque-pie .ru-bloque-num, .ru-bloque-pie h3 { grid-column: 1; }
  .ru-bloque-pie p { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .ru-bloque-pie::after { display: none; }
  .ru-postales { display: block; }
  .ru-ciudades-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 50px; }
  .pf-indice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-foto { width: 150px; }
  .pf-foto.forma-ventana { width: 190px; }
}

/* ══ ESCRITORIO ≥ 1040 ══ */
@media (min-width: 1040px) {
  .ns-ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ns-ficha li + li { border-left: 1.5px dashed var(--linea-2); }
  .ns-ficha li:nth-child(n+3) { border-top: 0; }
  .ns-quien-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; }
  .ns-tablero { position: sticky; top: calc(var(--header) + 30px); }
  .ns-promesas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .ns-promesa { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 24px 30px; }
  .ns-promesa h3 { margin-top: 10px; padding-right: 0; }
  .ns-promesa-num { right: 2px; top: -16px; font-size: 6.6rem; }
  .ns-promesa:nth-child(even) { margin-top: 44px; }

  .rb-mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(280px, 21vw, 310px); gap: 14px; }

  .ru-cuerpo-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; }
  .ru-lateral { position: sticky; top: calc(var(--header) + 40px); }
  .ru-bloque-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 6px 40px; align-items: end; }
  .ru-bloque-hero .ru-bloque-num, .ru-bloque-hero h3 { grid-column: 1; }
  .ru-bloque-hero p { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .ru-bloque-hero::after { grid-column: 1; }

  .pf-lado { padding-right: 0; }
  .pf-foto { position: relative; right: auto; top: auto; width: min(76%, 270px); margin-top: 36px; }
  .pf-foto.forma-circulo { width: min(64%, 230px); }
  .pf-foto.forma-ventana { width: min(90%, 320px); }
}

/* ══ ESCRITORIO ANCHO ≥ 1180: los trabajos en dos columnas ══ */
@media (min-width: 1180px) {
  .tb-casos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .tb-escena { min-height: 460px; }
}

/* ══════ Rediseño v4 · sistemas ══════ */
/* ============================================================
   Rediseño v4 "Collage vivo" · fase 2 · grupo sistemas y servicios
   /servicios/{slug} · /sistemas-de-gestion · /sistemas-de-gestion/{slug} · demos (el demo-kit trae lo suyo en línea).
   Piezas (PHP): src/includes/v4-sistemas.php. Todas las clases propias llevan el prefijo .sx-
   Paleta sobria: blanco y azul claro de base, azul rey como único fuerte, el sol solo en el botón principal.
   ============================================================ */

/* == Ficha técnica: tira blanca de 4 celdas (reemplaza a .cabeza-datos) == */
.sx-ficha { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(34px, 5vw, 60px); border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--linea), var(--sombra); overflow: hidden; }
.sx-ficha li { display: grid; gap: 4px; align-content: start; padding: 16px 16px 18px; box-shadow: 1px 1px 0 var(--linea); }
.sx-ficha .ico { color: var(--rey); margin-bottom: 6px; }
.sx-ficha span { font-family: var(--f-mono); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }
.sx-ficha b { font-family: var(--f-titulo); font-weight: 700; font-size: .95rem; line-height: 1.3; letter-spacing: -.01em; color: var(--tinta); }

/* == Notas blancas numeradas (sobre el azul rey o sobre claro) == */
.sx-notas { display: grid; gap: 18px; counter-reset: sxn; align-self: center; }
.sx-nota {
  counter-increment: sxn; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 18px 22px 18px 16px; border-radius: 20px; background: #fff; color: var(--tinta);
  font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1rem, .9rem + .4vw, 1.2rem); line-height: 1.35; letter-spacing: -.015em;
  box-shadow: 0 26px 46px -26px rgba(5, 15, 50, .65), 0 2px 0 rgba(var(--tinta-rgb), .05);
  transform: rotate(var(--r, 0deg)); transition: transform .45s var(--rebote);
}
.sx-nota:hover { transform: rotate(0deg) translateY(-3px); }
.sx-nota::before { content: counter(sxn, decimal-leading-zero); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--azul-2); color: var(--rey); font-family: var(--f-mono); font-size: .8rem; font-weight: 600; letter-spacing: 0; }
.sx-notas-claro .sx-nota { box-shadow: 0 0 0 1px var(--linea), 0 22px 40px -26px rgba(var(--hondo-rgb), .55); }

/* Foto (o collage chico) debajo del título fijo de una columna */
.sx-foto-lado { position: relative; width: min(60%, 340px); margin-top: clamp(28px, 4vw, 44px); }
.sx-foto-lado .forma-arco { aspect-ratio: 4 / 4.4; }
.sx-foto-proceso { width: min(78%, 380px); }
.sx-foto-proceso .sticker { position: absolute; right: -14px; bottom: -16px; z-index: 2; }

/* == Qué incluye: tarjetas con el número calado == */
.sx-incluye { display: grid; gap: 22px; }
.sx-inc {
  position: relative; padding: 26px 26px 28px; border-radius: 24px; background: #fff;
  box-shadow: 0 0 0 1px var(--linea), 0 22px 44px -28px rgba(var(--hondo-rgb), .55);
  transform: rotate(var(--r, 0deg)); transition: transform .45s var(--rebote), box-shadow .3s;
}
.sx-inc:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 0 0 0 1px rgba(var(--rey-rgb), .3), 0 30px 54px -26px rgba(var(--hondo-rgb), .6); }
.sx-inc-num { display: inline-grid; place-items: center; min-width: 64px; height: 64px; margin-bottom: 18px; padding: 0 12px; border-radius: 20px; background: var(--azul-2); font-family: var(--f-titulo); font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: -.05em; color: var(--rey); transform: rotate(-4deg); transition: transform .45s var(--rebote), background-color .3s, color .3s; }
.sx-inc:hover .sx-inc-num { transform: rotate(0deg); background: var(--rey); color: #fff; }
.sx-inc h3 { font-size: 1.26rem; line-height: 1.15; letter-spacing: -.025em; margin-bottom: 10px; }
.sx-inc p { font-size: .98rem; line-height: 1.55; color: var(--tinta-2); }

/* == Texto largo de un servicio (.prose + piezas del cuerpo en servicios-data.php) == */
.sx-prose > :first-child { margin-top: 0; }
.sx-prose .grid-2 { display: grid; gap: 14px; }
.sx-prose .tarjeta { padding: 22px 22px 24px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 18px 34px -26px rgba(var(--hondo-rgb), .5); }
.sx-prose .tarjeta h3 { margin: 0 0 6px; font-size: 1.12rem; }
.sx-prose .tarjeta h3::before { content: ''; display: block; width: 26px; height: 4px; margin-bottom: 14px; border-radius: 2px; background: var(--rey); }
.sx-prose .tarjeta p { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--tinta-2); }
.sx-prose .nota { position: relative; padding: 20px 22px 20px 64px; border-radius: 20px; background: linear-gradient(135deg, #fff, var(--azul-1)); box-shadow: 0 0 0 1px rgba(var(--rey-rgb), .18); }
.sx-prose .nota::before { content: 'i'; position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--rey); color: #fff; font-family: var(--f-mono); font-weight: 600; font-size: .9rem; }
.sx-prose .nota p { margin: 0; }
.sx-prose .tabla { display: block; overflow-x: auto; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--linea); }
.sx-prose .tabla th { background: var(--azul-2); font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rey-link); white-space: nowrap; }
.sx-prose .tabla th, .sx-prose .tabla td { padding: 12px 16px; vertical-align: top; }
.sx-prose .tabla tr:last-child td { border-bottom: 0; }
.sx-prose ol.pasos { display: block; counter-reset: sxp; }
.sx-prose ol.pasos::before { display: none; }
.sx-prose ol.pasos > li { counter-increment: sxp; margin: 0; padding: 16px 0 16px 62px; border-bottom: 1px solid var(--linea); }
.sx-prose ol.pasos > li::before { content: counter(sxp, decimal-leading-zero); left: 0; top: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(var(--rey-rgb), .2), 0 8px 16px -10px rgba(var(--hondo-rgb), .5); font-family: var(--f-mono); font-weight: 600; font-size: .85rem; line-height: 1; color: var(--rey); }
.sx-prose .lista-check > li::before { left: 2px; top: .5em; width: 14px; height: 8px; border-radius: 0; background: none; border-left: 2.5px solid var(--rey); border-bottom: 2.5px solid var(--rey); transform: rotate(-45deg); }

/* Lateral: llamado azul con grano y arcos, relacionados con foto */
.lateral-cta.grano { overflow: hidden; background: radial-gradient(70% 60% at 85% 0%, rgba(255, 255, 255, .22), transparent 70%), repeating-radial-gradient(circle at 100% 100%, transparent 0 34px, rgba(255, 255, 255, .08) 34px 36px), linear-gradient(160deg, var(--rey-2), var(--rey) 55%, var(--rey-hondo)); box-shadow: 0 0 0 4px #fff, var(--sombra); }
.lateral-cta > * { position: relative; z-index: 1; }
.lateral-cta p { color: rgba(255, 255, 255, .9); }
.sx-rel { display: grid; gap: 2px; }
.sx-rel a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 5px 8px 5px 5px; border-radius: 14px; font-weight: 600; line-height: 1.25; color: var(--tinta); transition: background-color .2s, color .2s; }
.sx-rel a:hover { background: var(--azul-2); color: var(--rey-link); }
.sx-rel-foto { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 6px 14px -6px rgba(var(--tinta-rgb), .5); }
.sx-rel-foto img { width: 100%; height: 100%; object-fit: cover; }
.sx-rel-todos { background: var(--azul-2); color: var(--rey); }

/* == Postales con cinta (proceso del servicio, un día con el sistema, qué estás viendo en las demos) == */
.sx-postales { position: relative; display: grid; gap: 28px; }
.sx-postal {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: start;
  padding: 24px 22px 24px 20px; border-radius: 22px; background: #fff; color: var(--tinta);
  box-shadow: 0 24px 46px -26px rgba(var(--tinta-rgb), .55), 0 2px 0 rgba(var(--tinta-rgb), .05);
  transform: rotate(var(--r, 0deg)); transition: transform .45s var(--rebote);
}
.sx-postal:hover { transform: rotate(0deg) translateY(-4px); }
.sx-postal-num { display: flex; flex-direction: column; font-family: var(--f-titulo); font-weight: 800; font-size: 2.5rem; line-height: .9; letter-spacing: -.05em; color: var(--rey); }
.sx-postal-num small { margin-bottom: 6px; font-family: var(--f-mono); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.sx-postal h3 { font-size: 1.2rem; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 6px; }
.sx-postal p { font-size: .95rem; line-height: 1.55; color: var(--tinta-2); }
/* Vertical: línea punteada con los números en círculos y la tarjeta al costado */
.sx-vertical { gap: 22px; }
.sx-vertical::before { content: ''; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px; background: repeating-linear-gradient(180deg, rgba(var(--rey-rgb), .45) 0 10px, transparent 10px 18px); }
.sx-vertical .sx-postal { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 0; background: none; box-shadow: none; transform: none; }
.sx-vertical .sx-postal:hover { transform: none; }
.sx-vertical .sx-postal-num { justify-content: center; align-items: center; width: 52px; height: 52px; margin-top: 10px; border-radius: 50%; background: var(--rey); color: #fff; font-size: 1.25rem; letter-spacing: -.03em; box-shadow: 0 0 0 5px var(--azul-3), 0 10px 20px -8px rgba(var(--hondo-rgb), .6); }
.sx-vertical .sx-postal-num small { margin: 0 0 1px; font-size: .46rem; letter-spacing: .1em; color: var(--azul-suave); }
.sx-vertical .sx-postal > div { padding: 22px 22px 24px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 22px 40px -26px rgba(var(--hondo-rgb), .55); transform: rotate(var(--r, 0deg)); transition: transform .45s var(--rebote); }
.sx-vertical .sx-postal:hover > div { transform: rotate(0deg) translateX(4px); }
.sx-vertical .adhesiva { left: calc(50% + 33px); }

/* == Ciudades: solo texto, en una cinta azul que corre (main.js mueve [data-cinta]) == */
.sx-ciudades { position: relative; overflow: clip; padding: clamp(52px, 6vw, 84px) 0 clamp(64px, 7vw, 96px); text-align: center; background: repeating-linear-gradient(135deg, rgba(var(--rey-rgb), .045) 0 2px, transparent 2px 26px), radial-gradient(760px 260px at 50% 100%, rgba(var(--rey2-rgb), .16), transparent 70%), var(--azul-3); }
.sx-ciudades .etiqueta { margin-bottom: 30px; }
.sx-cinta { position: relative; top: auto; left: -6vw; width: 112vw; transform: rotate(-2deg); }

/* == Catálogo de sistemas == */
.sx-filtros .filtro { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.sx-filtros .filtro:hover { border-color: var(--rey); color: var(--rey-link); }
.sx-filtros .filtro .ico { color: var(--rey); }
.sx-filtros .filtro small { padding: 1px 8px; border-radius: 999px; background: var(--azul-2); color: var(--rey-link); font-family: var(--f-mono); font-size: .7rem; font-weight: 600; }
.sx-filtros .filtro.activo, .sx-filtros .filtro.activo:hover { color: #fff; }
.sx-filtros .filtro.activo .ico { color: #fff; }
.sx-filtros .filtro.activo small { background: rgba(255, 255, 255, .2); color: #fff; }
.sx-catalogo { display: grid; gap: 16px; }
.sx-grupo { position: relative; overflow: hidden; isolation: isolate; min-height: 170px; border-radius: 22px; background: var(--rey); color: #fff; box-shadow: 0 18px 36px -22px rgba(var(--tinta-rgb), .6); }
.sx-grupo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-grupo::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(var(--hondo-rgb), 0) 25%, rgba(var(--hondo-rgb), .88)); }
.sx-grupo-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 18px; }
.sx-grupo .icono-caja { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 14px; background: #fff; }
.sx-grupo b { font-family: var(--f-titulo); font-weight: 800; font-size: 1.22rem; line-height: 1.1; letter-spacing: -.02em; }
.sx-grupo small { font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-1); }
.sx-sistema { padding: 18px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
.sx-sistema .icono-caja { width: 48px; height: 48px; border-radius: 14px; }
.sx-sistema-txt { display: grid; gap: 6px; }
.sx-sistema h2, .sx-sistema h3 { font-size: 1.1rem; line-height: 1.2; letter-spacing: -.02em; }
.sx-sistema .sticker { top: -11px; right: 14px; }
.sx-sistema:hover h2, .sx-sistema:hover h3 { color: var(--rey-link); }
.sx-otros { display: grid; gap: 22px; }

/* Demos sobre el azul (mismas tarjetas .demo del inicio) */
.sx-demos { margin-top: 0; }
.sx-demos .demo-txt h3 { font-size: 1.12rem; line-height: 1.15; letter-spacing: -.02em; color: var(--tinta); }
.sx-demos .demo-txt p { margin-top: 4px; font-size: .9rem; line-height: 1.4; color: var(--tinta-2); }

/* == Página de un sistema == */
/* Collage: la mini pantalla del sistema en lugar del círculo */
.sx-collage-sistema .pieza-b { right: -3%; top: 38%; width: 58%; }
.sx-collage-sistema .pieza-c { left: 3%; top: 72%; }
.sx-pantalla { display: block; overflow: hidden; border-radius: clamp(12px, 3cqw, 18px); background: #fff; box-shadow: 0 0 0 1px rgba(var(--tinta-rgb), .05), var(--sombra); font-size: clamp(.6rem, 2.5cqw, .86rem); }
.sx-pantalla-barra { display: flex; align-items: center; gap: .45em; padding: .75em .9em; background: var(--azul-2); }
.sx-pantalla-barra i { width: .65em; height: .65em; border-radius: 50%; background: rgba(var(--rey-rgb), .3); }
.sx-pantalla-barra b { margin-left: auto; font-family: var(--f-mono); font-size: .8em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rey-link); }
.sx-pantalla-cab { display: flex; align-items: center; gap: .75em; padding: 1em 1em .7em; }
.sx-pantalla-cab .icono-caja { flex: none; width: 2.7em; height: 2.7em; border-radius: .8em; }
.sx-pantalla-cab .icono-caja .ico { width: 1.3em; height: 1.3em; }
.sx-pantalla-cab b { font-family: var(--f-titulo); font-weight: 800; font-size: 1.05em; line-height: 1.15; letter-spacing: -.02em; color: var(--tinta); }
.sx-pantalla-lista { display: grid; gap: .55em; padding: .2em 1em 1.1em; }
.sx-pantalla-lista > span { display: flex; align-items: flex-start; gap: .55em; line-height: 1.3; color: var(--tinta-2); }
.sx-pantalla-lista .ico { flex: none; width: 1.35em; height: 1.35em; padding: .22em; border-radius: 50%; background: var(--rey); color: #fff; }

/* El problema: hoja de cuaderno pegada con cinta */
.sx-dolor { position: relative; max-width: 980px; margin: 0 auto; padding: clamp(34px, 5vw, 60px) clamp(22px, 5vw, 64px) clamp(36px, 5vw, 58px); border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--linea), var(--sombra); transform: rotate(-.8deg); }
.sx-dolor .adhesiva { width: 120px; height: 30px; top: -15px; }
.sx-dolor-txt {
  font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.25rem, .95rem + 1.4vw, 2.1rem); line-height: 1.5; letter-spacing: -.025em; color: var(--tinta);
  background: repeating-linear-gradient(180deg, transparent 0 calc(1.5em - 1px), rgba(var(--rey-rgb), .14) calc(1.5em - 1px) 1.5em);
}
/* La frase destacada del bloque "Qué hace" */
.sx-banda { display: flex; align-items: flex-start; gap: 12px; max-width: 46ch; margin-top: 28px; padding: 16px 20px 16px 16px; border-radius: 18px; background: #fff; color: var(--tinta); font-family: var(--f-titulo); font-weight: 700; font-size: 1.02rem; line-height: 1.4; letter-spacing: -.01em; box-shadow: 0 22px 40px -24px rgba(5, 15, 50, .6); transform: rotate(-1.2deg); }
.sx-banda .ico { flex: none; color: var(--rey); }
/* Caso típico: tarjeta azul con la foto en arco */
.sx-caso {
  display: grid; gap: 30px; align-items: center; padding: clamp(28px, 5vw, 64px); border-radius: 32px; overflow: clip; color: #fff;
  background: radial-gradient(700px 420px at 92% 0%, rgba(255, 255, 255, .2), transparent 60%), repeating-radial-gradient(circle at 0% 100%, transparent 0 60px, rgba(255, 255, 255, .06) 60px 62px), linear-gradient(160deg, var(--rey-2), var(--rey) 50%, var(--rey-hondo));
  box-shadow: 0 0 0 6px #fff, var(--sombra);
}
.sx-caso > * { position: relative; z-index: 1; }
.sx-caso-foto { width: min(64%, 320px); margin: 0 auto; aspect-ratio: 4 / 4.4; }
.sx-caso .etiqueta { color: var(--azul-suave); }
.sx-caso h2 { color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1.08; letter-spacing: -.035em; margin-bottom: 18px; }
.sx-caso p:not(.etiqueta) { max-width: 60ch; color: rgba(255, 255, 255, .92); font-size: 1.08rem; line-height: 1.65; }

/* == Celular: filtros en una fila fija que se desliza == */
@media (max-width: 759px) {
  .sx-filtros { position: sticky; top: 76px; z-index: 6; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--margen)) 26px; padding: 10px var(--margen); background: rgba(246, 249, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .sx-filtros::-webkit-scrollbar { display: none; }
  .sx-foto-lado { margin-inline: auto; }
  .sx-ciudades { text-align: left; }
  .sx-ciudades .etiqueta { letter-spacing: .08em; }
  .sx-ciudades .cinta-pista span { font-size: .95rem; }
}

/* == Tablet ≥ 640 / 760 == */
@media (min-width: 640px) {
  .sx-catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .sx-prose .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .sx-ficha li { grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 20px 22px; }
  .sx-ficha .ico { grid-row: 1 / 3; margin: 2px 0 0; }
  .sx-incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; padding-bottom: 40px; }
  .sx-inc:nth-child(even) { top: 40px; }
  .sx-postales:not(.sx-vertical) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 26px; }
  .sx-postales:not(.sx-vertical) .sx-postal { display: block; padding: 28px 26px 30px; }
  .sx-postales:not(.sx-vertical) .sx-postal-num { margin-bottom: 16px; font-size: 3.4rem; }
  .sx-vertical::before { left: 31px; }
  .sx-vertical .sx-postal { grid-template-columns: 64px minmax(0, 1fr); gap: 20px; }
  .sx-vertical .sx-postal-num { width: 64px; height: 64px; font-size: 1.5rem; }
  .sx-vertical .adhesiva { left: calc(50% + 42px); }
  .sx-sistema { display: flex; padding: 22px; }
  .sx-otros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx-caso { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 50px; }
  .sx-caso-foto { width: 100%; }
}

/* == Escritorio ≥ 1040 == */
@media (min-width: 1040px) {
  .sx-ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sx-ficha li { padding: 24px 26px; }
  .sx-notas:not(.sx-notas-claro) .sx-nota:nth-child(even) { margin-left: 44px; margin-right: -14px; }
  .sx-incluye { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 56px; }
  .sx-inc:nth-child(even) { top: 0; }
  .sx-inc:nth-child(3n+2) { top: 56px; }
  .sx-postales:not(.sx-vertical) { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); padding-bottom: 50px; }
  .sx-postales:not(.sx-vertical)::before { content: ''; position: absolute; left: 3%; right: 3%; top: 38%; height: 3px; background: repeating-linear-gradient(90deg, rgba(var(--rey-rgb), .35) 0 12px, transparent 12px 22px); }
  .sx-postales:not(.sx-vertical) .sx-postal:nth-child(even) { top: 50px; }
  .sx-catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .sx-grupo { min-height: 220px; }
  .sx-grupo-txt { padding: 22px; }
  .sx-grupo b { font-size: 1.4rem; }
  .sx-caso { padding: 64px 72px 64px 56px; }
}