/* Design Tokens - Auto-generated */
/* Do not edit directly - modify tokens.json instead */

/* === PRIMITIVES === */
:root {
  --primitive-color-crema-100: #F3EEE6;
  --primitive-color-crema-200: #EAE3D7;
  --primitive-color-tinta-100: #F0ECE6;
  --primitive-color-tinta-600: #5E574D;
  --primitive-color-tinta-900: #16130E;
  --primitive-color-naranja-100: #FFE0D6;
  --primitive-color-naranja-400: #FF8A00;
  --primitive-color-naranja-600: #E04510;
  --primitive-color-naranja-700: #B83C0B;
  --primitive-color-azul-100: #EEF2FF;
  --primitive-color-azul-400: #7B93FF;
  --primitive-color-azul-600: #2D4BE0;
  --primitive-color-amarillo-100: #FFF0D1;
  --primitive-color-amarillo-500: #FFC400;
  --primitive-color-amarillo-700: #8F5400;
  --primitive-color-verde-100: #DDF3E8;
  --primitive-color-verde-600: #1F9D6B;
  --primitive-color-verde-800: #14704C;
  --primitive-color-whatsapp-500: #25D366;
  --primitive-color-whatsapp-burbuja: #DCF8C6;
  --primitive-color-white: #FFFFFF;
  --primitive-font-sans: 'Archivo', system-ui, sans-serif;
  --primitive-font-serif: 'Instrument Serif', Georgia, serif;
  --primitive-space-1: 4px;
  --primitive-space-2: 8px;
  --primitive-space-3: 12px;
  --primitive-space-4: 16px;
  --primitive-space-5: 24px;
  --primitive-space-6: 32px;
  --primitive-space-7: 48px;
  --primitive-space-8: 64px;
  --primitive-space-9: 96px;
  --primitive-space-10: 128px;
  --primitive-radius-sm: 12px;
  --primitive-radius-md: 20px;
  --primitive-radius-lg: 28px;
  --primitive-radius-xl: 40px;
  --primitive-radius-pill: 999px;
  --primitive-duration-fast: 200ms;
  --primitive-duration-base: 400ms;
  --primitive-duration-slow: 900ms;
}

/* === SEMANTIC === */
:root {
  --color-bg: #F3EEE6;
  --color-bg-alt: #EAE3D7;
  --color-surface: #FFFFFF;
  --color-surface-dark: #16130E;
  --color-text: #16130E;
  --color-text-muted: #5E574D;
  --color-text-on-dark: #FFFFFF;
  --color-border: #16130E;
  --color-divider: #F0ECE6;
  --color-grid: rgba(22,19,14,.06);
  --color-primary: #E04510;
  --color-primary-text: #B83C0B;
  --color-accent: #2D4BE0;
  --color-highlight: #FF8A00;
  --color-success: #1F9D6B;
  --color-success-bg: #DDF3E8;
  --color-warning: #8F5400;
  --color-warning-bg: #FFF0D1;
  --color-error: #E04510;
  --color-error-bg: #FFE0D6;
  --color-info: #2D4BE0;
  --color-info-bg: #EEF2FF;
  --color-success-text: #14704C;
  --gradient-brand: linear-gradient(90deg, #FF8A00 0%, #E04510 45%, #2D4BE0 100%);
  --gradient-button: linear-gradient(90deg, #E04510 0%, #2D4BE0 100%);
  --gradient-on-dark: linear-gradient(90deg, #FF8A00 0%, #FF6A3D 40%, #7B93FF 100%);
  --gradient-dot: linear-gradient(135deg, #FFC400, #FF8A00 45%, #E04510 60%, #2D4BE0);
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --text-hero: clamp(48px, min(7.6vw, 12vh), 150px);
  --text-h2: clamp(40px, 6vw, 84px);
  --text-h3: clamp(26px, 3vw, 40px);
  --text-h4: 22px;
  --text-lead: clamp(17px, 1.5vw, 20px);
  --text-body: 16px;
  --text-small: 14px;
  --text-label: 13px;
  --text-number: clamp(40px, 6vw, 92px);
  --tracking-tight: -0.04em;
  --tracking-label: 0.14em;
  --leading-hero: 0.86;
  --leading-title: 0.92;
  --leading-body: 1.5;
  --layout-max: 1240px;
  --layout-gutter: clamp(16px, 4vw, 56px);
  --layout-section: clamp(72px, 10vw, 128px);
  --layout-grid-cell: 48px;
  --shadow-card: 0 2px 0 rgba(22,19,14,.06), 0 30px 60px -24px rgba(22,19,14,.30);
  --shadow-flat: 0 1px 0 rgba(22,19,14,.06);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

/* === COMPONENTS === */
:root {
  --button-primary-bg: linear-gradient(90deg, #E04510 0%, #2D4BE0 100%);
  --button-primary-text: #FFFFFF;
  --button-secondary-border: #16130E;
  --button-dark-bg: #16130E;
  --button-radius: 999px;
  --button-padding: 16px 26px;
  --button-border-width: 2.5px;
  --card-bg: #FFFFFF;
  --card-radius: 28px;
  --card-padding: 24px;
  --card-shadow: 0 2px 0 rgba(22,19,14,.06), 0 30px 60px -24px rgba(22,19,14,.30);
  --tag-border: #16130E;
  --tag-dot: #FF8A00;
  --tag-radius: 999px;
  --chat-client-bg: #F0ECE6;
  --chat-bot-bg: #DCF8C6;
  --chat-radius: 16px;
}
/* TeskAI — usa las variables de assets/design-tokens.css */
@font-face { font-family: 'Archivo'; src: url('assets/fonts/Archivo-latin-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('assets/fonts/InstrumentSerif-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --sombra: var(--shadow-card);
  --radio: var(--primitive-radius-lg);
  --gutter: var(--layout-gutter);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--font-body); color: var(--color-text); line-height: var(--leading-body);
  background-color: var(--color-bg);
  background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: var(--layout-grid-cell) var(--layout-grid-cell);
  overflow-x: hidden;
  caret-color: var(--color-primary);
  accent-color: var(--color-primary);
  scrollbar-color: var(--color-text) var(--color-bg-alt);
}
::selection { background: var(--color-primary); color: var(--color-text-on-dark); }
[hidden] { display: none !important; }
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 10px; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--color-text); color: var(--color-text-on-dark); padding: 10px 16px; border-radius: 999px; font-weight: 800; }
.saltar:focus { top: 16px; }

.contenedor { width: min(var(--layout-max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.degrade { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-top: .16em; }
.portada-titulo .degrade { margin-top: -.16em; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 10px; background: var(--color-surface-dark); color: var(--color-text-on-dark); border-radius: 999px; padding: 8px 18px 8px 9px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; text-decoration: none; }
.marca-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--gradient-dot); }
.marca b { background: var(--gradient-on-dark); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; font-size: 17px; padding: var(--button-padding); border-radius: var(--button-radius); text-decoration: none; white-space: nowrap; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-position .6s var(--ease-out), background-color .3s; }
.btn .ic { width: 20px; height: 20px; transition: transform .3s var(--ease-out); }
.btn:hover .ic { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn-chico { padding: 11px 20px; font-size: 15px; }
.btn-grande { padding: 19px 24px; font-size: clamp(16px, 4.2vw, 18px); width: 100%; white-space: normal; text-align: center; }
.btn-tinta { background: var(--button-dark-bg); color: var(--color-text-on-dark); }
.btn-tinta:hover { background: var(--color-primary); }
.btn-degrade { background: var(--button-primary-bg); background-size: 180% 100%; color: var(--button-primary-text); box-shadow: 0 14px 30px -12px rgba(224,69,16,.5); }
.btn-degrade:hover { background-position: 100% 0; box-shadow: 0 18px 36px -12px rgba(45,75,224,.5); }

/* Etiqueta */
.etiqueta { display: inline-flex; align-items: center; gap: 10px; border: var(--button-border-width) solid var(--tag-border); border-radius: var(--tag-radius); padding: 6px 14px; font-weight: 800; font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; background: var(--color-bg); white-space: nowrap; }
.etiqueta i { width: 9px; height: 9px; border-radius: 50%; background: var(--tag-dot); }

.titulo-seccion { font-weight: 900; font-size: var(--text-h2); line-height: var(--leading-title); letter-spacing: var(--tracking-tight); word-spacing: .1em; text-transform: uppercase; max-width: 16ch; text-wrap: balance; }
.titulo-seccion .degrade { padding-bottom: .06em; }

/* Navegación */
.nav { position: fixed; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%); width: min(var(--layout-max), 100% - 2 * var(--gutter)); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px; border-radius: 999px; transition: background-color .4s, box-shadow .4s; }
.nav.con-fondo { background: rgba(243,238,230,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(22,19,14,.08), 0 18px 40px -24px rgba(22,19,14,.35); }
.nav-links { display: flex; gap: 4px; }
.nav-links a { font-weight: 700; font-size: 15px; padding: 9px 14px; border-radius: 999px; text-decoration: none; transition: background-color .25s; }
.nav-links a:hover { background: rgba(22,19,14,.07); }

/* Portada */
.portada { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 4vh, 44px); padding: 110px var(--gutter) 48px; max-width: 1400px; margin-inline: auto; }
.portada-cabeza { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.portada-titulo { font-weight: 900; font-size: clamp(48px, min(7.6vw, 12vh), 150px); line-height: .86; letter-spacing: var(--tracking-tight); word-spacing: .06em; text-transform: uppercase; }
.portada-titulo .linea { display: block; overflow: hidden; padding: .16em 0 .05em; margin-top: -.16em; }
.portada-titulo .linea > span { display: inline-block; }
.portada-bajada { margin-top: 22px; font-size: var(--text-lead); font-weight: 500; color: var(--color-text-muted); max-width: 46ch; }
.portada-bajada b { color: var(--color-text); font-weight: 800; }
.portada-mascota { grid-column: 2; grid-row: 1 / span 2; align-self: end; height: clamp(276px, 39vh, 440px); width: auto; filter: drop-shadow(0 26px 24px rgba(22,19,14,.16)); }
.portada-cabeza > :not(.portada-mascota) { grid-column: 1; }

.rubros { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.rubro { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 20px 20px 18px; min-height: clamp(150px, 22vh, 196px); background: var(--color-surface); border: var(--button-border-width) solid var(--color-border); border-radius: var(--radio); text-decoration: none; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .35s, color .35s; }
.rubro .ic { width: 30px; height: 30px; stroke-width: 1.8; color: var(--color-primary); transition: color .35s, transform .45s var(--ease-bounce); }
.rubro-nombre { white-space: nowrap; font-weight: 900; font-size: clamp(20px, 1.95vw, 32px); line-height: 1; letter-spacing: -.035em; align-self: end; }
.rubro-dolor { font-size: 14px; font-weight: 600; color: var(--color-text-muted); line-height: 1.35; max-width: 26ch; transition: color .35s; }
.rubro-flecha { position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .rubro:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
  .rubro:hover .ic { transform: scale(1.12) rotate(-6deg); }
  .rubro:hover .rubro-flecha { transform: translateX(4px); }
  .caso:hover .caso-nombre { color: var(--color-primary); }
}
/* Al tocar un rubro se hunde apenas: respuesta inmediata, sobre todo en el celular */
.rubro:active { transform: scale(.98); transition-duration: 140ms; }
.rubro[aria-current="true"] { background: var(--color-surface-dark); color: var(--color-text-on-dark); box-shadow: var(--sombra); }
.rubro[aria-current="true"] .ic { color: #FF8A00; }
.rubro[aria-current="true"] .rubro-dolor { color: rgba(255,255,255,.72); }
.rubro[aria-current="true"] .rubro-flecha { transform: rotate(90deg); }

/* Rubro elegido */
.solucion { padding: clamp(40px, 5vw, 64px) 0 var(--layout-section); }
.solucion-cabeza { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.solucion .titulo-seccion { max-width: 18ch; font-size: clamp(36px, 5.2vw, 72px); }
.solucion-mascota { height: clamp(170px, 22vw, 280px); width: auto; margin-bottom: -28px; position: relative; z-index: 1; }

.tareas { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.tarea { display: flex; flex-direction: column; background: var(--color-bg); border: var(--button-border-width) solid var(--color-border); border-radius: var(--radio); padding: 24px; }
.tarea-num { display: flex; align-items: center; gap: 12px; }
.tarea-num .n { font-family: var(--font-display); font-size: 64px; line-height: .8; color: var(--color-primary); }
.tarea h3 { margin-top: 16px; font-weight: 900; font-size: clamp(26px, 2vw, 30px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.tarea h3 em { font-style: normal; color: var(--color-primary); background: linear-gradient(var(--color-text), var(--color-text)) no-repeat 0 56% / 100% .085em; padding: 0; }
.tarea > p { margin: 10px 0 18px; font-size: 16px; color: var(--color-text-muted); font-weight: 500; }

.tarjeta { margin-top: auto; background: var(--card-bg); border-radius: 20px; padding: 16px 18px; box-shadow: var(--sombra); }
.tarjeta-titulo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.tarjeta-titulo .ic-caja { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.tarjeta-titulo .ic-caja .ic { width: 17px; height: 17px; }
.burbuja { font-size: 14px; line-height: 1.35; padding: 10px 13px; border-radius: var(--chat-radius); margin-bottom: 8px; max-width: 88%; font-weight: 500; width: fit-content; }
.burbuja.cliente { background: var(--chat-client-bg); border-bottom-left-radius: 5px; }
.burbuja.bot { background: var(--chat-bot-bg); margin-left: auto; border-bottom-right-radius: 5px; }
.burbuja.adjunto { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-weight: 700; }
.burbuja.adjunto .ic { width: 16px; height: 16px; }
.burbuja b { font-weight: 800; }
.burbuja u { color: var(--color-accent); text-decoration-thickness: 1.5px; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1.5px solid var(--color-divider); font-size: 14px; font-weight: 600; }
.fila:first-of-type { border-top: 0; }
.tenue { color: var(--color-text-muted); }
.estado { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.ok { background: var(--color-success-bg); color: var(--color-success-text); } .warn { background: var(--color-warning-bg); color: var(--color-warning); } .mal { background: var(--color-error-bg); color: var(--primitive-color-naranja-700); }
.aviso { margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; background: var(--color-info-bg); color: var(--color-info); font-weight: 700; font-size: 13px; padding: 10px 12px; border-radius: 12px; }
.aviso .ic { width: 16px; height: 16px; margin-top: 1px; }
.total { display: flex; justify-content: space-between; margin-top: 4px; padding-top: 10px; border-top: 2.5px solid var(--color-border); font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; }
.fila span:last-child { font-variant-numeric: tabular-nums; }
.barra { height: 9px; border-radius: 99px; background: var(--color-divider); width: 110px; overflow: hidden; }
.barra i { display: block; height: 100%; width: var(--w); border-radius: 99px; transform-origin: left; }

.solucion-pie { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; padding: 20px 20px 20px 26px; background: var(--color-surface); border-radius: 999px; box-shadow: var(--shadow-flat); }
.solucion-caso { font-size: 16px; font-weight: 600; color: var(--color-text-muted); max-width: 70ch; }
.solucion-caso b { color: var(--color-text); font-weight: 800; }
.solucion-caso a { font-weight: 800; color: var(--color-text); }
.nota-ejemplo { margin-top: 12px; font-size: 13px; color: var(--color-text-muted); }

/* Así funciona */
.asi { padding: 0 0 var(--layout-section); }
.asi-grilla { display: grid; grid-template-columns: 1fr minmax(0, 560px); align-items: center; gap: clamp(28px, 5vw, 72px); }
.asi-texto { display: grid; gap: 22px; justify-items: start; }
.asi-texto p { font-size: var(--text-lead); font-weight: 500; color: var(--color-text-muted); max-width: 42ch; }
.asi-video { display: block; background-size: cover; width: 100%; height: auto; aspect-ratio: 1; border: var(--button-border-width) solid var(--color-border); border-radius: var(--radio); box-shadow: var(--sombra); background: var(--color-bg); }

/* Además: carteles, web, IA */
.ademas { padding: 0 0 var(--layout-section); }
.ademas-grilla { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.extra { min-width: 0; border-radius: var(--radio); padding: clamp(22px, 3vw, 36px); display: grid; gap: 14px; align-content: start; background: var(--color-surface); border: var(--button-border-width) solid var(--color-border); }
.extra h3 { font-weight: 900; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; letter-spacing: -.035em; }
.extra p { font-size: 16px; font-weight: 500; color: var(--color-text-muted); max-width: 52ch; }

.extra-carteles { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 28px; background: var(--color-surface-dark); color: var(--color-text-on-dark); border-color: var(--color-surface-dark); overflow: hidden; }
.extra-carteles .extra-texto { display: grid; gap: 16px; }
.extra-carteles p { color: rgba(255,255,255,.76); }
.extra-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.extra-chips li { border: 2px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 700; }
.abanico { position: relative; height: clamp(260px, 30vw, 380px); }
.abanico img { position: absolute; left: 50%; bottom: 0; width: 38%; max-width: 200px; height: auto; border-radius: 12px; box-shadow: 0 22px 40px -18px rgba(0,0,0,.7); transform-origin: 50% 100%; }
.abanico img:nth-child(1) { transform: translateX(-118%) rotate(-14deg); }
.abanico img:nth-child(2) { transform: translateX(-72%) rotate(-5deg) translateY(-10px); }
.abanico img:nth-child(3) { transform: translateX(-28%) rotate(5deg) translateY(-10px); }
.abanico img:nth-child(4) { transform: translateX(18%) rotate(14deg); }

.navegador { border: 2px solid var(--color-border); border-radius: 16px; overflow: hidden; background: var(--color-bg); }
.navegador-barra { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: var(--color-surface); border-bottom: 2px solid var(--color-border); }
.navegador-puntos { display: flex; gap: 5px; }
.navegador-puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-divider); }
.navegador-puntos i:first-child { background: var(--color-primary); }
.navegador-url { flex: 1; font-size: 13px; font-weight: 700; color: var(--color-text-muted); background: var(--color-bg); border-radius: 999px; padding: 4px 12px; }
.web-mini { display: grid; gap: 8px; justify-items: start; padding: 18px; }
.web-mini-logo { width: 28px; height: 28px; border-radius: 50%; background: var(--gradient-dot); }
.web-mini b { font-weight: 900; font-size: 22px; letter-spacing: -.03em; text-transform: uppercase; }
.web-mini-linea { width: 85%; height: 8px; border-radius: 4px; background: var(--color-divider); }
.web-mini-linea.corta { width: 55%; }
.web-mini-boton { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; background: #25D366; color: var(--color-text); font-size: 13px; font-weight: 800; padding: 7px 12px; border-radius: 999px; }
.web-mini-boton .ic { width: 14px; height: 14px; }

.flujo { list-style: none; display: grid; gap: 10px; counter-reset: paso; }
.flujo li { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--color-bg); font-size: 15px; font-weight: 700; }
.flujo li .ic { color: var(--color-primary); }
.flujo li + li::before { content: ""; position: absolute; left: 25px; top: -12px; width: 2px; height: 12px; background: var(--color-border); }

/* Cinta */
.cinta { background: var(--color-surface-dark); color: var(--color-text-on-dark); overflow: hidden; padding: 18px 0; transform: rotate(-1.6deg) scale(1.03); }
.cinta-pista { display: flex; align-items: center; gap: 28px; width: max-content; animation: cinta 34s linear infinite; font-weight: 900; font-size: clamp(22px, 3vw, 38px); text-transform: uppercase; letter-spacing: -.02em; }
.cinta-pista b { width: 12px; height: 12px; border-radius: 50%; background: var(--gradient-dot); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Casos */
.casos { padding: var(--layout-section) 0; }
.casos .titulo-seccion { max-width: 20ch; }
.casos-lista { margin-top: 44px; border-top: var(--button-border-width) solid var(--color-border); }
.caso { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 48px; align-items: center; padding: 34px 0; border-bottom: var(--button-border-width) solid var(--color-border); }
.caso-nombre { font-weight: 900; font-size: clamp(40px, 6.4vw, 96px); line-height: .9; letter-spacing: var(--tracking-tight); text-transform: uppercase; transition: color .4s; }
.caso-nombre span { color: var(--color-text-muted); }
.caso-cuerpo p { margin-top: 14px; font-size: 17px; font-weight: 500; color: var(--color-text-muted); max-width: 52ch; }

/* Por qué + servicios */
.porque { padding: var(--layout-section) 0; background-color: var(--color-bg-alt); background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size: var(--layout-grid-cell) var(--layout-grid-cell); border-block: var(--button-border-width) solid var(--color-border); }
.porque-grilla { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.porque-lado { position: sticky; top: 110px; }
.porque-mascota { margin-top: 30px; height: 320px; width: auto; }
.diferenciales { display: grid; gap: 0; }
.diferenciales div { padding: 22px 0; border-top: var(--button-border-width) solid var(--color-border); }
.diferenciales div:first-child { border-top: 0; padding-top: 0; }
.diferenciales dt { font-weight: 900; font-size: clamp(26px, 3vw, 40px); line-height: 1; letter-spacing: -.035em; }
.diferenciales dd { margin-top: 10px; font-size: 17px; font-weight: 500; color: var(--color-text-muted); max-width: 56ch; }
.servicios-titulo { margin-top: 56px; font-weight: 900; font-size: 22px; letter-spacing: -.02em; }
.servicios-lista { list-style: none; margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.servicios-lista li { display: flex; gap: 14px; padding: 16px 0; border-top: 1.5px solid rgba(22,19,14,.14); }
.servicios-lista .ic { color: var(--color-primary); margin-top: 2px; }
.servicios-lista span { font-size: 15px; font-weight: 500; color: var(--color-text-muted); }
.servicios-lista b { display: block; color: var(--color-text); font-weight: 800; font-size: 16px; margin-bottom: 2px; }

/* Proceso */
.proceso { padding: var(--layout-section) 0; }
.pasos { list-style: none; margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; counter-reset: paso; }
.pasos::before { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 3px; background: rgba(22,19,14,.12); }
.pasos::after { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 3px; background: var(--gradient-brand); transform-origin: left; transform: scaleX(var(--progreso, 1)); }
.paso { position: relative; padding-right: 26px; }
.paso-n { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--color-surface-dark); color: var(--color-text-on-dark); display: grid; place-items: center; font-family: var(--font-display); font-size: 28px; }
.paso h3 { margin-top: 20px; font-weight: 900; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; letter-spacing: -.03em; }
.paso p { margin-top: 10px; font-size: 16px; color: var(--color-text-muted); font-weight: 500; }

/* Demo */
.demo { padding: 0 var(--gutter) var(--layout-section); }
.demo-caja { position: relative; overflow: hidden; max-width: var(--layout-max); margin-inline: auto; background: var(--color-surface-dark); color: var(--color-text-on-dark); border-radius: var(--primitive-radius-xl); padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
.demo-texto { position: relative; display: flex; flex-direction: column; }
.demo h2 { font-weight: 900; font-size: clamp(38px, 5vw, 72px); line-height: .92; letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.demo h2 .degrade { background: var(--gradient-on-dark); -webkit-background-clip: text; background-clip: text; }
.demo-texto > p { margin-top: 18px; font-size: 18px; color: rgba(255,255,255,.78); font-weight: 500; max-width: 40ch; }
.demo-mascota { margin-top: auto; padding-top: 24px; height: 300px; width: auto; align-self: flex-start; }

.formulario { position: relative; background: var(--color-surface); color: var(--color-text); border-radius: var(--radio); padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; align-content: start; }
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; }
.formulario { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.campo label { font-weight: 800; font-size: 15px; }
.campo label span { font-weight: 600; color: var(--color-text-muted); }
.campo input, .campo select, .campo textarea { width: 100%; background: var(--color-bg); border: 2px solid rgba(22,19,14,.18); border-radius: 14px; padding: 13px 15px; font-size: 16px; font-weight: 500; transition: border-color .25s, box-shadow .25s, background-color .25s; }
.campo textarea { resize: vertical; min-height: 92px; }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2316130E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px; }
.campo input::placeholder, .campo textarea::placeholder { color: #6A6257; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: rgba(22,19,14,.4); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--color-text); background: var(--color-surface); box-shadow: 0 0 0 4px rgba(224,69,16,.18); }
.campo [aria-invalid="true"] { border-color: var(--color-primary); }
.error { font-size: 14px; font-weight: 700; color: var(--color-primary-text); }
.formulario-nota { font-size: 14px; color: var(--color-text-muted); font-weight: 500; text-align: center; }
.formulario-nota a { color: var(--color-text); font-weight: 700; }

/* FAQ */
.faq { padding: 0 0 var(--layout-section); }
.faq-grilla { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; }
.faq-lista { display: grid; gap: 12px; }
details { background: var(--color-surface); border-radius: 22px; padding: 4px 24px; box-shadow: var(--shadow-flat); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 800; font-size: 18px; }
summary::-webkit-details-marker { display: none; }
summary i { position: relative; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--color-bg); transition: transform .4s var(--ease-out), background-color .3s; }
summary i::before, summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; background: var(--color-text); border-radius: 2px; transform: translate(-50%, -50%); }
summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] summary i { transform: rotate(45deg); background: var(--color-highlight); }
details p { padding: 0 0 20px; color: var(--color-text-muted); font-size: 16px; font-weight: 500; max-width: 62ch; }

/* Pie */
.pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 30px var(--gutter) 40px; max-width: 1340px; margin-inline: auto; font-weight: 700; font-size: 14px; color: var(--color-text-muted); }
.pie a:not(.marca) { color: var(--color-text); }

/* Responsive */
@media (max-width: 1080px) {
  .tareas { grid-template-columns: 1fr 1fr; }
  .tareas .tarea:last-child { grid-column: span 2; }
  .pasos { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .pasos::before, .pasos::after { display: none; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .rubros { grid-template-columns: repeat(2, 1fr); }
  .rubro[data-rubro="otro"] { grid-column: 1 / -1; min-height: 0; }
  .asi-grilla { grid-template-columns: minmax(0, 1fr); }
  .ademas-grilla, .extra-carteles { grid-template-columns: minmax(0, 1fr); }
  .abanico { height: 250px; }
  .abanico img { width: 30%; }
  .abanico img:nth-child(1) { transform: translateX(-125%) rotate(-12deg); }
  .abanico img:nth-child(2) { transform: translateX(-75%) rotate(-4deg) translateY(-8px); }
  .abanico img:nth-child(3) { transform: translateX(-25%) rotate(4deg) translateY(-8px); }
  .abanico img:nth-child(4) { transform: translateX(25%) rotate(12deg); }
  .portada { min-height: 0; padding-top: 100px; }
  .portada-mascota { height: 172px; grid-row: 1; align-self: start; margin-top: -30px; }
  .solucion-mascota { height: clamp(110px, 28vw, 170px); margin-bottom: -18px; }
  .tareas { grid-template-columns: 1fr; }
  .tareas .tarea:last-child { grid-column: auto; }
  .solucion-pie { border-radius: var(--radio); padding: 20px; }
  .caso { grid-template-columns: 1fr; }
  .porque-grilla, .faq-grilla { grid-template-columns: 1fr; gap: 32px; }
  .porque-lado { position: static; }
  .porque-mascota { height: 150px; margin-top: 16px; }
  .servicios-lista { grid-template-columns: 1fr; }
  .demo-caja { grid-template-columns: minmax(0, 1fr); }
  .demo h2 { font-size: clamp(32px, 10vw, 56px); }
  .demo-mascota { height: 170px; margin-top: 8px; padding-top: 0; align-self: flex-end; }
}
@media (max-width: 560px) {
  .portada-cabeza { grid-template-columns: 1fr; }
  .portada-mascota { position: absolute; grid-column: auto; grid-row: auto; max-width: none; right: -6px; top: 6px; height: 124px; }
  .portada-titulo { font-size: clamp(46px, 14vw, 64px); }
  .rubros { gap: 10px; }
  .rubro { min-height: 150px; padding: 16px 14px; }
  .rubro-dolor { font-size: 13px; }
  .rubro-flecha { top: 14px; right: 12px; width: 20px; height: 20px; }
  .pasos { grid-template-columns: 1fr; }
  .solucion-cabeza { grid-template-columns: 1fr; position: relative; }
  .solucion-mascota { position: absolute; right: 10px; bottom: -126px; height: 112px; margin: 0; z-index: 2; }
  .pie { flex-direction: column; align-items: flex-start; }
}

/* Errores y campo "Otro": entran suave en vez de aparecer de golpe */
.error, #campo-otro { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), display 180ms allow-discrete; }
@starting-style { .error, #campo-otro { opacity: 0; transform: translateY(-4px); } }

/* Preguntas: la respuesta se despliega (navegadores que lo soportan; el resto abre directo) */
:root { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: hidden; transition: block-size 250ms var(--ease-out), content-visibility 250ms allow-discrete; }
details[open]::details-content { block-size: auto; }

/* "Escribiendo…" del bot en las tarjetas de chat */
.tarjeta { position: relative; }
.escribiendo { position: absolute; right: 18px; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: var(--chat-radius); border-bottom-right-radius: 5px; background: var(--chat-bot-bg); visibility: hidden; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); animation: punto 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Movimiento reducido: menos y más suave, no cero. Se quitan los desplazamientos; quedan los fundidos y colores. */
@media (prefers-reduced-motion: reduce) {
  .cinta-pista, .escribiendo i { animation: none; }
  .rubro:hover, .rubro:active, .btn:active, .rubro:hover .ic, .rubro:hover .rubro-flecha, .btn:hover .ic { transform: none; }
  .error, #campo-otro { transform: none; }
  details::details-content { transition: content-visibility 0s allow-discrete; }
}