:root {
  --ink: #0d1726;
  --muted: #596779;
  --paper: #f6f8fb;
  --white: #ffffff;
  --navy: #071a33;
  --blue: #1368e8;
  --cyan: #41d7c7;
  --gold: #f1b24a;
  --line: #dfe6ee;
  --shadow: 0 24px 70px rgba(7, 26, 51, .13);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(223,230,238,.82);
  background: rgba(246,248,251,.9);
  backdrop-filter: blur(16px);
}
.nav-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 850; letter-spacing: -.02em; }
.brand-mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  color: white; background: linear-gradient(145deg, var(--blue), #0947a6); box-shadow: 0 10px 24px rgba(19,104,232,.25);
}
.brand-mark svg { width: 24px; height: 24px; }
.brand small { display: block; font-weight: 650; font-size: .7rem; letter-spacing: .13em; color: var(--muted); }
/* ACI es el producto y su nombre es agnóstico («Asesor Comercial Inteligente»); esta edición es la
   de muebles. Va en el MISMO renglón del nombre, y la letra la distingue: la edición en cursiva
   (Yellowtail, licencia OFL, servida desde este mismo sitio — 11 KB, sin peticiones externas) y el
   nombre en la sans de siempre, así se lee «ACI Furniture» con «POR CARDYRAM» debajo. */
@font-face {
  font-family: 'Yellowtail';
  src: url('/assets/fonts/yellowtail.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* La edición de muebles, en cursiva, con el degradado de la página. El último tramo va con el cian
   oscurecido (#0d7d78): con el cian puro las últimas letras se desvanecen sobre el blanco y parece
   que la palabra quedara cortada. Vale para la marca (header y footer) y para el hero. */
/* El trazo de la cursiva se sale del em (el rabo de la «e», el bucle de la «F»). Con
   `background-clip: text` solo se pinta lo que cae dentro de la caja, así que hay que darle caja:
   padding de pintura y el margen compensado, o la última letra aparece cortada. */
.edition {
  display: inline-block; vertical-align: baseline; color: transparent;
  font-family: 'Yellowtail', 'Segoe Script', cursive; font-weight: 400; line-height: 1;
  padding: .22em .14em;
  background: linear-gradient(100deg, #0947a6 0%, #1368e8 55%, #0d7d78 100%);
  -webkit-background-clip: text; background-clip: text;
  text-transform: none;
}
.brand .edition { margin: 0 -.14em 0 -.02em; font-size: 1.95em; }
/* Sobre el azul de la banda final el degradado no se lee (el cian se confunde con el fondo): ahí la
   firma va en blanco sólido. */
.edition.on-brand { margin-right: .35em; font-size: 2rem; vertical-align: -.08em;
  background-image: none; color: #ffffff; }
.nav-links { display: flex; align-items: center; gap: 28px; font-weight: 650; color: #334154; }
.nav-links a:hover { color: var(--blue); }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 14px;
  background: var(--blue); color: white; font-weight: 800; cursor: pointer;
  box-shadow: 0 12px 28px rgba(19,104,232,.22); transition: .2s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(19,104,232,.3); }
.button.secondary { background: white; color: var(--ink); border-color: var(--line); box-shadow: none; }
.button.dark { background: var(--navy); }
.button.full { width: 100%; }
.nav-toggle { display: none; border: 0; background: transparent; font-size: 1.35rem; }

.hero {
  position: relative; overflow: hidden; padding: 90px 0 84px;
  background:
    radial-gradient(circle at 88% 18%, rgba(65,215,199,.2), transparent 25%),
    radial-gradient(circle at 4% 78%, rgba(19,104,232,.12), transparent 24%),
    linear-gradient(180deg, #fbfdff, #f3f7fc);
}
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 64px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; font-size: .77rem; }
.eyebrow::before { content: ""; width: 24px; height: 3px; border-radius: 99px; background: var(--cyan); }
h1 { margin: 18px 0 22px; font-size: clamp(2.65rem, 6vw, 5.2rem); line-height: .99; letter-spacing: -.065em; max-width: 760px; }
h1 span { color: var(--blue); }
.hero-copy { color: var(--muted); font-size: 1.16rem; max-width: 620px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.actions-center { justify-content: center; }

/* La 404 es la única página corta: sin esto el pie queda a media pantalla con un hueco
   muerto debajo. Columna flex con altura mínima de ventana y el contenido centrado. */
.error-page { display: flex; flex-direction: column; min-height: 100vh; }
.error-page main { flex: 1; display: flex; align-items: center; }
.error-page main > section { width: 100%; }
.trust-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 28px; color: #526174; font-weight: 700; font-size: .9rem; }
.trust-row span { display: flex; align-items: center; gap: 7px; }
.check { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #dcf8f3; color: #08786b; font-size: .72rem; }

.product-stage { position: relative; min-height: 520px; display: grid; place-items: center; }
.halo { position: absolute; inset: 10% 0; border-radius: 50%; background: linear-gradient(135deg, rgba(19,104,232,.15), rgba(65,215,199,.24)); filter: blur(4px); transform: rotate(-8deg); }
.app-shell { position: relative; width: min(100%, 520px); border: 1px solid rgba(255,255,255,.8); border-radius: 26px; background: white; box-shadow: var(--shadow); overflow: hidden; transform: rotate(1.2deg); }
.app-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; background: var(--navy); color: white; }
.dots { display: flex; gap: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); }
.ai-pill { padding: 5px 10px; border-radius: 99px; background: rgba(65,215,199,.16); color: #8af4e8; font-size: .72rem; font-weight: 800; }
.app-body { padding: 25px; }
.progress { height: 7px; background: #edf1f6; border-radius: 99px; overflow: hidden; margin-bottom: 23px; }
.progress b { display: block; width: 68%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.app-label { font-size: .76rem; color: var(--blue); font-weight: 850; text-transform: uppercase; letter-spacing: .09em; }
.app-body h3 { font-size: 1.42rem; margin: 7px 0 18px; line-height: 1.25; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.choice { padding: 14px; border: 1px solid var(--line); border-radius: 14px; font-weight: 750; color: #334154; background: #fbfcfe; }
.choice.active { border-color: var(--blue); background: #eef5ff; color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.app-insight { margin-top: 20px; padding: 15px; border-radius: 15px; background: #effbf9; color: #155f59; font-size: .88rem; }
.float-card { position: absolute; padding: 15px 18px; border-radius: 16px; background: white; box-shadow: 0 15px 40px rgba(7,26,51,.17); font-weight: 800; }
.float-card small { display: block; color: var(--muted); font-weight: 650; }
.float-one { right: -18px; bottom: 56px; }
.float-two { left: -24px; top: 76px; }

section { padding: 88px 0; }
.section-head { max-width: 720px; margin-bottom: 42px; }
.section-head.center { text-align: center; margin-inline: auto; }
h2 { margin: 12px 0 16px; font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.08; letter-spacing: -.045em; }
.section-head p, .lead { color: var(--muted); font-size: 1.08rem; }
.problem-grid, .feature-grid, .steps-grid, .audience-grid { display: grid; gap: 18px; }
.problem-grid { grid-template-columns: repeat(3, 1fr); }
.card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.card-number { color: var(--blue); font-size: .8rem; font-weight: 900; letter-spacing: .1em; }
.card h3 { margin: 14px 0 9px; font-size: 1.18rem; }
.card p { margin: 0; color: var(--muted); }
.dark-band { background: var(--navy); color: white; }
.dark-band .section-head p, .dark-band .card p { color: #afbdd0; }
.feature-grid { grid-template-columns: repeat(3, 1fr); }
.dark-band .card { background: #0c2647; border-color: #1a3b61; }
.icon-box { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(65,215,199,.12); color: var(--cyan); font-size: 1.2rem; }
.steps-grid { grid-template-columns: repeat(4, 1fr); counter-reset: step; }
.step { position: relative; padding: 25px 20px 22px 65px; border-top: 1px solid var(--line); }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: 18px; left: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #eaf2ff; color: var(--blue); font-weight: 900; }
.step h3 { margin: 0 0 7px; font-size: 1.05rem; }
.step p { margin: 0; color: var(--muted); font-size: .92rem; }
/* Seis líneas de servicio, seis oficios: en cinco columnas quedaba una sola tarjeta en la segunda
   fila. Tres y tres. */
.audience-grid { grid-template-columns: repeat(3, 1fr); }
.audience { min-height: 120px; display: flex; align-items: end; padding: 20px; border-radius: 18px; color: white; font-weight: 850; background: linear-gradient(145deg, #12365e, #071a33); }

/* Así se ve por dentro: las dos caras del producto, grabadas (assets/demo). Los videos van mudos,
   en bucle y sin controles; con prefers-reduced-motion se cambia al cuadro fijo.
   La rejilla es UNA sola, con filas compartidas entre las dos columnas (en escritorio fluye por
   columnas: intro+dos marcos a la izquierda, intro+dos marcos a la derecha). Así los marcos de
   cada fila arrancan siempre a la misma altura; con dos columnas independientes, un párrafo de
   introducción que ocupa una línea más —y cuántas ocupa depende de la fuente del sistema, no del
   navegador— empujaba una columna entera hacia abajo y se veía descuadrado. */
.demo-grid { display: grid; gap: 22px; align-items: start; }
.demo-intro > h3 { margin: 0 0 6px; font-size: 1.12rem; }
.demo-intro > p { margin: 0; color: var(--muted); font-size: .95rem; }
.demo-shot { margin: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: white; box-shadow: 0 15px 40px rgba(7,26,51,.10); }
.demo-shot video, .demo-shot img { display: block; width: 100%; height: auto; background: #071a33; }
.demo-shot figcaption { padding: 12px 16px; border-top: 1px solid var(--line); color: #334154; font-size: .88rem; font-weight: 700; }
/* Ojo con la especificidad: `.demo-shot img` (clase + tipo) gana a `.demo-still` a secas, así que
   el cuadro fijo se ocultaba… al revés: se veía SIEMPRE, debajo del video. Va con la misma forma. */
.demo-shot .demo-still { display: none; }

/* Escritorio: dos columnas con las FILAS compartidas (flujo por columnas, tres filas). */
@media (min-width: 901px) {
  .demo-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-auto-flow: column; gap: 26px; }
}

/* Utilidades que reemplazan los `style=""` en línea: con la CSP estricta de la configuración de
   despliegue (`style-src 'self'`) los atributos style quedan bloqueados. */
.tight { padding-top: 0; }
.card-note { margin-top: 25px; }
.subnote { margin-top: 8px; }
.no-top { margin-top: 0; }
.submit-gap { margin-top: 18px; }

.offer { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.offer-panel { padding: 34px; border-radius: 28px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow); }
.offer-panel h3 { font-size: 1.6rem; margin: 0 0 8px; }
.offer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; margin: 24px 0; list-style: none; }
.offer-list li { padding: 12px; border-radius: 12px; background: #f6f9fc; color: #334154; font-weight: 700; }
.fine { color: var(--muted); font-size: .82rem; }

.faq { max-width: 820px; margin-inline: auto; }
details { border-bottom: 1px solid var(--line); padding: 20px 0; }
summary { cursor: pointer; font-weight: 850; font-size: 1.03rem; }
details p { color: var(--muted); margin-bottom: 0; }
.cta-band { padding: 52px; border-radius: 32px; background: linear-gradient(135deg, var(--blue), #084899); color: white; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta-band h2 { max-width: 690px; margin: 0; }
.cta-band .button { background: white; color: var(--blue); box-shadow: none; white-space: nowrap; }
footer { padding: 38px 0; border-top: 1px solid var(--line); color: var(--muted); }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; align-items: center; }

/* Partner page */
.partner-nav { background: white; }
.partner-lockup { display: flex; align-items: center; gap: 12px; color: var(--muted); font-weight: 750; }
.partner-logo { padding: 8px 12px; border-radius: 10px; color: #6a4028; background: #efe4dc; font-family: Georgia, serif; font-weight: 800; }
.benefit-hero { padding: 74px 0 68px; background: linear-gradient(125deg, #071a33 0%, #102e51 56%, #124e58 100%); color: white; }
.benefit-hero .hero-grid { grid-template-columns: 1.08fr .92fr; }
.benefit-hero h1 { font-size: clamp(2.7rem, 5vw, 4.7rem); }
.benefit-hero h1 span { color: #80f2e6; }
.benefit-hero .hero-copy { color: #c3d0df; }
.benefit-tag { display: inline-flex; gap: 10px; align-items: center; padding: 8px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; background: rgba(255,255,255,.08); font-weight: 800; font-size: .85rem; }
.benefit-card { color: var(--ink); background: white; padding: 30px; border-radius: 28px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.benefit-card .days { display: flex; align-items: end; gap: 10px; margin: 10px 0 20px; }
.benefit-card .days strong { font-size: 4.5rem; line-height: .85; letter-spacing: -.07em; color: var(--blue); }
.benefit-card .days span { color: var(--muted); font-weight: 800; }
.mini-list { list-style: none; margin: 20px 0 25px; padding: 0; display: grid; gap: 10px; }
.mini-list li { display: flex; gap: 9px; align-items: start; color: #3f4d5e; font-weight: 650; }
.benefit-strip { display: grid; grid-template-columns: repeat(3,1fr); background: white; border: 1px solid var(--line); border-radius: 20px; margin-top: -30px; position: relative; z-index: 2; box-shadow: 0 15px 40px rgba(7,26,51,.1); }
.benefit-strip div { padding: 22px; text-align: center; font-weight: 800; }
.benefit-strip div + div { border-left: 1px solid var(--line); }
.activation { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: start; }
.form-card { padding: 30px; border-radius: 26px; border: 1px solid var(--line); background: white; box-shadow: var(--shadow); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
label { font-size: .86rem; font-weight: 800; color: #3a485a; }
input, select, textarea { width: 100%; border: 1px solid #ccd6e2; border-radius: 12px; background: #fbfcfe; padding: 12px 13px; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(19,104,232,.14); border-color: var(--blue); }
.form-note { margin: 12px 0 0; color: var(--muted); font-size: .8rem; }
.form-status { margin-top: 14px; padding: 13px 15px; border-radius: 12px; font-size: .88rem; font-weight: 700; line-height: 1.5; }
.form-status.success { background: #eaf9f6; color: #17665e; }
.form-status.error { background: #fdeceb; color: #96271d; }
.form-status a { color: inherit; text-decoration: underline; }

/* Validación y envío de los formularios: mismo patrón que el sitio oficial de Cardyram.
   Cada campo tiene su `.field-error` enlazado por aria-describedby, el contenedor se marca
   con data-invalid para pintar el borde, y el resultado del envío sale en `.form-status`. */
.hidden { display: none !important; }
.field-error { color: #b42318; font-size: .78rem; min-height: 1em; }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: #b42318; background: #fffbfa; }
form button[type="submit"][disabled] { opacity: .6; cursor: not-allowed; }
.field-consent { grid-column: 1 / -1; display: grid; gap: 10px; }
.consent-label { display: flex; align-items: flex-start; gap: 10px; font-size: .84rem; font-weight: 400; line-height: 1.5; color: #3a485a; cursor: pointer; }
/* La casilla no puede heredar el ancho completo ni el radio de los campos de texto. */
.field-consent input[type="checkbox"] { width: 16px; height: 16px; flex: none; margin: 2px 0 0; padding: 0; border-radius: 4px; accent-color: var(--blue); cursor: pointer; }
.consent-note { font-size: .75rem; color: var(--muted); line-height: 1.45; }
.field-consent[data-invalid="true"] .consent-label { color: #b42318; }
/* El detalle del ACI Core: lo que la prueba gratuita realmente enciende, en una línea. */
.core-line { max-width: 860px; margin: 26px auto 0; text-align: center; color: var(--muted); font-size: .95rem; }

@media (max-width: 900px) {
  .nav-links { display: none; position: absolute; top: 76px; left: 20px; right: 20px; padding: 18px; flex-direction: column; align-items: stretch; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .demo-shot + .demo-intro { margin-top: 14px; }
  .hero-grid, .benefit-hero .hero-grid, .offer, .activation { grid-template-columns: 1fr; }
  .hero { padding-top: 66px; }
  .product-stage { min-height: 460px; }
  .problem-grid, .feature-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .audience-grid { grid-template-columns: repeat(3, 1fr); }
  .float-one { right: 0; } .float-two { left: 0; }
}

@media (max-width: 620px) {
  .wrap { width: min(100% - 28px, 1160px); }
  .hero { padding: 52px 0 58px; }
  h1 { font-size: 3rem; }
  section { padding: 64px 0; }
  .problem-grid, .feature-grid, .steps-grid, .audience-grid, .offer-list, .field-grid, .benefit-strip { grid-template-columns: 1fr; }
  .benefit-strip div + div { border-left: 0; border-top: 1px solid var(--line); }
  .product-stage { min-height: 390px; }
  .app-shell { transform: none; }
  .float-card { display: none; }
  .cta-band { padding: 34px 25px; flex-direction: column; align-items: start; }
  .footer-inner { flex-direction: column; align-items: start; }
  /* `>` a propósito: sin él, `span:nth-child(2)` también alcanzaba el «ACI» de adentro de la marca
     (es el segundo hijo de `.brand`) y en el móvil el pie se quedaba sin nombre. */
  .partner-lockup > span:nth-child(2) { display: none; }
  /* La marca lleva la edición en cursiva y en el móvil el lockup ya no cabe con su texto: queda la
     píldora de Mediterránea (el «beneficio para clientes de…» lo dice la ceja del hero, dos líneas
     más abajo, así que no se pierde nada). */
  .partner-nav .partner-lockup span:first-child { display: none; }
  .brand small { display: none; }
  /* Un video de 800×380 en un teléfono no se lee: queda su cuadro fijo. */
  .demo-shot video { display: none; }
  .demo-shot .demo-still { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .demo-shot video { display: none; }
  .demo-shot .demo-still { display: block; }
}