/* KYDRA · Maqueta visual de Inicio. Solo presentación: sin backend.
   Depende de tokens y fuentes del kit (rutas relativas a esta carpeta). */
@import url("../fuentes/fuentes.css");
@import url("../tokens/kydra-tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: var(--k-peso-regular) var(--k-fs-base)/var(--k-lh-texto) var(--k-font-texto); color: var(--k-texto); background: var(--k-fondo); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--k-font-titulos); font-weight: var(--k-peso-titulo); letter-spacing: var(--k-tracking-titulo); line-height: var(--k-lh-titulo); margin: 0; }
p { margin: 0; }
.wrap { width: min(100% - 2 * var(--k-gutter), var(--k-contenedor)); margin-inline: auto; }
.sec { padding-block: var(--k-seccion); }
.sec--arena { background: var(--k-arena); }
.sec--oscuro { background: var(--k-carbon); color: var(--k-texto-inv); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--k-amarillo); color: var(--k-carbon); padding: .75rem 1rem; font-weight: 600; }
.skip:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--k-foco); outline-offset: 3px; }
.k-oscuro :focus-visible, .sec--oscuro :focus-visible, .hero :focus-visible, .menu :focus-visible, .pie :focus-visible { outline-color: var(--k-foco-inv); }

/* Flecha de marca (máscara: toma el color de currentColor) */
.flecha { display: inline-block; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("../recursos/flecha.svg") center/contain no-repeat; mask: url("../recursos/flecha.svg") center/contain no-repeat; flex: none; }
.ic { width: 24px; height: 24px; flex: none; }

/* Etiqueta / eyebrow */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font: var(--k-peso-semi) var(--k-fs-xs)/1 var(--k-font-texto); letter-spacing: var(--k-tracking-etiqueta); text-transform: uppercase; color: var(--k-texto-2); margin-bottom: var(--k-sp-4); }
.eyebrow::before { content: ""; width: 28px; height: 4px; background: var(--k-amarillo); }
.sec--oscuro .eyebrow, .hero .eyebrow { color: var(--k-piedra-claro); }
.h2 { font-size: var(--k-fs-3xl); max-width: 20ch; }
.lead { font-size: var(--k-fs-md); color: var(--k-texto-2); max-width: 60ch; margin-top: var(--k-sp-4); }
.sec--oscuro .lead { color: var(--k-piedra-claro); }
.cabeza { display: flex; justify-content: space-between; align-items: end; gap: var(--k-sp-6); flex-wrap: wrap; margin-bottom: var(--k-sp-7); }

/* Marca "imagen de ejemplo" (QUITAR al poner fotos reales) */
.ej { position: absolute; left: 12px; bottom: 12px; background: rgba(20,20,20,.78); color: #fff; font: 600 11px/1 var(--k-font-texto); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-radius: 3px; }
/* Nota para desarrollo (no publicar) */
.nota-dev { border: 2px dashed #B9B3A6; border-radius: var(--k-radio-md); padding: var(--k-sp-4); color: var(--k-texto-2); font-size: var(--k-fs-sm); background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(107,103,96,.06) 10px 20px); }
.sec--oscuro .nota-dev, .pie .nota-dev { border-color: #5a5750; color: var(--k-piedra-claro); }

/* ---------- NAVBAR ---------- */
.nav { position: sticky; top: 0; z-index: var(--k-z-nav); background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--k-linea); }
.nav__in { display: flex; align-items: center; gap: var(--k-sp-6); height: 76px; }
.nav__logo img { height: 46px; width: auto; }
.nav__links { display: flex; gap: var(--k-sp-5); margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav__links a { text-decoration: none; font-weight: var(--k-peso-medio); font-size: .95rem; padding: .5rem 0; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--k-amarillo); transform: scaleX(0); transform-origin: left; transition: transform var(--k-dur-media) var(--k-ease); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { min-height: var(--k-btn-alto-sm); }
.nav__burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: var(--k-radio-sm); background: var(--k-carbon); color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after { display: block; width: 22px; height: 2.5px; background: currentColor; border-radius: 2px; position: relative; content: ""; }
.nav__burger span::before { position: absolute; top: -7px; } .nav__burger span::after { position: absolute; top: 7px; }
@media (max-width: 1180px) { .nav__links { gap: var(--k-sp-4); } .nav__links a { font-size: .9rem; } }
@media (max-width: 1080px) { .nav__links, .nav__cta { display: none; } .nav__burger { display: inline-flex; } .nav__in { height: 68px; } .nav__logo img { height: 40px; } }

/* Menú móvil */
.menu { position: fixed; inset: 0; z-index: var(--k-z-menu); background: var(--k-carbon); color: #fff; display: flex; flex-direction: column; padding: 0 var(--k-gutter) var(--k-sp-6); visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity var(--k-dur-media) var(--k-ease), transform var(--k-dur-media) var(--k-ease), visibility 0s linear var(--k-dur-media); }
.menu[data-abierto="true"] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.menu::before { content: ""; position: absolute; inset: 0; background: url("../recursos/patron-flecha_amarillo-14.svg") 0 0/56px; opacity: .3; pointer-events: none; -webkit-mask: linear-gradient(0deg, #000, transparent 70%); mask: linear-gradient(0deg, #000, transparent 70%); }
.menu > * { position: relative; }
.menu ul, .menu__pie { width: 100%; max-width: 640px; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.menu__top img { height: 40px; width: auto; }
.menu__cerrar { width: 48px; height: 48px; border: 2px solid #fff; background: transparent; color: #fff; border-radius: var(--k-radio-sm); font-size: 26px; line-height: 1; cursor: pointer; }
.menu ul { list-style: none; margin: var(--k-sp-6) 0 auto; padding: 0; }
.menu li a { display: flex; justify-content: space-between; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--k-linea-oscura); font: var(--k-peso-titulo) clamp(1.6rem, 6vw, 2.2rem)/1.1 var(--k-font-titulos); letter-spacing: -.02em; text-decoration: none; }
.menu li a .flecha { color: var(--k-amarillo); font-size: .8em; }
.menu__pie { display: grid; gap: var(--k-sp-3); margin-top: var(--k-sp-6); }
.menu__pie .k-btn { width: 100%; }
.menu__datos { color: var(--k-piedra-claro); font-size: var(--k-fs-sm); margin-top: var(--k-sp-2); }

/* ---------- HERO ---------- */
.hero { position: relative; background: var(--k-carbon); color: #fff; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: url("../recursos/patron-flecha_amarillo-14.svg") 0 0/64px; opacity: .45; -webkit-mask: linear-gradient(90deg, #000 0, transparent 55%); mask: linear-gradient(90deg, #000 0, transparent 55%); }
.hero__in { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--k-sp-8); align-items: center; padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem); }
.hero__slogan { display: inline-flex; align-items: center; gap: .6rem; color: var(--k-amarillo); font-weight: var(--k-peso-semi); font-size: var(--k-fs-sm); letter-spacing: .04em; margin-bottom: var(--k-sp-5); }
.hero h1 { font-size: var(--k-fs-display); line-height: var(--k-lh-tight); max-width: 13ch; }
.hero h1 em { font-style: normal; color: var(--k-amarillo); }
.hero__sub { font-size: var(--k-fs-md); color: var(--k-piedra-claro); max-width: 52ch; margin-top: var(--k-sp-5); }
.hero__ctas { display: flex; gap: var(--k-sp-3); flex-wrap: wrap; margin-top: var(--k-sp-6); }
.hero__media { position: relative; aspect-ratio: 4/5; border-radius: var(--k-radio-lg); overflow: visible; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--k-radio-lg); position: relative; }
.hero__media::before { content: ""; position: absolute; inset: auto -18px -18px auto; width: 62%; height: 46%; background: var(--k-amarillo); border-radius: var(--k-radio-lg); }
.hero__media .flecha { position: absolute; left: -38px; top: 28px; font-size: 92px; color: var(--k-amarillo); z-index: 2; }
.hero__chips { display: flex; flex-wrap: wrap; gap: var(--k-sp-2); margin-top: var(--k-sp-7); padding: 0; list-style: none; }
.hero__chips li { border: 1px solid var(--k-linea-oscura); color: #E9E5DB; border-radius: var(--k-radio-pill); padding: .45rem .9rem; font-size: var(--k-fs-sm); }
@media (max-width: 900px) { .hero__in { grid-template-columns: 1fr; gap: var(--k-sp-7); } .hero__media { aspect-ratio: 16/11; margin-right: 18px; } .hero__media .flecha { left: auto; right: 18px; top: -40px; font-size: 72px; } .hero h1 { max-width: 16ch; } }
@media (max-width: 520px) { .hero__ctas .k-btn { width: 100%; } .hero__chips { display: none; } }

/* ---------- SERVICIOS ---------- */
.servicios { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--k-sp-4); }
@media (max-width: 1200px) { .servicios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .servicios { grid-template-columns: 1fr; } }
.card { position: relative; display: flex; flex-direction: column; gap: var(--k-sp-3); background: #fff; border: 1px solid var(--k-linea); border-radius: var(--k-radio-md); padding: var(--k-sp-5); text-decoration: none; transition: transform var(--k-dur-media) var(--k-ease), box-shadow var(--k-dur-media) var(--k-ease), border-color var(--k-dur-media) var(--k-ease); }
.card__ic { width: 52px; height: 52px; border-radius: var(--k-radio-md); background: var(--k-amarillo); display: grid; place-items: center; color: var(--k-carbon); transition: background-color var(--k-dur-media) var(--k-ease), color var(--k-dur-media) var(--k-ease); }
.card h3 { font-size: var(--k-fs-lg); line-height: 1.15; }
.card p { color: var(--k-texto-2); font-size: .95rem; }
.card__mas { margin-top: auto; padding-top: var(--k-sp-2); display: inline-flex; align-items: center; gap: .5rem; font-weight: var(--k-peso-semi); font-size: var(--k-fs-sm); }
.card__mas .flecha { transition: transform var(--k-dur-media) var(--k-ease); }
.card:hover, .card:focus-visible { transform: translateY(-4px); box-shadow: var(--k-sombra-3); border-color: var(--k-carbon); }
.card:hover .card__ic, .card:focus-visible .card__ic { background: var(--k-carbon); color: var(--k-amarillo); }
.card:hover .card__mas .flecha { transform: translate(3px, -3px); }
.card--destacada { background: var(--k-carbon); color: #fff; border-color: var(--k-carbon); }
.card--destacada p { color: var(--k-piedra-claro); }
.card--destacada:hover .card__ic { background: #fff; color: var(--k-carbon); }

/* ---------- PROCESO ---------- */
.proceso { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--k-sp-6) var(--k-sp-5); counter-reset: p; }
.proceso li { position: relative; padding-top: var(--k-sp-6); border-top: 2px solid var(--k-linea-oscura); }
.proceso li::before { counter-increment: p; content: counter(p, decimal-leading-zero); position: absolute; top: -2px; left: 0; padding-top: .6rem; border-top: 2px solid var(--k-amarillo); width: 48px; font: var(--k-peso-titulo) var(--k-fs-sm)/1 var(--k-font-titulos); color: var(--k-amarillo); }
.proceso h3 { font-size: var(--k-fs-lg); margin-bottom: var(--k-sp-2); }
.proceso p { color: var(--k-piedra-claro); font-size: .95rem; }
@media (max-width: 1000px) { .proceso { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .proceso { grid-template-columns: 1fr; gap: var(--k-sp-5); } }

/* ---------- PAQUETES DESTACADOS ---------- */
.paquetes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-sp-4); }
.paq { display: flex; flex-direction: column; gap: var(--k-sp-3); background: #fff; border-radius: var(--k-radio-md); padding: var(--k-sp-6) var(--k-sp-5); border: 1px solid var(--k-linea); }
.paq h3 { font-size: var(--k-fs-xl); }
.paq ul { margin: var(--k-sp-2) 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.paq li { display: flex; gap: .6rem; font-size: .95rem; }
.paq li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .55em; background: var(--k-carbon); }
.paq__ideal { font-size: var(--k-fs-sm); color: var(--k-texto-2); border-top: 1px solid var(--k-linea); padding-top: var(--k-sp-3); margin-top: auto; }
.paq__precio { font: var(--k-peso-semi) var(--k-fs-xs)/1 var(--k-font-texto); letter-spacing: var(--k-tracking-etiqueta); text-transform: uppercase; }
.paq--top { background: var(--k-amarillo); border-color: var(--k-amarillo); box-shadow: var(--k-sombra-2); }
.paq--top .paq__ideal { color: var(--k-carbon); border-color: rgba(20,20,20,.18); }
.paq .k-btn { margin-top: var(--k-sp-3); }
@media (max-width: 900px) { .paquetes { grid-template-columns: 1fr; } }

/* ---------- POR QUÉ + VALORES ---------- */
.porque { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-sp-6) var(--k-sp-5); }
.porque div { border-left: 4px solid var(--k-amarillo); padding-left: var(--k-sp-4); }
.porque h3 { font-size: var(--k-fs-lg); margin-bottom: var(--k-sp-2); }
.porque p { color: var(--k-texto-2); font-size: .95rem; }
.valores { margin-top: var(--k-sp-8); display: grid; grid-template-columns: 280px 1fr; gap: var(--k-sp-6); align-items: start; padding-top: var(--k-sp-7); border-top: 1px solid var(--k-linea); }
.valores h3 { font-size: var(--k-fs-xl); }
.valores ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--k-sp-2); }
.valores li { background: #fff; border: 1px solid var(--k-linea); border-radius: var(--k-radio-pill); padding: .55rem 1.1rem; font-weight: var(--k-peso-medio); }
@media (max-width: 900px) { .porque { grid-template-columns: 1fr 1fr; } .valores { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .porque { grid-template-columns: 1fr; } }

/* ---------- PROYECTOS (placeholder) ---------- */
.proyectos { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--k-sp-4); }
.proy { position: relative; border-radius: var(--k-radio-lg); overflow: hidden; aspect-ratio: 4/5; background: var(--k-arena); }
.proy:first-child { aspect-ratio: auto; }
.proy img { width: 100%; height: 100%; object-fit: cover; }
.proy__vacio { display: grid; place-items: center; text-align: center; padding: var(--k-sp-5); border: 2px dashed #C9C3B6; background: var(--k-arena) url("../recursos/patron-flecha_carbon-8.svg") 0 0/48px; color: var(--k-texto-2); font-size: var(--k-fs-sm); }
.proy__vacio strong { display: block; font: var(--k-peso-titulo) var(--k-fs-lg)/1.2 var(--k-font-titulos); color: var(--k-carbon); margin-bottom: .4rem; }
@media (max-width: 900px) { .proyectos { grid-template-columns: 1fr 1fr; } .proy:first-child { grid-column: 1 / -1; aspect-ratio: 16/10; } }
@media (max-width: 560px) { .proyectos { grid-template-columns: 1fr; } .proy { aspect-ratio: 16/11; } }

/* ---------- TRÁMITES ---------- */
.tram { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--k-sp-8); align-items: center; }
.tram__media { position: relative; border-radius: var(--k-radio-lg); overflow: hidden; aspect-ratio: 1; }
.tram__media img { width: 100%; height: 100%; object-fit: cover; }
.tram ul { list-style: none; padding: 0; margin: var(--k-sp-6) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-sp-3) var(--k-sp-5); }
.tram li { display: flex; gap: .7rem; align-items: flex-start; font-weight: var(--k-peso-medio); }
.tram li .ic { color: var(--k-carbon); background: var(--k-amarillo); border-radius: 4px; padding: 3px; width: 26px; height: 26px; }
.aviso { font-size: var(--k-fs-sm); color: var(--k-texto-2); border-left: 3px solid var(--k-linea); padding-left: var(--k-sp-3); margin-bottom: var(--k-sp-6); max-width: 60ch; }
@media (max-width: 900px) { .tram { grid-template-columns: 1fr; gap: var(--k-sp-6); } .tram__media { aspect-ratio: 16/9; } }
@media (max-width: 520px) { .tram ul { grid-template-columns: 1fr; } }

/* ---------- CTA ---------- */
.cta { background: var(--k-amarillo); position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; right: 6%; top: 50%; width: 280px; height: 280px; transform: translateY(-50%); background: var(--k-carbon); -webkit-mask: url("../recursos/flecha.svg") center/contain no-repeat; mask: url("../recursos/flecha.svg") center/contain no-repeat; opacity: .95; }
.cta__in { position: relative; z-index: 1; padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); max-width: 760px; }
.cta h2 { font-size: var(--k-fs-3xl); }
.cta p { font-size: var(--k-fs-md); margin-top: var(--k-sp-4); max-width: 54ch; }
.cta .hero__ctas { margin-top: var(--k-sp-6); }
@media (max-width: 900px) { .cta::after { width: 200px; height: 200px; right: -50px; top: auto; bottom: -30px; transform: none; opacity: .12; } }

/* ---------- CONTACTO + FORMULARIO ---------- */
.contacto { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--k-sp-8); align-items: start; }
.datos { list-style: none; margin: var(--k-sp-6) 0; padding: 0; display: grid; gap: var(--k-sp-2); }
.datos a { display: flex; align-items: center; gap: var(--k-sp-3); padding: var(--k-sp-3) var(--k-sp-4); border: 1px solid var(--k-linea); border-radius: var(--k-radio-md); text-decoration: none; background: #fff; transition: border-color var(--k-dur-rapida), background-color var(--k-dur-rapida); }
.datos a:hover { border-color: var(--k-carbon); }
.datos .ic { color: var(--k-carbon); }
.datos small { display: block; font-size: var(--k-fs-xs); text-transform: uppercase; letter-spacing: var(--k-tracking-etiqueta); color: var(--k-texto-2); }
.datos b { font-weight: var(--k-peso-semi); }
.form { background: #fff; border-radius: var(--k-radio-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); box-shadow: var(--k-sombra-3); border: 1px solid var(--k-linea); }
.form h3 { font-size: var(--k-fs-xl); margin-bottom: var(--k-sp-2); }
.form > p { color: var(--k-texto-2); margin-bottom: var(--k-sp-5); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-sp-4); }
.campo { display: grid; gap: .4rem; margin-bottom: var(--k-sp-4); }
.campo label { font-weight: var(--k-peso-semi); font-size: var(--k-fs-sm); }
.campo label .req { color: var(--k-error); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 50px; padding: .75rem .9rem; font: inherit; color: var(--k-carbon); background: #fff; border: 1.5px solid #B9B3A6; border-radius: var(--k-radio-md); transition: border-color var(--k-dur-rapida), box-shadow var(--k-dur-rapida); }
.campo textarea { min-height: 120px; resize: vertical; }
.campo select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center/18px no-repeat; padding-right: 2.5rem; }
.campo input::placeholder, .campo textarea::placeholder { color: #8A857C; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--k-carbon); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--k-carbon); box-shadow: 0 0 0 3px var(--k-amarillo), 0 0 0 5px var(--k-carbon); }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--k-error); background: var(--k-error-fondo); }
.campo__msg { font-size: var(--k-fs-sm); color: var(--k-error); display: flex; gap: .4rem; align-items: center; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--k-fs-sm); margin: var(--k-sp-2) 0 var(--k-sp-5); }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--k-carbon); flex: none; }
.form .k-btn { width: 100%; }
.form__nota { font-size: var(--k-fs-xs); color: var(--k-texto-2); margin-top: var(--k-sp-3); text-align: center; }
.ok { display: flex; gap: .7rem; padding: var(--k-sp-4); border-radius: var(--k-radio-md); background: var(--k-exito-fondo); color: var(--k-exito); font-weight: var(--k-peso-medio); }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; gap: var(--k-sp-6); } }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; gap: 0; } }

/* ---------- PIE ---------- */
.pie { background: var(--k-carbon); color: #E9E5DB; padding-top: var(--k-sp-8); font-size: var(--k-fs-sm); }
.pie__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--k-sp-6); padding-bottom: var(--k-sp-7); }
.pie__marca img { width: 210px; }
.pie__marca p { color: var(--k-piedra-claro); margin-top: var(--k-sp-4); max-width: 34ch; }
.pie h4 { font: var(--k-peso-semi) var(--k-fs-xs)/1 var(--k-font-texto); letter-spacing: var(--k-tracking-etiqueta); text-transform: uppercase; color: var(--k-amarillo); margin: 0 0 var(--k-sp-4); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie a { text-decoration: none; } .pie a:hover { text-decoration: underline; text-decoration-color: var(--k-amarillo); text-underline-offset: 4px; }
.pie__legal { border-top: 1px solid var(--k-linea-oscura); padding-block: var(--k-sp-5) calc(var(--k-sp-5) + 72px); display: flex; justify-content: space-between; gap: var(--k-sp-4); flex-wrap: wrap; color: var(--k-piedra-claro); font-size: var(--k-fs-xs); }
@media (max-width: 900px) { .pie__in { grid-template-columns: 1fr 1fr; } .pie__marca { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pie__in { grid-template-columns: 1fr; } }

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: var(--k-z-flotante); display: inline-flex; align-items: center; gap: .6rem; min-height: 58px; padding: 0 1.3rem 0 1rem; border-radius: var(--k-radio-pill); background: var(--k-whatsapp); color: var(--k-carbon); font-weight: var(--k-peso-semi); text-decoration: none; box-shadow: var(--k-sombra-3); transition: transform var(--k-dur-media) var(--k-ease); }
.wa .ic { width: 28px; height: 28px; }
.wa:hover { transform: translateY(-3px) scale(1.02); }
.wa:focus-visible { outline: 3px solid var(--k-carbon); outline-offset: 3px; }
@media (max-width: 640px) { .wa { width: 58px; padding: 0; justify-content: center; right: 16px; bottom: 16px; } .wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ---------- Animaciones de entrada (opcional; ver GUIA_UI.md) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .revela { opacity: 0; transform: translateY(18px); transition: opacity var(--k-dur-lenta) var(--k-ease), transform var(--k-dur-lenta) var(--k-ease); }
  .js .revela.visible { opacity: 1; transform: none; }
}