/* Página de inicio */
.hero { position: relative; padding: clamp(40px, 7vw, 90px) 0 clamp(70px, 9vw, 120px); overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 1200px; height: 1200px; right: -420px; top: -380px; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255,79,31,.10) 0 2px, transparent 2px 70px); mask-image: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); pointer-events: none; }
.hero .envoltura { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px, 5vw, 70px); align-items: center; position: relative; }
.hero h1 { font-size: clamp(3.4rem, 9.6vw, 8.2rem); margin: 22px 0 26px; }
.hero h1 .serif { color: var(--senal); font-size: 1.08em; letter-spacing: -0.03em; }
.hero .bajada { font-size: clamp(1.1rem, 2vw, 1.35rem); }
.hero-botones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero-datos { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 34px; font-weight: 600; font-size: .95rem; color: var(--tinta-2); }
.hero-datos span { display: inline-flex; align-items: center; gap: 8px; }
.hero-datos svg { color: var(--bien); }
@media (max-width: 960px) { .hero .envoltura { grid-template-columns: 1fr; } }

/* Demostración en vivo: búsqueda en Google */
.demo { position: relative; justify-self: center; width: min(420px, 100%); }
.telefono { position: relative; background: var(--tinta); border-radius: 44px; padding: 12px; box-shadow: 0 50px 100px -30px rgba(18,19,23,.55), 0 0 0 1px rgba(18,19,23,.2); }
.pantalla { background: #fff; border-radius: 34px; overflow: hidden; height: 560px; position: relative; }
.mapa { height: 150px; background:
  linear-gradient(115deg, transparent 46%, #F7D8B8 46% 49%, transparent 49%),
  linear-gradient(20deg, transparent 60%, #CFE3F5 60% 70%, transparent 70%),
  linear-gradient(#E8EEE6 1px, transparent 1px) 0 0 / 26px 26px,
  linear-gradient(90deg, #E8EEE6 1px, transparent 1px) 0 0 / 26px 26px, #F3F5F1; position: relative; }
.pin { position: absolute; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #B9BEC8; transition: background .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.pin.tuyo { background: var(--senal); }
.pin.tuyo.salta { transform: rotate(-45deg) scale(1.5) translate(4px, -4px); }
.buscador { position: absolute; left: 14px; right: 14px; top: 14px; background: #fff; border-radius: 999px; padding: 11px 16px; box-shadow: 0 6px 20px rgba(0,0,0,.12); font-size: .95rem; display: flex; gap: 10px; align-items: center; color: #3C4043; }
.buscador .cursor { width: 2px; height: 18px; background: var(--mar); animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.resultados { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ficha { border-radius: 16px; padding: 12px 14px; border: 1px solid #ECEDEF; background: #fff; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s, box-shadow .5s, border-color .5s; opacity: 0; transform: translateY(14px); }
.ficha.ve { opacity: 1; transform: none; }
.ficha b { display: block; font-size: .98rem; }
.ficha .estrellas { color: #F4B400; font-size: .82rem; letter-spacing: 1px; }
.ficha small { color: #70757A; font-size: .8rem; }
.ficha .acciones { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.ficha .accion { font-size: .76rem; font-weight: 700; border-radius: 999px; padding: 5px 10px; border: 1px solid #DADCE0; color: #5F6368; }
.ficha .accion.rota { color: var(--mal); border-color: #F6C6C8; background: #FFF5F5; text-decoration: line-through; }
.ficha.tuya { border-color: var(--senal); box-shadow: 0 16px 34px -14px rgba(255,79,31,.6); }
.ficha.tuya .accion { border-color: var(--senal); color: var(--senal); }
.ficha.tuya .accion.llena { background: var(--senal); color: #fff; }
.aviso-cita { position: absolute; left: 50%; top: 18px; width: calc(100% - 28px); transform: translate(-50%, -140%); background: rgba(30,31,36,.94); color: #fff; border-radius: 20px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; transition: transform .6s cubic-bezier(.2,.8,.2,1); z-index: 3; font-size: .86rem; }
.aviso-cita.ve { transform: translate(-50%, 0); }
.aviso-cita .wa { width: 38px; height: 38px; border-radius: 10px; background: #25D366; display: grid; place-items: center; flex-shrink: 0; }
.aviso-cita b { display: block; }
.demo-pie { text-align: center; margin-top: 18px; font-size: .88rem; color: var(--gris); }
.flotante { position: absolute; background: #fff; border-radius: 18px; padding: 12px 16px; box-shadow: var(--sombra); font-weight: 700; font-size: .9rem; display: flex; gap: 10px; align-items: center; animation: flota 6s ease-in-out infinite; }
.flotante .gordo { font-size: 1.6rem; color: var(--senal); }
.flotante--a { left: -70px; top: 120px; }
.flotante--b { right: -50px; bottom: 120px; animation-delay: -3s; }
@keyframes flota { 50% { transform: translateY(-12px); } }
@media (max-width: 560px) { .flotante { display: none; } }

/* Cinta de pueblos */
/* «No importa si estás en…»: ciudades de todo el país */
.lugares { background: var(--blanco); border-block: 1px solid rgba(18,19,23,.08); padding: 26px 0; }
.lugares-fila { display: flex; align-items: center; gap: 28px; }
.lugares-texto, .lugares-cierre { flex-shrink: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, 1.9vw, 1.5rem); letter-spacing: -0.03em; white-space: nowrap; }
.lugares-texto { color: var(--gris); }
.lugares-carril { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lugares .pista { display: inline-flex; white-space: nowrap; animation: cinta 46s linear infinite; }
.lugares-carril:hover .pista { animation-play-state: paused; }
.lugares .pista span { display: inline-flex; align-items: center; gap: 12px; padding-right: 38px; font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1.9vw, 1.5rem); letter-spacing: -0.025em; color: var(--tinta); }
.lugares .pista span::before { content: ""; width: 11px; height: 11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--senal); box-shadow: inset 0 0 0 3px var(--senal), inset 0 0 0 6px #fff; flex-shrink: 0; }
@keyframes cinta { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .lugares-fila { flex-wrap: wrap; gap: 12px 16px; }
  .lugares-carril { order: 2; flex-basis: 100%; }
  .lugares-cierre { order: 3; }
}

/* Lo que encontramos */
.hallazgo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.cifra-gigante { font-size: clamp(4.6rem, 12vw, 10.5rem); line-height: .86; color: var(--senal); white-space: nowrap; }
.cifra-gigante .serif { color: var(--papel); font-size: .34em; display: block; margin-top: 14px; letter-spacing: -0.02em; white-space: normal; max-width: 12ch; line-height: 1; }
.hechos { display: grid; gap: 14px; margin-top: 28px; }
.hecho { display: grid; grid-template-columns: 74px 1fr; gap: 18px; align-items: center; padding: 18px 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(255,255,255,.03); }
.hecho b { font-family: var(--display); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.04em; color: var(--papel); line-height: 1; }
.hecho span { color: #C9CBD3; }
.fuente { font-size: .82rem; color: #8D919C; margin-top: 18px; }
@media (max-width: 900px) { .hallazgo { grid-template-columns: 1fr; gap: 30px; } }

/* Servicios en tarjetas apiladas */
.servicios-cab { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; margin-bottom: 50px; }
.pila { display: grid; gap: 26px; }
.servicio { position: sticky; top: 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; min-height: 460px; padding: clamp(28px, 4vw, 54px); border-radius: 34px; background: var(--blanco); box-shadow: var(--sombra); overflow: hidden; }
.servicio:nth-child(2) { top: 116px; background: var(--tinta); color: var(--papel); }
.servicio:nth-child(3) { top: 136px; background: var(--senal); color: #fff; }
.servicio .numero { font-family: var(--display); font-weight: 700; font-size: 1.3rem; opacity: .6; }
.servicio h3 { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.04em; line-height: .95; margin: 10px 0 18px; }
.servicio p { font-size: 1.1rem; max-width: 44ch; opacity: .9; }
.servicio ul { list-style: none; margin: 22px 0 26px; display: grid; gap: 9px; }
.servicio li { padding-left: 28px; position: relative; font-weight: 600; }
.servicio li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 14px; border-radius: 50%; border: 3px solid currentColor; opacity: .8; }
.precio { font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; }
.precio small { font-family: var(--texto); font-weight: 600; font-size: .9rem; opacity: .75; }
.ilustracion { position: relative; height: 340px; border-radius: 26px; background: rgba(18,19,23,.04); display: grid; place-items: center; overflow: hidden; }
.servicio:nth-child(2) .ilustracion { background: rgba(255,255,255,.05); }
.servicio:nth-child(3) .ilustracion { background: rgba(255,255,255,.12); }
@media (max-width: 860px) { .servicio { grid-template-columns: 1fr; position: relative; top: 0 !important; min-height: 0; } .ilustracion { height: 240px; } }
.mini-web { width: 78%; max-width: 330px; background: #fff; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(18,19,23,.4); overflow: hidden; color: var(--tinta); }
.mini-web .barra-nav { height: 30px; background: #F1F1F3; display: flex; gap: 6px; align-items: center; padding: 0 12px; }
.mini-web .barra-nav i { width: 9px; height: 9px; border-radius: 50%; background: #D4D5D9; }
.mini-web .contenido { padding: 22px; }
.mini-web .contenido b { font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: .95; letter-spacing: -0.04em; display: block; }
.mini-web .linea { height: 9px; border-radius: 9px; background: #ECEDEF; margin-top: 10px; }
.mini-web .boton-mini { display: inline-block; margin-top: 16px; background: var(--senal); color: #fff; font-weight: 700; font-size: .8rem; padding: 8px 14px; border-radius: 999px; }
.calendario { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 82%; max-width: 340px; }
.calendario div { aspect-ratio: 1; border-radius: 14px; background: rgba(255,255,255,.08); display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #AEB2BD; }
.calendario .lleno { background: var(--senal); color: #fff; }
.calendario .nuevo { background: #fff; color: var(--tinta); animation: late 1.6s ease-in-out infinite; }
@keyframes late { 50% { transform: scale(1.08); } }
.podio { display: grid; gap: 10px; width: 82%; max-width: 340px; }
.podio div { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.18); border-radius: 14px; padding: 12px 14px; font-weight: 700; }
.podio div:first-child { background: #fff; color: var(--tinta); transform: scale(1.04); box-shadow: 0 18px 40px -14px rgba(18,19,23,.4); }
.podio i { font-style: normal; font-family: var(--display); font-size: 1.3rem; width: 26px; }

.extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.extra { padding: 26px; border-radius: 24px; border: 1.5px solid rgba(18,19,23,.1); background: rgba(255,255,255,.5); transition: transform .3s, border-color .3s; }
.extra:hover { transform: translateY(-4px); border-color: var(--senal); }
.extra b { font-family: var(--display); font-size: 1.35rem; letter-spacing: -0.02em; display: block; margin-bottom: 6px; }
.extra span { color: var(--tinta-2); }
.extra .precio { font-size: 1.15rem; display: block; margin-top: 14px; }
@media (max-width: 860px) { .extras { grid-template-columns: 1fr; } }

/* Proceso */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 60px; counter-reset: paso; position: relative; }
.pasos::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; border-top: 2px dashed rgba(244,242,236,.25); }
.paso { position: relative; }
.paso .bola { width: 68px; height: 68px; border-radius: 50%; background: var(--papel); color: var(--tinta); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.6rem; margin-bottom: 22px; position: relative; }
.paso:first-child .bola { background: var(--senal); color: #fff; }
.paso h4 { font-family: var(--display); font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 8px; }
.paso p { color: #C9CBD3; }
@media (max-width: 860px) { .pasos { grid-template-columns: 1fr 1fr; } .pasos::before { display: none; } }
@media (max-width: 520px) { .pasos { grid-template-columns: 1fr; } }

/* Plan estrella y garantías */
.estrella { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; padding: clamp(30px, 5vw, 60px); border-radius: 36px; background: var(--blanco); box-shadow: var(--sombra); position: relative; overflow: hidden; }
.estrella::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; background: var(--senal-suave); }
.estrella > * { position: relative; z-index: 1; }
.estrella h3 { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.04em; line-height: .95; margin: 14px 0; }
.estrella .cifra { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -0.04em; }
.estrella ul { list-style: none; display: grid; gap: 16px; align-content: center; }
.estrella li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-weight: 600; }
.estrella li svg { color: var(--senal); margin-top: 3px; }
@media (max-width: 860px) { .estrella { grid-template-columns: 1fr; } }
.garantias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.garantia { padding: 22px; border-radius: 22px; background: var(--papel-2); }
.garantia b { display: block; font-family: var(--display); font-size: 1.2rem; margin: 10px 0 4px; }
.garantia span { color: var(--tinta-2); font-size: .95rem; }
@media (max-width: 860px) { .garantias { grid-template-columns: 1fr 1fr; } }

/* Preguntas */
.preguntas { max-width: 860px; margin-top: 40px; }
.preguntas details { border-bottom: 1.5px solid rgba(18,19,23,.12); }
.preguntas summary { list-style: none; cursor: pointer; padding: 24px 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing: -0.02em; display: flex; justify-content: space-between; gap: 20px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-size: 1.6rem; line-height: 1; transition: transform .3s; color: var(--senal); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 0 24px; color: var(--tinta-2); max-width: 70ch; }

/* Llamado final */
.final { text-align: center; }
.final h2 { font-size: clamp(3rem, 9vw, 7.4rem); max-width: 14ch; margin: 18px auto 30px; }
.final h2 .serif { color: var(--senal); }