/* product.css — shared template for the "Producto" landing pages
   (Cierre Mensual, Presupuesto & Forecast, Rentabilidad, Reportes Ad-hoc,
   Teramot MCP, Gobernanza y Trazabilidad). Same role as industry.css for
   the 6 industry pages. Reuses landing.css tokens/primitives (.tm-btn,
   .tm-nav-*, .tm-footer-*) plus the shared hero-nav.css (.tm-hero-gradient,
   .tm-hero-nav-*, .tm-hero-btn-*, tmHomeHero* keyframes — loaded by every
   page that uses this file) — the nav and its buttons are NOT redefined
   here, on purpose: that duplication is exactly what broke the nav on
   cierre-mensual the first time.

   Typography, base color, card styling and motion are deliberately
   unified with home.css/home.jsx, not with the original 2026-09 redesign
   handoff's own (slightly different) card/color spec — home is the
   reference for every page in this family, by explicit instruction, even
   where the handoff's `.dc.html` prototypes show something else (e.g. the
   handoff's bordered/shadowless cards and red problem-icons were dropped
   in favor of home's shadow cards and blue icons).

   Prefixed tm-prod-* to avoid colliding with tm-home-* or tm-ind-*. */

.tm-prod {
  font-family: 'Google Sans Flex', Manrope, Inter, system-ui, sans-serif;
  background: #FAFAF7;
  color: #0B0F14;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.tm-prod h1, .tm-prod h2, .tm-prod h3, .tm-prod h4, .tm-prod h5 { margin: 0; font-family: inherit; }
.tm-prod p { margin: 0; }
.tm-prod a { color: #253DE5; text-decoration: none; }
.tm-prod a:hover { color: #1D2FB0; }
@media (prefers-reduced-motion: reduce) { .tm-prod * { animation: none !important; } }

/* Scroll reveal — same generic .rv/.rv-in idiom as industry.css (agro.jsx
   etc.), unscoped here since product.css is the only stylesheet that
   needs it on these pages (no .tm-ind-* page loads product.css). */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 640ms cubic-bezier(.2,0,0,1), transform 640ms cubic-bezier(.2,0,0,1); }
.rv.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

.tm-prod-hero-grid {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px 40px 0;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}
.tm-prod-hero-copy { position: relative; z-index: 2; padding-bottom: 88px; max-width: 620px; }
.tm-prod-hero-eyebrow { animation: tmHomeHeroRise .7s cubic-bezier(0.2,0,0,1) both; margin: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.72); }
.tm-prod-hero-copy h1 { animation: tmHomeHeroRise .7s cubic-bezier(0.2,0,0,1) both; margin-top: 18px; font-size: clamp(32px,3.4vw,46px); line-height: 1.12; font-weight: 600; letter-spacing: -.035em; color: #fff; text-wrap: pretty; }
.tm-prod-hero-copy h1 span { color: #91DFC8; }
.tm-prod-hero-sub { animation: tmHomeHeroRise .7s cubic-bezier(0.2,0,0,1) .1s both; margin-top: 22px; max-width: 520px; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.82); }
.tm-prod-hero-actions { animation: tmHomeHeroRise .7s cubic-bezier(0.2,0,0,1) .2s both; display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.tm-prod-hero-art { position: relative; align-self: end; width: 100%; max-width: 520px; margin: 0 0 72px auto; }
.tm-prod-hero-art-glow { animation: tmHomeHeroFade 1s cubic-bezier(0.2,0,0,1) .15s both; position: absolute; right: -48px; top: -40px; width: 340px; height: 300px; z-index: 0; background: rgba(255,255,255,.07); border-radius: 44px; pointer-events: none; }
.tm-prod-hero-mockup { animation: tmHomeHeroPop .8s cubic-bezier(0.2,0,0,1) .2s both; }

@media (max-width: 1000px) {
  .tm-prod-hero-grid { grid-template-columns: 1fr; }
  .tm-prod-hero-copy { padding-bottom: 48px; }
  /* Conserva el margen inferior: la tarjeta flotante del mockup se
     posiciona en bottom:-24 y .tm-hero-gradient recorta con
     overflow:hidden, así que sin este margen la tarjeta queda cortada
     en tablet. */
  .tm-prod-hero-art { margin: 0 auto 72px; }
}

/* ── Section shell ─────────────────────────────────────────── */
.tm-prod-section { padding: 96px 0; }
.tm-prod-section-paper { background: #FAFAF7; }
.tm-prod-section-white { background: #fff; border-top: 1px solid #E5E7EB; }
.tm-prod-section-wash { background: #EFF1FE; }
.tm-prod-head { text-align: center; max-width: 860px; margin: 0 auto 44px; }
.tm-prod-head h2 { font-size: clamp(26px,2.6vw,34px); line-height: 1.18; font-weight: 600; letter-spacing: -.035em; color: #1C2536; text-wrap: pretty; }
.tm-prod-head p { margin-top: 16px; font-size: 15.5px; line-height: 1.6; color: #4B5563; }
@media (max-width: 900px) { .tm-prod-section { padding: 64px 0; } }

/* ── Problem cards — same recipe as .tm-home-card (home.css) ─── */
.tm-prod-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 16px; }
.tm-prod-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 2px 0 rgba(11,27,43,.04), 0 8px 24px 0 rgba(11,27,43,.06);
  transition: box-shadow 250ms cubic-bezier(0.22,1,0.36,1);
}
.tm-prod-card:hover { box-shadow: 0 2px 4px 0 rgba(11,27,43,.06), 0 12px 32px 0 rgba(11,27,43,.09); }
.tm-prod-card-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(37,61,229,.07); display: flex; align-items: center; justify-content: center; color: #253DE5; margin-bottom: 14px; }
.tm-prod-card-icon i { font-size: 20px; }
.tm-prod-card h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; color: #1C2536; }
.tm-prod-card p { font-size: 14.5px; color: #4b5563; line-height: 1.55; }

/* ── Split section (diagram + copy) ────────────────────────── */
.tm-prod-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.tm-prod-split-copy p { font-size: 15.5px; line-height: 1.7; color: #374151; }
.tm-prod-checklist { display: grid; gap: 12px; margin-top: 26px; }
.tm-prod-checklist-item { display: flex; gap: 11px; align-items: baseline; font-size: 15px; line-height: 1.5; color: #374151; }
.tm-prod-checklist-item i { color: #253DE5; font-size: 14px; flex: none; transform: translateY(2px); }
@media (max-width: 1000px) { .tm-prod-split { grid-template-columns: 1fr; gap: 36px; } }

/* ── Testimonials ──────────────────────────────────────────── */
.tm-prod-testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 24px; align-items: stretch; }
.tm-prod-testi { display: flex; flex-direction: column; gap: 20px; border-radius: 12px; padding: 32px; }
.tm-prod-testi-before { background: #FAFAF7; border: 1px solid #E5E7EB; }
.tm-prod-testi-after { background: #fff; border: 1px solid rgba(37,61,229,.24); }
.tm-prod-testi-kicker { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.tm-prod-testi-before .tm-prod-testi-kicker { color: #6b7280; }
.tm-prod-testi-after .tm-prod-testi-kicker { color: #253DE5; }
.tm-prod-testi blockquote { margin: 0; font-size: 17.5px; line-height: 1.55; color: #1C2536; letter-spacing: -.01em; text-wrap: pretty; }
.tm-prod-testi-sig { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tm-prod-testi-avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; flex-shrink: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.tm-prod-testi-before .tm-prod-testi-avatar { background: #E6EAF0; color: #4B5563; }
.tm-prod-testi-after .tm-prod-testi-avatar { background: rgba(37,61,229,.08); color: #253DE5; font-size: 18px; }
/* El avatar traía font-size 13, medida pensada para iniciales. Ahora que
   los casos van anonimizados lleva icono, que a ese tamaño se ve chico. */
.tm-prod-testi-avatar i { font-size: 18px; }
.tm-prod-testi-sig span { font-size: 14px; color: #4B5563; }
.tm-prod-testi-sig b { color: #1C2536; font-weight: 600; }

/* ── Integrations logo strip ───────────────────────────────── */
.tm-prod-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 32px 24px; align-items: center; justify-items: center; margin-top: 52px; }
.tm-prod-logos img { max-width: 100%; object-fit: contain; display: block; filter: grayscale(1) opacity(.58); transition: filter 260ms cubic-bezier(0.16,1,0.3,1); }
.tm-prod-logos img:hover { filter: grayscale(0) opacity(1); }

/* `.tm-prod a` (0,1,1) le gana a `.tm-btn-primary` (0,1,0) de
   landing.css, así que todo botón primario dentro de .tm-prod quedaba
   con texto azul sobre fondo azul — invisible, contraste 1:1. Se veía
   en los 4 botones de tier de /precios. El drawer ya tenía su propio
   parche puntual (`.tm-drawer .tm-btn-primary` en hero-nav.css), que es
   por lo que ese botón sí se veía y el bug pasó desapercibido.
   Esta regla es (0,2,1) y cubre el caso general. */
.tm-prod a.tm-btn-primary { color: #fff; }

/* Fila de links a las otras páginas por ERP. Existe por linkeo interno:
   cada página de ERP tenía un solo link entrante (el hub /integraciones),
   que es poco para que el crawler les dé peso. Con esto cada una recibe
   además el de sus cuatro hermanas. */
.tm-prod-erp-siblings { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 36px; }
.tm-prod-erp-siblings-label { font-size: 13px; font-weight: 500; color: #6B7280; }
.tm-prod-erp-siblings a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: 9999px;
  border: 1px solid rgba(11,15,20,.1); background: #fff;
  font-size: 13.5px; font-weight: 500; color: #374151; text-decoration: none;
  transition: border-color 200ms, color 200ms, box-shadow 200ms;
}
.tm-prod-erp-siblings a:hover {
  border-color: rgba(37,61,229,.32); color: #253DE5;
  box-shadow: 0 2px 4px rgba(11,15,20,.05), 0 1px 2px rgba(11,15,20,.03);
}

/* ── FAQ (same pattern as home.jsx's FaqSection, generalized) ─ */
.tm-prod-faq-grid { display: grid; grid-template-columns: 400px 1fr; gap: 80px; align-items: start; }
.tm-prod-faq-aside { position: sticky; top: 32px; }
.tm-prod-faq-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #253DE5; padding: 4px 10px; border-radius: 9999px; background: rgba(37,61,229,.07); border: 1px solid rgba(37,61,229,.16); }
.tm-prod-faq-eyebrow-dot { width: 5px; height: 5px; border-radius: 9999px; background: #253DE5; display: block; }
.tm-prod-faq-aside h2 { margin-top: 16px; font-size: clamp(24px,2.2vw,30px); line-height: 1.14; font-weight: 600; letter-spacing: -.035em; color: #1C2536; }
.tm-prod-faq-aside h2 span { color: #253DE5; }
.tm-prod-faq-list { display: flex; flex-direction: column; border-top: 1px solid #E6EAF0; }
.tm-prod-faq-item { border-bottom: 1px solid #E6EAF0; }
.tm-prod-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 4px; cursor: pointer; }
.tm-prod-faq-item summary::-webkit-details-marker { display: none; }
.tm-prod-faq-q { font-size: 17px; font-weight: 500; color: #1C2536; letter-spacing: -.005em; }
.tm-prod-faq-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9999px; border: 1px solid #E6EAF0; background: #F7F9FC; color: #4b5563; display: flex; align-items: center; justify-content: center; transition: background 300ms cubic-bezier(0.22,1,0.36,1), border-color 300ms cubic-bezier(0.22,1,0.36,1), color 300ms cubic-bezier(0.22,1,0.36,1); }
.tm-prod-faq-icon i { transition: transform 300ms cubic-bezier(0.22,1,0.36,1); }
.tm-prod-faq-item[open] .tm-prod-faq-icon { background: rgba(37,61,229,.08); border-color: #253DE5; color: #253DE5; }
.tm-prod-faq-item[open] .tm-prod-faq-icon i { transform: rotate(45deg); }
.tm-prod-faq-a { padding: 0 4px 24px; font-size: 15px; color: #334155; line-height: 1.6; max-width: 680px; }
.tm-prod-faq-a b { color: #1C2536; font-weight: 600; }
@media (max-width: 900px) {
  .tm-prod-faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .tm-prod-faq-aside { position: static; }
  .tm-prod-faq-q { font-size: 15.5px; }
}

/* ── CTA final (same block as home.jsx's CtaFinalSection) ──── */
.tm-prod-cta { background: #253DE5; padding: 96px 0; text-align: center; }
.tm-prod-cta-inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.tm-prod-cta-kicker { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #91DFC8; }
.tm-prod-cta h2 { margin-top: 18px; font-size: clamp(28px,2.8vw,38px); line-height: 1.16; font-weight: 600; letter-spacing: -.035em; color: #fff; text-wrap: pretty; }
.tm-prod-cta-sub { margin-top: 18px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82); }
.tm-prod-cta-actions { display: flex; gap: 16px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.tm-prod-cta-fine { margin-top: 32px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.72); }

/* ── Tarjetas de prensa (prensa.jsx) ────────────────────────── */
/* La portada sale del OG image de cada nota, con proporciones muy
   distintas segun el medio: de ahi el alto fijo + object-fit cover. */
.tm-prensa-card-media { position: relative; height: 168px; background: #F1F4F9; overflow: hidden; }
.tm-prensa-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-prensa-card-nophoto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; background: linear-gradient(135deg, #EEF1FB 0%, #E3E8F7 100%); }
.tm-prensa-card-nophoto span { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: #6B7280; }
.tm-prensa-card-skeleton { width: 100%; height: 100%; background: linear-gradient(90deg, #EEF1F6 25%, #E4E9F1 50%, #EEF1F6 75%); background-size: 200% 100%; animation: tm-prensa-shimmer 1.4s ease-in-out infinite; }
@keyframes tm-prensa-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.tm-prod-card.tm-prensa-card h3 { transition: color 200ms cubic-bezier(0.22,1,0.36,1); }
.tm-prod-card.tm-prensa-card:hover h3 { color: #253DE5; }

.tm-prensa-row { display: flex; flex-direction: column; background: #fff; border: 1px solid #E6EAF0; border-radius: 12px; padding: 22px; text-decoration: none; transition: border-color 200ms cubic-bezier(0.22,1,0.36,1), box-shadow 200ms cubic-bezier(0.22,1,0.36,1), transform 200ms cubic-bezier(0.22,1,0.36,1); }
.tm-prensa-row:hover { border-color: #C9D2E8; box-shadow: 0 6px 20px rgba(16,24,40,.07); transform: translateY(-2px); }
.tm-prensa-row h3 { transition: color 200ms cubic-bezier(0.22,1,0.36,1); }
.tm-prensa-row:hover h3 { color: #253DE5; }
@media (prefers-reduced-motion: reduce) {
  .tm-prensa-row:hover { transform: none; }
  .tm-prensa-card-skeleton { animation: none; }
}