/* Secciones de la portada de rsagents.es (spec «Método primero» con su «Revisión 2» del 6-oct-2026). .page-section: el espaciado de las secciones nuevas, del mismo orden que el de los casos. .section-heading: la cabecera de cada sección, con su H2 y, si lo lleva, un párrafo al lado (debajo en móvil). En móvil el H2 baja con el ancho (57 px desde 393 px), para que ninguna palabra larga («precualificación.», «proveedor») se salga a 320 px, donde solo hay 284. */
.page-section{padding-block:100px 92px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:52px}
.section-heading>p{max-width:24em;font-size:var(--fs-body);line-height:var(--lh-body);color:#b3a6c2;padding-bottom:8px}
@media(max-width:900px){.section-heading{gap:35px}.section-heading>p{max-width:18em}}
@media(max-width:650px){.page-section{padding-block:70px 55px}.section-heading{display:block;margin-bottom:32px}.section-heading h2{font-size:clamp(40px,14.5vw,57px)}.section-heading>p{max-width:var(--measure);margin-top:23px;padding:0}}
/* Hero: el arco lleva «la tarjeta del agente en vivo» (Revisión 2), escrita en HTML, sin foto ni render: la etiqueta «Pruébalo ahora», su título y su línea, el botón del micrófono (abre el agente en voz: data-agent-open, agent-launcher.js) y, tras un filete, la llamada real de CarBack con su reproductor propio (hero-call.js). El arco crece con su contenido, sin alto fijo: el padding de arriba, en % del ancho como la curva, deja la etiqueta por debajo de ella. El micrófono lleva dos anillos que laten (solo transform y opacity) y que se quedan quietos con «reducir movimiento» (agency.css para todas las animaciones con él). Sin JS el micrófono no se ve y el reproductor propio deja sitio a uno nativo (<noscript>). */
.hero-arch{position:relative;padding:21% 36px 40px;border-radius:260px 260px 12px 12px;background:radial-gradient(ellipse 58% 34% at 50% 0,#b895e52e,transparent 72%),linear-gradient(#211a2b,#17141c);box-shadow:0 25px 70px #0003}
.live-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.live-label{color:var(--purple)}
.live-title{margin-top:10px;font:500 clamp(30px,2.6vw,38px)/1.1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.live-text{margin-top:10px;max-width:24em;font-size:var(--fs-ui);line-height:1.5;text-wrap:balance;color:var(--muted)}
.live-mic{position:relative;display:grid;place-items:center;width:104px;height:104px;margin-top:28px;border-radius:50%;background:var(--purple);color:var(--paper);box-shadow:0 14px 34px #b895e533;transition:background .3s,transform .3s}
.live-mic:hover{background:var(--purple-hover);transform:scale(1.04)}
.live-mic svg{width:40px;height:40px}
.live-mic::before,.live-mic::after{content:'';position:absolute;inset:0;border:1px solid var(--purple);border-radius:50%;opacity:0;pointer-events:none}
@keyframes mic-ring{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.55)}}
@media(prefers-reduced-motion:no-preference){.live-mic::before{animation:mic-ring 2.6s cubic-bezier(.2,.6,.2,1) infinite}.live-mic::after{animation:mic-ring 2.6s cubic-bezier(.2,.6,.2,1) 1.3s infinite}}
.live-sep{width:100%;max-width:360px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
/* El reproductor: el botón de play/pausa (48 px) a la izquierda y, a su lado, el título, la barra y el tiempo. La barra es decorativa (el tiempo ya lo dice) y avanza con transform. data-state lo pone hero-call.js: «playing» cambia el icono y rellena el botón; «error» quita la barra y el tiempo y deja ver el aviso, que va en su propia región viva (.call-status, role="status": vacía mientras no hay fallo, para que el lector de pantalla lo anuncie al llenarse). */
.call-player{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;column-gap:14px;width:100%;max-width:360px;margin-top:14px;text-align:left}
.call-toggle{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px #b895e570;transition:background .3s,color .3s}
.call-toggle:hover{background:#b895e526}
.call-toggle svg{width:20px;height:20px}
.call-icon-pause{display:none}
.call-player[data-state="playing"] .call-toggle{background:var(--purple);color:var(--paper);box-shadow:none}
.call-player[data-state="playing"] .call-icon-play{display:none}
.call-player[data-state="playing"] .call-icon-pause{display:block}
.call-title{font-size:var(--fs-small);line-height:1.4;color:var(--ink-soft)}
.call-track{display:flex;align-items:center;gap:10px;margin-top:8px}
.call-bar{position:relative;flex:1;height:3px;border-radius:2px;background:#ffffff24;overflow:hidden}
.call-fill{position:absolute;inset:0;background:var(--purple);transform:scaleX(0);transform-origin:left}
.call-time{font-size:var(--fs-label);line-height:1.5;letter-spacing:.04em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;color:var(--muted)}
.call-status{font-size:var(--fs-label);line-height:1.5;color:var(--ink-soft)}
.call-player[data-state="error"] .call-bar,.call-player[data-state="error"] .call-time{display:none}
.call-native{display:block;width:100%;max-width:360px;margin-top:14px}
@media(max-width:900px){.hero-arch{padding:22% 24px 34px}.live-sep{margin-top:30px}}
@media(max-width:650px){.hero-arch{padding:24% 20px 30px;border-radius:220px 220px 9px 9px}.live-mic{width:96px;height:96px;margin-top:24px}.live-mic svg{width:36px;height:36px}.call-player{column-gap:12px}}
@media print{.live-mic,.call-player{display:none}}
/* 01 / Qué hacemos (Revisión 2): general, con la voz como producto estrella. Una rejilla tipográfica de dos columnas (1,45fr y 1fr): a la izquierda el bloque de los agentes de voz, el más grande (fondo morado suave, como «Encaja si…», su título en Cormorant grande, su línea, los seis casos de uso en una lista compacta de dos columnas, solo el título, y «Escúchalo en tu sector:» con las tres demos, enlaces de 44 px de alto); a la derecha, los otros tres servicios apilados, cada uno con un filete, su nombre y su frase. Sin imágenes ni iconos. Hasta 1024 px el bloque de voz va arriba a todo el ancho y los otros tres debajo, en tres columnas (una hasta 900); hasta 650 px los casos de uso van en una columna. */
.services-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px 56px;align-items:start}
.service-voice{padding:40px 44px 30px;border:1px solid #b895e533;border-radius:14px;background:#b895e512}
.service-voice h3{font-size:clamp(46px,4.6vw,66px);line-height:1;letter-spacing:-.03em}
.service-lead{margin-top:18px;max-width:34em;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft)}
.use-list{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.use-list li{padding-block:14px 15px;border-top:1px solid var(--line);font:500 clamp(22px,1.9vw,26px)/1.2 var(--display);letter-spacing:-.01em}
.use-demos{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 28px;margin-top:22px;padding-top:6px;border-top:1px solid var(--line)}
.use-demos-label{display:flex;align-items:flex-end;min-height:44px;padding-bottom:8px;font-size:var(--fs-ui);color:var(--muted)}
.use-demos .text-link{gap:12px}
.service-list{list-style:none;margin:0;padding:0;display:grid}
.service-item{padding-block:24px 30px;border-top:1px solid var(--line)}
.service-item h3{font-size:clamp(30px,2.6vw,36px);line-height:1.1;letter-spacing:-.015em}
.service-item p{margin-top:10px;max-width:var(--measure);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
@media(max-width:1024px){.services-grid{grid-template-columns:minmax(0,1fr)}.service-list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}}
@media(max-width:900px){.service-list{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){.services-grid{gap:28px}.service-voice{padding:28px 22px 22px}.use-list{grid-template-columns:minmax(0,1fr);margin-top:24px}.use-list li{padding-block:12px 13px}.use-demos{margin-top:18px;gap:0 28px}.use-demos-label{flex-basis:100%;min-height:0;padding:10px 0 4px}.service-item{padding-block:20px 24px}}
/* 02 / Nuestro método (la precualificación). Su H2 es largo: su réplica va equilibrada en dos líneas («Que tu comercial hable / con quien encaja.»); hasta 900 px su entradilla pasa debajo, y hasta 650 px el H2 baja con el ancho, para que «La precualificación.» (6,92 em) quepa entera en una línea y «La» no se quede sola. Debajo, cinco pasos en una lista ordenada, de 3 + 2 en escritorio (rejilla de 6 columnas, cada paso ocupa 2; el 4.º y el 5.º empiezan en las columnas 2 y 4, una fila de dos centrada) y de 1 columna hasta 900 px. El número 01…05 es decorativo (aria-hidden): la <ol> ya numera. El atajo font: anula las cifras de forro de body, así que se piden aquí otra vez. */
.method-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:47px}
.method-step{grid-column:span 2;border-top:1px solid var(--line);padding-top:20px}
.step-number{display:block;margin-bottom:22px;font:500 26px/1 var(--display);font-variant-numeric:lining-nums;letter-spacing:.04em;color:var(--purple)}
.method-step h3{font-size:31px;line-height:1.12}
#metodo .section-heading h2 em{display:inline-block;text-wrap:balance}
.method-step>p{margin-top:16px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted);max-width:var(--measure)}
@media(min-width:901px){.method-step:nth-child(4){grid-column:2/span 2}.method-step:nth-child(5){grid-column:4/span 2}}
@media(max-width:900px){#metodo .section-heading{display:block}#metodo .section-heading>p{max-width:var(--measure);margin-top:23px;padding:0}.method-grid{grid-template-columns:1fr;gap:30px}.method-step{grid-column:auto}.method-step h3{font-size:28px}}
@media(max-width:650px){#metodo .section-heading h2{font-size:clamp(36px,calc((100vw - 44px) / 7.1),57px)}.method-step{padding-top:18px}.step-number{margin-bottom:16px}.method-step h3{font-size:32px;max-width:300px}.method-step>p{margin-top:12px}}
/* Banda de cita: reutiliza el fondo morado de .manifesto-section (agency.css). La cita va en Cormorant, alineada a la izquierda de la página, con un filete morado encima. Sin firma: Mario pidió el 6-oct-2026 que quedara solo la frase. */
.quote-band{padding-block:72px 76px}
.quote-band>figure::before{content:'';display:block;width:56px;height:2px;margin-bottom:30px;background:var(--purple)}
.quote-band blockquote{margin:0}
.quote-band blockquote p{max-width:26em;font:500 clamp(28px,3.5vw,50px)/1.18 var(--display);letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
@media(max-width:650px){.quote-band{padding-block:52px 54px}.quote-band>figure::before{margin-bottom:24px}}
/* 03 / Casos (Revisión 2): tarjetas B2B clásicas, la de CarBack (la grande) y la de ecoclay, en una rejilla de 1,35fr 1fr en escritorio y de 1 columna hasta 900 px. Cada una lleva su antetítulo, su marca, una línea de qué hicimos y sus cifras grandes en Cormorant (el atajo font: anula las cifras de forro de body, así que se piden aquí otra vez), cada cifra con su etiqueta debajo. Las cifras van en tantas columnas como quepan de 130 px (3 en CarBack y 2 en ecoclay) y, hasta 650 px, una debajo de otra; ninguna cifra se parte (nowrap). El «Hasta» del 8,5× va a media altura de la cifra, pero en su misma línea: sin él la cifra no se publica (reglas de veracidad). */
.cases-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.case-stats{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:26px 24px}
.case-stats li{padding-top:16px;border-top:1px solid var(--line)}
.case-stat-value{display:block;font:500 clamp(40px,3.6vw,56px)/1 var(--display);font-variant-numeric:lining-nums;letter-spacing:-.03em;white-space:nowrap;color:var(--purple)}
.case-stat-pre{font-size:.5em;letter-spacing:0;color:var(--ink-soft)}
.case-stat-label{display:block;margin-top:12px;font-size:var(--fs-list);line-height:1.45;color:var(--ink-soft)}
@media(max-width:900px){.cases-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){.case-stats{grid-template-columns:minmax(0,1fr);margin-top:24px;gap:20px}.case-stats li{padding-top:14px}.case-stat-label{margin-top:8px}}
/* 04 / Encaje: dos columnas, «Encaja si…» (con un fondo morado suave) y «No encaja si…», de 1 columna hasta 900 px. Cada frase lleva su marca dibujada con un borde, sin texto que un lector de pantalla tenga que leer: un punto lleno para el sí y un aro para el no (así no se distinguen solo por el color). El remate va en Cormorant con un filete morado encima, como la cita. */
.fit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.fit-col{padding:34px 36px 30px;border:1px solid var(--line);border-radius:14px}
.fit-yes{border-color:#b895e533;background:#b895e514}
.fit-col h3{font-size:clamp(32px,3vw,42px);line-height:1.1;letter-spacing:-.02em;color:var(--muted)}
.fit-yes h3{color:var(--purple)}
.fit-col ul{list-style:none;margin:22px 0 0;padding:0}
.fit-col li{position:relative;padding:16px 0 16px 30px;border-top:1px solid var(--line);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
.fit-yes li{color:var(--ink-soft)}
.fit-col li::before{content:'';position:absolute;left:0;top:calc(16px + .8em - 5px);border-radius:50%}
.fit-yes li::before{width:0;height:0;border:5px solid var(--purple)}
.fit-no li::before{width:10px;height:10px;border:1px solid #ab9dbc}
.fit-closing{max-width:30em;margin-top:52px;font:500 clamp(28px,3vw,42px)/1.18 var(--display);letter-spacing:-.015em;text-wrap:balance;color:var(--ink)}
.fit-closing::before{content:'';display:block;width:56px;height:2px;margin-bottom:26px;background:var(--purple)}
@media(max-width:900px){.fit-grid{grid-template-columns:minmax(0,1fr);gap:20px}}
@media(max-width:650px){.fit-col{padding:26px 22px 20px}.fit-closing{margin-top:40px}.fit-closing::before{margin-bottom:22px}}
/* 05 / Cinco preguntas: dos columnas en escritorio y una hasta 900 px. El número 01…05 lo pone un contador CSS en Cormorant (56 px; 48 en móvil, con cifras de forro: el atajo font: anula las de body); la segunda declaración de content le da texto alternativo vacío, para que un lector de pantalla no lo lea además de la numeración de la <ol>. El ::after es la sexta celda, que cierra el filete de la última fila. */
.provider-questions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:72px;counter-reset:question}
.provider-questions::after{content:'';border-top:1px solid var(--line)}
.provider-questions li{counter-increment:question;display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:20px;align-items:start;padding-block:30px;border-top:1px solid var(--line);font:500 clamp(26px,2.2vw,31px)/1.2 var(--display);letter-spacing:-.01em}
.provider-questions li::before{content:counter(question,decimal-leading-zero);content:counter(question,decimal-leading-zero) / '';font:500 56px/.9 var(--display);font-variant-numeric:lining-nums;letter-spacing:.02em;color:var(--purple)}
.provider-closing{max-width:var(--measure);margin-top:36px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
@media(max-width:900px){.provider-questions{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){.provider-questions li{grid-template-columns:60px minmax(0,1fr);column-gap:14px;padding-block:24px}.provider-questions li::before{font-size:48px}.provider-closing{margin-top:28px}}
@media print{.service-voice,.service-item,.case-stats li,.fit-col,.provider-questions li{break-inside:avoid}}