/* Sitios SEO de la red RM (DIXDY, oct-2026). Mismo lenguaje de diseño que las landings de Vitis Origins:
   Inter, esquinas rectas, hero oscuro con fondo animado, formulario de 2 pasos, bloques planos.
   El tema (grúas / baños) cambia solo las variables de color de abajo. */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --f: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --tinta: #0e1a2b; --tinta-2: #4a5a70; --linea: #d9e0ea; --papel: #f3f6fa; --blanco: #fff; --wa: #1fb855;
  --ancho: 1160px; --pad: clamp(16px, 4vw, 32px);
}
/* ── temas ── */
.tema-grua { --noche: #0a1424; --noche-2: #12233f; --acento: #ffb400; --acento-fuerte: #ffc933; --acento-txt: #8a5800; --acento-suave: #fff6dc; --halo-1: #1e4fa8; --halo-2: #c47f00; --halo-3: #0a6a8a; --puntos: 255, 200, 90; }
.tema-banos { --noche: #052029; --noche-2: #0a3442; --acento: #2ed3a3; --acento-fuerte: #6ee7c4; --acento-txt: #0a6b52; --acento-suave: #e3f9f1; --halo-1: #0b6e86; --halo-2: #138a67; --halo-3: #1d4f8c; --puntos: 120, 235, 205; }
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f); color: var(--tinta); background: var(--blanco); line-height: 1.6; font-size: 17px; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f); line-height: 1.1; letter-spacing: -.03em; margin: 0; color: var(--tinta); }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.salto { position: absolute; left: -999px; top: 8px; background: #fff; padding: 10px 16px; z-index: 100; }
.salto:focus { left: 8px; }
.envoltura { width: min(var(--ancho), 100% - 2 * var(--pad)); margin-inline: auto; }
svg.i { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── botones ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; font: 600 16px/1 var(--f); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.btn svg.i { width: 20px; height: 20px; }
.btn--wa { background: var(--wa); color: #04210f; box-shadow: 0 10px 30px -10px rgba(31,184,85,.7); }
.btn--wa:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(31,184,85,.8); }
.btn--acento { background: var(--acento); color: #0a1424; }
.btn--acento:hover { background: var(--acento-fuerte); transform: translateY(-2px); }
.btn--borde { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--borde:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn--oscuro { background: var(--noche); color: #fff; }
.btn--oscuro:hover { background: var(--noche-2); transform: translateY(-2px); }

/* ── cabecera ── */
.cab { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(14,26,43,.08); }
.cab__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 800 21px/1 var(--f); letter-spacing: -.04em; }
.marca__ico { display: grid; place-items: center; width: 38px; height: 38px; background: var(--noche); color: var(--acento); }
.marca__ico svg.i { width: 22px; height: 22px; stroke-width: 2; }
.marca small { display: block; font: 600 10.5px/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); margin-top: 5px; }
.nav { display: none; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: 10px 14px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--tinta); }
.nav a:hover, .nav a[aria-current] { color: var(--acento-txt); }
.cab__acc { display: flex; align-items: center; gap: 10px; }
.tel { display: none; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; padding: 10px 6px; }
.cab .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
.menu { position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu__panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, 88vw); background: #fff; border: 1px solid var(--linea); padding: 14px; box-shadow: 0 30px 60px -20px rgba(14,26,43,.4); }
.menu__panel a { display: flex; align-items: center; min-height: 46px; padding: 0 10px; font-weight: 600; text-decoration: none; }
.menu__panel a:hover { background: var(--papel); }
@media (min-width: 980px) { .nav { display: flex; } .tel { display: inline-flex; } .menu { display: none; } }

/* ── hero ── */
.hero { position: relative; overflow: hidden; background: var(--noche); color: #fff; isolation: isolate; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.aurora { position: absolute; inset: -20%; z-index: 0; filter: blur(80px); opacity: .5; pointer-events: none; }
.aurora i { position: absolute; width: 44%; height: 52%; border-radius: 50% !important; }
.aurora i:nth-child(1) { left: 0; top: 5%; background: var(--halo-1); animation: a1 18s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { right: 2%; top: 20%; background: var(--halo-2); opacity: .75; animation: a2 22s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { left: 34%; bottom: -5%; background: var(--halo-3); opacity: .6; animation: a3 26s ease-in-out infinite alternate; }
@keyframes a1 { to { transform: translate(14%, 12%) scale(1.15); } } @keyframes a2 { to { transform: translate(-12%, 14%) scale(.9); } } @keyframes a3 { to { transform: translate(10%, -14%) scale(1.2); } }
.hero__in { position: relative; z-index: 1; display: grid; gap: 40px; padding: 56px 0 72px; align-items: center; }
@media (min-width: 980px) { .hero__in { grid-template-columns: 1.15fr .85fr; gap: 56px; padding: 84px 0 104px; } }
.migas { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; color: rgba(255,255,255,.7); margin-bottom: 20px; }
.migas a { text-decoration: none; } .migas a:hover { color: #fff; } .migas span::before { content: "/"; margin-right: 10px; opacity: .5; }
.kicker { display: block; font: 600 13px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--acento-fuerte); margin-bottom: 18px; }
.hero h1 { color: #fff; font-size: clamp(36px, 5.4vw, 66px); font-weight: 750; letter-spacing: -.04em; line-height: 1.04; }
.hero h1 em, .final h2 em { font-style: normal; color: var(--acento-fuerte); }
.hero__baj { margin-top: 22px; max-width: 580px; font-size: clamp(17px, 1.6vw, 20px); color: rgba(255,255,255,.82); }
.hero__acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 28px 0 0; padding: 0; font-size: 15px; color: rgba(255,255,255,.85); }
.chips li { display: inline-flex; align-items: center; gap: 8px; }
.chips svg.i { color: var(--acento-fuerte); width: 18px; height: 18px; }
.pista { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: 2; background: repeating-linear-gradient(-45deg, var(--acento) 0 18px, #0a1424 18px 36px); background-size: 51px 12px; animation: pista 3s linear infinite; }
.tema-banos .pista { background: repeating-linear-gradient(90deg, var(--acento) 0 26px, transparent 26px 40px); height: 4px; opacity: .85; animation: none; }
@keyframes pista { to { background-position: 51px 0; } }

/* ── formulario 2 pasos ── */
.form { position: relative; background: #fff; color: var(--tinta); padding: 28px 28px 24px; box-shadow: 0 60px 120px -40px rgba(0,0,0,.8); border-top: 3px solid var(--acento); }
.form__cab { display: flex; align-items: center; gap: 14px; }
.form__barra { flex: 1; height: 4px; background: #e6edf5; overflow: hidden; }
.form__barra i { display: block; height: 100%; width: 50%; background: linear-gradient(90deg, var(--acento), var(--acento-txt)); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.form.paso-2 .form__barra i { width: 100%; }
.form__paso { font: 600 12.5px/1 var(--f); color: var(--tinta-2); white-space: nowrap; }
.form__tit { margin-top: 18px; font: 700 clamp(22px, 2vw, 26px)/1.2 var(--f); letter-spacing: -.02em; }
.form__tit em { font-style: normal; color: var(--acento-txt); }
.form__pre { margin: 18px 0 0; font: 600 14px/1 var(--f); color: var(--tinta-2); }
.ops { display: grid; gap: 8px; margin-top: 12px; }
.op { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 0 14px 0 16px; border: 1px solid #d5dde7; background: #fff; font: 500 16px/1.3 var(--f); color: var(--tinta); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.op:hover, .op:focus-visible, .op.activa { border-color: var(--acento-txt); background: var(--acento-suave); outline: none; }
.op > span:first-child { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.op:hover > span:first-child { transform: translateX(4px); }
.op__der { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.op__ico, .op__fl { position: absolute; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.op__ico { width: 28px; height: 28px; color: var(--acento-txt); stroke-width: 1.5; }
.op__fl { width: 18px; height: 18px; opacity: 0; transform: translateX(-14px); color: var(--acento-txt); }
.op:hover .op__ico, .op:focus-visible .op__ico, .op.activa .op__ico { transform: translateX(14px); opacity: 0; }
.op:hover .op__fl, .op:focus-visible .op__fl, .op.activa .op__fl { opacity: 1; transform: none; }
.op--otro { color: var(--tinta-2); }
.form__b { margin-top: 16px; animation: entra .35s cubic-bezier(.2,.8,.2,1); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
.volver { background: none; border: 0; padding: 4px 0; font: 600 14px/1.3 var(--f); color: var(--acento-txt); cursor: pointer; }
.form label { display: grid; gap: 6px; margin-top: 14px; font: 700 14px/1.3 var(--f); }
.form label small { font-weight: 400; color: var(--tinta-2); margin-left: 4px; }
.form input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid #d5dde7; font: 400 16px var(--f); color: var(--tinta); background: #fff; }
.form input:focus { outline: 2px solid var(--acento); border-color: var(--acento-txt); }
.form .btn { width: 100%; margin-top: 18px; }
.form__nota { margin: 14px 0 0; font-size: 13px; color: var(--tinta-2); text-align: center; }
.form__nota a { color: var(--tinta); font-weight: 600; }
.form .btn[disabled] { opacity: .55; cursor: not-allowed; }
.destaca { animation: destaca 1.1s ease; } @keyframes destaca { 30% { box-shadow: 0 0 0 4px var(--acento), 0 60px 120px -40px rgba(0,0,0,.8); } }

/* ── confianza ── */
.conf { background: #fff; border-bottom: 1px solid var(--linea); }
.conf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.conf li { display: flex; gap: 14px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--linea); }
.conf li:first-child { border-top: 0; }
.conf__ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; background: var(--acento-suave); color: var(--acento-txt); }
.conf b { display: block; font: 700 16px/1.25 var(--f); }
.conf span { font-size: 14.5px; color: var(--tinta-2); line-height: 1.45; display: block; margin-top: 2px; }
@media (min-width: 860px) { .conf ul { grid-template-columns: repeat(4, 1fr); } .conf li { border-top: 0; border-left: 1px solid var(--linea); padding: 28px 22px; } .conf li:first-child { border-left: 0; padding-left: 0; } }

/* ── secciones ── */
.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec--papel { background: var(--papel); }
.sec--noche { background: var(--noche); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.sec--noche h2, .sec--noche h3 { color: #fff; }
.sec h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 700; letter-spacing: -.035em; max-width: 820px; }
.sec .kicker { color: var(--acento-txt); }
.sec--noche .kicker { color: var(--acento-fuerte); }
.sub { margin-top: 16px; max-width: 700px; font-size: 18px; color: var(--tinta-2); }
.sec--noche .sub { color: rgba(255,255,255,.75); }
.dos { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .dos { grid-template-columns: 1fr 1fr; gap: 64px; } .dos--der .dos__foto { order: 2; } }
.dos__foto { margin: 0; position: relative; }
.dos__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dos__foto::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--acento), var(--acento-txt)); }
.dos__foto figcaption { margin-top: 10px; font-size: 13px; color: var(--tinta-2); }
.prosa p { color: #2a3a52; }
.prosa p:last-child { margin-bottom: 0; }
.lista { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.lista li { display: flex; gap: 12px; align-items: flex-start; }
.lista svg.i { color: var(--acento-txt); margin-top: 3px; }

/* tarjetas */
.tarj { display: grid; gap: 1px; margin-top: 44px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 640px) { .tarj { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .tarj--3 { grid-template-columns: repeat(3, 1fr); } .tarj--4 { grid-template-columns: repeat(4, 1fr); } }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; background: #fff; text-decoration: none; transition: background .2s; }
a.card:hover { background: var(--acento-suave); }
.card__ico { display: grid; place-items: center; width: 48px; height: 48px; background: var(--noche); color: var(--acento); margin-bottom: 6px; }
.card h3 { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.card p { margin: 0; color: var(--tinta-2); font-size: 15.5px; }
.card__ver { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--acento-txt); }
.card__ver svg.i { transition: transform .2s; } a.card:hover .card__ver svg.i { transform: translateX(5px); }

/* comparación */
.cmps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 16px; }
.cmp { display: grid; background: #fff; border: 1px solid var(--linea); position: relative; overflow: hidden; }
@media (min-width: 900px) { .cmp { grid-template-columns: 1fr 1fr; } }
.cmp__mal, .cmp__bien { padding: 28px; display: grid; gap: 8px; align-content: start; }
.cmp__mal { background: linear-gradient(160deg, #e9edf2, #f4f6f8 70%); }
.cmp__bien { background: linear-gradient(160deg, var(--acento-suave), #fff 70%); }
.cmp__et { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: #a63e16; }
.cmp__et i { display: grid; place-items: center; width: 22px; height: 22px; font-style: normal; background: #fde5dc; }
.cmp__bien .cmp__et { color: var(--acento-txt); } .cmp__bien .cmp__et i { background: #fff; }
.cmp h3 { font-size: 20px; font-weight: 650; } .cmp p { margin: 0; color: var(--tinta-2); }
.cmp__bien p { color: var(--tinta); font-weight: 500; font-size: 18px; }
@media (min-width: 900px) { .cmp::after { content: "→"; position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; background: #fff; color: var(--acento-txt); font-size: 24px; font-weight: 700; border-radius: 50%; box-shadow: 0 6px 20px rgba(14,26,43,.16); } }

/* pasos */
.pasos { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 34px; position: relative; counter-reset: p; }
.pasos li { position: relative; display: grid; gap: 8px; align-content: start; opacity: 0; transform: translateY(16px); transition: opacity .7s, transform .7s; transition-delay: calc(var(--n) * .22s); }
.pasos.visto li { opacity: 1; transform: none; }
.pasos .n { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.3); font: 700 20px var(--f); color: var(--acento-fuerte); background: rgba(255,255,255,.04); box-shadow: 0 0 0 7px rgba(255,255,255,.04); }
.pasos li:last-child .n { background: var(--acento); color: #0a1424; border-color: var(--acento); box-shadow: 0 0 0 8px rgba(255,255,255,.06), 0 0 40px rgba(255,255,255,.18); }
.pasos h3 { margin-top: 10px; font-size: 20px; font-weight: 650; }
.pasos p { margin: 0; color: rgba(255,255,255,.72); font-size: 16px; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 0; } .pasos li { padding-right: 30px; } .pasos::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: rgba(255,255,255,.16); } .pasos::after { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: linear-gradient(90deg, var(--acento-fuerte), var(--acento)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.2,.8,.2,1) .2s; } .pasos.visto::after { transform: scaleX(1); } .pasos .n { position: relative; z-index: 1; background: var(--noche); } }
@media (max-width: 899px) { .pasos { padding-left: 0; } .pasos li { padding-left: 74px; min-height: 54px; } .pasos .n { position: absolute; left: 0; top: 0; } .pasos li:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 62px; bottom: -30px; width: 2px; background: linear-gradient(var(--acento-fuerte), rgba(255,255,255,.12)); } .pasos h3 { margin-top: 0; } }

/* datos con fuente */
.datos { display: grid; gap: 1px; margin-top: 44px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 860px) { .datos { grid-template-columns: repeat(var(--cols, 3), 1fr); } }
.dato { background: #fff; padding: 30px; display: flex; flex-direction: column; gap: 8px; }
.dato__c { font: 200 clamp(44px, 5vw, 64px)/1 var(--f); letter-spacing: -.04em; color: var(--acento-txt); }
.dato__u { font: 600 12.5px/1.2 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.dato p { margin: 8px 0 0; font-size: 16px; }
.dato a { margin-top: auto; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--acento-txt); }

/* checklist (propuesta) */
.prop { margin-top: 40px; background: #fff; border: 1px solid var(--linea); box-shadow: 0 40px 80px -40px rgba(14,26,43,.45); position: relative; overflow: hidden; }
.prop::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--acento), var(--acento-txt)); transform: scaleY(0); transform-origin: top; transition: transform calc(var(--total, 5) * .32s + .3s) cubic-bezier(.4,0,.2,1) .35s; }
.prop.visible::before { transform: scaleY(1); }
.prop__cab { display: flex; justify-content: space-between; gap: 12px; padding: 18px 24px 18px 28px; border-bottom: 1px solid #e6edf5; font-size: 14px; }
.prop__cab span { color: var(--tinta-2); }
.prop ul { list-style: none; margin: 0; padding: 10px 24px 18px 28px; }
.prop li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; font-weight: 500; opacity: 0; transform: translateX(-12px); transition: opacity .45s, transform .5s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--n) * .32s + .45s); }
.prop li + li { border-top: 1px dashed #e1e8f1; }
.prop.visible li { opacity: 1; transform: none; }
.prop li svg.i { color: var(--acento-txt); margin-top: 3px; stroke-width: 2.4; transform: scale(.4); opacity: 0; transition: transform .4s cubic-bezier(.3,1.6,.5,1), opacity .3s; transition-delay: calc(var(--n) * .32s + .6s); }
.prop.visible li svg.i { transform: none; opacity: 1; }

/* zonas */
.zonas { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 36px 0 0; padding: 0; }
.zonas a, .zonas span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1px solid var(--linea); background: #fff; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s; }
.zonas a:hover { border-color: var(--acento-txt); background: var(--acento-suave); }
.zonas svg.i { color: var(--acento-txt); width: 17px; height: 17px; }
.zonas span { color: var(--tinta-2); font-weight: 500; background: transparent; }

/* aviso */
.aviso { margin-top: 32px; padding: 24px 28px; background: var(--acento-suave); border-left: 4px solid var(--acento); }
.aviso b { display: block; margin-bottom: 6px; font-size: 18px; } .aviso p { margin: 0; color: #2a3a52; }

/* faq */
.faq { display: grid; gap: 10px; margin-top: 40px; max-width: 860px; }
.faq details { background: #fff; border: 1px solid var(--linea); padding: 0 24px; }
.faq summary { cursor: pointer; list-style: none; padding: 22px 0; font: 650 18px/1.35 var(--f); display: flex; justify-content: space-between; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--acento-txt); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 0 22px; color: var(--tinta-2); }

/* cierre */
.final { position: relative; overflow: hidden; background: var(--noche); color: #fff; text-align: center; padding: clamp(64px, 9vw, 112px) 0; isolation: isolate; }
.final h2 { color: #fff; font-size: clamp(32px, 4.6vw, 54px); font-weight: 750; letter-spacing: -.04em; max-width: 820px; margin-inline: auto; }
.final p { max-width: 620px; margin: 18px auto 0; font-size: 19px; color: rgba(255,255,255,.8); }
.final .hero__acc { justify-content: center; }
.final .envoltura { position: relative; z-index: 1; }

/* pie */
.pie { background: var(--papel); border-top: 1px solid var(--linea); padding: 60px 0 28px; font-size: 15px; color: var(--tinta-2); }
.pie__grid { display: grid; gap: 34px; }
@media (min-width: 860px) { .pie__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } }
.pie h3 { font: 700 12.5px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; color: var(--tinta); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pie a { color: var(--tinta); text-decoration: none; display: inline-block; padding: 5px 0; } .pie a:hover { color: var(--acento-txt); text-decoration: underline; }
.pie__marca p { margin-top: 14px; max-width: 320px; }
.pie__legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* barra móvil */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 0; box-shadow: 0 -10px 30px rgba(0,0,0,.18); }
.barra .btn { min-height: 56px; }
.barra .btn--llamar { background: var(--noche); color: #fff; }
@media (min-width: 900px) { .barra { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 56px; } }

/* aparecer */
html.anim .rev { opacity: 0; transform: translateY(22px); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
html.anim .rev.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pista, .aurora i { animation: none; } html.anim .rev, .pasos li, .prop li, .prop li svg.i { opacity: 1; transform: none; transition: none; } .prop::before, .pasos::after { transform: none; transition: none; } .form__b, .destaca { animation: none; } }

/* fondo animado y foto del hero */
canvas[data-fondo] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.sec--noche > .envoltura, .final > .envoltura { position: relative; z-index: 1; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 78%), linear-gradient(0deg, transparent 2%, #000 38%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 12%, #000 78%), linear-gradient(0deg, transparent 2%, #000 38%); mask-composite: intersect; }
@media (max-width: 979px) { .hero__bg { opacity: .3; -webkit-mask-image: linear-gradient(0deg, transparent 5%, #000 70%); mask-image: linear-gradient(0deg, transparent 5%, #000 70%); } }
.conf__ico svg.i { width: 24px; height: 24px; }
.prosa a, .faq a, .card p a, .aviso a { color: var(--acento-txt); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 520px) { .marca small { display: none; } }
.sec--aviso { padding: 28px 0; }
/* auditoría: contraste del kicker del hero y blancos táctiles de 44 px */
.hero .kicker { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.hero .kicker::before { content: ""; width: 28px; height: 3px; background: var(--acento); }
.nav a { padding: 13px 14px; }
.tel { min-height: 44px; }
.marca { min-height: 44px; }
.migas a { display: inline-block; padding: 9px 0; }
.pie a { padding: 11px 0; }
.pie li { line-height: 1.2; }
.card__ver, .zonas a { min-height: 44px; }
.dato a, .prosa a { padding: 2px 0; }
.migas, .migas a { color: #fff; } .migas span::before { opacity: .6; }