/* ============================================================================
   ROIthink · dirección visual v2 (Agente 1, CEO, 16-10-2026)
   Referencias estudiadas: HubSpot, Monday.com, GoHighLevel. Lo que tienen en común
   y adoptamos: fondo plano, mucho aire, una tipografía sans de producto, bordes finos
   en vez de sombras, el producto real como protagonista, y UN color de acción.
   Lo nuestro: negro ROIthink + amarillo #FFD700 solo para la acción, esquinas casi
   rectas (6 px) que se leen como herramienta seria, español primero.
   Regla: si un efecto no explica nada, se quita. Va DESPUÉS de _site.css/_home.css.
   ========================================================================= */
:root{
  --r: 6px;            /* única curvatura del sistema */
  --y: #FFD700;        /* acción */
  --y-hover: #F2CC00;
  --edge: rgba(10,10,10,.12);
}

/* Tipografía única: Inter. Titulares compactos y pesados, como un producto de software. */
body, .btn, input, textarea, select { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3, .price, .hero h1, .sec-head h2 {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.06;
}
h3 { letter-spacing: -0.02em; line-height: 1.2; }

/* Sin sombras ni brillos decorativos. Excepción: el marco dibujado de los teléfonos. */
*:not(.r-phone):not(.shot-phone):not(.r-phone *):not(.shot-phone *) { box-shadow: none !important; text-shadow: none !important; }
.hero.dark, .final.dark, .dark { background-image: none !important; background-color: #0A0A0A !important; }
.hero.dark::before, .hero.dark::after, .final.dark::before, .final.dark::after { display: none !important; }

/* Una sola curvatura. */
.btn, .plan, .card, .feat, .callout, .steps li, .badge, .table-wrap, .shot, .shot-card, .wide-shot,
.hero-desk, .ai-shot, .r-browser, .ind-feat, .ind-photo, .rp, .rp-us, .impl-adv, .nav-dd-menu,
.call-btn, .proof-in, .wf-panel, .wf-node, .soon, .ttp, details, figure, input, textarea, select,
.hero img, .sec img:not([class*="logo"]):not([width="44"]) { border-radius: var(--r) !important; }
.badge, .chips > * { border-radius: 4px !important; }

/* Bordes finos en lugar de sombras: tarjetas, planes, capturas. */
.plan, .card, .feat, .ind-feat, .rp, .callout, .impl-adv, .shot-card, .table-wrap { border: 1px solid var(--edge) !important; }
.plan.hi { border: 2px solid #0A0A0A !important; }
.r-browser, .hero-desk, .wide-shot, .shot:not(.shot-phone) { border: 1px solid var(--edge) !important; }
.dark .card, .dark .feat, .dark .shot-card { border-color: rgba(255,255,255,.14) !important; }

/* Botones: el amarillo es SOLO acción. Sólidos, sin relieve, área táctil de 48 px. */
.btn { font-weight: 700; min-height: 48px; padding: 13px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .15s ease, border-color .15s ease; transform: none !important; }
.btn-y { background: var(--y) !important; color: #0A0A0A !important; border: 1px solid var(--y) !important; }
.btn-y:hover { background: var(--y-hover) !important; border-color: var(--y-hover) !important; }
.btn-line { background: transparent; border: 1px solid currentColor !important; }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--y); outline-offset: 2px; }

/* Aire de software: secciones más espaciadas y ancho de lectura controlado. */
.sec { padding-top: 96px; padding-bottom: 96px; }
.sec-head p, .sec .sub, .lead { max-width: 640px; }
@media (max-width: 760px) {
  .sec { padding-top: 64px; padding-bottom: 64px; }
  h1 { font-size: clamp(34px, 9vw, 44px) !important; }
  .btn { width: 100%; }
  .cta-row { flex-direction: column; align-items: stretch; }
  html, body { overflow-x: hidden; }
}

/* Fotos del hero con tarjetas encima (todas las industrias): en el teléfono las tarjetas van DEBAJO de la
   foto, lado a lado, nunca sobre una cara (Christian, 16-10: restaurantes y limpieza). */
@media (max-width: 960px) {
  .r-scene { display: grid !important; grid-template-columns: minmax(0,1fr) 118px; gap: 12px; align-items: end; padding-bottom: 0 !important; }
  .r-scene > img, .r-scene .r-photo { grid-column: 1 / -1; width: 100%; height: auto; }
  .r-scene .r-ticket, .r-scene .r-phone, .r-scene [class*="r-card"] { position: static !important; width: auto !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important; }
}

/* Tarjetas sobre las fotos del hero: misma curvatura y borde fino. */
.r-scene > *:not(.r-phone), .r-scene .r-ticket { border-radius: var(--r) !important; border: 1px solid var(--edge); }
.r-scene .r-photo, .r-scene > img { border-radius: var(--r) !important; }

/* «Lo que te quitamos de encima» (Christian, 16-10: «muy básico, nada agradable»): de tarjetas con texto
   tachado en rojo a una comparación limpia, fila por fila: Hoy ✕ (gris) → Con ROIthink ✓ (negro). */
.quit { display: block !important; border-top: 1px solid var(--edge); margin-top: 32px; }
.quit .feat { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 48px; row-gap: 6px;
  padding: 28px 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--edge) !important; border-radius: 0 !important; }
.quit .feat::before, .quit .feat::after, .quit .was::before, .quit .was::after, .quit h3::after { display: none !important; content: none !important; }
.quit .was { grid-row: 1 / span 2; margin: 0 !important; padding: 0 0 0 30px !important; position: relative; background: none !important; border: 0 !important;
  text-decoration: none !important; color: rgba(10,10,10,.55) !important; font-size: 15px; font-weight: 500; line-height: 1.45; }
.quit .was::before { display: flex !important; content: "✕" !important; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; align-items: center; justify-content: center;
  border: 1px solid rgba(10,10,10,.2); border-radius: 4px; font-size: 11px; color: rgba(10,10,10,.5); }
.quit h3 { grid-column: 2; margin: 0 !important; display: flex; gap: 12px; align-items: flex-start; font-size: 20px; }
.quit h3::before { content: "✓"; flex: none; width: 22px; height: 22px; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--y); color: #0A0A0A; border-radius: 4px; font-size: 13px; font-weight: 800; }
.quit .feat > p:not(.was) { grid-column: 2; margin: 0 0 0 34px !important; color: rgba(10,10,10,.72); }
@media (max-width: 760px) {
  .quit .feat { grid-template-columns: 1fr; row-gap: 10px; padding: 22px 0 !important; }
  .quit .was { grid-row: auto; }
  .quit h3, .quit .feat > p:not(.was) { grid-column: 1; }
  .quit h3 { font-size: 18px; }
}
.quit .feat h3::before { content: "✓" !important; display: inline-flex !important; position: static !important; width: 22px !important; height: 22px !important;
  margin: 2px 0 0 0 !important; background: var(--y) !important; color: #0A0A0A !important; border-radius: 4px !important; font-size: 13px !important; align-items: center; justify-content: center; }
.ready-note, .sec-spot .card, .callout { border-radius: var(--r) !important; }