/* Pymento — estilos. Colores y tipografías: cambiar solo en :root. */
@font-face { font-family: "Funnel Display"; src: url("../fuentes/funnel-display.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("../fuentes/funnel-sans.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fuentes/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --azul: #2B59FF;
  --azul-oscuro: #1E44D6;   /* hover */
  --negro: #0E0E10;
  --negro-2: #1A1A1E;       /* tarjetas sobre negro */
  --crema: #EEEDE8;
  --crema-2: #E2E1DA;       /* tarjetas sobre crema */
  --blanco: #FFFFFF;
  --gris: #6B6B70;          /* texto secundario sobre crema (4,5:1) y sobre blanco (5,3:1) */
  --gris-claro: #A3A3AA;    /* texto secundario sobre negro (7,7:1) y sobre --negro-2 (6,9:1) */
  --radio: 28px;
  --radio-chico: 14px;
  --ancho: 1200px;
  --titulos: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --texto: "Funnel Sans", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; font-family: var(--texto); font-size: 1.0625rem; line-height: 1.55; color: var(--negro); background: var(--crema); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.seccion { padding-block: clamp(4rem, 10vw, 8rem); }
.seccion--negra { background: var(--negro); color: var(--blanco); }
.seccion--crema { background: var(--crema); color: var(--negro); }

.etiqueta-seccion { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: clamp(.75rem, 3.2vw, .8125rem); letter-spacing: .02em;
  padding: .35rem .8rem; border-radius: 999px; background: var(--crema-2); color: var(--negro); }
.seccion--negra .etiqueta-seccion { background: var(--negro-2); color: var(--gris-claro); }
.etiqueta-seccion::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--azul); }

.titulo { font-family: var(--titulos); font-weight: 700; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.02;
  letter-spacing: -.03em; margin: 1.25rem 0 1rem; overflow-wrap: anywhere; text-wrap: balance; }
/* Resaltado: el bloque azul va de la altura de las mayúsculas a debajo de las letras con cola (p, j),
   así no pisa la línea de arriba ni la de abajo. Con text-box se recorta la caja y conserva las esquinas redondeadas;
   sin soporte, el fondo se dibuja como una franja de la misma altura. */
mark { --resaltado-desde: .26em; --resaltado-alto: .98em; color: var(--blanco); padding: 0 .12em; border-radius: .14em;
  background: linear-gradient(var(--azul), var(--azul)) no-repeat 0 var(--resaltado-desde) / 100% var(--resaltado-alto);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@supports (text-box: trim-both cap alphabetic) {
  mark { text-box: trim-both cap alphabetic; padding-block: .06em .24em; --resaltado-desde: 0px; --resaltado-alto: 100%; }
}
.bajada { font-size: clamp(1.0625rem, 2vw, 1.25rem); max-width: 38rem; color: var(--gris); }
.seccion--negra .bajada { color: var(--gris-claro); }

.boton { display: inline-flex; align-items: center; gap: .9rem; padding: .55rem .55rem .55rem 1.4rem; border-radius: 999px;
  font-weight: 600; text-decoration: none; transition: background .2s, transform .2s; }
.boton .icono { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; }
.boton--principal { background: var(--azul); color: var(--blanco); }
.boton--principal .icono { background: var(--blanco); color: var(--azul); }
.boton--principal:hover { background: var(--azul-oscuro); }
.boton--secundario { border: 1.5px solid currentColor; }
.boton--secundario .icono { background: currentColor; }
.boton--secundario .icono svg { color: var(--negro); }
.seccion--crema .boton--secundario .icono svg { color: var(--crema); }
.boton:active { transform: scale(.98); }

.maqueta { position: relative; margin: 0; }
.etiqueta-ejemplo { position: absolute; top: .75rem; right: .75rem; z-index: 2; font-family: var(--mono); font-size: .75rem;
  padding: .25rem .6rem; border-radius: 999px; background: var(--negro); color: var(--blanco); }

/* Botón chico (encabezado) */
.boton--chico { padding: .6rem 1.15rem; min-height: 2.75rem; font-size: .9375rem; gap: .5rem; }

/* Encabezado fijo */
.encabezado { position: fixed; inset: 0 0 auto; z-index: 10; padding-block: .75rem; color: var(--blanco);
  background: rgb(14 14 16 / .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(255 255 255 / .06); }
.encabezado-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.encabezado-logo { display: block; color: var(--blanco); border-radius: 6px; }
.encabezado-logo svg { display: block; width: auto; height: 32px; }

/* Inicio */
.inicio { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding-top: calc(4.5rem + clamp(2rem, 6vw, 4rem));
  background: radial-gradient(60rem 44rem at 100% 100%, rgb(43 89 255 / .25), transparent 70%), var(--negro); }
.inicio::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgb(255 255 255 / .06) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.titulo--grande { font-size: clamp(2.75rem, 9vw, 6.5rem); line-height: 1; margin-block: 1.5rem 1.5rem; }
.titulo .linea { display: block; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 2rem 3rem; }
.inicio .acciones { margin-bottom: 0; }
.inicio .nota-accion { max-width: 36ch; margin: 1rem 0 3rem; font-family: var(--texto); font-size: .9375rem; color: var(--gris-claro); }
@media (max-width: 479.98px) {
  .acciones .boton { width: 100%; justify-content: space-between; padding-left: 1.25rem; font-size: 1rem; }
}
.inicio-temas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none;
  font-family: var(--mono); font-size: .875rem; color: var(--gris-claro); }
.inicio-temas li { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .4rem;
  border: 1px solid rgb(255 255 255 / .12); border-radius: 999px; }
.inicio-temas span { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding-inline: .3rem; border-radius: 999px;
  background: var(--azul); color: var(--blanco); font-size: 13px; line-height: 1; }

/* Entrada del título: líneas escalonadas y el resaltado se pinta de izquierda a derecha */
.inicio .titulo .linea { animation: entrar-linea .8s cubic-bezier(.2, .7, .2, 1) both; }
.inicio .titulo .linea:nth-child(2) { animation-delay: .1s; }
.inicio .titulo .linea:nth-child(3) { animation-delay: .2s; }
.inicio mark { animation: pintar-resaltado .7s cubic-bezier(.65, 0, .35, 1) .45s both; }
@keyframes entrar-linea { from { opacity: 0; transform: translateY(.35em); } }
@keyframes pintar-resaltado { from { background-size: 0% var(--resaltado-alto); } }

/* Botón flotante de WhatsApp: solo en celular. Con JS aparece al salir de #inicio; sin JS se ve siempre. */
.wa-flotante { display: none; }
@media (max-width: 767.98px) {
  .wa-flotante { position: fixed; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 9; display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 50%; background: var(--azul); color: var(--blanco);
    box-shadow: 0 10px 24px -6px rgb(14 14 16 / .45), 0 2px 6px rgb(14 14 16 / .2);
    transition: opacity .25s ease, transform .25s ease, visibility 0s; }
  .wa-flotante:hover { background: var(--azul-oscuro); }
  .js .wa-flotante:not(.mostrar) { opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }
}

/* Dos columnas: texto y maqueta (una columna en el celular) */
.dos-columnas { display: grid; gap: 3rem; }
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }
}

/* Lista con punto azul */
.lista-puntos { margin: 2rem 0 0; padding: 0; list-style: none; max-width: 38rem; }
.lista-puntos li { display: flex; gap: .85rem; margin-block: .6rem; }
.lista-puntos li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: calc(.775em - 4px); border-radius: 50%; background: var(--azul); }

/* Celular genérico: marco (.celular) + barra superior (.celular-barra). El contenido va adentro y es propio de cada sección. */
.celular { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 320px; aspect-ratio: 9 / 17; margin-inline: auto;
  border: 10px solid var(--negro); border-radius: 40px; overflow: hidden;
  background: linear-gradient(var(--negro) 0 40px, transparent 0), radial-gradient(circle, rgb(14 14 16 / .07) 1px, transparent 1.5px) 0 0 / 16px 16px, #E9E4DC;
  box-shadow: 0 30px 60px -24px rgb(14 14 16 / .45), 0 0 0 1px rgb(14 14 16 / .08); }
.celular::before { content: ""; position: absolute; top: 8px; left: 50%; z-index: 1; width: 76px; height: 20px; border-radius: 999px;
  background: #000; transform: translateX(-50%); }
.celular-barra { flex: none; padding: 2.4rem 1.1rem .85rem; background: var(--negro); color: var(--blanco); font-size: 14px; line-height: 1.3; font-weight: 600; }

/* (01) El problema: maqueta del celular dentro de una tarjeta */
.maqueta-celular { width: 100%; max-width: 30rem; margin-inline: auto; padding: 3.5rem clamp(1rem, 5vw, 2.5rem) clamp(1.5rem, 5vw, 2.5rem);
  border-radius: var(--radio); background: var(--crema-2); }
.burbujas { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .55rem;
  margin: 0; padding: 1rem .9rem 1.25rem; list-style: none; }
.burbujas li { max-width: 85%; padding: .55rem .85rem; border-radius: 16px 16px 16px 4px; background: var(--blanco); color: var(--negro);
  font-size: 15px; line-height: 1.35; box-shadow: 0 1px 1px rgb(14 14 16 / .08), 0 4px 12px -6px rgb(14 14 16 / .18); }
.js .maqueta.visible .burbujas li { animation: entrar .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 450ms); }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } }

/* (02) Qué hacemos */
.seccion--sin-arriba { padding-top: 0; scroll-margin-top: 1.5rem; } /* sin relleno arriba: el ancla deja aire bajo el encabezado */

/* Tarjeta de servicio: texto + maqueta (una columna en el celular). La reutilizan WhatsApp y Web. */
.servicio { display: grid; gap: 2.5rem; margin-top: 3rem; padding: clamp(1.25rem, 4vw, 3rem); border-radius: var(--radio); background: var(--blanco); }
@media (min-width: 900px) {
  .servicio { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
}
.servicio-numero { font-family: var(--mono); font-size: .875rem; color: var(--azul); }
.servicio h3 { font-family: var(--titulos); font-weight: 700; font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.05; letter-spacing: -.025em;
  margin: .75rem 0 1rem; text-wrap: balance; }
.servicio-texto > p { margin: 0; color: var(--gris); max-width: 32rem; }
.servicio h4 { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--crema-2); font-family: var(--mono); font-weight: 400;
  font-size: .8125rem; letter-spacing: .02em; color: var(--gris); }

/* Lista "Qué incluye" con tilde azul */
.incluye { margin: .5rem 0 0; padding: 0; list-style: none; }
.incluye li { padding: .55rem 0 .55rem 2.1rem; line-height: 1.45;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E6ECFF'/%3E%3Cpath d='M7 12.4l3.2 3.1L17 8.7' fill='none' stroke='%232B59FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat 0 .6rem / 1.375rem 1.375rem; }
.incluye li + li { border-top: 1px dashed var(--crema-2); }

/* Ficha estilo Google Maps (componente genérico; la comparación antes/después la reutiliza) */
.ficha { --verde: #188038; position: relative; overflow: hidden; background: var(--blanco); border: 1px solid var(--crema-2); border-radius: 20px;
  font-size: 13px; line-height: 1.4; color: var(--negro); text-align: left; }
.ficha-fotos { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 58px 58px; gap: 3px; }
.ficha-fotos span { background-color: var(--crema-2); }
.ficha-fotos span:nth-child(1) { grid-row: span 2;
  background:
    radial-gradient(circle at 34% 44%, #F5F7FF 0 17px, #8FA5F3 17.5px 19.5px, transparent 20px),
    radial-gradient(circle at 74% 30%, #FFF7DE 0 5px, rgb(255 247 222 / .55) 5.5px 13px, transparent 13.5px),
    linear-gradient(#8095E6, #8095E6) no-repeat 74% 0 / 1.5px 26%,
    linear-gradient(transparent 72%, #6E86E4 72% 76%, #9AACF0 76%),
    linear-gradient(170deg, #E3E9FF, #C2CFFF); }
.ficha-fotos span:nth-child(2) {
  background:
    linear-gradient(#A8957A, #A8957A) no-repeat 26% 74% / 8px 24px,
    linear-gradient(#C9B596, #C9B596) no-repeat 42% 74% / 10px 18px,
    linear-gradient(#8F7C62, #8F7C62) no-repeat 58% 74% / 7px 28px,
    linear-gradient(transparent 80%, #D2C5AE 80% 84%, transparent 84%),
    linear-gradient(170deg, #F4EFE6, #E2D8C6); }
.ficha-fotos span:nth-child(3) {
  background:
    radial-gradient(ellipse 15px 19px at 50% 42%, #A9BFA2 96%, transparent),
    linear-gradient(#CDB998, #CDB998) no-repeat 50% 80% / 16px 14px,
    linear-gradient(200deg, #EDF0FA, #D2DAF4); }
.ficha-cuerpo { display: flex; flex-wrap: wrap; align-items: center; column-gap: .4rem; padding: .9rem .95rem 1rem; }
.ficha-nombre { flex-basis: 100%; font-family: var(--titulos); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.ficha-estrellas { color: #F4B400; font-size: 12px; letter-spacing: .06em; }
.ficha-rubro { color: var(--gris); }
.ficha-rubro::before { content: "·"; margin-right: .4rem; }
.ficha-datos { flex-basis: 100%; margin: .7rem 0 0; padding: .65rem 0 0; list-style: none; border-top: 1px solid #EFEEE9; color: #3C3C42; }
.ficha-datos li { display: flex; align-items: center; padding-block: .15rem; }
.ficha-datos li::before { content: ""; flex: none; width: 15px; height: 15px; margin-right: .55rem; background: no-repeat center / contain; }
.ficha-datos .dato-horario::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B70' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ficha-datos .dato-direccion::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B70' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.ficha-datos .dato-descripcion::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B70' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6v.1' stroke-width='2.6'/%3E%3C/svg%3E"); }
/* Dato que falta (ficha descuidada): texto e ícono apagados */
.ficha-datos .dato--falta { color: var(--gris); font-style: italic; } /* 5,3:1 sobre blanco */
.ficha-datos .dato--falta::before { opacity: .55; }
.ficha-datos b { margin-right: .3em; color: var(--verde); font-weight: 600; }
.ficha-botones { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.ficha-botones span { flex: 1 1 auto; padding: .4rem .55rem; border: 1px solid var(--azul); border-radius: 999px; color: var(--azul);
  font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap; }
.ficha-botones span:first-child { background: var(--azul); color: var(--blanco); }
.ficha-resena { flex-basis: 100%; display: flex; flex-direction: column; gap: .4rem; margin-top: .9rem; padding: .75rem .8rem .85rem;
  border-radius: 12px; background: #F6F5F1; }
.ficha-resena-titulo { display: flex; align-items: center; gap: .5rem; font-size: 12px; font-weight: 600; }
.ficha-resena-titulo .estrellas { color: #F4B400; letter-spacing: .04em; }
.ficha-resena-titulo::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(140deg, #C9D3F5, #8FA6F5); }
.ficha .linea { display: block; height: 7px; border-radius: 4px; background: var(--crema-2); }
.ficha .linea.corta { width: 62%; }
.ficha-respuesta { display: flex; flex-direction: column; gap: .4rem; margin-top: .35rem; padding-left: .65rem; border-left: 2px solid var(--azul);
  font-size: 11.5px; font-weight: 600; color: var(--azul); }
.ficha-respuesta::after { content: ""; display: block; width: 80%; height: 7px; border-radius: 4px; background: var(--crema-2); }

/* Maqueta de Maps: la ficha sobre un mapa, con el cartel de reseñas encima */
.maqueta-maps { --ancho-ficha: 22rem; overflow: hidden; padding: 6.5rem .75rem 6.25rem; border-radius: 20px;
  background:
    linear-gradient(118deg, transparent calc(50% - 5px), #FCFBF8 calc(50% - 5px) calc(50% + 5px), transparent calc(50% + 5px)),
    linear-gradient(transparent 0 7.5rem, #FCFBF8 7.5rem calc(7.5rem + 9px), transparent 0),
    repeating-linear-gradient(0deg, transparent 0 70px, #F8F7F3 70px 74px),
    repeating-linear-gradient(0deg, transparent 0 125px, #F8F7F3 125px 129px),
    repeating-linear-gradient(90deg, transparent 0 88px, #F8F7F3 88px 92px),
    repeating-linear-gradient(90deg, transparent 0 147px, #F8F7F3 147px 151px),
    radial-gradient(80px 50px at 16% 18%, #D5E3C8 97%, transparent),
    radial-gradient(60px 40px at 92% 88%, #D5E3C8 97%, transparent),
    #E9E7E0; }
.maqueta-maps::before { content: ""; position: absolute; top: 2.6rem; left: 54%; width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle, var(--blanco) 0 5px, transparent 5.5px), var(--azul); transform: rotate(-45deg);
  box-shadow: -2px 3px 8px rgb(14 14 16 / .25); }
.maqueta-maps::after { content: ""; position: absolute; top: calc(2.6rem + 34px); left: calc(54% - 8px); width: 30px; height: 9px; border-radius: 50%;
  background: rgb(14 14 16 / .16); }
.maqueta-maps .ficha { position: relative; z-index: 1; max-width: var(--ancho-ficha); margin-inline: auto;
  box-shadow: 0 1px 2px rgb(14 14 16 / .06), 0 24px 48px -20px rgb(14 14 16 / .35); }
@media (min-width: 480px) {
  .maqueta-maps { padding: 6.5rem 1.5rem 6rem; }
  .maqueta-maps .ficha { margin-right: 0; }
}

/* Cartel de reseñas con QR (decorativo; no lleva a ningún lado) */
.cartel-qr { position: absolute; left: 1rem; bottom: 1.25rem; z-index: 2; display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem .6rem .6rem;
  border-radius: var(--radio-chico); background: var(--negro); color: var(--blanco); font-size: 11.5px; line-height: 1.3; font-weight: 600;
  transform: rotate(-6deg); box-shadow: 0 18px 30px -12px rgb(14 14 16 / .5); }
.qr { --m: 3px; flex: none; width: calc(var(--m) * 21); height: calc(var(--m) * 21); border: 5px solid var(--blanco); border-radius: 4px; box-sizing: content-box;
  background:
    /* tres esquinas de posición (negro 3 · blanco 5 · negro 7 · margen blanco 8) */
    linear-gradient(#000 0 0) calc(var(--m) * 2) calc(var(--m) * 2) / calc(var(--m) * 3) calc(var(--m) * 3),
    linear-gradient(#000 0 0) calc(100% - var(--m) * 2) calc(var(--m) * 2) / calc(var(--m) * 3) calc(var(--m) * 3),
    linear-gradient(#000 0 0) calc(var(--m) * 2) calc(100% - var(--m) * 2) / calc(var(--m) * 3) calc(var(--m) * 3),
    linear-gradient(#fff 0 0) var(--m) var(--m) / calc(var(--m) * 5) calc(var(--m) * 5),
    linear-gradient(#fff 0 0) calc(100% - var(--m)) var(--m) / calc(var(--m) * 5) calc(var(--m) * 5),
    linear-gradient(#fff 0 0) var(--m) calc(100% - var(--m)) / calc(var(--m) * 5) calc(var(--m) * 5),
    linear-gradient(#000 0 0) 0 0 / calc(var(--m) * 7) calc(var(--m) * 7),
    linear-gradient(#000 0 0) 100% 0 / calc(var(--m) * 7) calc(var(--m) * 7),
    linear-gradient(#000 0 0) 0 100% / calc(var(--m) * 7) calc(var(--m) * 7),
    linear-gradient(#fff 0 0) 0 0 / calc(var(--m) * 8) calc(var(--m) * 8),
    linear-gradient(#fff 0 0) 100% 0 / calc(var(--m) * 8) calc(var(--m) * 8),
    linear-gradient(#fff 0 0) 0 100% / calc(var(--m) * 8) calc(var(--m) * 8),
    /* módulos: dos damas de distinto paso superpuestas, para que no se vean regulares */
    repeating-conic-gradient(#000 0 25%, transparent 0 50%) var(--m) 0 / calc(var(--m) * 6) calc(var(--m) * 4),
    repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / calc(var(--m) * 2) calc(var(--m) * 6);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat; }

/* Animación de la maqueta de Maps (una vez, al entrar en pantalla). El estado final es el natural. */
.js .maqueta-maps.visible .ficha-fotos span { animation: foto .6s cubic-bezier(.2, .7, .2, 1) both; }
.js .maqueta-maps.visible .ficha-fotos span:nth-child(2) { animation-delay: .3s; }
.js .maqueta-maps.visible .ficha-fotos span:nth-child(3) { animation-delay: .6s; }
.js .maqueta-maps.visible .ficha-datos b { animation: encender .5s ease .9s both; }
.js .maqueta-maps.visible .ficha-resena { animation: entrar .6s cubic-bezier(.2, .7, .2, 1) 1.4s both; }
.js .maqueta-maps.visible .ficha-respuesta { animation: entrar .5s cubic-bezier(.2, .7, .2, 1) 2.2s both; }
.js .maqueta-maps.visible .cartel-qr { animation: cartel .7s cubic-bezier(.2, .7, .2, 1) 2.7s both; }
@keyframes foto { from { opacity: 0; transform: scale(.94); } }
@keyframes encender { from { color: var(--gris-claro); } }
@keyframes cartel { from { opacity: 0; transform: translateY(16px) rotate(0deg); } }

/* Tarjeta invertida: desde 900 px la maqueta va a la izquierda */
@media (min-width: 900px) {
  .servicio--invertido > .maqueta { order: -1; }
}

/* Maqueta de WhatsApp Business: el WhatsApp del comercio con una consulta nueva, la respuesta rápida y la tarjeta del atajo al costado.
   Todas las reglas del chat van bajo .maqueta-whatsapp; .celular (genérico) no se toca. */
.maqueta-whatsapp { --wa-verde: #00A884; --wa-saliente: #D9FDD3; --wa-tilde: #53BDEB;
  --wa-hora: #54656F;        /* texto chico gris: 5,6:1 sobre la burbuja verde, 6:1 sobre blanco */
  --wa-campo: #667781;       /* "Mensaje" e íconos del campo: 4,8:1 sobre blanco */
  --ico-volver: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
  --ico-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='13' height='12' rx='2.5'/%3E%3Cpath d='M15.5 10.5l6-3.5v10l-6-3.5z'/%3E%3C/svg%3E");
  --ico-llamar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.5h3l1.8 4.6-2.3 1.6a11 11 0 0 0 6.3 6.3l1.6-2.3 4.6 1.8v3a2 2 0 0 1-2.1 2A17 17 0 0 1 3.5 5.6a2 2 0 0 1 2-2.1z'/%3E%3C/svg%3E");
  --ico-tilde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.8l3 3L10.8 2M7.6 8.1l.7.7L15.1 2'/%3E%3C/svg%3E");
  --ico-etiqueta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M2 4a2 2 0 0 1 2-2h7.2a2 2 0 0 1 1.4.6l9 9a2 2 0 0 1 0 2.8l-7.2 7.2a2 2 0 0 1-2.8 0l-9-9A2 2 0 0 1 2 11.2zm5.5 1.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E");
  --ico-emoji: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14.2a4.5 4.5 0 0 0 7 0'/%3E%3Cpath d='M9 9.5v.5M15 9.5v.5' stroke-width='2.4'/%3E%3C/svg%3E");
  --ico-camara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 8.5A1.5 1.5 0 0 1 4.5 7h2.8l1.6-2.2h6.2L16.7 7h2.8A1.5 1.5 0 0 1 21 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5z'/%3E%3Ccircle cx='12' cy='12.8' r='3.4'/%3E%3C/svg%3E");
  --ico-microfono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11.5' rx='3' fill='black'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3'/%3E%3C/svg%3E");
  --ico-enviar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3.6 20.3l17-7.4a1 1 0 0 0 0-1.8l-17-7.4a.8.8 0 0 0-1.1.9L4.4 11l8.6 1-8.6 1-1.9 6.4a.8.8 0 0 0 1.1.9z'/%3E%3C/svg%3E");
  overflow: hidden; padding: 3.5rem clamp(.75rem, 4vw, 2.5rem) 2.25rem; border-radius: 20px;
  background: radial-gradient(22rem 18rem at 50% 58%, rgb(43 89 255 / .14), transparent 70%), var(--crema); }
.maqueta-whatsapp .celular { position: relative; z-index: 1; max-width: 300px; container-type: inline-size; }

/* Íconos: un color (currentColor) recortado con la máscara que indica --ico */
.maqueta-whatsapp :is(.wa-volver, .wa-iconos span, .chat-boton span), .maqueta-whatsapp :is(.chat-campo, .etiquetas span)::before,
.maqueta-whatsapp .chat-campo::after, .maqueta-whatsapp :is(.msj--negocio, .msj--catalogo) .msj-hora::after {
  display: block; flex: none; background-color: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; }

/* Barra: la conversación entrante, vista desde el WhatsApp del comercio */
.maqueta-whatsapp .celular-barra { display: flex; align-items: center; gap: .5rem; padding: 2.35rem .75rem .7rem .55rem; }
.maqueta-whatsapp .wa-volver { --ico: var(--ico-volver); width: 18px; height: 18px; }
.maqueta-whatsapp .wa-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #F5F7FF 0 6px, transparent 6.5px), radial-gradient(circle at 50% 100%, #F5F7FF 0 11px, transparent 11.5px), #8696A0; }
.maqueta-whatsapp .wa-contacto { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.maqueta-whatsapp .wa-contacto small { font-size: 11.5px; font-weight: 400; color: var(--gris-claro); }
.maqueta-whatsapp .wa-iconos { display: flex; gap: .85rem; }
.maqueta-whatsapp .wa-iconos span { --ico: var(--ico-llamar); width: 19px; height: 19px; }
.maqueta-whatsapp .wa-iconos span:first-child { --ico: var(--ico-video); }
@container (max-width: 265px) { .maqueta-whatsapp .wa-iconos span:first-child { display: none; } } /* celular angosto: sin la cámara */

/* Chat: mensajes abajo (como en la app) y la caja de escritura al pie */
.maqueta-whatsapp .chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; padding: .75rem 0 .6rem;
  background: radial-gradient(circle, rgb(14 14 16 / .07) 1px, transparent 1.5px) 0 0 / 16px 16px, #E9E4DC; }
/* el relleno lateral deja ver la colita de las burbujas */
.maqueta-whatsapp .chat-mensajes { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; padding-inline: .65rem; }
.maqueta-whatsapp .chat-fecha { align-self: center; margin-bottom: .25rem; padding: .2rem .6rem; border-radius: 8px; background: rgb(255 255 255 / .9);
  font-size: 11.5px; color: var(--wa-hora); box-shadow: 0 1px .5px rgb(11 20 26 / .13); }

/* Burbujas: cliente blanca a la izquierda, comercio verde a la derecha */
.maqueta-whatsapp .msj { position: relative; margin: 0; max-width: 84%; padding: .4rem .55rem .35rem .6rem; border-radius: 10px; font-size: 14px; line-height: 1.35;
  color: #111B21; box-shadow: 0 1px .5px rgb(11 20 26 / .13); }
.maqueta-whatsapp .msj--cliente { align-self: flex-start; border-top-left-radius: 0; background: var(--blanco); }
.maqueta-whatsapp :is(.msj--negocio, .msj--catalogo) { align-self: flex-end; background: var(--wa-saliente); }
.maqueta-whatsapp .msj--negocio { border-top-right-radius: 0; }
.maqueta-whatsapp :is(.msj--cliente, .msj--negocio)::before { content: ""; position: absolute; top: 0; width: 8px; height: 12px; background: inherit; }
.maqueta-whatsapp .msj--cliente::before { left: -7px; clip-path: polygon(0 0, 100% 0, 100% 100%); border-top-left-radius: 2px; }
.maqueta-whatsapp .msj--negocio::before { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); border-top-right-radius: 2px; }
.maqueta-whatsapp .msj--negocio + .msj--catalogo { margin-top: -.3rem; }
.maqueta-whatsapp .msj-hora { float: right; display: inline-flex; align-items: center; gap: 3px; margin: .45rem 0 -.25rem .6rem; font-size: 11px; line-height: 1; color: var(--wa-hora); }
.maqueta-whatsapp :is(.msj--negocio, .msj--catalogo) .msj-hora::after { --ico: var(--ico-tilde); content: ""; width: 16px; height: 11px; color: var(--wa-tilde); }

/* Catálogo (solo nombres, sin precios) */
.maqueta-whatsapp .msj--catalogo { width: 84%; padding: .25rem .25rem .3rem; }
.maqueta-whatsapp .cat-ficha { display: flex; align-items: center; gap: .6rem; padding: .3rem; border-radius: 7px; background: rgb(11 20 26 / .05); }
/* Foto del catálogo: un pote y un frasco con dosificador sobre un estante */
.maqueta-whatsapp .cat-foto { flex: none; width: 48px; height: 48px; border-radius: 6px;
  background:
    linear-gradient(#5E79E0, #5E79E0) no-repeat 9px 18px / 14px 5px,
    linear-gradient(#F7F8FF, #F7F8FF) no-repeat 8px 23px / 16px 13px,
    linear-gradient(#B79F7C, #B79F7C) no-repeat 33px 9px / 3px 6px,
    linear-gradient(#B79F7C, #B79F7C) no-repeat 33px 9px / 6px 2px,
    linear-gradient(#D9C6A5, #D9C6A5) no-repeat 29px 15px / 9px 21px,
    linear-gradient(transparent 36px, #93A8F2 36px 38px, #A9BAF6 38px),
    linear-gradient(160deg, #DCE4FF, #B4C4FA); }
.maqueta-whatsapp .cat-texto { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.3; }
.maqueta-whatsapp .cat-texto b { font-weight: 600; }
.maqueta-whatsapp .cat-texto span { color: var(--wa-hora); font-size: 12.5px; }
.maqueta-whatsapp .cat-ver { display: block; margin-top: .3rem; padding: .4rem .3rem .1rem; border-top: 1px solid rgb(11 20 26 / .08); text-align: center;
  font-size: 13.5px; font-weight: 600; color: #007A64; } /* verde de WhatsApp apenas más oscuro: 4,8:1 sobre la burbuja */
.maqueta-whatsapp .cat-ver .msj-hora { margin: .15rem 0 0; font-weight: 400; }

/* Etiquetas del chat */
.maqueta-whatsapp .etiquetas { align-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: .15rem; }
.maqueta-whatsapp .etiquetas span { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem .2rem .45rem; border-radius: 999px;
  background: #E6ECFF; color: var(--azul-oscuro); font-size: 11.5px; font-weight: 600; line-height: 1.3; box-shadow: 0 1px .5px rgb(11 20 26 / .1); } /* 6,2:1 */
.maqueta-whatsapp .etiquetas span::before { --ico: var(--ico-etiqueta); content: ""; width: 11px; height: 11px; }

/* Caja de escritura: en reposo muestra "Mensaje" y el micrófono (estado final, sin JS y con movimiento reducido).
   La animación escribe "/precios", cambia el micrófono por el botón de enviar y vuelve a vaciarse cuando sale la respuesta. */
.maqueta-whatsapp .chat-escribir { flex: none; display: flex; align-items: center; gap: .35rem; padding-inline: .5rem; }
.maqueta-whatsapp .chat-campo { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; height: 40px; padding: 0 .7rem;
  border-radius: 999px; background: var(--blanco); color: var(--wa-campo); font-size: 14px; box-shadow: 0 1px .5px rgb(11 20 26 / .13); }
.maqueta-whatsapp .chat-campo::before, .maqueta-whatsapp .chat-campo::after { content: ""; width: 20px; height: 20px; }
.maqueta-whatsapp .chat-campo::before { --ico: var(--ico-emoji); order: -1; }
.maqueta-whatsapp .chat-campo::after { --ico: var(--ico-camara); margin-left: auto; }
.maqueta-whatsapp .msj-escribiendo { position: absolute; left: calc(.7rem + 20px + .45rem); top: 50%; margin: 0; transform: translateY(-50%); opacity: 0;
  font-family: var(--mono); font-size: 13.5px; color: #111B21; white-space: nowrap; }
.maqueta-whatsapp .msj-escribiendo::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -.2em; background: var(--wa-verde); }
.maqueta-whatsapp .chat-boton { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--wa-verde); color: var(--blanco); }
.maqueta-whatsapp .chat-boton span { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; }
.maqueta-whatsapp .ico-microfono { --ico: var(--ico-microfono); }
.maqueta-whatsapp .ico-enviar { --ico: var(--ico-enviar); opacity: 0; }

/* Respuesta rápida al costado del celular */
.maqueta-whatsapp .atajo { position: relative; z-index: 2; display: flex; align-items: center; gap: .65rem; width: max-content; margin: -.4rem auto 0; padding: .55rem .85rem .55rem .55rem;
  border-radius: var(--radio-chico); background: var(--negro); color: var(--blanco); font-size: 12px; line-height: 1.3; font-weight: 600;
  transform: rotate(-4deg); box-shadow: 0 18px 30px -12px rgb(14 14 16 / .5); }
.maqueta-whatsapp .atajo-comando { padding: .3rem .55rem; border-radius: 8px; background: var(--azul); font-family: var(--mono); font-weight: 400; font-size: 12.5px; }
@media (min-width: 600px) {
  /* Anclada al borde izquierdo del celular (hasta 300 px de ancho), sobre el espacio libre arriba del chat.
     max() la mantiene dentro de la tarjeta cuando el celular queda un poco más angosto (p. ej. a 900 px). */
  .maqueta-whatsapp .atajo { position: absolute; top: calc(3.5rem + 122px); left: max(.5rem, calc(50% - 150px - 2.25rem)); margin: 0; }
}

/* Animación del chat (una vez, al entrar en pantalla), escalonada con --i cada 700 ms. El estado final es el natural. */
.js .maqueta-whatsapp.visible :is(.msj, .etiquetas) { animation: entrar .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 700ms); }
.js .maqueta-whatsapp.visible .msj--negocio .msj-hora::after { animation: leido .3s ease 2.2s both; }
.js .maqueta-whatsapp.visible .msj--catalogo .msj-hora::after { animation: leido .3s ease 2.9s both; }
.js .maqueta-whatsapp.visible .msj-escribiendo { animation: escribir 700ms linear calc(var(--i) * 700ms); }
.js .maqueta-whatsapp.visible :is(.chat-texto-vacio, .ico-microfono) { animation: ocultar 700ms linear 700ms; }
.js .maqueta-whatsapp.visible .ico-enviar { animation: mostrar 700ms linear 700ms; }
.js .maqueta-whatsapp.visible .atajo { animation: cartel .6s cubic-bezier(.2, .7, .2, 1) 600ms both; }
@keyframes escribir {
  0% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(8, end); }
  55% { opacity: 1; clip-path: inset(0 0 0 0); }
  88% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes ocultar { 0%, 99% { opacity: 0; } }
@keyframes mostrar { 0%, 99% { opacity: 1; } }
@keyframes leido { from { background-color: #8696A0; } }

/* Ficha sin fotos (antes): el recuadro gris que muestra Maps cuando nadie cargó imágenes */
.ficha-fotos.ficha-fotos--vacias { grid-template-columns: 1fr; }
.ficha-fotos.ficha-fotos--vacias span { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgb(14 14 16 / .025) 10px 20px), #F1F0EC; color: var(--gris); font-size: 12px; }
.ficha-fotos--vacias span::before { content: ""; width: 28px; height: 28px; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M3.5 17l5-4.5 4 3.5 3-2.5 5 4'/%3E%3Cpath d='M2.5 2.5l19 19'/%3E%3C/svg%3E") no-repeat center / contain; }
.ficha-fotos--vacias span::after { content: "Sin fotos"; }

/* Maqueta de la web: la página de un comercio en el celular, con la barra del navegador arriba y el botón de WhatsApp siempre a mano.
   Todo cuelga de .maqueta-web; .celular (genérico) no se toca. */
.maqueta-web { --web-verde: #008069; /* blanco encima: 5:1 */
  --ico-candado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Crect x='4.5' y='10.5' width='15' height='11' rx='2.5' fill='black'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --ico-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.2-4.5A9 9 0 1 1 7.5 19.8Z'/%3E%3Cpath fill='black' stroke='none' d='M8.6 7.6c.3-.3.8-.3 1 .1l.9 1.6c.2.3.1.7-.1.9l-.6.6c.6 1.4 1.6 2.4 3 3l.6-.6c.2-.2.6-.3.9-.1l1.6.9c.4.2.4.7.1 1l-.7.8c-.6.6-1.5.8-2.3.5-2.6-1-4.6-3-5.6-5.6-.3-.8-.1-1.7.5-2.3z'/%3E%3C/svg%3E");
  overflow: hidden; padding: 3.5rem clamp(.75rem, 4vw, 2.5rem) 2.25rem; border-radius: 20px;
  background: radial-gradient(22rem 18rem at 50% 58%, rgb(43 89 255 / .14), transparent 70%), var(--crema); }
.maqueta-web .celular { max-width: 300px; padding-top: 34px; background: var(--negro); }
.maqueta-web .web-pantalla { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #FBFAF7; color: var(--negro); }
.maqueta-web :is(.web-navegador span, .web-boton-wa)::before { content: ""; flex: none; background-color: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; }

/* Barra del navegador: candado + dominio del comercio */
.maqueta-web .web-navegador { position: absolute; inset: 0 0 auto; z-index: 2; height: 42px; padding: 4px 10px 8px; background: var(--negro); }
.maqueta-web .web-navegador span { display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; border-radius: 999px; background: #2A2A30;
  color: #D4D4DA; font-size: 12px; white-space: nowrap; overflow: hidden; }
.maqueta-web .web-navegador span::before { --ico: var(--ico-candado); width: 11px; height: 11px; }

/* Contenido que se desplaza (deja lugar arriba para la barra y abajo para el botón) */
.maqueta-web .web-desliza { position: absolute; top: 0; left: 0; right: 0; padding-top: 42px; }
/* Pie del sitio (oscuro, con marca y redes): queda debajo del botón fijo */
.maqueta-web .web-desliza::after { content: ""; display: block; height: 118px; margin-top: 1.2rem; background:
    radial-gradient(circle, #3A3A42 0 9px, transparent 9.5px) no-repeat 1rem 36px / 20px 20px,
    radial-gradient(circle, #3A3A42 0 9px, transparent 9.5px) no-repeat calc(1rem + 28px) 36px / 20px 20px,
    radial-gradient(circle, #3A3A42 0 9px, transparent 9.5px) no-repeat calc(1rem + 56px) 36px / 20px 20px,
    linear-gradient(#56565E, #56565E) no-repeat 1rem 16px / 45% 8px,
    var(--negro); }

/* Portada: foto del local (dibujada) con el nombre encima */
.maqueta-web .web-portada { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; min-height: 248px; padding: 3.25rem 1rem 1.25rem;
  color: var(--blanco);
  background:
    linear-gradient(to top, rgb(14 14 16 / .72), rgb(14 14 16 / .1) 58%, transparent),
    /* espejo redondo */
    radial-gradient(circle at 30% 30%, #F7F8FF 0 30px, #93A7F1 30.5px 33px, transparent 33.5px),
    /* lámpara colgante */
    radial-gradient(circle at 80% 22%, #FFF6D8 0 7px, rgb(255 246 216 / .5) 7.5px 18px, transparent 18.5px),
    linear-gradient(#7F93E2, #7F93E2) no-repeat 80% 0 / 1.5px 20%,
    /* planta en maceta */
    radial-gradient(ellipse 14px 22px at 82% 37%, #8FB08A 96%, transparent),
    radial-gradient(ellipse 11px 18px at 74% 41%, #A6C2A0 96%, transparent),
    linear-gradient(#D7C3A2, #D7C3A2) no-repeat 79% 54% / 26px 22px,
    /* mesada */
    linear-gradient(transparent 58%, #6E86E4 58% 60.5%, #98AAF0 60.5%),
    linear-gradient(170deg, #E6EBFF, #BFCCFB); }
/* Menú del sitio: marca a la izquierda, hamburguesa a la derecha */
.maqueta-web .web-portada::before { content: ""; position: absolute; top: .9rem; left: 1rem; right: 1rem; height: 16px;
  background:
    linear-gradient(var(--blanco), var(--blanco)) no-repeat 100% 2px / 18px 2px,
    linear-gradient(var(--blanco), var(--blanco)) no-repeat 100% 7px / 18px 2px,
    linear-gradient(var(--blanco), var(--blanco)) no-repeat 100% 12px / 18px 2px,
    radial-gradient(circle at 8px 8px, var(--blanco) 0 7px, transparent 7.5px); }
.maqueta-web .web-portada b { font-family: var(--titulos); font-size: 27px; font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
.maqueta-web .web-portada span { font-size: 13px; line-height: 1.35; opacity: .9; }

/* Bloques con título: sobre nosotros, tratamientos, ubicación */
.maqueta-web :is(.web-bloque, .web-grilla)::before { margin-bottom: .1rem; font-family: var(--titulos); font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--negro); }
.maqueta-web .web-bloque { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1rem .4rem; }
.maqueta-web .web-bloque::before { content: "Sobre nosotros"; }
.maqueta-web .web-bloque .linea { display: block; height: 7px; border-radius: 4px; background: var(--crema-2); }
.maqueta-web .web-bloque .linea.corta { width: 70%; }

/* Grilla de tratamientos con foto y nombre (sin precios) */
.maqueta-web .web-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: 1.1rem 1rem .4rem; }
.maqueta-web .web-grilla::before { content: "Tratamientos"; grid-column: 1 / -1; }
.maqueta-web .web-grilla span { display: flex; flex-direction: column; gap: .4rem; padding: 5px 5px 8px; border-radius: 12px; background: var(--blanco);
  font-size: 11.5px; font-weight: 600; line-height: 1.2; box-shadow: 0 1px 2px rgb(14 14 16 / .08); }
.maqueta-web .web-grilla span::before { content: ""; aspect-ratio: 1 / .78; border-radius: 8px; }
.maqueta-web .web-grilla span::after { padding-inline: 3px; }
.maqueta-web .web-grilla span:nth-child(1)::after { content: "Limpieza facial"; }
.maqueta-web .web-grilla span:nth-child(2)::after { content: "Masajes"; }
.maqueta-web .web-grilla span:nth-child(3)::after { content: "Corporales"; }
.maqueta-web .web-grilla span:nth-child(4)::after { content: "Manos y pies"; }
/* fotos: pote de crema, piedras, toallas enrolladas, esmalte */
.maqueta-web .web-grilla span:nth-child(1)::before { background:
    linear-gradient(#5E79E0, #5E79E0) no-repeat 50% 44% / 38% 9%,
    linear-gradient(#F7F8FF, #F7F8FF) no-repeat 50% 70% / 42% 26%,
    linear-gradient(transparent 82%, #93A8F2 82% 86%, #A9BAF6 86%),
    linear-gradient(160deg, #DCE4FF, #B4C4FA); }
.maqueta-web .web-grilla span:nth-child(2)::before { background:
    radial-gradient(ellipse 22% 9% at 50% 44%, #5D6A63 96%, transparent),
    radial-gradient(ellipse 29% 11% at 50% 58%, #47524C 96%, transparent),
    radial-gradient(ellipse 35% 12% at 50% 74%, #3A443F 96%, transparent),
    radial-gradient(ellipse 18% 26% at 82% 40%, #A9C3A3 96%, transparent),
    linear-gradient(170deg, #EEF2EA, #D3DECF); }
.maqueta-web .web-grilla span:nth-child(3)::before { background:
    radial-gradient(circle at 34% 64%, #E2D2BA 0 5%, #F6EEE2 5.5% 10%, #E8DAC4 10.5% 13%, #F6EEE2 13.5% 18%, transparent 18.5%),
    radial-gradient(circle at 66% 64%, #E2D2BA 0 5%, #F6EEE2 5.5% 10%, #E8DAC4 10.5% 13%, #F6EEE2 13.5% 18%, transparent 18.5%),
    radial-gradient(circle at 50% 36%, #E2D2BA 0 5%, #F6EEE2 5.5% 10%, #E8DAC4 10.5% 13%, #F6EEE2 13.5% 18%, transparent 18.5%),
    linear-gradient(170deg, #E9E1D3, #CDBDA2); }
.maqueta-web .web-grilla span:nth-child(4)::before { background:
    linear-gradient(#2E2E34, #2E2E34) no-repeat 50% 22% / 14% 26%,
    linear-gradient(#D9677C, #D9677C) no-repeat 50% 72% / 34% 38%,
    radial-gradient(ellipse 5% 10% at 42% 64%, rgb(255 255 255 / .6) 96%, transparent),
    linear-gradient(170deg, #FBE9EC, #F1CCD3); }

/* Ubicación: título, mapa con el pin, dirección y horario */
.maqueta-web .web-mapa { position: relative; gap: .55rem; padding-top: 1.1rem; font-size: 12.5px; line-height: 1.35; color: #3C3C42; }
.maqueta-web .web-mapa::before { content: "Dónde estamos"; order: -2; }
.maqueta-web .web-mapa::after { content: ""; order: -1; height: 100px; border-radius: 12px;
  background:
    linear-gradient(118deg, transparent calc(50% - 4px), #FCFBF8 calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px)),
    linear-gradient(transparent 0 60%, #FCFBF8 60% calc(60% + 7px), transparent 0),
    repeating-linear-gradient(90deg, transparent 0 46px, #F6F5F0 46px 49px),
    radial-gradient(40px 26px at 18% 24%, #D5E3C8 97%, transparent),
    #E9E7E0; }
.maqueta-web .web-mapa .pin { position: absolute; top: calc(1.1rem + 30px + 30px); left: calc(50% - 11px); z-index: 1; width: 22px; height: 22px; border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle, var(--blanco) 0 4px, transparent 4.5px), var(--azul); transform: rotate(-45deg); box-shadow: -2px 3px 6px rgb(14 14 16 / .25); }

/* Botón fijo de WhatsApp al pie de la pantalla */
.maqueta-web .web-boton-wa { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .45rem;
  height: 44px; border-radius: 999px; background: var(--web-verde); color: var(--blanco); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 22px -8px rgb(0 80 66 / .6), 0 2px 4px rgb(14 14 16 / .15); }
.maqueta-web .web-boton-wa::before { --ico: var(--ico-whatsapp); width: 18px; height: 18px; }

/* Animación de la web (una vez, al entrar en pantalla): la página baja despacio hasta el pie (tratamientos y ubicación a la vista)
   y el botón de WhatsApp late una vez. Sin JS y con movimiento reducido se ve el comienzo de la página.
   top 0 → 100 % junto con translateY 0 → -100 % deja el final de la página justo en el borde inferior, mida lo que mida el celular. */
.js .maqueta-web.visible .web-desliza { animation: web-deslizar 4s ease-in-out .8s both; }
.js .maqueta-web.visible .web-boton-wa { animation: latido .6s ease-in-out 5s; }
@keyframes web-deslizar { to { top: 100%; transform: translateY(-100%); } }
@keyframes latido { 50% { transform: scale(1.06); } }

/* (03) Antes y después: comparador con corte arrastrable */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@property --corte { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.comparador { touch-action: pan-y; position: relative; display: grid; margin-top: 3rem; border-radius: var(--radio); overflow: hidden; background: var(--negro-2);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
/* los dos lados se apilan en la misma celda: la altura la da el más alto (la ficha completa) */
.comparador-lado { position: relative; grid-area: 1 / 1; display: grid; justify-items: center; align-items: start; padding: 3.75rem 1rem 4.75rem;
  background: radial-gradient(circle, rgb(255 255 255 / .06) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--negro-2); }
.comparador-despues { clip-path: inset(0 0 0 var(--corte));
  background: radial-gradient(26rem 20rem at 50% 42%, rgb(43 89 255 / .4), transparent 70%), radial-gradient(circle, rgb(255 255 255 / .06) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--negro-2); }
/* Ficha descuidada, con la misma estructura que la completa para que las filas coincidan a cada lado del corte:
   calificación baja, botones apagados (sin WhatsApp: su lugar queda vacío) y la reseña sin responder */
.ficha-estrellas .estrellas-vacias, .ficha-resena-titulo .estrellas-vacias { color: #C9C8C2; }
.ficha--antes .ficha-botones span { border-color: #C9C8C2; background: none; color: #55555B; }
.ficha--antes .ficha-botones .boton-falta { visibility: hidden; }
.ficha-respuesta--falta { border-left: 2px dashed #C9C8C2; color: var(--gris); font-style: italic; font-weight: 500; }
.ficha-respuesta--falta::after { visibility: hidden; }
/* Las dos fichas ocupan lo mismo: misma altura y filas a la misma altura a cada lado del corte */
.comparador .ficha-cuerpo { align-content: flex-start; }
.comparador .etiqueta-ejemplo { z-index: 3; } /* por encima de la línea del corte */
.comparador .ficha { align-self: stretch; width: 100%; max-width: 22rem; border: 0; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .7); }
.comparador-rotulo { position: absolute; bottom: 1.4rem; font-family: var(--mono); font-size: .8125rem; line-height: 1; padding: .45rem .8rem; border-radius: 999px; }
.comparador-antes .comparador-rotulo { left: 1.25rem; background: rgb(255 255 255 / .08); color: var(--gris-claro); }
.comparador-despues .comparador-rotulo { right: 1.25rem; background: var(--azul); color: var(--blanco); }

/* Manija: línea blanca en el corte y círculo azul con flechas */
.comparador-manija { position: absolute; top: 0; bottom: 0; left: var(--corte); z-index: 2; width: 2px; margin-left: -1px; background: var(--blanco);
  box-shadow: 0 0 14px rgb(0 0 0 / .35); pointer-events: none; }
.js .comparador-manija::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 7l-5 5 5 5M14.5 7l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / 22px, var(--azul);
  border: 2px solid var(--blanco); box-shadow: 0 8px 20px -6px rgb(0 0 0 / .6); transition: transform .2s ease, box-shadow .2s ease; }
.comparador-control:hover + .comparador-manija::after { transform: scale(1.06); }
.comparador-control:active + .comparador-manija::after { transform: scale(.94); }
.comparador-control:focus-visible + .comparador-manija::after { box-shadow: 0 0 0 4px var(--blanco), 0 0 0 7px var(--azul), 0 8px 20px -6px rgb(0 0 0 / .6); }

/* Control: un range invisible sobre todo el comparador; toma mouse, dedo y teclado de forma nativa.
   pan-y deja deslizar la página en vertical sobre el comparador. El indicador del range es angosto para que el corte quede bajo el dedo. */
/* Sin JS el range no hace nada: no se muestra ni recibe foco, y queda el corte fijo al 50 % (solo la línea). */
.comparador-control { display: none; }
.js .comparador-control { display: block; position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y;
  -webkit-appearance: none; appearance: none; background: none; }
.comparador-control::-webkit-slider-runnable-track { height: 100%; }
.comparador-control::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 2px; height: 100%; }
.comparador-control::-moz-range-track { height: 100%; }
.comparador-control::-moz-range-thumb { width: 2px; height: 100%; border: 0; border-radius: 0; }
.comparador-control:focus { outline: none; }

/* Pista al aparecer (una vez): el corte se asoma a cada lado y vuelve al centro. Se corta apenas la persona lo toca. */
.js .comparador.visible:not(.tocado) { animation: comparador-pista 1.6s cubic-bezier(.45, 0, .25, 1) .6s; }
@keyframes comparador-pista { 30% { --corte: 40%; } 70% { --corte: 60%; } }

/* Escritorio: texto a la izquierda, comparador a la derecha */
@media (min-width: 900px) {
  #antes-despues > .contenedor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 4rem; }
  #antes-despues > .contenedor > * { grid-column: 1; justify-self: start; }
  #antes-despues .etiqueta-seccion { grid-row: 2; }
  #antes-despues .titulo { grid-row: 3; }
  #antes-despues .bajada { grid-row: 4; }
  #antes-despues .comparador { grid-column: 2; grid-row: 1 / -1; justify-self: stretch; margin-top: 0; }
}

/* (04) Un trabajo real: capturas reales (no es maqueta). Ventana de computadora sobre un panel azul y el celular encima, saliendo del panel. */
#trabajo-real { overflow-x: clip; } /* resguardo: el celular sobresale del panel */
#trabajo-real .boton { margin-top: 1.25rem; }
.capturas { position: relative; padding: 1.25rem 1.25rem 1.5rem; border-radius: var(--radio);
  background:
    radial-gradient(circle, rgb(255 255 255 / .14) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(32rem 24rem at 30% 20%, #5C80FF, transparent 70%),
    var(--azul); }
/* Ventana del navegador: barra de 24 px con tres puntos y la captura debajo */
.ventana { position: relative; overflow: hidden; padding-top: 24px; border-radius: var(--radio-chico); background: var(--negro-2);
  box-shadow: 0 0 0 1px rgb(14 14 16 / .25), 0 40px 70px -30px rgb(14 14 16 / .65), 0 12px 24px -12px rgb(14 14 16 / .35); }
.ventana::before { content: ""; position: absolute; inset: 0 0 auto; height: 24px;
  background:
    radial-gradient(circle, rgb(255 255 255 / .28) 0 3.5px, transparent 4px) no-repeat 12px 50% / 9px 9px,
    radial-gradient(circle, rgb(255 255 255 / .28) 0 3.5px, transparent 4px) no-repeat 26px 50% / 9px 9px,
    radial-gradient(circle, rgb(255 255 255 / .28) 0 3.5px, transparent 4px) no-repeat 40px 50% / 9px 9px; }
.captura-escritorio { width: 100%; }
/* Celular: marco negro de 8 px. En el celular queda debajo de la ventana, centrado y montado sobre su borde. */
.captura-movil { position: relative; z-index: 1; width: 180px; margin: -2.5rem auto 0; border: 8px solid var(--negro); border-radius: 28px; background: var(--negro);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 36px 60px -24px rgb(14 14 16 / .7), 0 10px 20px -10px rgb(14 14 16 / .4); }
@media (min-width: 900px) {
  #trabajo-real .dos-columnas { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .capturas { padding: 2.5rem 4.5rem 4.5rem 2.5rem; }
  /* 180 px con el panel a lo ancho; entre 900 y 1280 px se achica con el panel para no taparlo */
  .captura-movil { position: absolute; right: -1rem; bottom: -2rem; width: clamp(140px, 28%, 180px); margin: 0; }
}
/* Entre 900 y 1280 px el margen del contenedor es de 1rem: el panel se corre para que el celular no toque el borde de la pantalla */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .capturas { margin-right: 1rem; }
}
/* Al aparecer, el celular sube un poco después que la ventana */
.js .capturas.visible .captura-movil { animation: subir-movil .8s cubic-bezier(.2, .7, .2, 1) .35s both; }
@keyframes subir-movil { from { opacity: 0; transform: translateY(32px); } }

/* (05) Paquetes: tres tarjetas sobre negro, de igual alto en escritorio, con el botón siempre al pie */
.paquetes { display: grid; gap: 1.5rem; margin-top: 3rem; } /* en el celular, aire para la cinta del destacado */
@media (min-width: 900px) {
  .paquetes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
}
.paquete { --relleno: 2rem; position: relative; display: flex; flex-direction: column; padding: var(--relleno); border-radius: var(--radio); background: var(--negro-2);
  border: 1px solid rgb(255 255 255 / .07); }
@media (max-width: 479.98px) { .paquete { --relleno: 1.5rem; } } /* celular angosto: más lugar para el texto */
.paquete h3 { margin: 0; font-family: var(--titulos); font-weight: 700; font-size: 2rem; line-height: 1.05; letter-spacing: -.025em; }
.paquete-lema { margin: .35rem 0 1.5rem; color: var(--gris-claro); }
/* Lista sobre negro: tilde azul más clara para que se lea y separadores tenues */
.paquete .incluye { margin: 0 0 1.75rem; padding-top: .75rem; border-top: 1px solid rgb(255 255 255 / .1); color: var(--gris-claro); }
.paquete .incluye li { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%232B59FF' fill-opacity='.3'/%3E%3Cpath d='M7 12.4l3.2 3.1L17 8.7' fill='none' stroke='%238CA6FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.paquete .incluye li + li { border-top-color: rgb(255 255 255 / .08); }
/* Nota y botón al pie: el botón queda abajo y alineado entre tarjetas; la nota (si hay) va pegada arriba del botón */
.paquete-nota { margin: auto 0 0; font-family: var(--mono); font-size: .8125rem; letter-spacing: .02em; color: var(--gris-claro); }
.paquete .boton { justify-content: space-between; width: 100%; margin-top: auto; }
.paquete-nota + .boton { margin-top: .85rem; }
.paquete .boton--secundario { border-color: rgb(255 255 255 / .35); transition: background .2s, border-color .2s, transform .2s; }
.paquete .boton--secundario:hover { background: rgb(255 255 255 / .06); border-color: var(--blanco); }
/* Destacado: borde azul de 2 px (1 px de borde + 1 px de sombra interna, así no cambia el tamaño) y un halo azul suave */
.paquete--destacado { border-color: var(--azul);
  background: radial-gradient(28rem 16rem at 50% 0%, rgb(43 89 255 / .16), transparent 70%), var(--negro-2);
  box-shadow: inset 0 0 0 1px var(--azul), 0 0 0 6px rgb(43 89 255 / .08), 0 30px 70px -30px rgb(43 89 255 / .55); }
/* Cinta: montada sobre el borde de arriba, alineada con el texto. No corre el contenido ni choca con el título a ningún ancho. */
.paquete-cinta { position: absolute; top: 0; left: var(--relleno); transform: translateY(-50%); padding: .3rem .7rem; border-radius: 999px; background: var(--azul); color: var(--blanco);
  font-family: var(--mono); font-size: .75rem; line-height: 1.3; letter-spacing: .02em; }
/* Aparición escalonada cuando las tres entran juntas (escritorio) */
@media (min-width: 900px) {
  .js .paquete:nth-child(2) { transition-delay: 120ms; }
  .js .paquete:nth-child(3) { transition-delay: 240ms; }
}

/* (06) Cómo trabajamos: cuatro pasos unidos por una línea que se dibuja sola.
   La línea son dos seudoelementos de la grilla con posición absoluta: ocupan el área de los pasos 1 a 3
   y se estiran hasta el centro del círculo del paso 4, así pasa justo por el centro de los cuatro círculos
   sin medir nada con JS. Celular: vertical. Desde 900 px: horizontal.
   Estado natural (sin JS y con movimiento reducido): línea dibujada y los cuatro números en azul. */
.pasos { --circulo: 48px; --separacion: 2.5rem; position: relative; display: grid; row-gap: var(--separacion); margin: 3rem 0 0; padding: 0; list-style: none; }
.pasos::before, .pasos::after { content: ""; position: absolute; grid-column: 1; grid-row: 1 / 4;
  top: calc(var(--circulo) / 2); bottom: calc(-1 * (var(--separacion) + var(--circulo) / 2)); left: calc(var(--circulo) / 2 - 1px); width: 2px; }
.pasos::before { background: var(--crema-2); }
.pasos::after { background: var(--azul); transform-origin: top; transition: transform 2.2s linear; }
.pasos li { position: relative; z-index: 1; padding-left: calc(var(--circulo) + 1.25rem); }
.paso-numero { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: var(--circulo); height: var(--circulo); border-radius: 50%;
  border: 2px solid var(--azul); background: var(--azul); color: var(--blanco); font-family: var(--mono); font-size: .875rem; line-height: 1;
  transition: background-color .45s ease, border-color .45s ease, color .45s ease; }
.pasos li:nth-child(2) .paso-numero { transition-delay: .7s; }
.pasos li:nth-child(3) .paso-numero { transition-delay: 1.4s; }
.pasos li:nth-child(4) .paso-numero { transition-delay: 2.1s; }
.pasos h3 { margin: 0; padding-top: .6rem; font-family: var(--titulos); font-weight: 700; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; }
.pasos p { margin: .6rem 0 0; color: var(--gris); max-width: 30rem; }
@media (min-width: 900px) {
  .pasos { --separacion: 2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--separacion); row-gap: 0; margin-top: 4rem; }
  .pasos::before, .pasos::after { grid-column: 1 / 4; grid-row: 1;
    top: calc(var(--circulo) / 2 - 1px); bottom: auto; left: calc(var(--circulo) / 2); right: calc(-1 * (var(--separacion) + var(--circulo) / 2)); width: auto; height: 2px; }
  .pasos::after { transform-origin: left; }
  .pasos li { padding: calc(var(--circulo) + 1.75rem) 0 0; }
  .pasos h3 { padding-top: 0; font-size: clamp(1.25rem, 1.9vw, 1.5rem); } /* "Acompañamiento" entra en la columna a 900 px */
}
/* Animación (una vez, al entrar en pantalla): solo con JS y sin movimiento reducido arranca vacía */
@media (prefers-reduced-motion: no-preference) {
  .js .pasos:not(.visible)::after { transform: scaleY(0); }
  .js .pasos:not(.visible) .paso-numero { border-color: var(--negro); background: var(--crema); color: var(--negro); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .js .pasos:not(.visible)::after { transform: scaleX(0); }
}

/* (07) Preguntas frecuentes: <details> nativo, sin JS. El "+" es un seudoelemento del <summary> que gira a "×" al abrir.
   Escritorio: el título queda fijo a la izquierda mientras se recorren las preguntas. */
.dos-columnas--arriba { align-items: start; }
@media (min-width: 900px) {
  #preguntas .dos-columnas { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .preguntas-encabezado { position: sticky; top: 6.5rem; }
  .preguntas-encabezado .titulo { margin-bottom: 0; }
}
.preguntas { border-bottom: 1px solid rgb(14 14 16 / .14); }
.preguntas details { border-top: 1px solid rgb(14 14 16 / .14); }
.preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 44px;
  margin-inline: -.75rem; padding: 1.25rem .75rem; cursor: pointer; list-style: none; border-radius: 12px; /* el margen negativo da aire al anillo de foco sin correr el texto */
  font-family: var(--titulos); font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
  -webkit-tap-highlight-color: transparent; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::marker { content: ""; }
.preguntas summary::after { content: ""; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: linear-gradient(var(--blanco), var(--blanco)) center / 12px 2px no-repeat,
              linear-gradient(var(--blanco), var(--blanco)) center / 2px 12px no-repeat, var(--azul);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .2s; }
.preguntas summary:hover::after { background-color: var(--azul-oscuro); }
.preguntas details[open] > summary::after { transform: rotate(45deg); }
.preguntas summary:focus-visible { outline-offset: -3px; }
.preguntas details p { margin: 0; padding: 0 3.5rem 1.5rem 0; max-width: 40rem; color: var(--gris); }
@media (max-width: 479.98px) {
  .preguntas summary { font-size: 1.125rem; }
  .preguntas details p { padding-right: 0; }
}
/* Apertura suave solo donde el navegador sabe animar hasta "auto"; en el resto se abre de golpe, igual de bien */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .preguntas { interpolate-size: allow-keywords; }
    .preguntas details::details-content { height: 0; overflow: clip;
      transition: height .35s cubic-bezier(.2, .7, .2, 1), content-visibility .35s allow-discrete; }
    .preguntas details[open]::details-content { height: auto; }
  }
}

/* Cierre: llamado final centrado, con el halo azul y la trama de puntos del inicio */
.cierre { position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding-block: clamp(5rem, 13vw, 10rem);
  background: radial-gradient(64rem 34rem at 50% 110%, rgb(43 89 255 / .45), transparent 70%), var(--negro); }
.cierre::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgb(255 255 255 / .06) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%); }
.cierre .titulo { max-width: 15ch; margin-inline: auto; margin-top: 0; }
.cierre .bajada { margin: 0 auto 2.5rem; text-wrap: balance; }
@media (max-width: 479.98px) {
  .cierre .titulo { font-size: clamp(2.25rem, 10.4vw, 2.75rem); } /* "Le contamos qué" entra en una línea */
  .cierre .boton { width: 100%; justify-content: space-between; padding-left: 1.25rem; font-size: 1rem; }
}

/* Pie */
.pie { background: var(--negro); color: var(--gris-claro); font-size: 14px; border-top: 1px solid rgb(255 255 255 / .08); padding-block: 2rem; }
.pie-fila { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.pie-logo { display: block; color: var(--blanco); border-radius: 6px; margin-bottom: .25rem; }
.pie-logo svg { display: block; width: auto; height: 27px; }
.pie-enlace { display: inline-flex; align-items: center; min-height: 44px; color: var(--blanco); text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / .3); text-underline-offset: .25em; transition: text-decoration-color .2s; }
.pie-enlace:hover { text-decoration-color: currentColor; }
@media (max-width: 767.98px) {
  .pie { padding-bottom: calc(56px + 2.5rem); } /* que el botón flotante de WhatsApp no tape el pie */
  .pie-enlace { margin-block: -.5rem; }
}
@media (min-width: 768px) {
  .pie-fila { flex-direction: row; align-items: center; gap: 1.5rem 2rem; }
  .pie-logo { margin: 0 .5rem 0 0; }
  .pie-enlace { margin-left: auto; }
}

/* Aparición: solo se oculta si hay JavaScript (clase .js en <html>) */
.js [data-aparecer] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js [data-aparecer].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  .js [data-aparecer] { opacity: 1; transform: none; }
  .js .maqueta-web.visible .web-desliza { animation: none !important; } /* sin desplazamiento: queda el comienzo de la página */
}

/* Alto contraste de Windows (forced colors): el resaltado es una imagen de fondo que el sistema no recolorea
   pero sí le fuerza el color del texto. Se usan los colores de resaltado del sistema (también en el del inicio). */
@media (forced-colors: active) {
  .pasos::before, .pasos::after { background: CanvasText; }
  mark, .inicio mark { background: Mark; color: MarkText; forced-color-adjust: none; animation: none; }
  /* En este modo Chrome pinta un fondo detrás de cada renglón; con el interlineado justo, ese fondo tapa las colas (Q, j, p) del renglón de arriba */
  .titulo, .servicio h3 { line-height: 1.2; }
}