/* Landing de Doña Mary — cinco pestañas («cuartos»), celular primero.
   Paleta de Doña Mary y un acento propio por pestaña (body[data-pestana]). Nunca texto mostaza sobre crema. */
:root {
  --ox: #6E1E24; --mostaza: #E8A93A; --clay: #B97A56; --crema: #F3E9D2; --tinta: #2A1F18;
  --magenta: #FF3D8B; --cian: #19D3F3; --violeta: #6B4EE6; --lima: #B6F23A; --pizarra: #1F3A5F;
  --fondo: var(--crema); --texto: var(--tinta); --acento: var(--ox); --sobre-acento: var(--crema); --suave: rgba(42,31,24,.08);
  --f-tit: "Archivo", "Arial Black", sans-serif; --f-cuerpo: "Space Grotesk", system-ui, sans-serif;
  --alto-cab: 64px; --radio: 18px; --ancho: 1120px;
}
body[data-pestana="/instalacion"] { --fondo: var(--tinta); --texto: var(--crema); --acento: var(--mostaza); --sobre-acento: var(--tinta); --suave: rgba(243,233,210,.08); }
body[data-pestana="/growth"] { --acento: var(--pizarra); --sobre-acento: var(--crema); }
body[data-pestana="/consultoria"] { --acento: #8a5638; --sobre-acento: var(--crema); }   /* clay oscurecido: se lee sobre crema */
body[data-pestana="/ropa"] { --acento: #d42a72; --sobre-acento: #fff; }               /* magenta con contraste suficiente */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body { background: var(--fondo); color: var(--texto); font-family: var(--f-cuerpo); font-size: 17px; line-height: 1.55; transition: background .25s, color .25s; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }

/* ---------- cinta de octubre ---------- */
.cinta { display: block; background: var(--mostaza); color: var(--tinta); text-align: center; font-weight: 700; font-size: 14px; padding: 8px 14px; text-decoration: none; letter-spacing: .01em; }
.cinta[hidden] { display: none; }

/* ---------- encabezado fijo y barra de pestañas ---------- */
.cab { position: sticky; top: 0; z-index: 30; height: var(--alto-cab); display: flex; align-items: center; gap: 18px; padding: 0 18px;
  background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--suave); }
.cab .logo { flex: none; display: flex; } .cab .logo img { height: 34px; width: auto; }
.cab .logo .claro { display: none; } body[data-pestana="/instalacion"] .cab .logo .oscuro { display: none; } body[data-pestana="/instalacion"] .cab .logo .claro { display: block; }
.pestanas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; flex: 1; justify-content: flex-end; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { flex: none; scroll-snap-align: center; text-decoration: none; font-weight: 600; font-size: 15px; padding: 9px 14px; border-radius: 99px; white-space: nowrap; color: var(--texto); opacity: .75; }
.pestanas a[aria-current="page"] { background: var(--acento); color: var(--sobre-acento); opacity: 1; }
@media (max-width: 760px) { .cab { gap: 10px; padding: 0 10px; } .cab .logo img { height: 28px; } .pestanas { justify-content: flex-start; } }

/* ---------- pestañas (cuartos) y transición ---------- */
.cuarto { display: none; }
.cuarto.activo { display: block; animation: entra .25s ease-out both; }
.cuarto.sale { display: block; animation: sale .2s ease-in both; }
@keyframes entra { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes sale { to { opacity: 0; transform: translateX(-28px); } }

/* ---------- bloques ---------- */
.bloque { padding: 72px 20px; } .bloque.angosto { padding-top: 44px; padding-bottom: 44px; }
.envoltura { max-width: var(--ancho); margin: 0 auto; }
.cejilla { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--acento); margin-bottom: 14px; }
body[data-pestana="/instalacion"] .cejilla { color: var(--mostaza); }
h1, h2, h3 { font-family: var(--f-tit); font-stretch: 125%; font-weight: 800; line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase; }
h1 { font-size: clamp(38px, 7vw, 84px); } h2 { font-size: clamp(28px, 4.4vw, 50px); } h3 { font-size: clamp(19px, 2.2vw, 24px); }
.literal { font-size: clamp(18px, 2vw, 22px); max-width: 46ch; margin-top: 16px; opacity: .92; }
.texto { max-width: 62ch; } .texto p + p { margin-top: 12px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 99px; font: 700 16px var(--f-cuerpo);
  text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.btn.primario { background: var(--acento); color: var(--sobre-acento); }
.btn.sec { background: transparent; color: var(--texto); border-color: currentColor; opacity: .85; }
.btn.chico { min-height: 44px; padding: 0 18px; font-size: 15px; }
.lista { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.lista li { padding-left: 30px; position: relative; } .lista li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
.numerada { counter-reset: n; } .numerada li { counter-increment: n; } .numerada li::before { content: counter(n); width: 22px; height: 22px; left: 0; top: .12em; color: var(--sobre-acento); font: 700 12px/22px var(--f-cuerpo); text-align: center; }
.rejilla { display: grid; gap: 16px; margin-top: 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tarjeta { background: var(--suave); border-radius: var(--radio); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.tarjeta p { opacity: .9; }
.tarjeta .btn { margin-top: auto; align-self: flex-start; }
.etiqueta { display: inline-block; background: var(--mostaza); color: var(--tinta); font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 99px; }
.por-confirmar { display: inline-block; font: 600 11px var(--f-cuerpo); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px;
  border: 1px dashed currentColor; opacity: .7; margin-left: 6px; vertical-align: middle; }
body:not(.borrador) .por-confirmar, body:not(.borrador) [data-solo-borrador] { display: none !important; }
.otra-puerta { text-align: center; padding: 40px 20px 64px; font-size: 18px; }
.otra-puerta a { font-weight: 700; color: var(--acento); }
body[data-pestana="/instalacion"] .otra-puerta a { color: var(--mostaza); }

/* tablas comparativas: en celular cada fila es una tarjeta */
.tabla { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: 16px; }
.tabla th, .tabla td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--suave); vertical-align: top; }
.tabla thead th { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.tabla tbody th { font-weight: 700; }
@media (max-width: 700px) {
  .tabla thead { display: none; } .tabla, .tabla tbody, .tabla tr, .tabla th, .tabla td { display: block; width: 100%; }
  .tabla tr { background: var(--suave); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 12px; }
  .tabla th, .tabla td { border: 0; padding: 4px 0; } .tabla td::before { content: attr(data-col) ": "; font-weight: 700; opacity: .7; }
}

/* ---------- pestaña 1: entrada con la animación (órbita controlada por scroll) ---------- */
.entrada { position: relative; background: #24090a; color: var(--crema); }
.escenario { position: sticky; top: var(--alto-cab); height: calc(100svh - var(--alto-cab)); overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 50% 42%, #7a3124 0%, #4a1912 45%, #24090a 100%); }
.escenario video, .escenario .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
#vOrbita { opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease-out, transform 1.4s cubic-bezier(.16,1,.3,1); }
.listo #vOrbita { opacity: 1; transform: none; }
#vCamina { opacity: 0; }
.velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,6,6,0) 45%, rgba(20,6,6,.75) 100%); pointer-events: none; }
.portada { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px 34px; max-width: var(--ancho); margin: 0 auto; }
.portada h1 { color: var(--crema); font-size: clamp(34px, 5vw, 64px); }
.portada .literal { max-width: 40ch; font-size: clamp(16px, 1.5vw, 19px); }
.portada h1 .l { display: block; opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity .7s, transform .7s cubic-bezier(.16,1,.3,1), filter .7s; }
.portada .literal, .portada .acciones { opacity: 0; transform: translateY(16px); transition: opacity .7s .55s, transform .7s .55s; }
.listo .portada h1 .l { opacity: 1; transform: none; filter: none; } .listo .portada h1 .l:nth-child(2) { transition-delay: .55s; }
.listo .portada h1 .l:nth-child(1) { transition-delay: .4s; }
.listo .portada .literal { opacity: .95; transform: none; transition-delay: .8s; } .listo .portada .acciones { opacity: 1; transform: none; transition-delay: .95s; }
.portada .btn.primario { background: var(--crema); color: var(--ox); }
.desliza { position: absolute; right: 20px; bottom: 30px; font-size: 12px; letter-spacing: .3em; opacity: .7; }
@media (max-width: 700px) { .desliza { display: none; } }
/* entrada más larga: la caminata tiene protagonismo y las notas de «qué es Doña Mari» salen en los espacios libres */
.entrada { height: 640vh; }
@media (max-width: 700px) { .entrada { height: 480vh; } }
.narra { position: absolute; inset: 0; pointer-events: none; }
.narra .nota { position: absolute; top: 50%; width: min(27vw, 360px); font-size: clamp(18px, 1.9vw, 26px); line-height: 1.3; color: var(--crema); font-weight: 600;
  text-shadow: 0 2px 18px rgba(20,6,6,.75); opacity: 0; filter: blur(8px); transform: translateY(calc(-50% + 30px)); transition: opacity .6s, filter .6s, transform .7s cubic-bezier(.16,1,.3,1); }
.narra .nota.visible { opacity: 1; filter: none; transform: translateY(-50%); }
.narra .nota b { font-family: var(--f-tit); font-stretch: 125%; font-weight: 800; text-transform: uppercase; display: block; font-size: 1.25em; margin-bottom: 4px; }
.narra .nota em { font-style: normal; color: var(--mostaza); }
.narra .nota.der { right: 4vw; } .narra .nota.izq { left: 4vw; }
.narra .nota.centro { left: 50%; top: auto; bottom: 9%; width: min(80vw, 640px); text-align: center; transform: translate(-50%, 30px); font-size: clamp(20px, 2.3vw, 30px); }
.narra .nota.centro.visible { transform: translate(-50%, 0); }


/* quién es: una sola Doña Mari caricatura cargando los íconos; texto corto y ordenado */
.quien-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; }
@media (max-width: 760px) { .quien-grid { grid-template-columns: minmax(0, 1fr); } .mari-escena { max-width: 300px; margin: 0 auto; } }
.mari-escena { position: relative; max-width: 360px; width: 100%; justify-self: center; }
.mari-escena img { width: 100%; height: auto; filter: drop-shadow(0 22px 20px rgba(42,31,24,.25)); animation: brinquito 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes brinquito { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.mari-escena .ico { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--ox);
  background: radial-gradient(circle at 35% 30%, #ffe2a6, var(--mostaza) 60%, #b97f1d); box-shadow: 0 10px 20px rgba(42,31,24,.3), inset 0 -4px 0 rgba(0,0,0,.12);
  animation: flota 3.2s ease-in-out infinite; }
.mari-escena .ico svg { width: 56%; height: 56%; }
.mari-escena .i1 { left: -4%; top: 58%; } .mari-escena .i2 { right: -4%; top: 46%; animation-delay: -1s; } .mari-escena .i3 { right: 6%; top: 2%; animation-delay: -2s; }
@keyframes flota { 0%, 100% { transform: translateY(0) rotateY(0deg); } 50% { transform: translateY(-10px) rotateY(25deg); } }
.quien-h { font-size: clamp(24px, 3vw, 38px); text-transform: none; font-weight: 800; line-height: 1.12; }
.quien-h em { font-style: normal; color: var(--ox); }
.quien-texto .quien-sub { margin-top: 14px; font-size: 17px; font-weight: 600; opacity: .8; }
.quien-pasos { list-style: none; margin-top: 14px; display: grid; gap: 2px; counter-reset: q; }
.quien-pasos li { display: grid; grid-template-columns: 34px 110px 1fr; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--suave); counter-increment: q; }
.quien-pasos li::before { content: "0" counter(q); font: 800 14px var(--f-tit); font-stretch: 125%; color: var(--ox); }
.quien-pasos b { font-family: var(--f-tit); font-stretch: 125%; text-transform: uppercase; font-size: 17px; }
.quien-pasos span { font-size: 16px; opacity: .88; }
@media (max-width: 520px) { .quien-pasos li { grid-template-columns: 30px 1fr; } .quien-pasos span { grid-column: 2; } }
.quien .quien-remate { font-size: 16px; margin-top: 18px; }
.pregunta { margin-top: 16px; font-size: clamp(18px, 1.8vw, 21px); font-style: italic; font-weight: 600; color: var(--ox); }

/* quién es: el texto de Doña Mari, en tarjetas cortas para no abrumar */
.quien-titulo { font-family: var(--f-tit); font-stretch: 125%; font-weight: 800; font-size: clamp(24px, 3.6vw, 44px); line-height: 1.08; text-transform: uppercase; max-width: 24ch; }
.quien-titulo b { color: var(--ox); }
.quien-sub { margin-top: 18px; font-size: 19px; font-weight: 600; }
.quien-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 16px; }
.quien-lista > div { background: #fff8ea; border-radius: var(--radio); padding: 18px 18px 18px 64px; position: relative; box-shadow: 0 6px 18px rgba(42,31,24,.07); }
.quien-lista .ico { position: absolute; left: 16px; top: 16px; font-size: 30px; line-height: 1; }
.quien-remate { display: inline-block; margin-top: 22px; background: var(--ox); color: var(--crema); font-weight: 700; font-size: clamp(17px, 1.8vw, 21px); padding: 12px 18px; border-radius: 14px; transform: rotate(-1.2deg); }

/* las sillitas mecedoras: cada una con su tarjetita (antes «puertas») */
.sala { background: linear-gradient(180deg, #ead9bb 0%, var(--crema) 70%); }
.sillas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 30px; align-items: end; }
.silla { position: relative; display: block; text-decoration: none; color: var(--tinta); padding-bottom: 8px; }
.silla img { width: 100%; height: auto; transform-origin: 50% 96%; animation: mecer 3.6s ease-in-out infinite; filter: drop-shadow(0 18px 14px rgba(42,31,24,.28)); }
.silla.s2 img, .silla.s4 img { transform: scaleX(-1); animation-name: mecerVolteada; animation-delay: -1.2s; } .silla.s3 img { animation-delay: -2.1s; }
.silla:hover img { animation-duration: 1.1s; }
@keyframes mecer { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
@keyframes mecerVolteada { 0%, 100% { rotate: 2.5deg; } 50% { rotate: -2.5deg; } }
.tarjetita { position: absolute; left: 6%; right: 6%; top: 44%; background: #fffdf6; border-radius: 14px; padding: 12px 12px 10px; display: grid; gap: 4px;
  box-shadow: 0 10px 24px rgba(42,31,24,.22); transform: rotate(-3deg); transition: transform .25s cubic-bezier(.34,1.56,.64,1); border-top: 6px solid var(--c, var(--ox)); }
.silla.s2 .tarjetita { transform: rotate(2.5deg); } .silla.s3 .tarjetita { transform: rotate(-1.5deg); } .silla.s4 .tarjetita { transform: rotate(3deg); }
.silla:hover .tarjetita, .silla:focus-visible .tarjetita { transform: rotate(0) translateY(-10px) scale(1.04); }
.tarjetita b { font-family: var(--f-tit); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(14px, 1.5vw, 19px); line-height: 1.05; }
.tarjetita small { font-size: 14px; line-height: 1.35; opacity: .85; }
.tarjetita em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--c, var(--ox)); }
.tarjetita .etiqueta { justify-self: start; }
.s1 { --c: #b67a12; } .s2 { --c: var(--pizarra); } .s3 { --c: #8a5638; } .s4 { --c: #d42a72; }
@media (max-width: 760px) { .sillas { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; } .tarjetita small { font-size: 13px; } }
.otro-video { display: flex; align-items: center; gap: 12px; margin-top: 22px; background: var(--suave); border: 0; border-radius: 14px; padding: 8px 14px 8px 8px; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.otro-video img { width: 54px; height: 72px; object-fit: cover; border-radius: 8px; }
.otro-video small { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; } .otro-video b { font-size: 15px; }
.prueba video { width: min(100%, 380px); border-radius: var(--radio); background: #000; aspect-ratio: 9/16; }
.prueba { display: grid; gap: 28px; align-items: center; grid-template-columns: minmax(0, 380px) 1fr; }
@media (max-width: 760px) { .prueba { grid-template-columns: 1fr; } .prueba video { margin: 0 auto; } }
.persona { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.persona .foto { width: 112px; height: 112px; border-radius: 50%; background: var(--suave); display: grid; place-items: center; font-size: 40px; flex: none; overflow: hidden; }

/* ---------- pestaña 2: instalación ---------- */
.oferta { display: grid; gap: 32px; grid-template-columns: 1.25fr 1fr; align-items: center; }
@media (max-width: 860px) { .oferta { grid-template-columns: minmax(0, 1fr); } }
.oferta > *, .prueba > *, .dos-col > * { min-width: 0; }
.precio { background: rgba(243,233,210,.06); border: 1px solid rgba(243,233,210,.14); border-radius: 22px; padding: 26px; }
.precio .tachado { font-size: 22px; text-decoration: line-through; opacity: .6; }
.precio .grande { font-family: var(--f-tit); font-stretch: 125%; font-weight: 800; font-size: clamp(64px, 10vw, 104px); line-height: .95; color: var(--mostaza); }
.precio .nota { margin-top: 8px; font-size: 15px; opacity: .85; }
.cuenta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; text-align: center; }
.cuenta div { background: rgba(243,233,210,.07); border-radius: 12px; padding: 10px 4px; }
.cuenta b { display: block; font: 800 26px var(--f-tit); font-stretch: 125%; } .cuenta span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.problema { display: grid; gap: 12px; margin-top: 22px; }
.problema p { font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; border-left: 4px solid var(--mostaza); padding-left: 16px; }
.frase { font-family: var(--f-tit); font-stretch: 125%; font-weight: 800; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.08; text-transform: uppercase; max-width: 26ch; }
.frase em { font-style: normal; color: var(--mostaza); }
.no-incluye { background: rgba(243,233,210,.05); border: 1px dashed rgba(243,233,210,.3); border-radius: var(--radio); padding: 24px; }
.imagen-oferta { border-radius: 22px; overflow: hidden; }
details { border-bottom: 1px solid var(--suave); padding: 16px 0; } summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--acento); } details[open] summary::after { content: "−"; }
details p { margin-top: 10px; opacity: .9; max-width: 70ch; }

/* ---------- pestaña 3: growth (franja pizarra) ---------- */
.franja { background: var(--acento); color: var(--sobre-acento); }
.franja .cejilla { color: rgba(243,233,210,.8); }
.franja .btn.primario { background: var(--crema); color: var(--acento); }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } @media (max-width: 700px) { .dos-col { grid-template-columns: 1fr; } }
.etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 24px; counter-reset: e; }
.etapas div { background: var(--suave); border-radius: var(--radio); padding: 20px; counter-increment: e; }
.etapas div::before { content: "0" counter(e); font: 800 30px var(--f-tit); font-stretch: 125%; color: var(--acento); display: block; margin-bottom: 6px; }
.voz p { font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; font-style: italic; }

/* ---------- pestaña 5: ropa ---------- */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.galeria img { border-radius: var(--radio); aspect-ratio: 3/5; object-fit: cover; width: 100%; }
@media (max-width: 700px) { .galeria { grid-template-columns: repeat(3, 1fr); gap: 6px; } }
.proximamente { display: inline-block; border: 2px solid var(--acento); color: var(--acento); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; padding: 6px 12px; border-radius: 99px; }

/* ---------- formulario corto ---------- */
.form { display: grid; gap: 12px; max-width: 520px; margin-top: 22px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.form input, .form select { min-height: 50px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--texto) 30%, transparent); background: transparent; color: inherit; font: 16px var(--f-cuerpo); padding: 0 14px; }
.form .aviso { font-size: 13px; opacity: .75; }

/* ---------- WhatsApp flotante ---------- */
.wa { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.25); text-decoration: none; }
.wa[hidden] { display: none; } .wa svg { width: 30px; height: 30px; }

/* ---------- pie ---------- */
.pie { background: var(--tinta); color: var(--crema); padding: 48px 20px 90px; font-size: 15px; }
.pie .envoltura { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pie h4 { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; margin-bottom: 10px; font-weight: 700; }
.pie a { display: block; padding: 4px 0; text-decoration: none; opacity: .9; } .pie .real { grid-column: 1 / -1; border-top: 1px solid rgba(243,233,210,.12); padding-top: 20px; opacity: .85; }

/* ===================== ajustes del 24-oct: títulos más finos, oferta en dólares, formatos, celular limpio ===================== */
/* títulos: mayúsculas y minúsculas, una palabra con acento de color; se leen mejor y no saturan */
.bloque h1, .bloque h2 { text-transform: none; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.05; }
.bloque h1 { font-size: clamp(36px, 5.6vw, 66px); max-width: 15ch; }
.bloque h2 { font-size: clamp(27px, 3.6vw, 44px); max-width: 20ch; }
.bloque h1 em, .bloque h2 em { font-style: normal; color: var(--acento); }
body[data-pestana="/instalacion"] .bloque h1 em, body[data-pestana="/instalacion"] .bloque h2 em { color: var(--mostaza); }
.franja h1 em, .franja h2 em { color: var(--mostaza) !important; }
.cejilla.pastilla { display: inline-block; background: var(--acento); color: var(--sobre-acento); padding: 6px 12px; border-radius: 99px; letter-spacing: .14em; }
body[data-pestana="/instalacion"] .cejilla.pastilla { background: var(--mostaza); color: var(--tinta); }
.franja .cejilla.pastilla { background: var(--crema); color: var(--pizarra); }
.cabeza .literal { font-size: clamp(17px, 1.7vw, 20px); }
.precio .grande { white-space: nowrap; font-size: clamp(54px, 6.4vw, 88px); }
.precio .grande small { font-size: .32em; margin-left: 8px; letter-spacing: .04em; color: var(--crema); opacity: .85; }
.lista.hace li { font-size: 17px; } .lista.hace b { color: var(--mostaza); }

/* los tres formatos, cada uno con su video (en celular se deslizan de lado) */
.formatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.formato { background: rgba(243,233,210,.06); border: 1px solid rgba(243,233,210,.12); border-radius: 20px; padding: 14px 14px 18px; display: grid; gap: 8px; align-content: start; }
.formato video { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 14px; background: #000; }
.formato h3 { text-transform: none; font-size: 20px; margin-top: 6px; color: var(--mostaza); }
.formato p { font-size: 15px; opacity: .9; } .formato .dato { font-size: 13px; opacity: .7; border-top: 1px dashed rgba(243,233,210,.25); padding-top: 8px; }
@media (max-width: 760px) { .formatos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -20px; padding: 0 20px 6px; scrollbar-width: none; }
  .formatos::-webkit-scrollbar { display: none; } .formato { flex: 0 0 78%; scroll-snap-align: center; } }

/* sillitas: tres, con tarjetita chica (solo el nombre y «Toca la sillita») y la promo como sticker en la silla */
.sillas { grid-template-columns: repeat(3, 1fr) !important; }
.tarjetita { left: 14%; right: 14%; top: 52%; padding: 8px 10px; gap: 2px; border-radius: 12px; text-align: center; }
.tarjetita b { font-size: clamp(13px, 1.4vw, 17px); }
.tarjetita em { font-size: 12px; letter-spacing: .04em; }
.promo-silla { position: absolute; z-index: 2; right: 6%; top: 8%; width: 86px; height: 86px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--mostaza); color: var(--tinta); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.15;
  box-shadow: 0 8px 18px rgba(42,31,24,.3), inset 0 0 0 3px rgba(255,255,255,.35); transform: rotate(12deg); animation: latido 1.6s ease-in-out infinite; }
.promo-silla b { font-family: var(--f-tit); font-stretch: 112%; font-size: 15px; letter-spacing: 0; text-transform: none; }
.promo-silla[hidden] { display: none; }
@keyframes latido { 0%, 100% { transform: rotate(12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.08); } }
@media (max-width: 760px) { .sillas { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; } .tarjetita { left: 4%; right: 4%; padding: 6px; } .tarjetita b { font-size: 12px; }
  .tarjetita em { font-size: 10px; } .promo-silla { width: 62px; height: 62px; font-size: 8px; right: -2%; top: 0; } .promo-silla b { font-size: 11px; } }

/* celular: sin barra ni cinta arriba (la pantalla es para Doña Mari); solo un «volver» discreto en las otras pestañas */
.volver { display: none; }
@media (max-width: 760px) {
  .cab, .cinta { display: none !important; }
  :root { --alto-cab: 0px; }
  body:not([data-pestana="/"]) .volver { display: inline-flex; position: fixed; top: 12px; left: 12px; z-index: 35; padding: 7px 12px; border-radius: 99px; font: 700 13px var(--f-cuerpo);
    text-decoration: none; background: color-mix(in srgb, var(--fondo) 80%, transparent); color: var(--texto); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
  .quien { display: none; }                        /* ya se cuenta con las notas durante la caminata */
  .entrada { height: 760vh; }
  /* las notas suben despacio por la pantalla y se difuminan al llegar arriba (las mueve app.js) */
  .narra .nota, .narra .nota.der, .narra .nota.izq, .narra .nota.centro { left: 22px; right: 22px; width: auto; top: 0; bottom: auto; transition: none; filter: none; opacity: 0; font-size: 22px; line-height: 1.25;
    text-shadow: 0 2px 4px rgba(10,3,3,.6), 0 4px 26px rgba(10,3,3,.85); will-change: transform, opacity, filter; }
  .narra .nota.der { text-align: right; } .narra .nota.centro { text-align: center; font-size: 24px; transform: none; }
  .portada h1 { font-size: 38px; }
}

/* «Doña Mari resuelve.» — resuelve en cursiva con brillo cálido */
.portada h1 .resuelve { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 800; text-transform: none; color: var(--mostaza);
  font-size: 1.22em; letter-spacing: -.01em; text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 0 26px rgba(232,169,58,.5); }

/* ===================== celular: títulos completos, botones parejos, sillitas en carrusel ===================== */
.puntos { display: none; }
@media (max-width: 760px) {
  .bloque { padding: 54px 20px; }
  .bloque h1 { font-size: 34px; max-width: none; line-height: 1.08; }
  .bloque h2 { font-size: 27px; max-width: none; line-height: 1.12; }
  .bloque h1 .pal, .bloque h2 .pal { white-space: nowrap; } .bloque h1 em, .bloque h2 em { white-space: nowrap; }
  .literal { font-size: 17px; line-height: 1.5; }
  .con-monedas { overflow: visible; }
  .acciones { flex-direction: column; align-items: stretch; gap: 10px; }
  .acciones .btn, .btn { width: 100%; min-height: 54px; padding: 14px 18px; text-align: center; line-height: 1.25; white-space: normal; justify-content: center; }
  .btn.chico { min-height: 48px; font-size: 15px; }
  .otra-puerta { font-size: 16px; padding: 30px 22px 48px; }
  .etapas { grid-template-columns: 1fr; }
  .precio { padding: 22px 18px; }
  .prueba video { width: 100%; max-width: 360px; }
  .cuarto:not([data-cuarto="/"]) > .bloque:first-child { padding-top: 64px; }        /* espacio para el «← Doña Mari» */

  /* sillitas: una a la vez, grande; al bajar, el carrusel pasa a la siguiente (lo mueve app.js) */
  #puertas { height: 300vh; padding: 0; background: linear-gradient(180deg, #ead9bb 0%, var(--crema) 100%); }
  #puertas > .envoltura { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 0; }
  #puertas .cejilla, #puertas h2 { padding: 0 22px; text-align: center; max-width: none; }
  #puertas .sillas { display: flex !important; width: max-content; gap: 0 !important; margin-top: 10px; padding-left: 14vw; will-change: transform; }
  #puertas .silla { flex: 0 0 72vw; margin: 0 2vw; transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s; }
  #puertas .silla:not(.activa) { transform: scale(.8); opacity: .45; }
  #puertas .tarjetita { left: 9%; right: 9%; top: 50%; padding: 10px 12px; }
  #puertas .tarjetita b { font-size: 17px; line-height: 1.12; }
  #puertas .tarjetita em { font-size: 13px; }
  #puertas .promo-silla { width: 84px; height: 84px; font-size: 10px; right: 2%; top: 4%; } #puertas .promo-silla b { font-size: 15px; }
  .puntos { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .puntos i { width: 8px; height: 8px; border-radius: 50%; background: rgba(42,31,24,.25); transition: width .3s, background .3s; }
  .puntos i.activo { width: 24px; border-radius: 6px; background: var(--ox); }
}

/* entrada con sonido: si el navegador no deja sonar solo, una pantalla de bienvenida pide un toque (y ya suena todo) */
.puerta-sonido { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; text-align: center; padding: 24px; cursor: pointer;
  background: radial-gradient(ellipse at 50% 40%, #7a3124, #24090a 75%); color: var(--crema); transition: opacity .6s; }
.puerta-sonido.fuera { opacity: 0; pointer-events: none; }
.puerta-sonido img { width: 120px; height: 120px; margin: 0 auto 18px; animation: brinquito 2.4s ease-in-out infinite; }
.puerta-sonido b { display: block; font-family: var(--f-tit); font-stretch: 112%; font-size: clamp(30px, 6vw, 52px); line-height: 1.05; }
.puerta-sonido span { display: inline-block; margin-top: 18px; background: var(--crema); color: var(--ox); font-weight: 700; padding: 14px 26px; border-radius: 99px; font-size: 17px; }

/* al tocar una sillita: la pantalla se oscurece y Doña Mari habla («Con confianza, mijito…») antes de abrir la pestaña */
.velo-silla { position: fixed; inset: 0; z-index: 70; background: rgba(15,5,5,.82); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .35s; pointer-events: none; }
.velo-silla.visible { opacity: 1; pointer-events: auto; }
.velo-silla p { max-width: 16ch; text-align: center; color: var(--crema); font-family: var(--f-tit); font-stretch: 112%; font-weight: 800; font-size: clamp(30px, 5vw, 54px); line-height: 1.08; }
.velo-silla img { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 16px; display: block; box-shadow: 0 0 0 4px var(--crema), 0 0 0 7px var(--mostaza); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .entrada { height: auto; } .escenario { position: relative; top: 0; height: 88svh; }
}

/* redes al final de Doña Mari */
.redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.redes a { text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 99px; background: var(--suave); }

/* oferta del 27-oct: sello HOT del producto estrella (sillita 1 y pastilla), costos por video, embudo de Automatización 360, letra chiquita */
.sello-hot { position: absolute; z-index: 3; left: 4%; top: 6%; padding: 7px 12px 6px; border-radius: 8px; background: var(--ox); color: var(--crema);
  font: 800 16px var(--f-tit); font-stretch: 125%; letter-spacing: .1em; box-shadow: 0 0 0 3px var(--crema), 0 8px 16px rgba(42,31,24,.35);
  transform: rotate(-10deg); animation: sello 2.4s ease-in-out infinite; }
@keyframes sello { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.1); } }
.hot-mini { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 5px; background: var(--ox); color: var(--crema); font-size: .85em; letter-spacing: .1em; transform: rotate(-6deg); }
@media (max-width: 760px) { .sello-hot { font-size: 12px; padding: 5px 8px 4px; } #puertas .sello-hot { font-size: 16px; padding: 7px 12px 6px; } }
/* 27-oct (2.ª vuelta): menos texto y más Doña Mary en las tres pestañas de servicio (el inicio no se toca).
   Línea editorial: la palabra de acento de cada título en cursiva Playfair, como «resuelve» de la portada. */
body:not([data-pestana="/"]) .bloque h1 em, body:not([data-pestana="/"]) .bloque h2 em { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 800;
  text-transform: none; letter-spacing: -.01em; }
body:not([data-pestana="/"]) .bloque h2 { font-size: clamp(30px, 3.8vw, 48px); }
@keyframes flota { 0%, 100% { translate: 0 0; rotate: -1.5deg; } 50% { translate: 0 -12px; rotate: 1.5deg; } }
@keyframes saltito { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.mini-flota { width: 100%; max-width: 250px; justify-self: center; filter: drop-shadow(0 22px 26px rgba(0,0,0,.35)); animation: flota 4.5s ease-in-out infinite; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chips span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; font-weight: 600; font-size: 16px; line-height: 1.2;
  background: var(--suave); border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent); transition: background .2s, border-color .2s; }
.chips span:hover { background: color-mix(in srgb, var(--acento) 18%, transparent); border-color: var(--acento); }
/* Tu clon: para quién */
.para-ti-grid, .ademas-grid { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; }
.para-ti-grid { grid-template-columns: 300px 1fr; gap: 48px; }
.foto-halo { position: relative; display: grid; justify-items: center; isolation: isolate; }
.foto-halo::before { content: ""; position: absolute; width: 118%; aspect-ratio: 1; top: 8%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--mostaza) 42%, transparent) 0%, transparent 66%); animation: respira 5s ease-in-out infinite; }
.para-ti .foto-halo::after { content: "¡Sí, tú!"; position: absolute; top: 4%; left: -4%; padding: 7px 14px; border-radius: 16px 16px 16px 4px; background: var(--crema); color: var(--tinta);
  font: 800 16px var(--f-tit); font-stretch: 112%; rotate: -8deg; box-shadow: 0 8px 18px rgba(0,0,0,.35); animation: saltito 2.6s ease-in-out infinite; }
.para-ti-grid .mini-flota { width: auto; max-width: 100%; height: 440px; object-fit: contain; }
.sticker-10 { display: inline-block; margin-top: 26px; padding: 12px 22px; border-radius: 16px; background: var(--mostaza); color: var(--tinta); rotate: -1deg;
  font: 800 clamp(19px, 2.1vw, 25px) var(--f-tit); font-stretch: 112%; box-shadow: 0 12px 26px rgba(0,0,0,.3); }
.sticker-10 b { font-size: 1.45em; } .sticker-10 em { font-family: "Playfair Display", Georgia, serif; font-style: italic; color: var(--ox); }
/* Tu clon: tres pasos con Doña Mary */
.pasos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; position: relative; }
.pasos::before { content: ""; position: absolute; left: 12%; right: 12%; top: 128px; border-top: 3px dashed color-mix(in srgb, var(--mostaza) 55%, transparent); z-index: 0; }
.pasos li { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 20px 16px 24px; border-radius: 24px;
  background: linear-gradient(180deg, #3b2d23, #2f241c); border: 1px solid rgba(243,233,210,.14); box-shadow: 0 18px 40px rgba(0,0,0,.28); overflow: hidden;
  transition: translate .25s, border-color .25s; }
.pasos li:hover { translate: 0 -8px; border-color: color-mix(in srgb, var(--mostaza) 60%, transparent); }
.pasos .foto { position: relative; display: grid; place-items: center; }
.pasos .foto::before { content: ""; position: absolute; width: 230px; aspect-ratio: 1; left: 50%; top: 50%; margin: -115px 0 0 -115px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--mostaza) 38%, transparent), transparent 68%); animation: respira 4s ease-in-out infinite; }
.pasos img { height: 240px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0,0,0,.45)); animation: flota 4s ease-in-out infinite; }
.pasos li:nth-child(2) img, .pasos li:nth-child(2) .foto::before { animation-delay: -1.3s; } .pasos li:nth-child(3) img, .pasos li:nth-child(3) .foto::before { animation-delay: -2.6s; }
@keyframes respira { 0%, 100% { scale: .92; opacity: .7; } 50% { scale: 1.06; opacity: 1; } }
/* paso 1: destellos dorados alrededor de la llave */
.chispa { position: absolute; font-style: normal; color: #ffd36b; text-shadow: 0 0 10px #ffb52e, 0 0 22px rgba(255,181,46,.6); pointer-events: none; animation: chispa 2.2s ease-in-out infinite; }
.chispa:nth-of-type(1) { left: 6%; top: 10%; font-size: 26px; }
.chispa:nth-of-type(2) { left: 30%; top: 2%; font-size: 16px; animation-delay: -.8s; }
.chispa:nth-of-type(3) { left: 2%; top: 40%; font-size: 14px; animation-delay: -1.5s; }
@keyframes chispa { 0%, 100% { opacity: 0; scale: .3; rotate: 0deg; } 45% { opacity: 1; scale: 1.15; rotate: 90deg; } 70% { opacity: .2; scale: .6; } }
.pasos .num { position: absolute; top: 14px; left: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mostaza); color: var(--tinta);
  font: 800 22px var(--f-tit); font-stretch: 125%; box-shadow: 0 0 0 4px var(--tinta); }
.pasos h3 { text-transform: none; font-size: 22px; color: var(--mostaza); margin-top: 6px; } .pasos p { font-size: 16px; opacity: .9; }
.pasos .dice { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--crema); color: var(--tinta); font-weight: 700; font-size: 13px; padding: 6px 11px; border-radius: 14px 14px 4px 14px;
  rotate: 4deg; box-shadow: 0 6px 14px rgba(0,0,0,.3); opacity: 0; translate: 0 8px; transition: opacity .3s, translate .3s; }
.pasos li:hover .dice, .pasos li.visto .dice { opacity: 1; translate: 0 0; }
/* Tu clon: lista con emoji */
.lista.con-emoji li { padding-left: 48px; } .lista.con-emoji li::before { display: none; }
.lista.con-emoji i { position: absolute; left: 0; top: -4px; font-style: normal; font-size: 30px; animation: saltito 3s ease-in-out infinite; }
.lista.con-emoji li:nth-child(2n) i { animation-delay: -1.2s; }
/* Tu clon: cuentas claras */
.cuentas { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 14px; margin-top: 28px; }
.ficha { display: grid; align-content: center; justify-items: center; text-align: center; gap: 4px; padding: 26px 14px; border-radius: 24px;
  background: rgba(243,233,210,.06); border: 1px solid rgba(243,233,210,.12); transition: translate .25s, rotate .25s; }
.ficha:hover { translate: 0 -4px; }
.ficha .ico { width: 40px; height: 40px; fill: none; stroke: var(--mostaza); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Pro o Ultra: doble alternativa A / B */
.vs { display: inline-flex; align-items: center; gap: 6px; height: 40px; }
.vs i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font: 800 18px var(--f-tit); font-style: normal; font-stretch: 112%; }
.vs i:first-child { background: var(--mostaza); color: var(--tinta); } .vs i:last-child { border: 1.5px solid var(--mostaza); color: var(--mostaza); }
.vs em { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 18px; color: var(--crema); opacity: .7; }
.ficha b { font: 800 clamp(20px, 2vw, 26px) var(--f-tit); font-stretch: 112%; color: var(--crema); margin-top: 8px; }
.ficha small { font-size: 14px; opacity: .7; }
.ficha.grande { background: var(--mostaza); border: 0; } .ficha.grande b, .ficha.grande small { color: var(--tinta); opacity: 1; }
.ficha.grande b { font-size: clamp(34px, 3.6vw, 48px); }
.sin-mens { margin-top: 18px; text-align: center; opacity: .75; }
/* Automatización 360 */
.embudo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; margin-top: 30px; }
.embudo > div { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 24px 14px; border-radius: 24px; background: var(--suave); transition: translate .25s; }
.embudo > div:hover { translate: 0 -6px; }
.embudo > div:not(:last-child)::after { content: "➜"; position: absolute; right: -28px; top: 50%; translate: 0 -50%; font-size: 22px; color: var(--acento); animation: empuja 1.4s ease-in-out infinite; }
@keyframes empuja { 50% { translate: 6px -50%; } }
.embudo > div:last-child { background: var(--acento); color: var(--sobre-acento); }
.embudo .paso-n { font: 800 34px var(--f-tit); font-stretch: 125%; line-height: 1; color: var(--acento); opacity: .9; }
.embudo > div:last-child .paso-n { color: var(--mostaza); }
.embudo h3 { text-transform: none; font-size: 22px; margin-top: 6px; } .embudo p { opacity: .85; font-size: 15px; }
.burbujas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; }
.burbujas p { position: relative; background: var(--fondo); padding: 16px 22px; border-radius: 22px 22px 22px 6px; font-weight: 600; font-size: 18px; box-shadow: 0 8px 20px rgba(42,31,24,.1); }
/* Consejos: lo que te duele (lista simple, sin números) */
.duele { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin-top: 24px; }
.duele li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--suave); font-size: 18px; font-weight: 600; }
.duele li::before { content: ""; position: absolute; left: 0; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
.si-no { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-weight: 700; font-size: 15px; opacity: .85; }
/* Consejos de la abuela */
.consulta-grid { display: grid; grid-template-columns: 1fr 230px; gap: 30px; align-items: center; }
.sello-abuela { width: 100%; max-width: 230px; justify-self: center; filter: drop-shadow(0 16px 20px rgba(42,31,24,.3)); animation: flota 5s ease-in-out infinite; }
.etapas h3 { text-transform: none; }
@media (max-width: 860px) {
  .pasos { grid-template-columns: 1fr; gap: 18px; } .pasos::before { display: none; }
  .pasos li { grid-template-columns: 140px 1fr; justify-items: start; text-align: left; column-gap: 16px; padding: 14px 16px; }
  .pasos .foto { grid-row: 1 / 4; justify-self: center; } .pasos img { height: 170px; }
  .chispa:nth-of-type(1) { font-size: 18px; }
  .pasos .num { width: 36px; height: 36px; font-size: 18px; top: 10px; left: 10px; } .pasos .dice { top: auto; bottom: 10px; right: 10px; font-size: 12px; }
  .pasos h3 { align-self: end; font-size: 20px; } .pasos p { align-self: start; padding-bottom: 26px; }
  .cuentas { grid-template-columns: repeat(3, 1fr); } .ficha.grande { grid-column: 1 / -1; }
  .ficha { padding: 18px 8px; } .ficha .ico { width: 32px; height: 32px; } .ficha b { font-size: 17px; } .ficha small { font-size: 12px; }
  .vs i { width: 28px; height: 28px; font-size: 15px; } .duele { grid-template-columns: 1fr; gap: 0; }
  .embudo { grid-template-columns: 1fr 1fr; gap: 14px; } .embudo > div::after { display: none; }
}
@media (max-width: 760px) {
  .para-ti-grid, .ademas-grid { grid-template-columns: 1fr; gap: 10px; } .mini-flota, .para-ti-grid .mini-flota { max-width: 150px; }
  .para-ti-grid .mini-flota { height: 300px; } .foto-halo::before { width: 260px; } .para-ti .foto-halo::after { left: 50%; translate: -130px 0; font-size: 14px; }
  .consulta-grid { grid-template-columns: 1fr; } .sello-abuela { max-width: 150px; grid-row: 1; }
  .chips span { font-size: 14px; padding: 9px 14px; }
}
.bloque h1 em.larga, .bloque h2 em.larga { white-space: normal; }   /* en celular las cursivas largas sí parten renglón */
.letra-chica { max-width: 620px; margin: 26px auto 0; font-size: 12.5px; line-height: 1.5; opacity: .62; display: grid; gap: 6px; }

/* 28-oct: llamados a la acción de WhatsApp en relieve (canto inferior, brillo que pasa cada pocos segundos, se hunde al tocar) y con el ícono de WhatsApp */
.btn.cta { position: relative; overflow: hidden; isolation: isolate; font-weight: 800; letter-spacing: .005em;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--acento) 55%, #000), 0 12px 22px rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.22); transition: translate .12s, box-shadow .12s; }
.btn.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.3) 48%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0; animation: brilloCta 5s ease-in-out infinite; }
@keyframes brilloCta { 0%, 64% { background-position: 130% 0; } 88%, 100% { background-position: -40% 0; } }
.btn.cta:hover { translate: 0 -2px; box-shadow: 0 7px 0 color-mix(in srgb, var(--acento) 55%, #000), 0 16px 26px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.22); }
.btn.cta:active { translate: 0 4px; box-shadow: 0 1px 0 color-mix(in srgb, var(--acento) 55%, #000), 0 4px 10px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.22); }
.btn.cta.con-wa::before { content: ""; flex: none; width: 21px; height: 21px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3.2A12.7 12.7 0 0 0 5.1 22.4L3.3 28.8l6.6-1.7A12.7 12.7 0 1 0 16 3.2zm0 23.2a10.5 10.5 0 0 1-5.4-1.5l-.4-.2-3.9 1 1-3.8-.2-.4A10.5 10.5 0 1 1 16 26.4zm5.8-7.9c-.3-.2-1.9-.9-2.2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.7.1a8.6 8.6 0 0 1-2.5-1.6 9.6 9.6 0 0 1-1.8-2.2c-.2-.3 0-.5.1-.7l.5-.6.3-.5a.6.6 0 0 0 0-.6l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6a1.2 1.2 0 0 0-.9.4 3.6 3.6 0 0 0-1.1 2.7 6.3 6.3 0 0 0 1.3 3.3 14.4 14.4 0 0 0 5.5 4.9c2.1.9 2.9.9 3.9.8a3.3 3.3 0 0 0 2.2-1.5 2.7 2.7 0 0 0 .2-1.5c-.1-.2-.3-.2-.6-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3.2A12.7 12.7 0 0 0 5.1 22.4L3.3 28.8l6.6-1.7A12.7 12.7 0 1 0 16 3.2zm0 23.2a10.5 10.5 0 0 1-5.4-1.5l-.4-.2-3.9 1 1-3.8-.2-.4A10.5 10.5 0 1 1 16 26.4zm5.8-7.9c-.3-.2-1.9-.9-2.2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.7.1a8.6 8.6 0 0 1-2.5-1.6 9.6 9.6 0 0 1-1.8-2.2c-.2-.3 0-.5.1-.7l.5-.6.3-.5a.6.6 0 0 0 0-.6l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6a1.2 1.2 0 0 0-.9.4 3.6 3.6 0 0 0-1.1 2.7 6.3 6.3 0 0 0 1.3 3.3 14.4 14.4 0 0 0 5.5 4.9c2.1.9 2.9.9 3.9.8a3.3 3.3 0 0 0 2.2-1.5 2.7 2.7 0 0 0 .2-1.5c-.1-.2-.3-.2-.6-.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn.sec.cta { box-shadow: 0 4px 0 color-mix(in srgb, currentColor 35%, transparent), 0 10px 18px rgba(0,0,0,.12); }
.precio .precio-cta { width: 100%; margin-top: 18px; }

/* 28-oct: botón «Entrar» al estudio del cliente (apagado por ahora; ver config.js) */
.btn-entrar { flex: none; margin-left: 10px; padding: 9px 18px; border-radius: 99px; background: var(--ox); color: var(--crema); font: 700 14px var(--f-cuerpo); text-decoration: none;
  border: 2px solid var(--crema); box-shadow: 0 3px 0 #3d0d11; }
.btn-entrar[hidden] { display: none; }