/* assets/css/style.css — Picarte & Picarte, landing estática (mobile-first) */

/* Paleta tomada del logo (logo-full.png): naranja #F37515 y gris carbón #373D43,
   sin azul — el navy anterior no existía en la marca. --navy se mantiene como
   nombre de variable (heredado del layout original) pero apunta al carbón real.
   Spacing: todo margin/padding/gap del archivo sale de la escala cerrada
   4/8/12/16/24/32/48/64/96px (cada salto ≥25% del anterior) — evita el ruido de
   valores sueltos tipo 18px/22px/26px que no se distinguen entre sí. Excepciones
   puntuales de alineación fina (kerning del "+" del contador, offset del ícono
   del acordeón FAQ) quedan comentadas donde aparecen. */
:root {
  --orange:  #f37515;
  --navy:    #373d43;
  --heading: #373d43;
  --body:    #4b5157;
  --muted:   #6c7378;
  --wa:      #25d366;
  --card:    #ffffff;
  --bg:      #ffffff;
  --radius:  14px;
  --shadow:  0 8px 30px rgba(55, 61, 67, .10);
  --maxw:    1200px;
  --header-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* Rationale: garantiza que nada empuje scroll horizontal en mobile */
}

h1, h2, h3, h4 {
  font-family: Ubuntu, Rubik, system-ui, sans-serif;
  color: var(--heading);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 16px;
}

/* ---------- header / marca ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #eef0f3;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;   /* mobile: logo centrado (el CTA aparece recién en tablet) */
  gap: 12px;
  padding-block: 8px;
}

.brand { display: inline-flex; line-height: 0; }

/* AGREGADO rc0.17.2 — logo compacto al hacer scroll (ver assets/js/site-header.js).
   width fijo (no auto) porque el ancho es lo que se anima; 184px = 36px * (1020/200),
   la proporción real de logo-header.png, así el estado "completo" no recorta nada.
   object-fit:cover + object-position:left hace que, al animar el ancho a 36px (el P
   mark es ~cuadrado en el original), lo que se revela es justo el ícono — sin generar
   un segundo archivo, es un recorte del mismo PNG en tiempo real. */
.brand img {
  height: 36px;
  width: 184px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: left;
  transition: width .25s ease;
}
.site-header--compact .brand img { width: 36px; }

/* En mobile el contacto lo cubre el botón flotante de WhatsApp; el CTA del header
   aparece recién en tablet para no apretar la barra en pantallas chicas. */
.site-header__cta {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--wa);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 50px;
  white-space: nowrap;
}
.site-header__cta img { width: 20px; height: 20px; }
.site-header__cta:hover { filter: brightness(.96); }

/* Link al portal de herramientas (/herramientas/) — mismo criterio de visibilidad
   que .site-header__cta: recién de tablet en adelante, para no apretar el mobile. */
.site-header__portal {
  display: none;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.site-header__portal:hover { color: var(--heading); text-decoration: underline; }

/* AGREGADO rc0.17.2 — nav de home visible desde mobile (Portal / Descargar RCV),
   scoped a .site-header--home para no tocar el resto de páginas: ahí el mobile
   sigue mostrando solo el logo centrado. Sin .site-header__cta (WhatsApp) en mobile
   a propósito — lo cubre el FAB flotante, agregarlo acá sería duplicar el mismo CTA. */
.site-header--home .site-header__inner { justify-content: space-between; flex-wrap: wrap; row-gap: 6px; }
.site-header--home .site-header__actions { display: flex; align-items: center; gap: 16px; }
.site-header--home .site-header__portal { display: inline-flex; }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  /* padding-block, no `padding` a secas: .hero comparte elemento con .wrap
     (class="wrap hero") y un shorthand acá pisa a 0 el padding-inline
     responsive que .wrap ya da — pegaba el hero entero al borde en mobile. */
  padding-block: 32px 48px;
}

.hero__eyebrow {
  font-size: 15px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 12px;
}

.hero__title {
  font-size: clamp(32px, 8vw, 74px);
  font-weight: 800;
  line-height: 1.14;
  margin-bottom: 16px;
}

.hero__lead {
  max-width: 46ch;
  color: var(--body);
}

/* tarjeta flotante del hero, con el punto azul asomando arriba */
.hero__aside { position: relative; padding-top: 24px; }

.hero__dot {
  position: absolute;
  top: 0; right: 32px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--navy);
}

.hero__card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

/* Rationale: el original abre la tarjeta con una regla fina, no con un titulo */
.hero__card::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #d9dde3;
  margin-bottom: 16px;
}

/* Rationale rc0.17.1: badge redondo detrás del ícono le da peso propio al CTA en vez
   de flotar suelto sobre el texto — la rayita de .hero__card::before queda redundante
   con el badge, se apaga solo en las tarjetas que lo llevan (--icon), sin tocar el resto
   de las páginas que reusan .hero__card sin ícono (regularización, constitución, blog). */
.hero__card--icon::before { display: none; }
/* Rationale rc0.18.19: el SVG es un patrón cuadrado con color sólido hasta el
   propio borde (sin margen que se desvanezca) — mostrado chico en una esquina
   (background-size 30% original) se ve casi completo y con un canto recto duro,
   como un parche pegado, no como un fondo decorativo. Estirarlo a toda la
   tarjeta (100% 100%, el SVG tiene preserveAspectRatio="none" así que tolera el
   stretch sin distorsión visible en un patrón abstracto) elimina el canto, y el
   degradado blanco encima lo desvanece hacia el ícono/texto sin taparlos. */
.hero__card--icon {
  background-image:
    linear-gradient(100deg, #fff 0%, #fff 42%, rgba(255,255,255,0) 78%),
    url('../img/cta-card-bg.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: auto, 100% 100%;
}
.hero__card-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff3e8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.hero__card-icon { display: block; width: 36px; height: 36px; }

.hero__card p { font-size: 14px; color: var(--muted); }

.hero__card a {
  display: inline-block;
  margin-top: 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--orange);
  text-decoration: none;
}
.hero__card a:hover { text-decoration: underline; }

/* ---------- titulos de seccion ---------- */

.section-title {
  font-size: clamp(27px, 6.5vw, 58px);
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
}

.section-lead {
  text-align: center;
  max-width: 78ch;
  margin: 12px auto 0;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- bento de resultados ---------- */

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 32px 0 24px;
}

.tile {
  border-radius: var(--radius);
  padding: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.tile--navy   { background: var(--navy);   box-shadow: none; }
.tile--orange { background: var(--orange); box-shadow: none; position: relative; overflow: visible; }

.tile__kicker {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.tile__phone {
  font-family: Ubuntu, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--heading);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 8px;
}
.tile__phone:hover { color: var(--orange); }

.tile__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 12px;
}

.tile p { font-size: 14px; color: var(--muted); }

/* Variantes de color. Rationale: van DESPUES de `.tile p` a proposito — misma
   especificidad (0,1,1), asi que gana la ultima. Si se suben, el texto de las
   tarjetas de color vuelve a quedar gris/naranja sobre su propio fondo. */
.tile--navy .tile__title   { color: var(--orange); }
.tile--orange .tile__title { color: #fff; }

.tile--navy p,
.tile--orange p { color: rgba(255, 255, 255, .92); }

/* contadores
   Rationale: la specificity de `.tile p` (0,1,1) le gana a `.counter` (0,1,0) y le
   comia el tamano. Calificar con .tile para que el contador mande. */
.tile .counter {
  font-family: Ubuntu, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  display: flex;
  align-items: baseline;
  gap: 2px;   /* kerning del "+" contra el número, no es spacing de layout */
}
.tile--orange .counter { color: #fff; }

.counter + .rule,
.label + .rule {
  height: 1px;
  background: #e2e6ea;
  margin: 16px 0 12px;
}
.tile--orange .rule { background: rgba(255,255,255,.35); }

.tile--orange .label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  margin-top: 8px;
}

/* Garabato decorativo: vive FUERA de la tarjeta (esquina superior derecha), nunca
   sobre el texto. Oculto en mobile (se sale del layout de una columna). */
.scribble {
  display: none;
  position: absolute;
  top: -46px; right: -46px;
  width: 110px;
  pointer-events: none;
  z-index: 1;
}

/* ---------- servicios ---------- */

.services { padding-block: 48px 64px; } /* padding-block: comparte elemento con .wrap, ver nota en .hero */

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
}

.service {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 24px;
}

.service img { width: 46px; height: 46px; margin-bottom: 24px; }

.service h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.28;   /* Rationale: el original apretaba esto y el titulo pisaba el parrafo */
  margin-bottom: 12px;
}

.service p { font-size: 14px; color: var(--muted); }

/* ---------- footer ---------- */

.footer { position: relative; padding-bottom: 64px; }

.footer__panel {
  background: var(--navy);
  border-radius: var(--radius);
  color: #fff;
  margin-left: 0;
  padding: 48px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* logo blanco de marca (lockup horizontal), arriba del panel navy */
.footer__logo {
  grid-column: 1 / -1;
  height: 40px;   /* mobile */
  width: auto;
  margin-bottom: 4px;
}

.footer__panel h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 16px;
}

.footer__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  margin-top: 16px;
}

.footer__panel p, .footer__panel a { font-size: 15px; color: #fff; text-decoration: none; }
.footer__panel a:hover { text-decoration: underline; }

.footer__links { display: flex; flex-direction: column; gap: 8px; }

.footer__cta { margin-top: 8px; }
.footer__cta strong {
  display: block;
  font-family: Ubuntu, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 4px;
}
.footer__cta a { color: var(--orange); font-size: 14px; }

/* tarjeta naranja de marca */
.footer__brand {
  position: static;
  width: auto;
  margin: 24px 0 0;
  background: var(--orange);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 14px 40px rgba(243, 117, 21, .25);
}
.footer__brand strong {
  display: block;
  font-family: Ubuntu, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.footer__brand p { color: #fff; font-size: 14px; }

/* ---------- boton flotante whatsapp ---------- */

.wa-float {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--wa);
  color: #fff;
  padding: 12px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.wa-float img { width: 32px; height: 32px; }
.wa-float span { display: none; }

/* ============================================================
   TABLET  (>= 641px): 2 columnas, aparece el CTA del header
   ============================================================ */
@media (min-width: 641px) {
  .wrap { padding-inline: 24px; }

  .site-header__inner { justify-content: space-between; }  /* tablet+: logo a la izq, acciones a la der */
  .brand img { height: 36px; }
  .footer__logo { height: 38px; }
  .site-header__actions { display: flex; align-items: center; gap: 20px; }
  .site-header__portal { display: inline-flex; }
  .site-header__cta { display: inline-flex; }

  .bento          { grid-template-columns: repeat(2, 1fr); }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .scribble       { display: block; }

  .footer__panel { grid-template-columns: repeat(2, 1fr); padding: 48px 32px; }
  .footer__cta   { grid-column: 1 / -1; }

  .wa-float { padding: 12px 16px; border-radius: 50px; }
  .wa-float span { display: inline; }
}

/* ============================================================
   DESKTOP (>= 1025px): recupera el diseño original completo
   ============================================================ */
@media (min-width: 1025px) {
  /* width sigue a height en la misma proporción (1020/200) que la base — si solo
     se pisa height acá, object-fit:cover recorta el logo contra un box más
     achatado que el original (bug real, visto en pantalla). */
  .brand img { height: 46px; width: 235px; }
  .site-header--compact .brand img { width: 46px; }

  .hero {
    grid-template-columns: 1.15fr .85fr;
    gap: 64px;
    padding-block: 64px;
  }
  .hero__eyebrow { font-size: 20px; letter-spacing: .02em; margin-bottom: 16px; }
  .hero__title   { margin-bottom: 24px; }
  .hero__aside   { padding-top: 24px; }
  .hero__dot     { right: 42px; width: 30px; height: 30px; }
  .hero__card    { padding: 32px; }

  .section-title { line-height: 1.17; }

  .bento {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 64px 0 48px;
  }
  .tile          { padding: 32px; }
  .tile__title   { font-size: 24px; }
  .tile .counter { font-size: 52px; }

  .services { padding-block: 64px 96px; }
  .services__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
  .service   { padding: 32px; }
  .service h3 { font-size: 24px; }

  .footer { padding-bottom: 96px; }
  .footer__panel {
    margin-left: 20%;
    grid-template-columns: repeat(3, 1fr);
    padding: 64px;
  }
  .footer__logo { height: 44px; }
  .footer__panel h2 { font-size: 26px; margin-bottom: 24px; }
  .footer__cta { grid-column: 2 / -1; margin-top: 24px; }
  .footer__cta strong { font-size: 26px; }

  /* tarjeta naranja superpuesta en el margen izquierdo del panel */
  .footer__brand {
    position: absolute;
    left: 24px;
    bottom: 96px;
    width: min(46%, 550px);
    margin: 0;
    border-radius: var(--radius);
    padding: 32px;
  }
}

/* ============================================================
   AGREGADO rc0.6.0 — enlace "más info" en tiles de servicio con
   página propia, bloque de reseñas de Google, "cómo trabajamos"
   y FAQ. Reusa las variables y el look de .hero__card / .tile.
   ============================================================ */

.service__more { margin-top: 12px; }
.service__more a {
  font-weight: 700;
  font-size: 14px;
  color: var(--orange);
  text-decoration: none;
}
.service__more a:hover { text-decoration: underline; }

.trust { text-align: center; padding-block: 8px 4px; }
.trust p { color: var(--muted); font-size: 14px; margin: 12px auto 16px; max-width: 60ch; }
.trust a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 50px;
}
.trust a:hover { background: var(--navy); color: #fff; }

.steps { padding-block: 8px 12px; }
.steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
}
.step {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.step__n {
  font-family: Ubuntu, sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 8px;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--muted); }

/* padding-bottom 64px, no 12px: .footer no tiene padding-top propio, así que el espacio
   contra la sección anterior depende enteramente de esta — mismo valor que .services para
   una transición de sección a footer consistente en todo el sitio. */
.faq { padding-block: 8px 64px; }
.faq__list { max-width: 780px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px 24px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 24px 16px 0;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--heading);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 14px;   /* centrado óptico del glifo "+", no spacing de layout */
  font-size: 22px;
  color: var(--orange);
  font-weight: 700;
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary + p { font-size: 14px; color: var(--muted); padding-bottom: 16px; margin-top: -4px; }

@media (min-width: 641px) {
  .steps__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   AGREGADO rc0.8.0 — herramientas/ (login de acceso interno).
   Reusa variables y look de .hero__card/.tile; agrega los únicos
   componentes que faltaban en el sitio: campo de formulario, botón
   sólido y alertas de estado.
   ============================================================ */

.auth { padding-block: 48px 64px; display: flex; justify-content: center; }

.auth__card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 24px;
}

.auth__title {
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 700;
  margin-bottom: 12px;
}

.auth__lead { font-size: 14px; color: var(--muted); margin-bottom: 24px; }

.field {
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading);
}

.field span { display: block; margin-bottom: 4px; }

.field input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--body);
  background: #fff;
  border: 1.5px solid #d9dde3;
  border-radius: 8px;
  padding: 8px 12px;
}

.field input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(243, 117, 21, .15);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { filter: brightness(.96); }
.btn-primary:disabled { opacity: .6; cursor: default; }

.alert {
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.alert-error { background: #fdecea; color: #b3261e; }
.alert-ok    { background: #e8f5e9; color: #1e7d32; }

.auth-footer { text-align: center; padding-bottom: 32px; }
.auth-footer p { font-size: 13px; color: var(--muted); }

/* App shell de herramientas/ (registros, descarga, bulk, dashboard, normalizador):
   navegación entre vistas, tarjetas de sección, tabla de datos, badges de estado
   y barra de progreso — mismos tokens que el resto del sitio. */

.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 16px 0;
  border-bottom: 1px solid #eef0f3;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 600;
}
.app-nav a { color: var(--muted); text-decoration: none; }
.app-nav a:hover, .app-nav a[aria-current="page"] { color: var(--orange); }

.panel-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 24px;
}
.panel-card h2 { font-size: 20px; margin-bottom: 8px; }
.panel-card__lead { font-size: 14px; color: var(--muted); margin-bottom: 16px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.form-actions .btn { width: auto; }
.btn-ghost { background: #fff; color: var(--navy); border: 1.5px solid #d9dde3; }
.btn-ghost:hover { border-color: var(--navy); }
.field select { width: 100%; font: inherit; font-size: 15px; color: var(--body); background: #fff; border: 1.5px solid #d9dde3; border-radius: 8px; padding: 8px 12px; }
.field small { display: block; font-weight: 400; color: var(--muted); margin-top: 4px; }

/* Table look tomado del tool.picarte.cl original (.preview-table): contenedor con
   borde redondeado, header sticky gris claro, zebra striping — se siente a tabla
   de datos real, no a filas sueltas con un borde inferior. */
.table-scroll { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.data-table { border-collapse: collapse; width: 100%; font-size: 13.5px; white-space: nowrap; }
.data-table th, .data-table td { padding: 8px 12px; border-bottom: 1px solid #e2e8f0; text-align: left; }
.data-table thead th { background: #f1f5f9; color: var(--muted); font-weight: 700; position: sticky; top: 0; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: #fafbfc; }

.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 50px; }
.badge-cache   { background: #eef0f3; color: var(--navy); }
.badge-fetch   { background: #e8f5e9; color: #1e7d32; }
.badge-blocked { background: #fdecea; color: #b3261e; }
.badge-empty   { background: #fff4e5; color: #b3620e; }

.progress-bar { height: 8px; border-radius: 50px; background: #eef0f3; overflow: hidden; margin-bottom: 8px; }
.progress-fill { height: 100%; background: var(--orange); transition: width .3s ease; }

.stat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-tile { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.stat-tile .label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.stat-tile .value { font-family: Ubuntu, sans-serif; font-size: 24px; font-weight: 700; color: var(--navy); margin-top: 4px; }

.dropzone {
  border: 1.5px dashed #d9dde3;
  border-radius: var(--radius);
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.dropzone:hover { border-color: var(--orange); }
.dropzone input[type="file"] { display: none; }

@media (min-width: 641px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-tiles { grid-template-columns: repeat(4, 1fr); }
}

/* Blog — mismo sistema de tokens (spacing 4/8/12/16/24/32/48/64/96, colores de :root),
   sin componentes nuevos: solo prosa de artículo, que el resto del sitio no necesitaba. */
.article { padding-block: 8px 12px; }
.article__meta {
  max-width: 720px;
  margin: 0 auto 24px;
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.article__body { max-width: 720px; margin: 0 auto; }
.article__body h2 { font-size: 24px; margin: 48px 0 16px; }
.article__body h3 { font-size: 19px; margin: 32px 0 12px; }
.article__body p { margin: 0 0 16px; font-size: 16px; }
.article__body ul, .article__body ol { margin: 0 0 16px; padding-left: 24px; }
.article__body li { margin-bottom: 8px; }
.article__body li::marker { color: var(--orange); font-weight: 700; }
.article__body a { color: var(--orange); font-weight: 700; text-decoration: underline; }
.article__body blockquote {
  margin: 24px 0;
  padding: 16px 24px;
  border-left: 4px solid var(--orange);
  background: #fff7ef;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
  color: var(--heading);
}
.article__body strong { color: var(--heading); }
.article__decision {
  max-width: 720px;
  margin: 32px auto;
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 24px;
}
.article__decision h3 { margin-top: 0; }
.article__decision table { width: 100%; border-collapse: collapse; font-size: 14px; }
.article__decision th, .article__decision td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #eee; }
.article__decision th { color: var(--muted); font-weight: 600; }
.article__cta {
  max-width: 720px;
  margin: 48px auto 0;
  background: var(--navy);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}
.article__cta p { color: #fff; font-size: 17px; margin-bottom: 16px; }
.article__related {
  max-width: 720px;
  margin: 32px auto 0;
  font-size: 14px;
}
.article__related a { color: var(--orange); font-weight: 700; text-decoration: none; }
.article__related a:hover { text-decoration: underline; }

.blog-index__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: var(--maxw);
  margin: 0 auto;
}
.blog-card {
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
  display: block;
}
.blog-card__eyebrow { font-size: 12px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .04em; }
.blog-card h3 { margin: 8px 0; font-size: 19px; }
.blog-card p { font-size: 14px; color: var(--muted); }

/* Contenedor del flujo de /descargar-rcv/ — padding-block (no `padding` a secas):
   `.wrap` ya da el padding-inline responsive (16px mobile / 24px tablet+); un
   shorthand de 3 valores acá se lo pisaría a 0 y pega el contenido al borde. */
.rcv-flow { padding-block: 32px 64px; max-width: 720px; }

/* Hero card full-bleed de /descargar-rcv/ — foto real + degradado oscuro +
   texto encima (referencia: ad de MercadoPago/MercadoLibre). Imagen fiel al
   servicio real (imagen_dedicada_por_subpagina_de_pseo en guidelines), no el
   layout de 2 columnas de .hero de home. */
.rcv-hero-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 460px;
  display: flex;
}
.rcv-hero-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}
/* Degradado como pseudo-elemento, no filtro sobre la foto: así el texto
   queda 100% legible sin oscurecer la imagen entera — solo el lado donde
   vive el contenido (izquierda), se apaga hacia la derecha.
   z-index:1 es obligatorio acá — sin él, .rcv-hero-card__photo (position:
   absolute, z-index:auto, pero DESPUÉS de ::before en el árbol por ser un
   hijo real) pinta ENCIMA del degradado y lo tapa por completo. Bug real
   que estuvo así varios commits: cambiar la opacidad del gradiente no
   tenía ningún efecto visible porque nunca se veía. */
.rcv-hero-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(115deg, rgba(55,61,67,.94) 0%, rgba(55,61,67,.7) 40%, rgba(55,61,67,.15) 68%, rgba(55,61,67,0) 82%);
}
.rcv-hero-card__content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 48px 40px 88px;
}
.rcv-hero-card__eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: #ffcda4;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 12px;
  /* El degradado diagonal no queda 100% opaco en toda la franja del eyebrow
     (texto corto, cerca del borde donde ya aclara) — text-shadow asegura
     contraste sin depender de qué haya en la foto detrás en cada punto. */
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.rcv-hero-card__title {
  color: #fff;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 14px;
}
.rcv-hero-card__lead {
  color: rgba(255, 255, 255, .88);
  font-size: 15px;
  max-width: 44ch;
  margin-bottom: 24px;
}
.rcv-hero-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
}
.rcv-hero-card__cta:hover { background: var(--orange); color: #fff; }
.rcv-hero-card__badge {
  position: absolute;
  z-index: 1;
  left: 32px;
  bottom: 28px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
/* El degradado diagonal de base está tuneado para una card muy ancha (desktop,
   >1024px) donde el contenido ocupa una fracción chica del ancho total. En
   tablet (641-1024px) el mismo max-width:560px del contenido pasa a ocupar
   la mayoría del ancho de la card — el degradado diagonal ya no cubre lo
   suficiente y el texto queda ilegible contra la foto (bug real, visto en
   picarte.local a 768px). Mobile y tablet comparten el degradado más seguro;
   solo cambia cuánto espacio le dan al contenido y al badge. */
@media (max-width: 1024px) {
  .rcv-hero-card::before {
    background: linear-gradient(180deg, rgba(55,61,67,.97) 0%, rgba(55,61,67,.95) 65%, rgba(55,61,67,.55) 100%);
  }
  .rcv-hero-card__photo { object-position: 85% center; }
}
@media (max-width: 640px) {
  .rcv-hero-card__content { padding: 32px 24px 96px; max-width: 100%; }
  .rcv-hero-card__badge { left: 20px; right: 20px; bottom: 20px; text-align: center; }
}

/* Cards de beneficio de /descargar-rcv/ con foto real de objeto (sin personas,
   sin 3D) en vez del ícono flat de .service — mismo shell (fondo/radius/shadow)
   que .service, pero la foto va full-bleed arriba, no como ícono 46x46. */
.rcv-benefit-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.rcv-benefit-card__photo {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Mockup de dispositivo (tablet/celular) con captura real del panel — no un
   ícono ni una foto genérica: es la UI real de Picarte (ver panel-screenshot.jpg,
   herramientas/dashboard.html), con datos de ejemplo, no reales. */
.rcv-benefit-card__banner {
  height: 180px;
  background: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
/* Alto fijo (no ancho): el ancho de .tablet/.phone varía con la proporción real
   de la captura, pero el alto siempre tiene que caber en el banner — al revés
   (ancho fijo) el alto se sale del banner y tapa el título de la card. */
.rcv-benefit-card__tablet {
  height: 148px;
  border: 5px solid var(--navy);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.rcv-benefit-card__tablet img { display: block; height: 100%; width: auto; }
.rcv-benefit-card__phone {
  height: 148px;
  width: 74px;
  border: 5px solid var(--navy);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.rcv-benefit-card__phone img { display: block; height: 100%; width: 100%; object-fit: cover; }
.rcv-benefit-card h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.28;
  margin: 24px 24px 12px;
}
.rcv-benefit-card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 24px 24px;
}

/* ============================================================
   AGREGADO rc0.17.0 — banda CTA de home hacia /descargar-rcv/.
   Fondo naranja (mismo peso visual que .tile--orange) para que
   destaque como acción directa, distinto de las cards blancas de
   servicios; sin componente reusable previo para un banner full-width.
   ============================================================ */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
  margin-block: 8px;
}
.cta-band__text { max-width: 640px; }
.cta-band h2 { text-align: left; color: #fff; font-size: clamp(22px, 4vw, 30px); margin-bottom: 8px; }
.cta-band__text p { color: rgba(255, 255, 255, .92); font-size: 14px; }
.cta-band__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 50px;
  white-space: nowrap;
}
.cta-band__action:hover { background: var(--navy); color: #fff; }

/* ============================================================
   AGREGADO rc0.18.21 — banner de soporte WhatsApp cerca del
   formulario en descargar-rcv/. Degradado propio de marca WhatsApp
   (#25D366 → #128C7E), distinto del naranjo de .cta-band a propósito:
   ese es venta/CTA principal, este es soporte — necesita leerse
   como un canal distinto, no como otro botón de compra.
   ============================================================ */
.rcv-wa-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 28px;
  margin-top: 20px;
}
.rcv-wa-banner__icon { width: 64px; height: auto; flex-shrink: 0; }
.rcv-wa-banner__text { flex: 1; min-width: 220px; }
.rcv-wa-banner__text h3 { color: #fff; font-size: 17px; margin-bottom: 4px; }
.rcv-wa-banner__text p { color: rgba(255, 255, 255, .92); font-size: 13.5px; margin: 0; }
.rcv-wa-banner__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: #fff;
  color: #128c7e;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 50px;
  white-space: nowrap;
}
.rcv-wa-banner__action:hover { background: #075e54; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}