/* RON3IA — rediseño W7 (desde "¿Qué quieres revisar?" hacia abajo, y fichas de producto).
   Móvil primero. Todo con prefijo r3- para no tocar las clases de la portada viva
   (su CSS va congelado, byte a byte, en el <head> de la portada).
   Contraste: pares verificados en tests/test_web_sitio.py (WCAG 2.1 AA). */

:root {
  --r3-bg: #F7F9FC;
  --r3-white: #FFFFFF;
  --r3-ink: #1D2433;
  --r3-muted: #4A5468;
  --r3-link: #0B6E99;
  --r3-link-hover: #08506F;
  --r3-accent: #1AA7D8;
  --r3-on-accent: #0A0E1A;
  --r3-dark: #0A0E1A;
  --r3-on-dark: #FFFFFF;
  --r3-on-dark-muted: #C9D3E3;
  --r3-border: #C9D3E3;
  --r3-badge-bg: #0B6E99;
  --r3-badge-ink: #FFFFFF;
  --r3-tag-bg: #E3F2F9;
  --r3-tag-ink: #08506F;
  --r3-warn-bg: #FFF4DC;
  --r3-warn-ink: #6B4200;
  --r3-error: #B42318;
  --r3-ok: #146C43;
  --r3-focus: #0B6E99;
  --r3-focus-dark: #7FD3F2;
  --r3-font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r3-radius: 14px;
}

/* ── base (portada: complementa el reset de la viva; fichas: es la base) ── */
.r3-page, .r3-page *, .r3 *, .r3-footer * { box-sizing: border-box; }
.r3-page { margin: 0; background: var(--r3-bg); color: var(--r3-ink); font-family: var(--r3-font); -webkit-font-smoothing: antialiased; }
.r3, .r3-footer { font-family: var(--r3-font); }
.r3 { background: var(--r3-bg); color: var(--r3-ink); font-size: 17px; line-height: 1.6; }
.r3 h1, .r3 h2, .r3 h3, .r3 h4, .r3 p, .r3 ul, .r3 ol, .r3-footer p, .r3-footer ul { margin: 0; padding: 0; }
.r3 ul, .r3 ol, .r3-footer ul { list-style: none; }
.r3 h1 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.12; font-weight: 700; }
.r3 h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); line-height: 1.2; font-weight: 700; }
.r3 h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.r3 h4 { font-size: 1rem; line-height: 1.4; font-weight: 700; }
.r3 a { color: var(--r3-link); }
.r3 a:hover { color: var(--r3-link-hover); }
.r3 [id] { scroll-margin-top: 80px; }
main:focus { outline: none; }

.r3-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.r3-narrow { max-width: 760px; }
.r3-center { text-align: center; }
.r3-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* foco visible en todo lo interactivo */
.r3 :focus-visible, .r3-page :focus-visible, .r3-footer :focus-visible { outline: 3px solid var(--r3-focus); outline-offset: 3px; border-radius: 4px; }
.r3-footer :focus-visible, .r3-topbar :focus-visible, .r3-banner :focus-visible { outline-color: var(--r3-focus-dark); }

.r3-skip { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--r3-white); color: var(--r3-ink); padding: 12px 18px; border-radius: 8px; font-family: var(--r3-font); font-weight: 700; text-decoration: none; }
.r3-skip:focus { top: 12px; outline: 3px solid var(--r3-focus); outline-offset: 2px; }

/* ── secciones ── */
.r3 section.r3-sec { padding: 56px 0; }
.r3-light { background: var(--r3-bg); }
.r3-white { background: var(--r3-white); }
.r3-head { max-width: 760px; margin: 0 auto 32px; text-align: center; display: grid; gap: 12px; }
.r3-head p { color: var(--r3-muted); font-size: 1.1rem; }
.r3-sec h2 + p, .r3-sec h2 + .r3-soon { margin-top: 12px; }

/* ── grillas (1 col en móvil) ── */
.r3-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.r3-split { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }

/* ── botones (min 44px de alto) ── */
.r3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 10px; font-family: var(--r3-font); font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background-color .2s, color .2s; }
.r3 .r3-btn-primary, .r3-page .r3-btn-primary, .r3-footer .r3-btn-primary { background: var(--r3-accent); color: var(--r3-on-accent); }
.r3 .r3-btn-primary:hover, .r3-page .r3-btn-primary:hover { background: #4CC0E6; color: var(--r3-on-accent); }
.r3 .r3-btn-ghost { background: transparent; color: var(--r3-link); border-color: var(--r3-link); }
.r3 .r3-btn-ghost:hover { background: var(--r3-tag-bg); }
.r3-btn:disabled, .r3-btn[aria-disabled="true"] { background: #E4E8EE; color: #4A5468; border-color: #C9D3E3; cursor: not-allowed; }
.r3-btn-block { width: 100%; }
.r3-link { font-weight: 600; }
.r3 .r3-link-inv { color: var(--r3-focus-dark); }
.r3 .r3-link-inv:hover { color: var(--r3-on-dark); }

/* ── tarjetas ── */
.r3-card { background: var(--r3-white); border: 1px solid var(--r3-border); border-radius: var(--r3-radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.r3-card p { color: var(--r3-muted); }
.r3-card-rec { border: 2px solid var(--r3-link); }
.r3-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.r3-ico { color: var(--r3-link); flex: none; }
.r3-badge { display: inline-block; background: var(--r3-badge-bg); color: var(--r3-badge-ink); font-size: .85rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.r3 .r3-card-price { color: var(--r3-ink); font-weight: 600; font-size: .95rem; margin-top: auto; }
.r3-card-cta { align-self: stretch; }

/* ── franja de confianza ── */
.r3 section.r3-strip { padding: 20px 0; background: var(--r3-white); border-top: 1px solid var(--r3-border); border-bottom: 1px solid var(--r3-border); }
.r3-strip-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-weight: 600; color: var(--r3-ink); font-size: 1rem; }
.r3-strip-list li[hidden] { display: none; }

/* ── pasos ── */
.r3-steps { margin-top: 32px; counter-reset: none; }
.r3-step { display: grid; gap: 8px; align-content: start; }
.r3-step p { color: var(--r3-muted); }
.r3-step-n { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--r3-tag-bg); color: var(--r3-tag-ink); font-weight: 700; font-size: 1.15rem; }

/* ── paneles y formularios ── */
.r3-panel { background: var(--r3-white); border: 1px solid var(--r3-border); border-radius: var(--r3-radius); padding: 24px; display: grid; gap: 12px; align-content: start; }
.r3-panel-soft { background: var(--r3-tag-bg); border-color: transparent; }
.r3-panel-soft p { color: var(--r3-ink); }
.r3-form { display: grid; gap: 10px; margin-top: 8px; }
.r3-label { font-weight: 600; font-size: 1rem; }
.r3-input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #6B7689; border-radius: 10px; background: var(--r3-white); color: var(--r3-ink); font: inherit; font-size: 1rem; }
.r3-check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.r3-check input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--r3-link); }
.r3-check label { font-size: .95rem; color: var(--r3-ink); }
.r3-hint { font-size: .95rem; color: var(--r3-muted); }
.r3-soon { display: inline-block; justify-self: start; background: var(--r3-tag-bg); color: var(--r3-tag-ink); font-weight: 700; padding: 8px 14px; border-radius: 8px; }
.r3-msg { font-size: .95rem; min-height: 1.2em; }
.r3-msg.r3-error, .r3-error { color: var(--r3-error); font-weight: 600; }
.r3-msg.r3-ok { color: var(--r3-ok); font-weight: 600; }
textarea.r3-input { min-height: 120px; resize: vertical; }
/* honeypot del formulario de agencia: fuera de pantalla, sin foco (tabindex=-1) */
.r3-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.r3-agency-form { margin-top: 32px; position: relative; }
.r3-acc-item .r3-btn { align-self: start; }
.r3-list-num { counter-reset: r3n; }
.r3-list.r3-list-num li { counter-increment: r3n; padding-left: 28px; }
.r3-list.r3-list-num li::before { content: counter(r3n); width: auto; height: auto; background: none; top: 0; font-weight: 700; color: var(--r3-link); }
.r3-chosen { color: var(--r3-ink); }
.r3-findings { display: grid; gap: 8px; }
.r3-allgood { font-weight: 700; color: var(--r3-ok); }
.r3-reco { display: grid; gap: 10px; border-top: 1px solid var(--r3-border); padding-top: 12px; }
.r3-pay { display: grid; gap: 10px; margin-top: 16px; }
[hidden] { display: none !important; }

/* ── informe (placeholder hasta la compra de prueba) ── */
.r3-list { display: grid; gap: 10px; margin-top: 16px; }
.r3-list li { padding-left: 18px; position: relative; }
.r3-list li::before { content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: var(--r3-link); }
.r3-pages { display: grid; gap: 16px; }
.r3-pages img { width: 100%; height: auto; border: 1px solid var(--r3-border); border-radius: 10px; }
.r3-placeholder { border: 2px dashed #6B7689; border-radius: var(--r3-radius); padding: 32px 20px; text-align: center; color: var(--r3-muted); background: var(--r3-white); }

/* ── productos ── */
.r3-prod h3 { font-size: 1.4rem; }
.r3 .r3-price { font-size: 2rem; font-weight: 700; color: var(--r3-ink); line-height: 1.1; }
.r3 .r3-price-sm { font-weight: 700; color: var(--r3-ink); }
.r3 .r3-price-iva { font-weight: 600; color: var(--r3-ink); }
/* "Auditar mi sitio" del nav congelado, desactivado por l1 (opción B): el bloque no cambia */
nav .nav-links a.r3-nav-link-off, nav .nav-links a.r3-nav-link-off:hover { color: #8A94A6; cursor: default; text-decoration: none; }
nav .btn-primary.r3-nav-cta-off, nav .btn-primary.r3-nav-cta-off:hover { background: #E4E8EE; color: #4A5468; cursor: not-allowed; box-shadow: none; transform: none; }
/* CTA del hero congelado desactivados por l1 (mismo flag y mismo trato que el del nav) */
.hero .hero-cta .r3-hero-cta-off, .hero .hero-cta .r3-hero-cta-off:hover { background: #E4E8EE; color: #4A5468; border: 1px solid #E4E8EE; cursor: not-allowed; box-shadow: none; transform: none; opacity: .75; }
.hero .hero-cta .r3-hero-cta-oculto { display: none; }   /* "Diagnóstico gratuito" con el flag apagado */
.r3 .r3-price-note { font-size: .95rem; color: var(--r3-muted); }
.r3 .r3-guarantee { font-size: .95rem; color: var(--r3-ink); }
.r3-urgency { margin: 24px auto 0; max-width: 760px; text-align: center; background: var(--r3-warn-bg); color: var(--r3-warn-ink); font-weight: 600; padding: 12px 16px; border-radius: 10px; }
.r3-banner { margin-top: 32px; background: var(--r3-dark); color: var(--r3-on-dark); border-radius: var(--r3-radius); padding: 28px 24px; display: grid; gap: 16px; }
.r3 .r3-banner p { color: var(--r3-on-dark-muted); }
.r3 .r3-banner h3, .r3 .r3-banner .r3-price { color: var(--r3-on-dark); }
.r3-banner-side { display: grid; gap: 8px; justify-items: start; }
.r3-tag { display: inline-block; background: var(--r3-tag-bg); color: var(--r3-tag-ink) !important; font-weight: 700; font-size: .95rem; padding: 6px 12px; border-radius: 8px; }
.r3-later { margin-top: 40px; display: grid; gap: 16px; }
.r3-group { display: grid; gap: 8px; }
.r3-group h4 { color: var(--r3-muted); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.r3-group ul { display: grid; gap: 6px; }

/* ── compra tranquila ── */
.r3-calm { display: grid; gap: 16px; justify-items: start; }
.r3-ico-big { color: var(--r3-link); }
.r3-calm p { margin-top: 8px; color: var(--r3-muted); }

/* ── acompañamiento (colapsado) ── */
.r3-acc { border: 1px solid var(--r3-border); border-radius: var(--r3-radius); background: var(--r3-bg); }
.r3-acc > summary { cursor: pointer; padding: 16px 20px; font-weight: 700; min-height: 48px; }
.r3-acc[open] > summary { border-bottom: 1px solid var(--r3-border); }
.r3-acc > .r3-grid { padding: 20px; }
.r3-acc + p { margin-top: 24px; }

/* ── preguntas ── */
.r3-faq { margin-top: 32px; }
/* align-content: start: si la fila de la grilla estira la tarjeta, el alto sobrante queda abajo y no entre pregunta y respuesta */
.r3-faq-item { background: var(--r3-white); border: 1px solid var(--r3-border); border-radius: var(--r3-radius); padding: 20px; display: grid; gap: 8px; align-content: start; }
.r3-faq-item h3 { font-size: 1.1rem; }
.r3-faq-item p { color: var(--r3-muted); }

/* ── pie ── */
.r3-footer { background: var(--r3-dark); color: var(--r3-on-dark-muted); padding: 48px 0 0; border-top: 0; }
.r3-footer-inner { display: grid; gap: 24px; padding-bottom: 32px; }
.r3-brand { font-weight: 700; font-size: 1.5rem; letter-spacing: 1px; color: var(--r3-on-dark); text-decoration: none; }
.r3-footer p { color: var(--r3-on-dark-muted); }
/* logo: lockup completo en el pie, triángulo en la barra de las fichas (regla 13-ago). En la portada
   .footer-logo-img/.logo-img ya vienen del CSS congelado con los mismos valores; aquí sirven a las fichas. */
.r3-footer-brand { display: grid; gap: 12px; justify-items: start; }
.r3-footer-logo { display: inline-block; line-height: 0; }
.r3-footer .footer-logo-img { display: block; width: 194px; height: 200px; object-fit: contain; }
.r3-topnav .r3-brand { display: inline-flex; align-items: center; gap: 10px; }
.r3-topnav .r3-brand-tri { display: block; width: 32px; height: 28px; object-fit: contain; flex: none; }
.r3-footer-links ul { display: grid; gap: 10px; }
.r3-footer a { color: var(--r3-on-dark); }
.r3-footer a:hover { color: var(--r3-focus-dark); }
.r3-footer-copy { border-top: 1px solid #2A3348; padding: 16px 20px; text-align: center; font-size: .9rem; }

/* ── fichas ── */
.r3-topbar { background: var(--r3-dark); }
.r3-topnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 72px; padding-top: 8px; padding-bottom: 8px; }
.r3-topnav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.r3-topnav a:not(.r3-btn) { color: var(--r3-on-dark-muted); text-decoration: none; font-weight: 600; }
.r3-topnav a:not(.r3-btn):hover { color: var(--r3-on-dark); text-decoration: underline; }
.r3-crumbs { padding-top: 24px; padding-bottom: 0; font-size: .95rem; background: var(--r3-bg); }
.r3-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.r3-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--r3-muted); }
.r3-crumbs [aria-current] { color: var(--r3-muted); }
.r3 section.r3-prod-hero { padding-top: 24px; }
.r3-prod-grid { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
.r3-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--r3-link); font-size: .9rem; margin-bottom: 12px !important; }
.r3 .r3-termino { color: var(--r3-muted); font-size: 1rem; font-weight: 600; margin-top: 8px; }
.r3-lead { margin-top: 16px !important; font-size: 1.15rem; color: var(--r3-muted); }
.r3-checks { display: grid; gap: 10px; margin-top: 20px !important; }
.r3-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.r3-ico-check { color: var(--r3-link); margin-top: 2px; }
.r3-buy { background: var(--r3-white); border: 1px solid var(--r3-border); border-radius: var(--r3-radius); padding: 24px; display: grid; gap: 12px; align-content: start; }
/* garantías de la ficha: banda oscura (mockup) */
.r3 .r3-guarantees { margin-top: 0; background: var(--r3-dark); border-radius: var(--r3-radius); padding: 24px; }
.r3-guarantees li { display: grid; gap: 6px; align-content: start; }
.r3 .r3-guarantees h3 { color: var(--r3-on-dark); }
.r3 .r3-guarantees p { color: var(--r3-on-dark-muted); }
/* "Es para ti si" / "Qué revisamos" como tarjetas (mockup) */
.r3-split-cards > div { background: var(--r3-white); border: 1px solid var(--r3-border); border-radius: var(--r3-radius); padding: 24px; }
.r3-sec.r3-white .r3-split-cards > div { background: var(--r3-bg); }
.r3-aviso { margin-top: 24px !important; font-size: .95rem; color: var(--r3-muted); }
/* banda final: tarjeta con borde (mockup) */
.r3 section.r3-band { background: var(--r3-bg); padding: 16px 0 48px; }
.r3-band-inner { display: grid; gap: 16px; align-items: center; }
.r3-band .r3-band-inner { background: var(--r3-white); border: 2px solid var(--r3-link); border-radius: var(--r3-radius); padding: 24px; width: calc(100% - 40px); max-width: 1136px; }
.r3 .r3-band p { color: var(--r3-muted); }
.r3 .r3-band .r3-band-title { color: var(--r3-ink); font-weight: 700; font-size: 1.4rem; }

/* ── 640px+ ── */
@media (min-width: 640px) {
  .r3-wrap { padding: 0 32px; }
  .r3-grid-2, .r3-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .r3-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .r3-footer-inner { grid-template-columns: 1fr 1fr; }
  .r3-banner { grid-template-columns: 1fr auto; align-items: center; }
  .r3-band-inner { grid-template-columns: 1fr auto; }
  .r3-card-cta { align-self: start; }
}

/* ── 960px+ ── */
@media (min-width: 960px) {
  .r3 section.r3-sec { padding: 88px 0; }
  .r3-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .r3-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .r3-split { grid-template-columns: 1fr 1fr; gap: 48px; }
  .r3-prod-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; }
  .r3-calm { grid-template-columns: auto 1fr; align-items: center; gap: 28px; }
  .r3-buy { position: sticky; top: 24px; }
}

/* ── movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .r3 *, .r3-page *, .r3-footer * { transition: none !important; animation: none !important; }
}

/* ── alto contraste forzado (Windows) ── */
@media (forced-colors: active) {
  .r3-btn, .r3-card, .r3-panel, .r3-buy { border: 1px solid CanvasText; }
}

/* ── panel "Solicitar" (servicios de agencia, sin formulario). <dialog> nativo: Esc lo cierra ── */
.r3-dialog { position: fixed; inset: 0; margin: auto; width: min(92vw, 480px); height: fit-content; max-height: 90vh; overflow: auto; padding: 0; border: 1px solid var(--r3-border); border-radius: var(--r3-radius); background: var(--r3-white); color: var(--r3-ink); font-family: var(--r3-font); box-shadow: 0 18px 48px rgba(10, 14, 26, .35); }
.r3-dialog::backdrop { background: rgba(10, 14, 26, .6); }
.r3-dialog-inner { display: grid; gap: 14px; padding: 24px 20px 20px; }
.r3-dialog h2 { margin: 0; font-size: 1.3rem; line-height: 1.3; color: var(--r3-ink); }
.r3-dialog p { margin: 0; color: var(--r3-muted); line-height: 1.5; }
.r3-dialog .r3-dialog-correo { color: var(--r3-ink); }
.r3-dialog-mail { font-weight: 700; user-select: all; -webkit-user-select: all; word-break: break-all; }
.r3-dialog-acciones { display: grid; gap: 10px; }
.r3-dialog .r3-btn { width: 100%; }
.r3-dialog .r3-btn-primary { background: var(--r3-accent); color: var(--r3-on-accent); }
.r3-dialog .r3-btn-primary:hover { background: #4CC0E6; }
.r3-dialog .r3-btn-secondary { background: var(--r3-white); color: var(--r3-link); border-color: var(--r3-link); }
.r3-dialog .r3-btn-secondary:hover { background: var(--r3-tag-bg); color: var(--r3-link-hover); }
.r3-dialog .r3-dialog-estado { min-height: 1.5em; color: var(--r3-ok); font-weight: 600; }
.r3-dialog .r3-dialog-cerrar { background: transparent; color: var(--r3-ink); border-color: var(--r3-border); }
.r3-dialog .r3-dialog-cerrar:hover { background: var(--r3-bg); }
.r3-dialog :focus-visible { outline: 3px solid var(--r3-focus); outline-offset: 2px; }