@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400..800&family=Caveat:wght@500&display=swap");

:root {
  --piedra: #F4F4F3;
  --piedra-clara: #FAFAF9;
  --basalto: #16181B;
  --fondo-hondo: #0E1013;
  --pizarra: #57534E;
  --junta: #E7E5E4;
  --rojo: #D92D20;
  --rojo-claro: #F97066;
  --lado: max(clamp(1.25rem, 5vw, 4rem), calc((100vw - 76rem) / 2));
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: #fff;
  color: var(--basalto);
  font: 400 1.0625rem/1.6 Archivo, system-ui, sans-serif;
}

h1, h2, h3 { font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 0; }
h1 { font-size: clamp(2.75rem, 5.8vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
h1 em { font-style: normal; color: var(--rojo); }

p { max-width: 60ch; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--basalto); outline-offset: 3px; }
header :focus-visible, .portada :focus-visible, .contacto :focus-visible, .fuerte :focus-visible { outline-color: #fff; }

header, main > section, footer { padding-inline: var(--lado); }
main > section { padding-block: clamp(4rem, 8vw, 7rem); }
.centro { text-align: center; }
.centro p { margin-inline: auto; font-size: 1.2rem; color: var(--pizarra); }

/* Menú */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding-block: 1rem;
  background: rgb(14 16 19 / .92);
  backdrop-filter: blur(10px);
  color: var(--piedra);
}
.marca { display: flex; align-items: center; gap: .55rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.marca::before { content: ""; width: 2.1rem; height: 1.75rem; background: url("simbolo-oscuro.svg") center / contain no-repeat; }
nav { display: flex; gap: 2rem; }
nav a { text-decoration: none; font-weight: 500; opacity: .8; }
nav a:hover { opacity: 1; }

.boton {
  display: inline-block;
  background: var(--rojo);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border-radius: 8px;
  transition: transform .15s, box-shadow .15s;
}
.boton:hover { transform: translateY(-3px); box-shadow: 0 .6rem 1.4rem -.5rem rgb(217 45 32 / .7); }
.boton.oscuro { background: var(--basalto); color: #fff; }
.boton.oscuro:hover { box-shadow: 0 .6rem 1.4rem -.6rem rgb(0 0 0 / .5); }
.boton.linea, .boton.linea:hover { background: none; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
header .boton { padding: .6rem 1.1rem; font-size: .95rem; }

/* Portada */
.portada {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--fondo-hondo);
  color: var(--piedra);
  padding-block: clamp(3rem, 6vw, 5rem) 0;
}
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}
.texto { padding-bottom: clamp(3rem, 6vw, 5rem); }
.sello { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 1rem; margin-bottom: 1.5rem; border-radius: 99px; background: rgb(217 45 32 / .18); color: var(--rojo-claro); font-weight: 600; font-size: .95rem; }
.sello::before { content: ""; width: .55rem; aspect-ratio: 1; border-radius: 50%; background: var(--rojo-claro); animation: late 2s ease-in-out infinite; }
@keyframes late { 50% { opacity: .3; scale: .7; } }
.portada .texto > p { font-size: 1.25rem; max-width: 34ch; margin-block: 1.5rem 2rem; color: #A8A29E; }
.acciones { display: flex; flex-wrap: wrap; gap: .9rem; }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2.75rem; border: 1px solid #2A2D31; border-radius: 10px; }
.cifras div { padding: 1rem; border-left: 1px solid #2A2D31; font-size: .85rem; line-height: 1.35; color: #A8A29E; }
.cifras div:first-child { border-left: 0; }
.cifras b { display: block; color: #fff; font-size: 1.05rem; letter-spacing: -.02em; margin-bottom: .2rem; }

.escena { position: relative; align-self: stretch; min-height: 34rem; }
.escena img { position: absolute; left: -6%; bottom: 0; width: 135%; max-width: none; }
.ventana {
  position: absolute;
  top: 1rem;
  left: 6%;
  width: 82%;
  border-radius: 10px;
  background: #fff;
  color: var(--basalto);
  box-shadow: 0 2.5rem 5rem -1.5rem rgb(0 0 0 / .7);
  animation: flota 7s ease-in-out infinite;
}
@keyframes flota { 50% { translate: 0 -.8rem; } }
.barra { display: flex; align-items: center; gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid var(--piedra); font-weight: 700; }
.barra i { width: .7rem; aspect-ratio: 1; border-radius: 50%; background: var(--rojo); }
.barra i:nth-child(2) { background: #F5B700; }
.barra i:nth-child(3) { background: #2E9E5B; margin-right: .6rem; }
.barra small { margin-left: auto; font-weight: 500; color: var(--pizarra); }
.cita { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: .8rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--piedra); font-size: .95rem; }
.cita:last-child { border: 0; }
.burbuja {
  position: absolute;
  left: 0;
  top: 17.5rem;
  max-width: 17rem;
  padding: .8rem 1rem;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  color: var(--basalto);
  font-size: .95rem;
  line-height: 1.4;
  box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / .7);
  animation: flota 7s ease-in-out -2s infinite;
}
.burbuja.mia { left: auto; right: 2%; top: 24rem; border-radius: 16px 16px 4px 16px; background: #DCF5D0; color: var(--basalto); animation-delay: -4s; }

.chip { font-weight: 600; font-size: .85rem; padding: .25rem .7rem; border-radius: 99px; white-space: nowrap; }
.chip.ok { background: #DDF3E4; color: #17633A; }
.chip.aviso { background: #FDF0C7; color: #7A5A00; }
.chip.mal { background: #FBE0DD; color: #9A2116; }
.chip.neutro { background: var(--piedra); color: var(--pizarra); }

/* Cinta */
.cinta { padding: 1.4rem 0; overflow: hidden; white-space: nowrap; background: var(--piedra-clara); color: var(--pizarra); border-bottom: 1px solid var(--junta); }
.cinta div { display: inline-flex; animation: corre 45s linear infinite; }
.cinta span { display: flex; align-items: center; font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.cinta span::after { content: ""; width: .55em; aspect-ratio: 1 / 1.1547; margin-inline: 1.4em; background: var(--rojo); clip-path: var(--hex); }
@keyframes corre { to { transform: translateX(-50%); } }

/* Servicios */
.servicios { background: var(--piedra); }
/* Filas iguales: el dibujo siempre a la izquierda y el texto en la misma línea */
.servicio { display: grid; grid-template-columns: 15rem minmax(0, 40rem); justify-content: center; gap: clamp(2rem, 6vw, 5rem); align-items: center; margin-top: clamp(3.5rem, 6vw, 5rem); }
.servicio svg { width: 15rem; height: 15rem; }
.servicio h3 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--rojo); }
.servicio .boton { margin-top: .5rem; }
.servicio .gancho { font-size: 1.1rem; font-weight: 700; line-height: 1.3; margin: 1rem 0 .75rem; }
.servicio ul, .paquete ul { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; }
.servicio li, .paquete li { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .5rem; }
.servicio li::before, .paquete li::before { content: ""; flex: none; width: .7rem; aspect-ratio: 1 / 1.1547; background: var(--rojo); clip-path: var(--hex); translate: 0 .05rem; }
.mece { animation: flota 6s ease-in-out infinite; }
.gira { transform-box: fill-box; transform-origin: center; animation: gira 14s linear infinite; }
@keyframes gira { to { rotate: 360deg; } }

/* Comparador notas a mano / sistema */
.pestanas { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 2rem 0 1.5rem; }
.pestanas button { font: inherit; font-weight: 600; padding: .55rem 1.1rem; border: 1px solid var(--junta); border-radius: 8px; background: none; color: var(--basalto); cursor: pointer; }
.pestanas button[aria-pressed="true"] { background: var(--basalto); color: #fff; }
.comparador { --x: 50%; position: relative; height: 27rem; border-radius: 10px; overflow: hidden; text-align: left; box-shadow: 0 0 0 1px var(--junta), 0 2rem 3rem -2rem rgb(14 16 19 / .35); }
.capa { position: absolute; inset: 0; padding: 2rem 2.25rem; margin: 0; }
.libreta {
  list-style: none;
  padding: 3.6rem 1.5rem 0 5rem;
  font: 500 2.1rem/3rem Caveat, cursive;
  color: #1E2F7A;
  background:
    linear-gradient(90deg, transparent 3.8rem, #E28B8B 3.8rem, #E28B8B calc(3.8rem + 2px), transparent 0),
    repeating-linear-gradient(#F4EDBF 0, #F4EDBF calc(3rem - 1px), #9FB6CC 3rem);
}
.libreta li { white-space: nowrap; animation: escribe .6s ease-out calc(var(--i) * 140ms) backwards; }
.libreta li:nth-child(odd) { transform: rotate(-1.2deg); transform-origin: left; }
.libreta li:nth-child(3n) { transform: rotate(.8deg); padding-left: 1rem; }
.libreta s { text-decoration-thickness: 3px; opacity: .7; }
.libreta::after { content: ""; position: absolute; right: 12%; bottom: 9%; width: 7rem; aspect-ratio: 1; border-radius: 50%; border: .5rem solid rgb(120 78 30 / .22); box-shadow: inset 0 0 1rem rgb(120 78 30 / .12); }
@keyframes escribe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-30% -10% -30% 0); } }
.sistema { background: #fff; clip-path: inset(0 0 0 var(--x)); display: flex; flex-direction: column; }
.sistema h3 { font-size: 1.6rem; margin-bottom: 1.25rem; display: flex; justify-content: space-between; align-items: baseline; }
.sistema h3 small { font-weight: 400; font-size: .95rem; letter-spacing: 0; color: var(--pizarra); }
.fila { display: grid; grid-template-columns: 8.5rem 1.1fr 1.2fr auto; gap: 1rem; align-items: center; padding: .8rem 0; border-top: 1px solid var(--junta); font-size: .95rem; animation: entra .5s ease calc(var(--i) * 90ms) backwards; }
.fila span:nth-child(3) { color: var(--pizarra); }
.sistema .pie { margin: auto 0 0; padding-top: 1rem; border-top: 2px solid var(--basalto); font-size: 1rem; font-weight: 600; color: var(--basalto); max-width: none; }
.comparador input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.manija { position: absolute; top: 0; bottom: 0; left: var(--x); width: 4px; margin-left: -2px; background: var(--basalto); pointer-events: none; }
.manija::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 3.4rem; aspect-ratio: 1 / 1.1547; clip-path: var(--hex); background: var(--rojo); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; }
.comparador input:focus-visible + .manija { background: var(--rojo); width: 8px; margin-left: -4px; }
.centro .nota { font-size: .95rem; margin-top: 1.25rem; }
.centro .nota + .nota { margin-top: .4rem; }
.nota a { color: var(--rojo); font-weight: 600; }

/* Dato */
.dato { background: var(--basalto); color: #fff; display: grid; grid-template-columns: 1fr; gap: 3.5rem; align-items: center; }
.dato p:first-child { font-size: clamp(1.9rem, 4.2vw, 3.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; max-width: 18ch; margin: 0; }
.dato p + p { margin-top: 1.5rem; font-size: 1.2rem; max-width: 44ch; color: #A8A29E; }
.dato small { display: block; margin-top: 1.25rem; color: #78716C; }

/* Paquetes */
.paquetes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem; text-align: left; align-items: stretch; }
.paquete { display: flex; flex-direction: column; padding: 2rem; border: 1px solid var(--junta); border-radius: 10px; background: #fff; }
.paquete:hover { translate: 0 -.4rem; box-shadow: 0 1.5rem 2.5rem -1.5rem rgb(14 16 19 / .3); }
.paquete.fuerte { background: var(--basalto); color: #fff; border-color: var(--basalto); }
.paquete h3 { font-size: 1.5rem; }
.paquete > p { font-size: 1rem; color: var(--pizarra); margin: .6rem 0 1.5rem; }
.paquete.fuerte > p { color: #A8A29E; }
.precio { font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.precio small { display: block; margin-top: .5rem; line-height: 1.4; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--pizarra); }
.paquete.fuerte .precio small { color: var(--rojo-claro); }
.paquete ul { padding-top: 1.25rem; border-top: 1px solid var(--junta); }
.paquete.fuerte ul { border-color: #2A2D31; }
.paquete .boton { margin-top: auto; text-align: center; }

/* Cómo trabajamos */
.como { background: var(--piedra-clara); }
.pasos { list-style: none; padding: 0; margin: 3rem 0 0; counter-reset: paso; display: grid; gap: 3rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pasos li { counter-increment: paso; }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 4.25rem; aspect-ratio: 1 / 1.1547; clip-path: var(--hex); background: var(--rojo); color: #fff; font-size: 1.8rem; font-weight: 800; margin-bottom: 1.25rem; }
.pasos strong { display: block; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; margin-bottom: .5rem; }

/* Quién */
.quien { display: grid; grid-template-columns: minmax(12rem, 20rem) 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.quien h2 { margin-bottom: 1.25rem; }
.quien p { font-size: 1.2rem; }
.foto { aspect-ratio: 4 / 5; border-radius: 12px; background: var(--junta); display: grid; place-items: center; color: var(--pizarra); object-fit: cover; width: 100%; height: auto; }

/* Preguntas */
.preguntas { background: var(--piedra); display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
details { border-top: 2px solid var(--basalto); }
details:last-child { border-bottom: 2px solid var(--basalto); }
summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font-size: 1.6rem; line-height: 1; color: var(--rojo); transition: rotate .25s; }
details[open] summary::after { rotate: 45deg; }
details p { margin: 0 0 1.5rem; }

/* Contacto */
.contacto { background: var(--fondo-hondo); color: var(--piedra); position: relative; overflow: hidden; }
.contacto > * { position: relative; }
.contacto h2 { font-size: clamp(2.5rem, 6.5vw, 5.5rem); max-width: 12ch; }
.contacto .eco { position: absolute; right: -8vw; bottom: -5rem; width: 52vw; opacity: .5; }
.telefono { display: block; font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; color: var(--rojo); text-decoration: none; margin: 1.5rem 0 2rem; }

footer { padding-block: 2rem; display: flex; gap: 2rem; justify-content: space-between; flex-wrap: wrap; font-size: .95rem; background: var(--fondo-hondo); color: #A8A29E; border-top: 1px solid #2A2D31; }

/* Aviso de privacidad */
.legal { max-width: 46rem; margin-inline: auto; }
.legal h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: 2rem; }
.legal h2 { font-size: 1.5rem; margin: 2.5rem 0 .75rem; }

/* Movimiento */
.progreso { position: fixed; top: 0; left: 0; z-index: 11; width: 100%; height: 4px; background: var(--rojo); transform-origin: left; transform: scaleX(0); }
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0; margin: -.12em 0; }
.pal > span { display: inline-block; transform: translateY(115%); animation: alza .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 80ms + 150ms) forwards; }
@keyframes alza { to { transform: none; } }
@keyframes entra { from { opacity: 0; translate: 0 1rem; } }
.js .sello, .js .portada .texto > p, .js .acciones, .js .cifras { animation: entra .7s ease .8s backwards; }
.js .sello { animation-delay: 0s; }
.js .cifras { animation-delay: 1.1s; }
.js .ventana, .js .burbuja { opacity: 0; animation: aparece .8s ease 1s forwards, flota 7s ease-in-out 1.8s infinite; }
.js .burbuja { animation-delay: 1.6s, 2.4s; }
.js .burbuja.mia { animation-delay: 2.4s, 3.2s; }
@keyframes aparece { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }

.js [data-ver] { opacity: 0; translate: 0 2.5rem; transition: opacity .8s ease, translate .8s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; transition-delay: calc(var(--i, 0) * 120ms); }
.js [data-ver].visto { opacity: 1; translate: none; }
.js .paquete.visto:hover { translate: 0 -.5rem; transition-delay: 0s; transition-duration: .25s; }
.js .pasos li::before { scale: 0; rotate: -90deg; transition: scale .6s cubic-bezier(.3, 1.5, .5, 1), rotate .6s; transition-delay: calc(var(--i) * 120ms + 200ms); }
.js .pasos li.visto::before { scale: 1; rotate: none; }
.js .servicio svg { scale: .7; transition: scale .9s cubic-bezier(.3, 1.4, .5, 1); }
.js .servicio.visto svg { scale: 1; }

@media (max-width: 900px) {
  nav { display: none; }
  .portada, .servicio, .quien, .dato, .preguntas { grid-template-columns: 1fr; }
  .servicio svg { width: 11rem; height: 11rem; }
  .paquetes { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifras div:nth-child(3) { border-left: 0; }
  .cifras div:nth-child(n+3) { border-top: 1px solid #2A2D31; }
  .escena { min-height: 33rem; }
  .ventana { left: 0; width: 100%; }
  .burbuja { top: 19rem; }
  .burbuja.mia { top: 26rem; }
  .contacto .eco { display: none; }
  .foto { max-width: 14rem; }
  .comparador { height: 29rem; }
  .capa { padding: 1.25rem; }
  .libreta { padding: 3.4rem .5rem 0 3.2rem; font-size: 1.55rem; background: linear-gradient(90deg, transparent 2.4rem, #E28B8B 2.4rem, #E28B8B calc(2.4rem + 2px), transparent 0), repeating-linear-gradient(#F4EDBF 0, #F4EDBF calc(3rem - 1px), #9FB6CC 3rem); }
  .sistema h3 small { display: none; }
  .fila { grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .6rem 0; }
  .fila span:first-child { display: none; }
  .fila b, .fila span:nth-child(3) { grid-column: 1; }
  .fila .chip { grid-column: 2; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pal > span { transform: none; }
  .js [data-ver], .js .ventana, .js .burbuja { opacity: 1; translate: none; }
  .js .pasos li::before, .js .servicio svg { scale: 1; rotate: none; }
}

/* Móvil: agenda y burbujas una debajo de otra para que no se encimen */
@media (max-width: 900px) {
  .escena { padding: 0 0 3.5rem; }
  .ventana, .burbuja, .burbuja.mia { position: relative; inset: auto; }
  .burbuja { margin-left: .5rem; }
  .burbuja.mia { align-self: flex-end; margin-right: .5rem; }
}
@media (max-width: 400px) {
  .cita { grid-template-columns: 2.8rem 1fr auto; gap: .5rem; padding: .7rem .75rem; font-size: .85rem; }
  .chip { font-size: .7rem; padding: .25rem .5rem; }
  .barra { font-size: .9rem; white-space: nowrap; }
}

/* Paquetes con tabla de detalle, al estilo de MagmaLabs */
.plazo { display: inline-block; margin-bottom: 1rem; padding: .2rem .6rem; border-radius: 6px; background: var(--piedra); color: var(--pizarra); font-size: .85rem; font-weight: 600; }
.fuerte .plazo { background: #2A2D31; color: #D6D3D1; }
.detalle { margin: 1.5rem 0 1.75rem; font-size: .95rem; }
.detalle div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--junta); }
.detalle dt { color: var(--pizarra); }
.detalle dd { margin: 0; font-weight: 600; text-align: right; }
.fuerte .detalle div { border-color: #2A2D31; }
.fuerte .detalle dt { color: #A8A29E; }
.paquete .incluye { margin: 0 0 1.25rem; font-size: .9rem; color: var(--pizarra); }
.fuerte .incluye { color: #A8A29E; }

/* Inicio sin columnas: la pantalla del sistema es la protagonista */
.escena { display: flex; flex-direction: column; justify-content: center; gap: 1rem; min-height: 0; padding-bottom: clamp(3rem, 6vw, 5rem); }
.ventana, .burbuja, .burbuja.mia { position: relative; inset: auto; width: auto; }
.ventana { margin-left: 2rem; }
.burbuja { align-self: flex-start; margin-top: -.5rem; }
.burbuja.mia { align-self: flex-end; margin-top: -.25rem; }
.resumen { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--junta); }
.resumen div { padding: .8rem 1rem; font-size: .8rem; color: var(--pizarra); border-left: 1px solid var(--junta); }
.resumen div:first-child { border-left: 0; }
.resumen b { display: block; font-size: 1.35rem; letter-spacing: -.03em; color: var(--basalto); }
.cita { border-bottom-color: var(--junta); }
@media (max-width: 900px) {
  .ventana { margin-left: 0; }
  .burbuja { margin-top: 0; }
}

.contacto h2 { margin-bottom: 2rem; }
.servicio > div > p { margin: 0 0 .75rem; }
.servicio .gancho { margin: .75rem 0; }

/* Dato: cifras del INEGI */
.cuenta { grid-column: 1 / -1; }
.cuenta dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding-top: 2rem; border-top: 1px solid #2A2D31; }
.cuenta dl div { padding: 0 1.5rem; border-left: 1px solid #2A2D31; }
.cuenta dl div:first-child { padding-left: 0; border-left: 0; }
.cuenta dt { font-size: clamp(2.4rem, 4.5vw, 3.75rem); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cuenta dl div:nth-child(2) dt { color: var(--rojo); }
.cuenta dd { margin: 0; color: #A8A29E; }
@media (max-width: 600px) { .cuenta dl { grid-template-columns: 1fr; gap: 1.25rem; } .cuenta dl div { padding: 0; border: 0; } }
.dato > div:first-child { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: clamp(2rem, 6vw, 5rem); align-items: end; }
.dato > div:first-child > p:first-child { grid-row: 1 / span 2; }
@media (max-width: 900px) { .dato > div:first-child { grid-template-columns: 1fr; } .dato > div:first-child > p:first-child { grid-row: auto; } }

/* Contacto: WhatsApp a la izquierda, formulario de correo a la derecha */
.contacto { display: grid; grid-template-columns: 1fr minmax(0, 32rem); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.contacto h2 { margin-bottom: 1.25rem; }
.contacto > div > p { font-size: 1.2rem; color: #A8A29E; max-width: 34ch; margin: 0 0 2rem; }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 12px; background: #fff; color: var(--basalto); }
.formulario label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 600; }
.formulario input, .formulario textarea { font: inherit; font-weight: 400; font-size: 1rem; padding: .7rem .8rem; border: 1px solid #D6D3D1; border-radius: 8px; background: var(--piedra-clara); color: inherit; width: 100%; }
.formulario textarea { resize: vertical; }
.formulario input:focus, .formulario textarea:focus { outline: 2px solid var(--rojo); outline-offset: 1px; border-color: transparent; }
.formulario .ancho { grid-column: 1 / -1; }
.formulario .aviso { margin: 0; font-size: .85rem; color: var(--pizarra); }
.formulario button { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.trampa { position: absolute; left: -9999px; }
.contacto .formulario :focus-visible { outline-color: var(--rojo); }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .formulario { grid-template-columns: 1fr; } }

/* Selector de idioma: dos opciones, la activa resaltada */
header .lado { display: flex; align-items: center; gap: 1rem; }
.idiomas { display: inline-flex; padding: 3px; border: 1px solid #3A3D42; border-radius: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.idiomas > * { padding: .35rem .6rem; border-radius: 5px; text-decoration: none; line-height: 1; }
.idiomas span { background: #fff; color: var(--basalto); }
.idiomas a { color: #A8A29E; transition: color .15s; }
.idiomas a:hover { color: #fff; }
header .idiomas:last-child { margin-left: auto; }
@media (max-width: 600px) { header { gap: .75rem; } header .lado { gap: .6rem; } header .boton { white-space: nowrap; padding-inline: .9rem; } }
@media (max-width: 340px) { .marca { font-size: 1.3rem; } .idiomas > * { padding-inline: .45rem; } }

/* WhatsApp flotante: siempre a la mano, abajo a la derecha */
.wa-flotante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 9; display: flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem .7rem .8rem; border-radius: 99px; background: #1FAF5A; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 .8rem 1.6rem -.6rem rgb(0 0 0 / .45); transition: transform .15s; }
.wa-flotante:hover { transform: translateY(-2px); }
.wa-flotante svg { width: 1.6rem; height: 1.6rem; }
@media (max-width: 600px) { .wa-flotante span { display: none; } .wa-flotante { padding: .8rem; } }

.contacto .otra-via { font-size: 1rem; color: #A8A29E; }
.contacto .otra-via a { color: #fff; font-weight: 600; }
.formulario select { font: inherit; font-weight: 400; font-size: 1rem; padding: .7rem .8rem; border: 1px solid #D6D3D1; border-radius: 8px; background: var(--piedra-clara); color: inherit; width: 100%; }