/* ═══════════════════════════════════════════════════════════════════════════
   istmo-2026.css — PIEL COMÚN DEL SITIO (rediseño 2026-10-16, estilo resolx.ai)
   ───────────────────────────────────────────────────────────────────────────
   La referencia es la portada (index.html, <style id="piel-resolx">), que NO
   enlaza esta hoja: tiene su piel propia. Todas las demás páginas la reciben
   con `node _tools/aplicar-piel.mjs`, que además pone <body class="piel scrolled">,
   el skeleton de carga y quita AOS y el cambio oscuro→claro.

   Cómo está organizada:
     1. Variables
     2. Base (fondo blanco fijo, Geist, titulares)
     3. Remapeo de las utilidades oscuras de Tailwind (páginas viejas)
     4. "Islas oscuras" (pantallas, mockups, velos sobre fotos) que siguen oscuras
     5. Banda morada (héroes de página y CTA de fondo morado)
     6. Tarjetas, botones, FAQ, artículos, tablas
     7. Barra de navegación, submenús, menú móvil, selector de idioma
     8. Pie
     9. Widget de chat y aviso de cookies
    10. COMPONENTES NUEVOS (prefijo pi-) para rehacer secciones a mano
    11. Movimiento reducido

   REGLAS: nada de animaciones ligadas al scroll; texto ≥ 4,5:1; sin scroll
   horizontal a 360 px. Va enlazada al FINAL del <body> (bloque PIEL-FIN) para
   ganar en la cascada a los <style> de cada página y al CSS que Tailwind CDN
   inyecta en el <head>. Al cambiarla, subir el ?v= en aplicar-piel.mjs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Variables ─────────────────────────────────────────────────────────── */
:root {
    --ink:#0b0b0f; --ink2:#374151; --ink3:#4b5563; --ink4:#6b7280;
    --line:#e5e7eb; --line2:#eef0f4;
    --el:#5e6ad2; --el-ink:#4b55c4; --vio:#8b5cf6; --cy:#22d3ee; --ok:#047857;
    --tint:#f5f3ff;
    --band:#4a3fb8;
    --ff:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
    --grad-text:linear-gradient(90deg,#8b5cf6 0%,#5e6ad2 100%);
    --grad-text-light:linear-gradient(90deg,#a5f3fc 0%,#e9d5ff 100%);
    --grad-btn:linear-gradient(90deg,#7a57ee 0%,#5e6ad2 100%);
    --grad-band:radial-gradient(45% 55% at 88% 12%, rgba(34,211,238,.34), transparent 70%),
                radial-gradient(55% 60% at 8% 90%, rgba(139,92,246,.55), transparent 70%),
                linear-gradient(135deg,#3c43a6 0%,#4a3fb8 45%,#5b34c4 100%);
    --card-sh:0 1px 2px rgba(17,24,39,.04), 0 24px 48px -32px rgba(60,64,140,.28);
    --card-sh-hover:0 30px 60px -34px rgba(60,64,140,.4);
    --frame:0 0 0 8px rgba(255,255,255,.9), 0 0 0 9px var(--line2), 0 44px 80px -40px rgba(60,64,140,.42);
}

/* ── 2. Base ──────────────────────────────────────────────────────────────── */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body.piel { background:#fff !important; color:var(--ink); font-family:var(--ff); transition:none; -webkit-font-smoothing:antialiased; }
body.piel h1, body.piel h2, body.piel h3, body.piel h4, body.piel h5, body.piel .font-syne { font-family:var(--ff); letter-spacing:-.02em; }
body.piel .font-mono { font-family:var(--ff); letter-spacing:.01em; font-variant-numeric:tabular-nums; }
body.piel .font-light { font-weight:400; }
body.piel .font-extrabold, body.piel .font-black { font-weight:700; }
body.piel ::selection { background:#e4e1fd; }
body.piel a:focus-visible, body.piel button:focus-visible, body.piel summary:focus-visible { outline:2px solid var(--el); outline-offset:3px; border-radius:8px; }
body.piel p { text-wrap:pretty; }
body.piel h1, body.piel h2 { text-wrap:balance; }
/* Los titulares de fuera de islas/bandas: tinta (las páginas viejas los ponían blancos) */
body.piel :is(h1,h2,h3,h4,h5):not(:where(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, body.piel-oscura > :is(header, section):not(#faq) *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, .phone *, .sl *, .pi-band *, body.piel > header.relative.overflow-hidden *, body.piel > main > header.relative.overflow-hidden *, body.piel > header.geo-hero *, section[class*="from-indigo-7"] *, section[class*="from-violet-7"] *, section[class*="from-purple-7"] *, section[class*="from-blue-7"] *, section[class*="from-amber-7"] *, section[class*="from-gray-8"] *, section[class*="from-green-7"] *, section[class*="from-rose-7"] *, section.bg-blue-600 *, section.bg-indigo-600 *, section.bg-violet-600 *)) { color:var(--ink); }
body.piel h1 { font-weight:400; letter-spacing:-.025em; }
body.piel section h2, body.piel article h2 { font-weight:700; letter-spacing:-.022em; }
body.piel section h3, body.piel section h4, body.piel article h3 { font-weight:600; }

/* Ningún efecto oscuro→claro ni AOS: lo que quedara con data-aos se ve siempre */
body.piel [data-aos] { opacity:1 !important; transform:none !important; }
body.piel .hero-blob, body.piel .geo-orb, body.piel #spotlight, body.piel #scrollbar { display:none !important; }
body.piel .gradient-animate, body.piel .grad-anim { animation:none !important; }

/* ── 3. Remapeo de utilidades oscuras (Tailwind) ──────────────────────────── */
/* Fondos negros → blanco */
body.piel .bg-black, body.piel .bg-obsidian, body.piel .bg-\[\#050505\], body.piel .bg-\[\#08090a\] { background-color:#fff; }
body.piel [class*="to-[#050505]"]:not(.absolute), body.piel [class*="from-[#050505]"]:not(.absolute) { background-image:none; }
/* Velos de degradado negro sobre las fotos de héroe: fuera */
body.piel .absolute.inset-0[class*="from-[#050505]"], body.piel .absolute.inset-0[class*="to-[#050505]"] { display:none; }
/* Bordes blancos translúcidos → línea gris fina */
body.piel .border-white\/5, body.piel .border-white\/10, body.piel .border-white\/20, body.piel .border-gray-700, body.piel .border-gray-800 { border-color:var(--line); }
body.piel .divide-white\/5 > * + *, body.piel .divide-white\/10 > * + * { border-color:var(--line); }

/* Texto: grises pensados para fondo negro → grises legibles en blanco (≥4,5:1).
   La lista de :not() es la de las ISLAS (sección 4) y las BANDAS (sección 5). */
body.piel :is(.text-white, .text-gray-100, .text-gray-200, .text-zinc-100):not(:where(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, body.piel-oscura > :is(header, section):not(#faq) *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, .phone *, .sl *, .pi-band *, body.piel > header.relative.overflow-hidden *, body.piel > main > header.relative.overflow-hidden *, body.piel > header.geo-hero *, section[class*="from-indigo-7"] *, section[class*="from-violet-7"] *, section[class*="from-purple-7"] *, section[class*="from-blue-7"] *, section[class*="from-amber-7"] *, section[class*="from-gray-8"] *, section[class*="from-green-7"] *, section[class*="from-rose-7"] *, section.bg-blue-600 *, section.bg-indigo-600 *, section.bg-violet-600 *, [class*="bg-indigo-6"], [class*="bg-blue-6"], [class*="bg-violet-6"], [class*="bg-green-6"], [class*="bg-rose-6"], [class*="bg-amber-6"], [class*="bg-emerald-5"], [class*="bg-emerald-6"], [class*="bg-red-6"], [class*="bg-indigo-6"] *, [class*="bg-blue-6"] *, [class*="bg-green-6"] *, .btn-primary, .btn-primary *, .lang-cur)) { color:var(--ink); }
body.piel :is(.text-gray-300):not(:where(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, body.piel-oscura > :is(header, section):not(#faq) *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, .phone *, .sl *, .pi-band *, body.piel > header.relative.overflow-hidden *, body.piel > main > header.relative.overflow-hidden *, body.piel > header.geo-hero *, section[class*="from-indigo-7"] *, section[class*="from-violet-7"] *, section[class*="from-purple-7"] *, section[class*="from-blue-7"] *, section[class*="from-amber-7"] *, section[class*="from-gray-8"] *, section[class*="from-green-7"] *, section[class*="from-rose-7"] *, section.bg-blue-600 *, section.bg-indigo-600 *, section.bg-violet-600 *)) { color:var(--ink2); }
body.piel :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-soft, .text-zinc-400, .text-zinc-500):not(:where(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, body.piel-oscura > :is(header, section):not(#faq) *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, .phone *, .sl *, .pi-band *, body.piel > header.relative.overflow-hidden *, body.piel > main > header.relative.overflow-hidden *, body.piel > header.geo-hero *, section[class*="from-indigo-7"] *, section[class*="from-violet-7"] *, section[class*="from-purple-7"] *, section[class*="from-blue-7"] *, section[class*="from-amber-7"] *, section[class*="from-gray-8"] *, section[class*="from-green-7"] *, section[class*="from-rose-7"] *, section.bg-blue-600 *, section.bg-indigo-600 *, section.bg-violet-600 *)) { color:var(--ink3); }

/* Acentos de color (pensados sobre negro) → tono más oscuro, legible en blanco */
body.piel :is(.text-indigo-300, .text-indigo-400, .text-indigo-500, .text-electric, .text-electric-light):not(:where(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, body.piel-oscura > :is(header, section):not(#faq) *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, .phone *, .sl *, .pi-band *, body.piel > header.relative.overflow-hidden *, body.piel > main > header.relative.overflow-hidden *, body.piel > header.geo-hero *, section[class*="from-indigo-7"] *, section[class*="from-violet-7"] *, section[class*="from-purple-7"] *, section[class*="from-blue-7"] *, section[class*="from-amber-7"] *, section[class*="from-gray-8"] *, section[class*="from-green-7"] *, section[class*="from-rose-7"] *, section.bg-blue-600 *, section.bg-indigo-600 *, section.bg-violet-600 *)) { color:var(--el-ink); }
body.piel :is(.text-cyan-300, .text-cyan-400, .text-cyan-500, .text-cyan2):not(:where(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, body.piel-oscura > :is(header, section):not(#faq) *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, .phone *, .sl *, .pi-band *, body.piel > header.relative.overflow-hidden *, body.piel > main > header.relative.overflow-hidden *, body.piel > header.geo-hero *, section[class*="from-indigo-7"] *, section[class*="from-violet-7"] *, section[class*="from-purple-7"] *, section[class*="from-blue-7"] *, section[class*="from-amber-7"] *, section[class*="from-gray-8"] *, section[class*="from-green-7"] *, section[class*="from-rose-7"] *, section.bg-blue-600 *, section.bg-indigo-600 *, section.bg-violet-600 *)) { color:#0e7490; }
body.piel :is(.text-blue-300, .text-blue-400, .text-blue-500):not(:where(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, body.piel-oscura > :is(header, section):not(#faq) *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, .phone *, .sl *, .pi-band *, body.piel > header.relative.overflow-hidden *, body.piel > main > header.relative.overflow-hidden *, body.piel > header.geo-hero *, section[class*="from-indigo-7"] *, section[class*="from-violet-7"] *, section[class*="from-purple-7"] *, section[class*="from-blue-7"] *, section[class*="from-amber-7"] *, section[class*="from-gray-8"] *, section[class*="from-green-7"] *, section[class*="from-rose-7"] *, section.bg-blue-600 *, section.bg-indigo-600 *, section.bg-violet-600 *)) { color:#1d4ed8; }
body.piel :is(.text-violet-300, .text-violet-400, .text-violet-500, .text-purple-300, .text-purple-400, .text-purple-500, .text-violet2):not(:where(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, body.piel-oscura > :is(header, section):not(#faq) *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, .phone *, .sl *, .pi-band *, body.piel > header.relative.overflow-hidden *, body.piel > main > header.relative.overflow-hidden *, body.piel > header.geo-hero *, section[class*="from-indigo-7"] *, section[class*="from-violet-7"] *, section[class*="from-purple-7"] *, section[class*="from-blue-7"] *, section[class*="from-amber-7"] *, section[class*="from-gray-8"] *, section[class*="from-green-7"] *, section[class*="from-rose-7"] *, section.bg-blue-600 *, section.bg-indigo-600 *, section.bg-violet-600 *)) { color:#6d28d9; }
body.piel :is(.text-green-300, .text-green-400, .text-green-500, .text-emerald-300, .text-emerald-400, .text-emerald-500, .text-neon, .text-teal-400, .text-teal-500):not(:where(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, body.piel-oscura > :is(header, section):not(#faq) *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, .phone *, .sl *, .pi-band *, body.piel > header.relative.overflow-hidden *, body.piel > main > header.relative.overflow-hidden *, body.piel > header.geo-hero *, section[class*="from-indigo-7"] *, section[class*="from-violet-7"] *, section[class*="from-purple-7"] *, section[class*="from-blue-7"] *, section[class*="from-amber-7"] *, section[class*="from-gray-8"] *, section[class*="from-green-7"] *, section[class*="from-rose-7"] *, section.bg-blue-600 *, section.bg-indigo-600 *, section.bg-violet-600 *)) { color:var(--ok); }
body.piel :is(.text-rose-400, .text-rose-500, .text-red-400, .text-red-500, .text-pink-400, .text-pink-500):not(:where(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, body.piel-oscura > :is(header, section):not(#faq) *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, .phone *, .sl *, .pi-band *, body.piel > header.relative.overflow-hidden *, body.piel > main > header.relative.overflow-hidden *, body.piel > header.geo-hero *, section[class*="from-indigo-7"] *, section[class*="from-violet-7"] *, section[class*="from-purple-7"] *, section[class*="from-blue-7"] *, section[class*="from-amber-7"] *, section[class*="from-gray-8"] *, section[class*="from-green-7"] *, section[class*="from-rose-7"] *, section.bg-blue-600 *, section.bg-indigo-600 *, section.bg-violet-600 *)) { color:#be123c; }
body.piel :is(.text-amber-300, .text-amber-400, .text-amber-500, .text-yellow-400, .text-yellow-500, .text-orange-300, .text-orange-400, .text-orange-500):not(:where(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, body.piel-oscura > :is(header, section):not(#faq) *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, .phone *, .sl *, .pi-band *, body.piel > header.relative.overflow-hidden *, body.piel > main > header.relative.overflow-hidden *, body.piel > header.geo-hero *, section[class*="from-indigo-7"] *, section[class*="from-violet-7"] *, section[class*="from-purple-7"] *, section[class*="from-blue-7"] *, section[class*="from-amber-7"] *, section[class*="from-gray-8"] *, section[class*="from-green-7"] *, section[class*="from-rose-7"] *, section.bg-blue-600 *, section.bg-indigo-600 *, section.bg-violet-600 *)) { color:#b45309; }

/* Fondos translúcidos de "cristal" (blanco al 2-5 % sobre negro) → superficie clara */
body.piel .bg-white\/5, body.piel .bg-white\/10, body.piel .bg-white\/\[0\.02\], body.piel .bg-white\/\[0\.03\], body.piel .bg-white\/\[0\.04\], body.piel .bg-white\/\[0\.05\] { background-color:#fff; }
body.piel :is(.bg-indigo-500\/10, .bg-indigo-600\/5, .bg-violet-500\/10, .bg-blue-500\/10, .bg-cyan-500\/10, .bg-purple-500\/10) { background-color:var(--tint); }
body.piel :is(.bg-green-500\/5, .bg-green-500\/10, .bg-emerald-500\/10) { background-color:#ecfdf5; }
body.piel :is(.bg-red-500\/5, .bg-red-500\/10, .bg-rose-500\/10) { background-color:#fff1f2; }
body.piel :is(.bg-amber-500\/10, .bg-yellow-500\/10) { background-color:#fffbeb; }

/* Degradados de texto: estáticos y con contraste sobre blanco */
body.piel .istmoia-grad, body.piel .grad-anim, body.piel .ci-grad-anim, body.piel .stats-number {
    background:var(--grad-text) !important; background-size:100% 100% !important; -webkit-background-clip:text !important; background-clip:text !important;
    -webkit-text-fill-color:transparent; color:transparent; animation:none !important; }
body.piel .istmoia-grad { font-weight:600; }
body.piel .bg-clip-text.text-transparent { background-image:var(--grad-text) !important; animation:none !important; }

/* ── 4. Islas oscuras ─────────────────────────────────────────────────────── */
/* Pantallas de producto, mockups de chat y velos sobre fotos: SIGUEN oscuros y
   sus textos conservan los colores claros de Tailwind (las reglas de arriba
   las excluyen). Para marcar una isla nueva: class="keep-dark". */
body.piel .keep-dark { background-color:#0d0e12; color:#e5e7eb; }
body.piel.piel-oscura > :is(header, section):not(#faq) { background-color:#08090a; color:#e5e7eb; }
body.piel :is(.keep-dark, .chat-mock, .call-mock, .wa-mock, .mock, .mock-wa, .sl-device, .sl, .phone, .bg-zinc-900, [class*="bg-[#0"], [class*="bg-[#1"], body.piel-oscura > :is(header, section):not(#faq)) :is(h1,h2,h3,h4,h5) { color:#fff; }
body.piel :is(.keep-dark, .chat-mock, .call-mock, .wa-mock, .mock, .mock-wa, .sl-device, .sl, .phone, .bg-zinc-900, [class*="bg-[#0"], [class*="bg-[#1"], body.piel-oscura > :is(header, section):not(#faq)) :is(.text-gray-400, .text-gray-500, .text-gray-600) { color:#a1a1aa; }
body.piel :is(.keep-dark, .chat-mock, .call-mock, .wa-mock, .mock, .mock-wa, .sl-device, .sl, .phone, .bg-zinc-900, [class*="bg-[#0"], [class*="bg-[#1"], body.piel-oscura > :is(header, section):not(#faq)) .text-gray-300 { color:#d1d5db; }
body.piel :is(.portfolio-overlay, [class*="bg-black/"]) :is(h1,h2,h3,h4,h5,p,span) { color:#fff; }
/* Dentro de una isla, los "cristales" siguen siendo cristal oscuro */
body.piel :is(.bg-white\/5, .bg-white\/10, .bg-white\/\[0\.02\], .bg-white\/\[0\.03\], .bg-white\/\[0\.04\], .bg-white\/\[0\.05\]):is(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, .sl *, .phone *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, body.piel-oscura > :is(header, section):not(#faq) *) { background-color:rgba(255,255,255,.05); }
body.piel :is(.border-white\/5, .border-white\/10, .border-white\/20):is(.keep-dark *, .chat-mock *, .call-mock *, .wa-mock *, .mock *, .mock-wa *, .sl-device *, .sl *, .phone *, .bg-zinc-900 *, [class*="bg-[#0"] *, [class*="bg-[#1"] *, [class*="bg-black/"] *, .portfolio-overlay *, body.piel-oscura > :is(header, section):not(#faq) *) { border-color:rgba(255,255,255,.1); }

/* ── 5. Banda morada ──────────────────────────────────────────────────────── */
/* El héroe de cada página vieja (<header class="relative ... overflow-hidden">
   hijo directo de <body>) pasa a ser la banda morada redondeada de la portada,
   con la foto como textura. Las CTA de fondo morado (from-indigo-700…) igual.
   Para una banda nueva escrita a mano: class="pi-band". */
body.piel :is(.pi-band, body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero, section[class*="from-indigo-7"], section[class*="from-violet-7"], section[class*="from-purple-7"], section[class*="from-blue-7"], section[class*="from-amber-7"], section[class*="from-gray-8"], section[class*="from-green-7"], section[class*="from-rose-7"], section.bg-blue-600, section.bg-indigo-600, section.bg-violet-600) {
    position:relative; isolation:isolate; overflow:hidden; color:#fff;
    background-color:var(--band); background-image:var(--grad-band);
    border-radius:20px; margin-left:12px; margin-right:12px; border:0; }
@media (min-width:768px) { body.piel :is(.pi-band, body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero, section[class*="from-indigo-7"], section[class*="from-violet-7"], section[class*="from-purple-7"], section[class*="from-blue-7"], section[class*="from-amber-7"], section[class*="from-gray-8"], section[class*="from-green-7"], section[class*="from-rose-7"], section.bg-blue-600, section.bg-indigo-600, section.bg-violet-600) { border-radius:24px; margin-left:24px; margin-right:24px; } }
/* Héroe de página: debajo de la barra fija */
body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero { margin-top:88px; padding-top:clamp(64px, 9vw, 120px) !important; padding-bottom:clamp(56px, 8vw, 104px) !important; }
@media (min-width:768px) { body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero { margin-top:92px; } }
/* CTA morada: separada del resto */
body.piel section[class*="from-indigo-7"], body.piel section[class*="from-violet-7"], body.piel section[class*="from-purple-7"], section[class*="from-blue-7"], section[class*="from-amber-7"], section[class*="from-gray-8"], section[class*="from-green-7"], section[class*="from-rose-7"] { margin-top:clamp(40px,6vw,72px); margin-bottom:clamp(40px,6vw,72px); }
/* La foto del héroe queda como textura dentro de la banda */
body.piel :is(body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero) > .absolute.inset-0[class*="bg-[url"],
body.piel :is(body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero) > .absolute.inset-0.bg-cover { opacity:.22 !important; mix-blend-mode:luminosity; z-index:-1; }
/* Textos dentro de la banda */
body.piel :is(.pi-band, body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero, section[class*="from-indigo-7"], section[class*="from-violet-7"], section[class*="from-purple-7"], section[class*="from-blue-7"], section[class*="from-amber-7"], section[class*="from-gray-8"], section[class*="from-green-7"], section[class*="from-rose-7"], section.bg-blue-600, section.bg-indigo-600, section.bg-violet-600) :is(h1,h2,h3,h4,h5,p,li,.text-white,.text-gray-100,.text-gray-200,.text-gray-300) { color:#fff; }
body.piel :is(.pi-band, body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero, section[class*="from-indigo-7"], section[class*="from-violet-7"], section[class*="from-purple-7"], section[class*="from-blue-7"], section[class*="from-amber-7"], section[class*="from-gray-8"], section[class*="from-green-7"], section[class*="from-rose-7"], section.bg-blue-600, section.bg-indigo-600, section.bg-violet-600) :is(.text-gray-400,.text-gray-500,.text-gray-600,[class*="text-indigo-"],[class*="text-blue-"],[class*="text-violet-"],[class*="text-purple-"]):not(.bg-white):not(.bg-white *) { color:#e6e4ff; }
body.piel :is(.pi-band, body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero) h1 { font-weight:300; letter-spacing:-.025em; line-height:1.1; text-shadow:0 2px 30px rgba(20,16,70,.3); }
body.piel :is(.pi-band, body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero) h1 + p { color:#fff; }
body.piel :is(.pi-band, body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero, section[class*="from-indigo-7"], section[class*="from-violet-7"], section[class*="from-purple-7"], section[class*="from-blue-7"], section[class*="from-amber-7"], section[class*="from-gray-8"], section[class*="from-green-7"], section[class*="from-rose-7"], section.bg-blue-600, section.bg-indigo-600, section.bg-violet-600) :is(.istmoia-grad, .bg-clip-text.text-transparent, .grad-anim, h1 [class*="grad"]) { background-image:var(--grad-text-light) !important; background:var(--grad-text-light) !important; -webkit-background-clip:text !important; background-clip:text !important; }
/* Insignia (píldora) del héroe */
body.piel :is(body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero) .inline-flex.rounded-full[class*="border"] { background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.32) !important; }
body.piel :is(body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero) .inline-flex.rounded-full[class*="border"] span:not([class*="bg-"]) { color:#fff; }
/* Botones en la banda: blanco relleno + contorno blanco */
body.piel :is(.pi-band, body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero) :is(a,button):is([class*="bg-indigo-6"], [class*="bg-blue-6"], [class*="bg-violet-6"], .btn-primary) { background:#fff !important; color:#0a0a0a !important; box-shadow:0 14px 30px -14px rgba(10,8,40,.6) !important; }
body.piel :is(.pi-band, body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero, section[class*="from-indigo-7"], section[class*="from-violet-7"], section[class*="from-purple-7"], section[class*="from-blue-7"], section[class*="from-amber-7"], section[class*="from-gray-8"], section[class*="from-green-7"], section[class*="from-rose-7"], section.bg-blue-600, section.bg-indigo-600, section.bg-violet-600) a:is([class*="border-white"], .btn-ghost) { background:rgba(255,255,255,.06) !important; color:#fff !important; border:1.5px solid rgba(255,255,255,.85) !important; }
body.piel :is(.pi-band, body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero, section[class*="from-indigo-7"], section[class*="from-violet-7"], section[class*="from-purple-7"], section[class*="from-blue-7"], section[class*="from-amber-7"], section[class*="from-gray-8"], section[class*="from-green-7"], section[class*="from-rose-7"], section.bg-blue-600, section.bg-indigo-600, section.bg-violet-600) a:is([class*="border-white"], .btn-ghost):hover { background:rgba(255,255,255,.16) !important; }
body.piel :is(.pi-band, section[class*="from-indigo-7"], section[class*="from-violet-7"], section[class*="from-purple-7"], section[class*="from-blue-7"], section[class*="from-amber-7"], section[class*="from-gray-8"], section[class*="from-green-7"], section[class*="from-rose-7"], section.bg-blue-600, section.bg-indigo-600, section.bg-violet-600) a.bg-white { color:#0a0a0a !important; }

/* Cualquier otro botón-píldora dentro de la banda (verde, cian…): contorno blanco */
body.piel :is(.pi-band, body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero) a[class*="rounded-"]:not(.bg-white):not([class*="bg-indigo-6"]):not([class*="bg-blue-6"]):not([class*="bg-violet-6"]):not(.btn-primary):not(.pi-btn) { background:rgba(255,255,255,.06) !important; color:#fff !important; border:1.5px solid rgba(255,255,255,.85) !important; }
body.piel :is(.pi-band, body.piel > header.relative.overflow-hidden, body.piel > main > header.relative.overflow-hidden, body.piel > header.geo-hero) a[class*="rounded-"]:not(.bg-white):not([class*="bg-indigo-6"]):not([class*="bg-blue-6"]):not([class*="bg-violet-6"]):not(.btn-primary):not(.pi-btn) * { color:#fff !important; }

/* ── 6. Tarjetas, botones, FAQ, artículos ─────────────────────────────────── */
body.piel :is(.service-card, .glass-card, .post-card, .empresa-card, .cap-card, .card, .method-card, .platform-card, .payment-card, .vision-card, .linea-card, .dato-card, .ley-card, .err-card, .threat-item, .protected-item, .faq-item, .benefit-card, .feature-card, .pay-benefit, .limite-item, .email-sequence) {
    background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--card-sh); backdrop-filter:none; }
body.piel :is(.service-card, .glass-card, .post-card, .empresa-card, .cap-card, .card, .method-card, .platform-card, .payment-card, .vision-card, .linea-card):hover { border-color:#d6d9f6; box-shadow:var(--card-sh-hover); transform:translateY(-3px); }
body.piel .faq-item.active { border-color:#d6d9f6; background:#fafaff; }
body.piel :is(.benefit-icon, .pay-benefit-icon, .icon-chip) { background:var(--tint) !important; border:1px solid #ebe5fe; color:var(--el-ink); }
body.piel .bg-white\/\[0\.02\].rounded-3xl, body.piel .bg-white\/\[0\.02\].rounded-2xl,
body.piel .bg-white\/\[0\.03\].rounded-3xl, body.piel .bg-white\/\[0\.03\].rounded-2xl { border:1px solid var(--line); box-shadow:var(--card-sh); }

/* Botones (píldoras). Principal: degradado violeta→eléctrico. Secundario: negro. */
body.piel .btn-primary,
body.piel :is(a,button)[class*="bg-indigo-600"], body.piel :is(a,button)[class*="bg-blue-600"], body.piel :is(a,button)[class*="bg-violet-600"] {
    background:var(--grad-btn); color:#fff; border-radius:999px; font-weight:600; border:0;
    box-shadow:0 10px 24px -12px rgba(94,106,210,.6); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; }
body.piel .btn-primary:hover,
body.piel :is(a,button)[class*="bg-indigo-600"]:hover, body.piel :is(a,button)[class*="bg-blue-600"]:hover { transform:translateY(-1px); filter:brightness(1.06); }
body.piel .btn-ghost,
body.piel a.rounded-full[class*="border-white"]:not(.bg-white) { background:var(--ink) !important; color:#fff !important; border:1px solid var(--ink) !important; border-radius:999px; font-weight:600; }
body.piel .btn-ghost:hover, body.piel a.rounded-full[class*="border-white"]:not(.bg-white):hover { background:#1f2937 !important; color:#fff !important; }
body.piel a.rounded-full[class*="border-white"]:not(.bg-white) * { color:#fff; }
body.piel :is(.btn-primary, .btn-ghost, a[class*="bg-indigo-600"]):active { transform:scale(.98); }
/* Botón verde de WhatsApp: tono con 4,5:1 para el texto blanco */
body.piel :is(a,button):is(.bg-green-500, .bg-green-600, [class*="bg-[#25D366]"], [class*="bg-[#25d366]"]) { background-color:#15803d !important; color:#fff !important; }

/* Fondos sólidos claros con texto blanco: se oscurecen hasta 4,5:1 */
body.piel :is(.bg-amber-500, .bg-amber-600, .bg-yellow-500, .bg-orange-500):is(.text-white, :has(> .text-white)), body.piel :is(a,button):is(.bg-amber-500, .bg-amber-600) { background-color:#b45309 !important; }
body.piel :is(.bg-emerald-500, .bg-green-500, .bg-teal-500):is(.text-white, :has(> .text-white)) { background-color:#047857 !important; }
body.piel :is(.bg-cyan-500, .bg-sky-500):is(.text-white, :has(> .text-white)) { background-color:#0e7490 !important; }
body.piel :is(.bg-blue-500, .bg-indigo-500):is(.text-white) { background-color:#4f46e5 !important; }
body.piel :is(.bg-amber-500, .bg-amber-600, .bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600, .bg-teal-500, .bg-cyan-500, .bg-blue-500, .bg-indigo-500, .bg-rose-500, .bg-rose-600, .bg-red-500, .bg-red-600, .bg-violet-500, .bg-purple-500, .bg-purple-600).text-white { color:#fff; }
/* El botón de sesión de la barra: negro en todas las páginas, sea cual sea su color de origen */
body.piel :is(#navbar, .mobile-menu) a[href^="https://app.istmodigital.net"] { background:var(--ink) !important; color:#fff !important; box-shadow:none !important; border-radius:999px; }
body.piel :is(#navbar, .mobile-menu) a[href^="https://app.istmodigital.net"] * { color:#fff !important; }

/* FAQ visible (details.faq) — lista con líneas finas, como la portada */
body.piel details.faq { background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; margin:0 !important; }
body.piel details.faq:last-of-type { border-bottom:1px solid var(--line); }
body.piel details.faq summary { color:var(--ink); padding:20px 4px; font-size:1.02rem; font-weight:600; }
body.piel details.faq summary .ico, body.piel details.faq summary .fa-plus { color:var(--el-ink); }
body.piel details.faq[open] summary { color:var(--el-ink); }
body.piel details.faq .faq-body, body.piel details.faq > p { color:var(--ink3); padding:0 4px 22px; }
body.piel section#faq { background:#fff; border-top:1px solid var(--line); }

/* Artículos del blog, páginas-pregunta y cabeceras de listado */
body.piel :is(article.blog-article, article.pregunta, header.blog-head, section.blog-listado, section.blog-destacado) { background:#fff; }
body.piel :is(article.blog-article, article.pregunta) { padding-top:128px; }
body.piel :is(article.blog-article, article.pregunta) h1, body.piel header.blog-head h1 { font-weight:500; font-size:clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height:1.15; color:var(--ink); }
body.piel :is(article.blog-article, article.pregunta) :is(p, li):not([class*="text-"]) { color:var(--ink2); }
body.piel :is(article.blog-article, article.pregunta) :is(p, li) a { color:var(--el-ink); text-decoration:underline; text-underline-offset:3px; }
body.piel :is(article.blog-article, article.pregunta) :is(p, li) a:hover { color:#3730a3; }
body.piel :is(article.blog-article, article.pregunta) strong { color:var(--ink); }
body.piel nav[aria-label="Ruta"] a { color:var(--ink3); }
body.piel nav[aria-label="Ruta"] a:hover { color:var(--el-ink); }
body.piel .respuesta-directa { background:radial-gradient(80% 90% at 0% 0%, rgba(139,92,246,.09), transparent 60%), radial-gradient(70% 80% at 100% 100%, rgba(34,211,238,.08), transparent 60%), #fafaff !important; border:1px solid var(--line2) !important; border-radius:20px; color:var(--ink2); }
body.piel .respuesta-directa :is(p, strong) { color:var(--ink); }
body.piel .sigue-leyendo { background:#fafaff; border:1px solid var(--line); border-radius:20px; }
body.piel .sigue-leyendo a { color:var(--ink2); }
body.piel .sigue-leyendo a:hover { color:var(--el-ink); }
body.piel .post-destacado { background:radial-gradient(80% 90% at 0% 0%, rgba(139,92,246,.10), transparent 60%), radial-gradient(70% 80% at 100% 100%, rgba(34,211,238,.08), transparent 60%), #fafaff; border:1px solid #e2e0fb; border-radius:24px; box-shadow:var(--card-sh); }
body.piel .post-destacado :is(h2, h3) { color:var(--ink); }
body.piel .post-destacado p { color:var(--ink3); }
body.piel :is(.cat-badge, .chip, .chip-dev) { background:var(--tint); color:var(--el-ink); border-color:#ebe5fe; }
body.piel .toc { background:#fafaff; border:1px solid var(--line); border-radius:16px; }
body.piel .toc a { color:var(--ink2); }
/* Tablas (blog, legales, comparativas) */
body.piel table { color:var(--ink2); border-color:var(--line); }
body.piel table :is(th, td) { border-color:var(--line); }
body.piel table th { color:var(--ink); background:#fafaff; }
body.piel .tabla-blog, body.piel .tabla-scroll { border-color:var(--line); }
/* Legales */
body.piel .prose-legal { color:var(--ink2); }
body.piel .prose-legal :is(h2,h3,strong) { color:var(--ink); }
body.piel .prose-legal a { color:var(--el-ink); }
/* Mockups de navegador (puntitos de ventana): quedan claros */
body.piel .bg-\[\#0d0e0f\].rounded-t-xl, body.piel .browser-bar { background:#f9fafb; border-color:var(--line); }

/* ── 7. Barra de navegación ───────────────────────────────────────────────── */
body.piel .smart-nav { background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0; box-shadow:none; padding-top:10px; padding-bottom:10px; transition:background .25s ease; }
body.piel .smart-nav > .container { border:1px solid transparent; border-radius:20px; padding-top:8px; padding-bottom:8px; transition:background .25s ease, box-shadow .25s ease, border-color .25s ease; }
body.piel .smart-nav.nav-float { background:transparent; }
body.piel .smart-nav.nav-float > .container { background:rgba(255,255,255,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:var(--line2); box-shadow:0 14px 34px -16px rgba(17,24,39,.22); }
@media (max-width:1023px) { body.piel .smart-nav > .container { width:calc(100% - 20px); padding-left:14px; padding-right:10px; } }
body.piel .smart-nav .logo-img { height:2rem; width:auto; }
@media (min-width:768px) { body.piel .smart-nav .logo-img { height:2.25rem; } }
body.piel .nav-links { letter-spacing:0 !important; text-transform:none; font-size:15px; font-weight:500; }
body.piel .nav-links a, body.piel .nav-item > span, body.piel .nav-services-text { color:var(--ink) !important; }
body.piel .nav-links a:hover, body.piel .nav-item:hover > span { color:var(--el-ink) !important; }
body.piel .submenu { background:#fff; border:1px solid var(--line); box-shadow:0 22px 44px -18px rgba(17,24,39,.22); backdrop-filter:none; border-radius:14px; }
body.piel .submenu a { color:var(--ink2) !important; font-size:14px; }
body.piel .submenu a:hover { background:var(--tint); color:var(--el-ink) !important; }
body.piel .submenu-sep { background:var(--line); }
body.piel #navbar :is(.btn-primary, a[class*="bg-indigo-6"], a[class*="bg-blue-6"], a[class*="bg-violet-6"]) { background:var(--ink); box-shadow:none; padding:10px 20px; font-size:.875rem; filter:none; color:#fff; }
body.piel #navbar :is(.btn-primary, a[class*="bg-indigo-6"], a[class*="bg-blue-6"], a[class*="bg-violet-6"]):hover { background:#1f2937; transform:none; }
body.piel .lang-switch { border-color:var(--line); }
body.piel .lang-switch > * { color:var(--ink3); }
body.piel .lang-switch > a:hover { color:var(--ink); background:#f3f4f6; }
body.piel .lang-switch .lang-cur { background:var(--ink); color:#fff; }
body.piel #menuBtn { color:var(--ink) !important; background:#fff; border:1px solid var(--line); border-radius:12px; width:44px; height:44px; }
body.piel #menuBtn i { background:none; -webkit-text-fill-color:currentColor; color:var(--ink); animation:none; }
/* Menú móvil en blanco */
body.piel .mobile-menu { background:#fff; backdrop-filter:none; top:78px; height:calc(100svh - 78px); border-top:1px solid var(--line2); }
body.piel .mobile-menu a:hover { color:var(--el-ink); }
body.piel .mobile-menu .uppercase { text-transform:none; letter-spacing:-.01em; font-weight:600; color:var(--ink); }
body.piel .mobile-menu .border-gray-700 { border-color:var(--line); }
body.piel .mobile-menu :is(.btn-primary, a[class*="bg-indigo-6"], a[class*="bg-blue-6"], a[class*="bg-violet-6"]) { background:var(--ink); box-shadow:none; color:#fff; }
body.piel .mobile-menu :is(.btn-primary, a[class*="bg-indigo-6"], a[class*="bg-blue-6"], a[class*="bg-violet-6"]) span { color:#fff; }

/* ── 8. Pie blanco ────────────────────────────────────────────────────────── */
body.piel footer { background:#fff !important; border-top:1px solid var(--line); padding-bottom:0; margin-top:0; }
body.piel footer::after { content:''; display:block; height:6px; margin-top:40px; background:linear-gradient(90deg,#8b5cf6,#5e6ad2,#22d3ee); }
body.piel footer h4 { font-family:var(--ff); text-transform:none; letter-spacing:0; font-size:15px; font-weight:600; color:var(--ink); }
body.piel footer p.uppercase { text-transform:none; letter-spacing:0; font-size:15px; font-weight:600; color:var(--ink); }
body.piel footer p.font-mono:not(.uppercase) { font-size:13px; color:var(--ink3); }
body.piel footer :is(a, button) { color:var(--ink2); }
body.piel footer :is(a, button):hover { color:var(--el-ink); }
body.piel footer .text-xl a { color:var(--ink); }

/* ── 9. Widget de chat y aviso de cookies (sin tocar sus .js) ─────────────── */
body.piel .idw-btn, body.piel .idc-btn { background:var(--grad-btn); box-shadow:0 0 0 3px #fff, 0 0 0 4px #d6d9f6, 0 14px 30px -10px rgba(94,106,210,.6); }
body.piel .idw-btn::before, body.piel .idc-btn::before { border-color:rgba(139,92,246,.4); }
body.piel .idw-tip, body.piel .idc-tip { background:#fff; color:var(--el-ink); border:1px solid var(--line); border-radius:999px; font:600 14px/1.2 var(--ff); padding:11px 18px; box-shadow:0 14px 32px -14px rgba(60,64,140,.4); }
body.piel .istmo-cc-banner, body.piel .istmo-cc-modal { background:#fff !important; color:var(--ink2) !important; border:1px solid var(--line) !important; box-shadow:0 30px 60px -24px rgba(17,24,39,.35) !important; }
body.piel .istmo-cc-title, body.piel .istmo-cc-modal h3, body.piel .istmo-cc-row-head strong { color:var(--ink) !important; font-family:var(--ff) !important; }
body.piel .istmo-cc-text, body.piel .istmo-cc-modal .sub, body.piel .istmo-cc-row p { color:var(--ink3) !important; }
body.piel .istmo-cc-text a, body.piel .istmo-cc-link { color:var(--el-ink) !important; }
body.piel .istmo-cc-btn { border-radius:999px !important; }
body.piel .istmo-cc-btn-primary { background:var(--grad-btn) !important; color:#fff !important; }
body.piel .istmo-cc-btn-ghost { color:var(--ink) !important; border:1px solid var(--line) !important; }
body.piel .istmo-cc-row { border-color:var(--line) !important; background:#fafafa !important; }
body.piel .istmo-cc-slider { background:#d1d5db; }

/* ── 10. COMPONENTES NUEVOS (prefijo pi-) ─────────────────────────────────── */
/* Para rehacer secciones a mano con la misma gramática que la portada.
   Ver la tabla en Istmodigital-website/CLAUDE.md → "Piel común". */
body.piel .pi-wrap { width:100%; max-width:1232px; margin:0 auto; padding:0 24px; }
@media (max-width:479px) { body.piel .pi-wrap { padding:0 20px; } }
body.piel .pi-sec { padding:clamp(56px, 7vw, 100px) 0; position:relative; }
body.piel .pi-center { text-align:center; }
body.piel .pi-kicker { display:block; color:var(--el-ink); font-weight:500; font-size:1.05rem; letter-spacing:-.005em; margin-bottom:14px; }
body.piel .pi-h1 { font-weight:300; font-size:clamp(2.3rem, 1.2rem + 4vw, 4.4rem); line-height:1.1; letter-spacing:-.025em; max-width:18ch; text-wrap:balance; }
body.piel .pi-h2 { font-weight:700; font-size:clamp(1.85rem, 1.35rem + 1.6vw, 2.4rem); line-height:1.15; letter-spacing:-.022em; text-wrap:balance; }
body.piel .pi-big { font-weight:300; font-size:clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height:1.2; letter-spacing:-.025em; }
body.piel .pi-lead { font-size:clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height:1.55; color:var(--ink2); max-width:40rem; }
body.piel .pi-center .pi-lead, body.piel .pi-center .pi-h1, body.piel .pi-center .pi-h2 { margin-left:auto; margin-right:auto; }
body.piel .pi-head { max-width:760px; margin:0 auto 48px; text-align:center; }
body.piel .pi-head > p:not(.pi-kicker) { margin-top:16px; color:var(--ink3); font-size:1.05rem; line-height:1.6; }
body.piel .pi-grad { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
body.piel .pi-band .pi-grad { background:var(--grad-text-light); -webkit-background-clip:text; background-clip:text; }
/* Botones píldora */
body.piel .pi-ctas { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
body.piel .pi-center .pi-ctas { justify-content:center; }
body.piel .pi-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:12px 26px; border-radius:999px; font-weight:600; font-size:1rem; line-height:1.2; transition:transform .2s ease, background .2s ease, filter .2s ease; border:0; cursor:pointer; }
body.piel .pi-btn:hover { transform:translateY(-1px); }
body.piel .pi-btn:active { transform:scale(.98); }
body.piel .pi-btn-pri { background:var(--grad-btn); color:#fff; box-shadow:0 10px 24px -12px rgba(94,106,210,.6); }
body.piel .pi-btn-pri:hover { filter:brightness(1.06); }
body.piel .pi-btn-sec { background:var(--ink); color:#fff; }
body.piel .pi-btn-sec:hover { background:#1f2937; }
body.piel .pi-btn-out { background:#fff; color:var(--ink); border:1px solid var(--line); }
body.piel .pi-band .pi-btn-pri { background:#fff; color:#0a0a0a; box-shadow:0 14px 30px -14px rgba(10,8,40,.6); }
body.piel .pi-band .pi-btn-sec, body.piel .pi-band .pi-btn-out { background:rgba(255,255,255,.06); color:#fff; border:1.5px solid rgba(255,255,255,.85); }
@media (max-width:479px) { body.piel .pi-ctas > .pi-btn { flex:1 1 100%; } }
body.piel .pi-link { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem; color:var(--el-ink); transition:gap .2s ease; }
body.piel .pi-link:hover { gap:12px; }
/* Banda morada (héroe a mano). Estructura:
   <header class="pi-band pi-hero"><img class="pi-band-foto" src="images/x.jpg" alt="">
     <div class="pi-wrap pi-center"><p class="pi-kicker">…</p><h1 class="pi-h1">…</h1>…</div></header> */
body.piel .pi-hero { margin-top:88px; padding:clamp(64px, 9vw, 120px) 0 clamp(56px, 8vw, 104px); }
@media (min-width:768px) { body.piel .pi-hero { margin-top:92px; } }
body.piel .pi-band .pi-kicker { color:#e6e4ff; }
body.piel .pi-band .pi-lead { color:#fff; }
body.piel .pi-band-foto { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.22; mix-blend-mode:luminosity; z-index:-1; pointer-events:none; }
/* Tarjeta blanca con halo pastel detrás */
body.piel .pi-card { background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--card-sh); padding:28px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
body.piel a.pi-card:hover, body.piel .pi-card.is-link:hover { transform:translateY(-3px); border-color:#d6d9f6; box-shadow:var(--card-sh-hover); }
body.piel .pi-card h3 { font-size:1.2rem; font-weight:600; margin-bottom:8px; color:var(--ink); }
body.piel .pi-card p { color:var(--ink3); line-height:1.6; }
body.piel .pi-ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--tint); color:var(--el-ink); border:1px solid #ebe5fe; margin-bottom:18px; font-size:1.05rem; }
body.piel .pi-halo { position:relative; isolation:isolate; }
body.piel .pi-halo::before { content:''; position:absolute; inset:-6% -4% -8%; z-index:-1; pointer-events:none; filter:blur(16px);
    background:radial-gradient(34% 46% at 22% 50%, rgba(139,92,246,.20), transparent 72%), radial-gradient(34% 46% at 80% 40%, rgba(94,106,210,.18), transparent 72%), radial-gradient(30% 34% at 60% 96%, rgba(34,211,238,.14), transparent 72%); }
body.piel .pi-frame { border:1px solid var(--line); border-radius:18px; box-shadow:var(--frame); overflow:hidden; background:#fff; }
body.piel .pi-soft { border-radius:28px; border:1px solid var(--line2); padding:clamp(28px,4vw,52px);
    background:radial-gradient(80% 90% at 0% 0%, rgba(139,92,246,.09), transparent 60%), radial-gradient(70% 80% at 100% 100%, rgba(34,211,238,.08), transparent 60%), #fafaff; }
body.piel .pi-grid { display:grid; gap:20px; }
@media (min-width:768px) { body.piel .pi-grid-2 { grid-template-columns:repeat(2,1fr); } body.piel .pi-grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { body.piel .pi-grid-3 { grid-template-columns:repeat(3,1fr); } body.piel .pi-grid-4 { grid-template-columns:repeat(4,1fr); } }
@media (min-width:768px) and (max-width:1023px) { body.piel .pi-grid-4 { grid-template-columns:repeat(2,1fr); } }
body.piel .pi-chips { display:flex; flex-wrap:wrap; gap:8px; }
body.piel .pi-chip { list-style:none; display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--ink2); border:1px solid var(--line); border-radius:999px; padding:6px 12px; background:#fafafa; }
body.piel .pi-chip i { color:var(--el-ink); }
body.piel .pi-ok { display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border-radius:12px; font-size:.88rem; font-weight:600; color:var(--ok); background:#ecfdf5; border:1px solid #a7f3d0; }
body.piel .pi-checks li { list-style:none; display:flex; gap:10px; align-items:flex-start; color:var(--ink2); padding:6px 0; }
body.piel .pi-checks i { color:var(--ok); margin-top:4px; }
/* Lista numerada de fases (como "Método" de la portada) */
body.piel .pi-phases { display:grid; gap:0 36px; }
@media (min-width:768px) { body.piel .pi-phases { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { body.piel .pi-phases { grid-template-columns:repeat(4,1fr); } }
body.piel .pi-phases > li { list-style:none; border-top:2px solid var(--line); padding:22px 0 26px; }
body.piel .pi-phases > li:first-child { border-image:linear-gradient(90deg,#8b5cf6,#5e6ad2) 1; }
body.piel .pi-phases > li > span { font-size:.9rem; font-weight:600; color:var(--el-ink); font-variant-numeric:tabular-nums; }
body.piel .pi-phases h3 { font-size:1.3rem; font-weight:600; margin:10px 0 8px; }
body.piel .pi-phases p { color:var(--ink3); line-height:1.55; }
/* Cierre: frase grande sobre blanco con halo */
body.piel .pi-close { text-align:center; position:relative; isolation:isolate; }
body.piel .pi-close::before { content:''; position:absolute; left:50%; top:50%; width:min(760px,90%); height:380px; transform:translate(-50%,-50%); z-index:-1; pointer-events:none; filter:blur(40px);
    background:radial-gradient(circle, rgba(139,92,246,.22), rgba(94,106,210,.08) 55%, transparent 72%); }
body.piel .pi-close-h { font-weight:300; color:var(--ink); font-size:clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height:1.14; letter-spacing:-.03em; margin-bottom:22px; text-wrap:balance; }
body.piel .pi-close-p { color:var(--ink2); font-size:1.1rem; line-height:1.55; max-width:34rem; margin:0 auto 32px; }

/* ── 11. Movimiento reducido ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body.piel *, body.piel *::before, body.piel *::after { transition-duration:.01ms !important; }
    body.piel .animate-pulse, body.piel .animate-bounce, body.piel .animate-spin { animation:none !important; }
    body.piel .idw-btn::before, body.piel .idc-btn::before { animation:none; }
}

/* ── 12. Ajustes provisionales por página (legibilidad mínima; el pulido de
   composición lo hace cada tanda de página y puede borrar esto) ───────────── */
/* (vacía desde la fase 2C, 2026-10-16: 404, apps-moviles y geo ya llevan su diseño propio) */

/* ── 13. Áreas táctiles >= 44 px en móvil (auditoría 2026-10-17) ─────────── */
@media (max-width:899px) {
  body.piel .lang-switch { padding:2px; }
  body.piel .lang-switch > * { min-height:40px; min-width:36px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; }
  body.piel nav .logo-img { height:28px; }
  body.piel footer a { display:inline-block; padding-top:12px; padding-bottom:12px; }
  body.piel #mobileMenu a { min-height:44px; display:flex; align-items:center; }
  body.piel nav a[href$="index.html"]:has(img), body.piel nav a[href="/"]:has(img) { min-height:44px; display:inline-flex; align-items:center; }
}
body.piel .sl-tab[aria-selected="false"] { color:rgba(255,255,255,.82); }