/* =====================================================================
   AmadiDesign · Estilos (modo claro y oscuro)
   Autor: Lic. Marcos Humberto Amaya Villalta · AmadiDesign
   ===================================================================== */

/* ---------- Variables de tema ---------- */
:root {
  --navy: #0d2b6b; --azul: #0a6fe0; --cian: #19b8ff; --naranja: #ff8a00;
  --magenta: #ff2d6f; --morado: #8b3dff; --wa: #1faf54; --wa-osc: #128c3f;
  --degradado: linear-gradient(100deg, #ff8a00 0%, #ff2d6f 55%, #8b3dff 100%);
  --degradado-azul: linear-gradient(120deg, #0a6fe0, #19b8ff);
  --fuente-titulo: "Sora", "Segoe UI", system-ui, sans-serif;
  --fuente-texto: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --radio: 20px; --radio-chico: 12px;
  --c1: #19b8ff; --c2: #0a6fe0;

  /* claro */
  --fondo: #f6f8fd; --fondo-suave: #edf2fb; --superficie: #ffffff; --superficie-2: #f3f6fc;
  --texto: #101b36; --texto-suave: #52607c; --borde: #dbe3f1;
  --marca-amadi: #0d2b6b; --barra: rgba(255, 255, 255, .82);
  --sombra: 0 10px 30px -12px rgba(13, 43, 107, .22);
  --sombra-alta: 0 24px 50px -18px rgba(13, 43, 107, .35);
  --halo: rgba(25, 184, 255, .30);
}
:root[data-theme="dark"] {
  --fondo: #070d1c; --fondo-suave: #0b1428; --superficie: #111c36; --superficie-2: #16233f;
  --texto: #eef3ff; --texto-suave: #a3b1cf; --borde: #233354;
  --marca-amadi: #ffffff; --barra: rgba(7, 13, 28, .8);
  --sombra: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --sombra-alta: 0 24px 50px -18px rgba(0, 0, 0, .75);
  --halo: rgba(25, 184, 255, .22);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--fuente-texto); font-size: 1rem; line-height: 1.65;
  color: var(--texto); background: var(--fondo); overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
h1, h2, h3 { font-family: var(--fuente-titulo); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; color: var(--texto-suave); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cian); outline-offset: 3px; border-radius: 6px; }
.contenedor { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.seccion { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.seccion--suave { background: var(--fondo-suave); }

/* ---------- Progreso de lectura ---------- */
.progreso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; }
.progreso span { display: block; height: 100%; width: 0; background: var(--degradado); }

/* ---------- Barra superior ---------- */
.barra { position: sticky; top: 0; z-index: 50; background: var(--barra); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s; }
.barra--fija { border-color: var(--borde); box-shadow: var(--sombra); }
.barra__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.barra__acciones { display: flex; align-items: center; gap: .5rem; }

.marca { display: inline-flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.marca img { height: 46px; width: auto; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.marca:hover img { transform: rotate(-6deg) scale(1.08); }
.marca__texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca__nombre { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; }
.marca__nombre sup { font-size: .45em; font-weight: 600; color: var(--texto-suave); margin-left: 1px; }
.marca__amadi { color: var(--marca-amadi); transition: color .35s; }
.marca__design { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca__lema { font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave); margin-top: 4px; white-space: nowrap; }

.menu { display: flex; gap: .25rem; }
.menu a { padding: .5rem .8rem; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--texto-suave); transition: color .2s, background .2s; }
.menu a:hover { color: var(--texto); background: var(--superficie-2); }
.menu-boton { display: none; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .7rem 1.25rem; border-radius: 999px; border: 2px solid transparent; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; white-space: nowrap; }
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton--chico { padding: .5rem 1rem; font-size: .9rem; }
.boton--grande { padding: .95rem 1.6rem; font-size: 1.02rem; }
.boton--ancho { width: 100%; white-space: normal; text-align: center; }
.boton--wa { background: linear-gradient(120deg, var(--wa), var(--wa-osc)); color: #fff; box-shadow: 0 10px 24px -10px rgba(31, 175, 84, .8); position: relative; }
.boton--wa.boton--grande::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--wa); animation: pulso 2.2s ease-out infinite; pointer-events: none; }
.boton--marca { background: var(--degradado); color: #fff; box-shadow: 0 10px 24px -10px rgba(255, 45, 111, .7); }
.boton--linea { border-color: var(--borde); color: var(--texto); background: var(--superficie); }
.boton--linea:hover { border-color: var(--cian); }
.boton-icono { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--borde); background: var(--superficie); cursor: pointer; display: inline-grid; place-items: center; transition: transform .3s, border-color .2s; }
.boton-icono:hover { transform: rotate(18deg); border-color: var(--cian); }
.boton.cargando { opacity: .7; pointer-events: none; }
.boton.cargando i { animation: girar 1s linear infinite; }

.etiqueta { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); background: color-mix(in srgb, var(--cian) 14%, transparent); margin-bottom: 1rem; }
:root[data-theme="dark"] .etiqueta { color: var(--cian); }
.etiqueta--color { color: #fff !important; background: linear-gradient(120deg, var(--c1), var(--c2)); }
.encabezado { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 5vw, 3.2rem); }

/* ---------- Héroe ---------- */
.heroe { position: relative; overflow: hidden; padding-top: clamp(2.5rem, 6vw, 4.5rem); background: radial-gradient(900px 480px at 85% 10%, color-mix(in srgb, var(--cian) 16%, transparent), transparent 70%), radial-gradient(700px 420px at 5% 90%, color-mix(in srgb, var(--magenta) 10%, transparent), transparent 70%); }
.heroe__red { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.heroe__rejilla { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.heroe__bajada { font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 56ch; }
.heroe__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 1.4rem; }
.heroe__telefono { display: inline-flex; align-items: center; gap: .8rem; }
.heroe__telefono small { display: block; font-size: .78rem; color: var(--texto-suave); line-height: 1.2; }
.heroe__telefono strong { font-family: var(--fuente-titulo); font-size: 1.35rem; letter-spacing: .02em; }
.heroe__telefono-icono { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--degradado-azul); animation: timbre 2.6s ease-in-out infinite; }

.rotador { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; min-height: 1.15em; padding-bottom: .08em; }
.rotador__cursor { display: inline-block; width: 3px; height: .9em; margin-left: 4px; background: var(--magenta); vertical-align: -.08em; animation: parpadeo 1s steps(1) infinite; }

/* Órbita de servicios alrededor del isotipo */
.orbita { --r: clamp(118px, 17vw, 205px); position: relative; width: calc(var(--r) * 2 + 70px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.orbita__halo { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, var(--halo), transparent 68%); animation: respirar 5s ease-in-out infinite; }
.orbita::before, .orbita::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px dashed var(--borde); inset: 35px; }
.orbita::after { inset: 24%; border-style: solid; opacity: .5; }
.orbita__logo { position: relative; width: 56%; filter: drop-shadow(0 18px 26px rgba(10, 111, 224, .35)); animation: flotar 6s ease-in-out infinite; }
.orbita__anillo { position: absolute; inset: 0; animation: girar 46s linear infinite; }
.orbita:hover .orbita__anillo, .orbita:hover .orbita__item span { animation-play-state: paused; }
.orbita__item { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px; transform: rotate(calc(var(--i) * 60deg)) translateY(calc(var(--r) * -1)) rotate(calc(var(--i) * -60deg)); }
.orbita__item span { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 18px; color: #fff; font-size: 1.35rem; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 10px 22px -8px var(--c2); animation: girar 46s linear infinite reverse; transition: scale .25s; }
.orbita__item:hover span { scale: 1.22; }

/* Emblema (páginas de servicio) */
.emblema { position: relative; width: min(320px, 70vw); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.emblema__icono { position: relative; width: 46%; aspect-ratio: 1; border-radius: 30%; display: grid; place-items: center; color: #fff; font-size: clamp(3rem, 7vw, 4.6rem); background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 26px 50px -18px var(--c2); animation: flotar 5s ease-in-out infinite; }
.emblema__onda { position: absolute; inset: 27%; border-radius: 50%; border: 2px solid var(--c1); animation: onda 3s ease-out infinite; }
.emblema__onda:nth-child(2) { animation-delay: 1s; } .emblema__onda:nth-child(3) { animation-delay: 2s; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; color: var(--texto-suave); margin-bottom: 1rem; }
.migas a:hover { color: var(--cian); } .migas i { font-size: .6rem; } .migas span { color: var(--texto); font-weight: 600; }

/* Cinta de servicios */
.cinta { position: relative; overflow: hidden; border-block: 1px solid var(--borde); background: var(--superficie); padding: .9rem 0; }
.cinta__pista { display: flex; width: max-content; gap: 2.6rem; animation: cinta 34s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta span { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--fuente-titulo); font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }

/* ---------- Mensaje ---------- */
.mensaje { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2rem); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra); position: relative; overflow: hidden; }
.mensaje::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--degradado); }
.mensaje__comilla { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: var(--degradado); }
.mensaje__firma { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--borde); }
.mensaje__firma img { height: 42px; width: auto; }
.mensaje__firma small { display: block; color: var(--texto-suave); font-size: .8rem; }

/* ---------- Rejillas y tarjetas ---------- */
.rejilla { display: grid; gap: 1.25rem; }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--5 { grid-template-columns: repeat(5, 1fr); }
.tarjeta { position: relative; display: block; padding: 1.7rem; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra); overflow: hidden; }
.tarjeta p { font-size: .95rem; margin-bottom: 1rem; }
.tarjeta__icono { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 12px 22px -10px var(--c2); margin-bottom: 1.1rem; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); flex-shrink: 0; }
.tarjeta__icono--chico { width: 50px; height: 50px; border-radius: 14px; font-size: 1.2rem; margin-bottom: 0; }
.tarjeta--servicio { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out, box-shadow .3s, border-color .3s; }
.tarjeta--servicio::before { content: ""; position: absolute; inset: 0; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c1) 20%, transparent), transparent 65%); opacity: 0; transition: opacity .3s; }
.tarjeta--servicio::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--c1), var(--c2)); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.tarjeta--servicio:hover { box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--c1) 55%, var(--borde)); }
.tarjeta--servicio:hover::before { opacity: 1; }
.tarjeta--servicio:hover::after { transform: scaleX(1); }
.tarjeta--servicio:hover .tarjeta__icono { transform: rotate(-8deg) scale(1.1); }
.tarjeta--servicio > * { position: relative; }
.tarjeta__enlace, .enlace-boton { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .9rem; color: var(--c2); }
:root[data-theme="dark"] .tarjeta__enlace, :root[data-theme="dark"] .enlace-boton { color: var(--c1); }
.tarjeta__enlace i, .enlace-boton i { transition: transform .25s; }
.tarjeta:hover .tarjeta__enlace i, .enlace-boton:hover i { transform: translateX(5px); }
.enlace-boton { background: none; border: 0; padding: 0; cursor: pointer; }
.tarjeta--producto { display: flex; gap: 1rem; align-items: flex-start; transition: transform .3s, box-shadow .3s; }
.tarjeta--producto:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.tarjeta--producto h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.tarjeta--producto p { margin-bottom: .6rem; }

.mini { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; padding: 1.3rem 1rem; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); font-size: .9rem; line-height: 1.3; transition: transform .3s, border-color .3s; }
.mini:hover { transform: translateY(-5px); border-color: var(--c1); }
.paginador { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; font-weight: 700; }
.paginador a { display: inline-flex; align-items: center; gap: .5rem; color: var(--texto-suave); }
.paginador a:hover { color: var(--cian); }

/* ---------- Proceso y cifras ---------- */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: paso; }
.pasos li { position: relative; padding: 1.6rem 1.4rem; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); }
.pasos li > i { font-size: 1.7rem; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: .9rem; display: block; }
.pasos p { font-size: .93rem; margin: 0; }
.pasos__num { position: absolute; top: .9rem; right: 1.1rem; font-family: var(--fuente-titulo); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--borde); }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.2rem; padding: 1.6rem; border-radius: var(--radio); background: linear-gradient(120deg, #0d2b6b, #0a6fe0); color: #fff; text-align: center; }
.cifras strong { display: block; font-family: var(--fuente-titulo); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.1; }
.cifras__item > span { font-size: .88rem; opacity: .85; }

/* ---------- Áreas de contacto ---------- */
.punto-vivo { width: 9px; height: 9px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 0 var(--wa); animation: latido 1.8s infinite; }
.area { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.2rem 1.5rem 1.7rem; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra); transition: transform .3s, box-shadow .3s, border-color .3s; }
.area:hover { transform: translateY(-8px); box-shadow: var(--sombra-alta); border-color: var(--c1); }
.area__avatar { position: relative; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); margin-bottom: 1.3rem; }
.area__avatar i { position: relative; }
.area:hover .area__avatar i { animation: timbre .8s ease-in-out; }
.area__onda { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c1); animation: onda 2.6s ease-out infinite; }
.area__onda + .area__onda { animation-delay: 1.3s; }
.area p { font-size: .94rem; }
.area__accion { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: .92rem; color: #fff; background: linear-gradient(120deg, var(--wa), var(--wa-osc)); }

/* ---------- Formulario ---------- */
.solicitud { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.solicitud__info { position: sticky; top: 100px; }
.lista-check { display: grid; gap: .7rem; margin: 1.2rem 0 1.6rem; }
.lista-check li { display: flex; gap: .7rem; align-items: baseline; color: var(--texto); }
.lista-check i { color: var(--wa); }
.lista-check--grande { grid-template-columns: repeat(2, 1fr); gap: .9rem 1.5rem; }
.lista-check--grande li { padding: .9rem 1rem; border-radius: var(--radio-chico); background: var(--superficie); border: 1px solid var(--borde); }
.lista-check--grande i { color: var(--c1); }
.solicitud__directo { display: inline-flex; align-items: center; gap: .9rem; padding: .9rem 1.2rem; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); }
.solicitud__directo i { font-size: 1.9rem; color: var(--wa); }
.solicitud__directo small { display: block; font-size: .78rem; color: var(--texto-suave); line-height: 1.2; }
.solicitud__directo strong { font-family: var(--fuente-titulo); font-size: 1.2rem; }

.formulario { padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-alta); display: grid; gap: 1.05rem; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.campo { display: grid; gap: .35rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.campo label, .campo legend { font-weight: 600; font-size: .9rem; padding: 0; }
.campo label b { color: var(--magenta); }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo input[type="password"], .campo select, .campo textarea { width: 100%; padding: .78rem .95rem; border-radius: var(--radio-chico); border: 1.5px solid var(--borde); background: var(--superficie-2); transition: border-color .2s, box-shadow .2s; }
.campo textarea { resize: vertical; min-height: 110px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--cian); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cian) 22%, transparent); }
.campo ::placeholder { color: var(--texto-suave); opacity: .7; }
.campo--mal input, .campo--mal select { border-color: var(--magenta) !important; }
.campo__error { color: var(--magenta); font-size: .82rem; font-weight: 600; min-height: 0; }
.campo__contador { justify-self: end; font-size: .78rem; color: var(--texto-suave); }
.opciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .35rem; }
.opciones label { cursor: pointer; }
.opciones input { position: absolute; opacity: 0; }
.opciones span { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 999px; border: 1.5px solid var(--borde); background: var(--superficie-2); font-size: .9rem; transition: all .2s; }
.opciones input:checked + span { border-color: transparent; color: #fff; background: var(--degradado-azul); }
.opciones input:focus-visible + span { outline: 3px solid var(--cian); outline-offset: 2px; }
.casilla { display: flex !important; gap: .65rem; align-items: flex-start; font-weight: 500 !important; color: var(--texto-suave); cursor: pointer; }
.casilla input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--azul); flex-shrink: 0; }
.formulario__resultado { padding: .85rem 1rem; border-radius: var(--radio-chico); font-size: .93rem; font-weight: 600; }
.formulario__resultado a { text-decoration: underline; }
.es-ok { background: color-mix(in srgb, var(--wa) 16%, transparent); color: var(--wa-osc); }
:root[data-theme="dark"] .es-ok { color: #5fe394; }
.es-error { background: color-mix(in srgb, var(--magenta) 14%, transparent); color: var(--magenta); }

/* ---------- Detalle de servicio ---------- */
.detalle { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.detalle__lado { padding: 1.7rem; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra); }
.detalle__lado h3 { display: flex; align-items: center; gap: .6rem; font-size: 1rem; }
.detalle__lado h3 i { color: var(--c1); }
.fichas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.fichas span { padding: .4rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600; background: color-mix(in srgb, var(--c1) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 35%, transparent); }

/* ---------- Llamada final ---------- */
.final { padding: clamp(3rem, 7vw, 5rem) 0; }
.final__caja { position: relative; overflow: hidden; text-align: center; padding: clamp(2.2rem, 6vw, 4rem) 1.5rem; border-radius: calc(var(--radio) * 1.4); color: #fff; background: radial-gradient(600px 300px at 15% 0%, rgba(25, 184, 255, .45), transparent 70%), radial-gradient(600px 320px at 90% 100%, rgba(255, 45, 111, .45), transparent 70%), linear-gradient(135deg, #081a44, #0d2b6b 55%, #2a1165); display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.final__caja img { height: 80px; width: auto; animation: flotar 5s ease-in-out infinite; margin-bottom: .8rem; }
.final__caja p { color: rgba(255, 255, 255, .82); max-width: 52ch; margin-bottom: 1.4rem; }
.final__nota { margin-top: 1rem; font-size: .88rem; opacity: .8; }

/* ---------- Pie ---------- */
.pie { background: var(--superficie); border-top: 1px solid var(--borde); padding-top: 3rem; }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; }
.pie__texto { margin-top: 1rem; font-size: .93rem; max-width: 38ch; }
.pie h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-suave); margin-bottom: 1rem; }
.pie ul { display: grid; gap: .55rem; font-size: .93rem; }
.pie li i { width: 1.2rem; color: var(--cian); }
.pie li a:hover { color: var(--cian); }
.pie__final { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-block: 1.2rem; border-top: 1px solid var(--borde); font-size: .84rem; color: var(--texto-suave); }

/* ---------- WhatsApp flotante ---------- */
.flotante-wa { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 55; display: inline-flex; align-items: center; height: 58px; border-radius: 999px; color: #fff; background: linear-gradient(120deg, var(--wa), var(--wa-osc)); box-shadow: 0 14px 30px -10px rgba(18, 140, 63, .9); }
.flotante-wa::before { content: ""; position: absolute; top: 0; left: 0; width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--wa); animation: pulso 2s ease-out infinite; }
.flotante-wa i { width: 58px; text-align: center; font-size: 1.8rem; }
.flotante-wa__texto { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: .92rem; transition: max-width .4s ease, padding .4s ease; }
.flotante-wa:hover .flotante-wa__texto, .flotante-wa:focus-visible .flotante-wa__texto { max-width: 220px; padding-right: 1.2rem; }

/* ---------- Aparición ---------- */
.revelar { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .8, .2, 1); }
.revelar.visible { opacity: 1; translate: 0 0; }

/* ---------- Animaciones ---------- */
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes flotar { 50% { translate: 0 -12px; } }
@keyframes respirar { 50% { scale: 1.12; opacity: .7; } }
@keyframes parpadeo { 50% { opacity: 0; } }
@keyframes pulso { 0% { opacity: .8; scale: 1; } 100% { opacity: 0; scale: 1.07 1.4; } }
.flotante-wa::before { animation-name: onda; }
@keyframes onda { 0% { opacity: .8; scale: 1; } 100% { opacity: 0; scale: 1.7; } }
@keyframes latido { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes timbre { 0%, 60%, 100% { rotate: 0deg; } 10%, 30%, 50% { rotate: -13deg; } 20%, 40% { rotate: 13deg; } }
@keyframes cinta { to { transform: translateX(calc(-50% - 1.3rem)); } }

/* ---------- Adaptación a pantallas ---------- */
@media (max-width: 1020px) {
  .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: .8rem 1.25rem 1.2rem; background: var(--superficie); border-bottom: 1px solid var(--borde); box-shadow: var(--sombra); display: none; }
  .menu.abierto { display: flex; }
  .menu a { padding: .8rem 1rem; }
  .menu-boton { display: inline-grid; }
  .rejilla--3 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--5 { grid-template-columns: repeat(3, 1fr); }
  .pasos, .cifras { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .heroe__rejilla, .solicitud, .detalle { grid-template-columns: 1fr; }
  .heroe__texto { text-align: center; }
  .heroe__bajada { margin-inline: auto; }
  .heroe__botones, .migas { justify-content: center; }
  .heroe__telefono { text-align: left; }
  .heroe__visual { order: -1; }
  .orbita { --r: clamp(105px, 30vw, 150px); }
  .orbita__item { width: 48px; height: 48px; margin: -24px; }
  .orbita__item span { font-size: 1.1rem; border-radius: 14px; }
  .solicitud__info { position: static; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__rejilla > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .contenedor { width: min(1180px, 100% - 2rem); }
  .barra__fila { min-height: 64px; }
  .marca img { height: 38px; }
  .marca__nombre { font-size: 1.15rem; }
  .marca__lema { font-size: .46rem; letter-spacing: .14em; }
  .barra .boton--wa span { display: none; }
  .barra .boton--wa { width: 42px; height: 42px; padding: 0; font-size: 1.2rem; }
  .boton-icono { width: 40px; height: 40px; }
  .rejilla--3, .pasos, .campo-doble, .lista-check--grande, .pie__rejilla { grid-template-columns: 1fr; }
  .rejilla--5 { grid-template-columns: repeat(2, 1fr); }
  .mensaje { grid-template-columns: 1fr; }
  .heroe__botones .boton { width: 100%; white-space: normal; }
  .pie__final { flex-direction: column; text-align: center; padding-bottom: 5.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar { opacity: 1; translate: 0 0; }
}

/* ---------- Panel de solicitudes ---------- */
.panel { padding: 2rem 0 4rem; }
.panel__caja { max-width: 440px; margin: 8vh auto; padding: 2rem; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-alta); display: grid; gap: 1rem; }
.panel__caja img { height: 60px; width: auto; margin-inline: auto; }
.panel__cabeza { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.panel__herramientas { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.panel__herramientas input, .panel__herramientas select { padding: .55rem .9rem; border-radius: 999px; border: 1.5px solid var(--borde); background: var(--superficie); }
.aviso { padding: .8rem 1rem; border-radius: var(--radio-chico); font-weight: 600; font-size: .92rem; }
.tabla-envoltura { overflow-x: auto; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 860px; }
.tabla th, .tabla td { padding: .75rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
.tabla th { font-family: var(--fuente-titulo); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); background: var(--superficie-2); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla small { color: var(--texto-suave); display: block; }
.tabla__acciones { display: flex; gap: .4rem; flex-wrap: wrap; }
.tabla__acciones form { margin: 0; }
.tabla select { padding: .3rem .5rem; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie-2); }
.chip { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.chip--nuevo { background: color-mix(in srgb, var(--naranja) 22%, transparent); color: var(--naranja); }
.chip--contactado { background: color-mix(in srgb, var(--cian) 22%, transparent); color: var(--azul); }
:root[data-theme="dark"] .chip--contactado { color: var(--cian); }
.chip--cerrado { background: color-mix(in srgb, var(--wa) 22%, transparent); color: var(--wa); }
.mini-boton { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--borde); background: var(--superficie-2); cursor: pointer; display: inline-grid; place-items: center; }
.mini-boton:hover { border-color: var(--cian); }
.mini-boton--wa { color: var(--wa); } .mini-boton--rojo { color: var(--magenta); }

/* ---------- v1.1: medio de envío en el panel + firma del pie ---------- */
.chip--formulario { background: color-mix(in srgb, var(--morado) 20%, transparent); color: var(--morado); }
.chip--whatsapp { background: color-mix(in srgb, var(--wa) 22%, transparent); color: var(--wa); }
.chip i { margin-right: .2rem; }
.tabla { min-width: 1000px; }
.pie__firma { font-weight: 700; color: var(--texto); }
.pie__firma:hover { color: var(--cian); }
.chip { white-space: nowrap; }