/* ==========================================================================
   RŌNIN — HOME: composición sobre el sistema visual reutilizable
   ==========================================================================
   Esta hoja NO es un componente reutilizable: es la composición específica
   de index.html sobre css/ronin-tokens.css + css/ronin-components.css.

   Estrategia de convivencia (ver informe de migración para el detalle):
   - Donde la estructura HTML no cambia (nav, filas de "¿Te suena?", proof
     strip, mid-cta, portfolio, equipo, principio, price-teaser, contacto,
     footer), los elementos mantienen su clase ANTIGUA (de css/styles.css,
     sin guard, sigue gobernando <1024px tal cual) y además reciben una
     clase nueva "ronin-*" o, si no existe equivalente, un pequeño ajuste
     aquí mismo — así el móvil actual no cambia en absoluto.
   - Donde la estructura HTML sí cambia porque el MASTER exige un mecanismo
     distinto (hero de 5 paneles con parallax, carrusel de servicios,
     acordeón de proceso/FAQ), no hay equivalente de refresco: por debajo
     de 1024px esas secciones quedan con el HTML base sin decorar (legible,
     funcional, sin JS roto) hasta que se aborde el rediseño responsive.

   Todo el archivo va envuelto en @media (min-width:1024px), igual que
   css/ronin-components.css.

   Nota (migración de Servicios): el header/nav/footer compartidos con
   servicios.html se centralizaron en css/ronin-components.css (bloque
   "HEADER / NAV / FOOTER — markup REAL compartido"), para no duplicarlos
   en dos hojas de página. Aquí ya no aparecen.
   ========================================================================== */

@media (min-width: 1024px) {

/* Header/nav/footer compartidos con Servicios: ver css/ronin-components.css
   ("HEADER / NAV / FOOTER — markup REAL compartido"). No se duplican aquí. */

/* ── Hero ──────────────────────────────────────────────────────────────
   .hero + .ronin-hero conviven (ver informe: padding-block/display/min-
   height los pone ronin-hero). Aquí solo se resuelve el layout de
   hero-actions, que en el sitio real es una fila flex de 2 botones y en
   el MASTER es un único botón con margin-top — sin este ajuste cada botón
   heredaría su propio margin-top de `.ronin-hero-content .ronin-btn`. */
.ronin-hero .hero-actions{
  margin-top: 34px;
  justify-content: center;
}
.ronin-hero .hero-actions .ronin-btn{ margin-top: 0; }
.ronin-hero .hero-note{
  margin-top: 22px;
  color: var(--ronin-text-ghost);
  font-family: var(--ronin-font-mono);
  font-size: 12px;
}
.ronin-hero .h1-l1,.ronin-hero .h1-l2{ display:block; }

/* Posiciones de los 5 paneles del hero — mismas proporciones que el
   MASTER (prototype-home-notfound404/index.html .hp-1..hp-5), con UNA
   diferencia real y justificada: el copy real de RŌNIN es más largo que
   el del prototipo ("RŌNIN / Digital Systems", muy corto), así que el
   kicker real ocupa mucho más ancho del hero-content. Con las posiciones
   literales del MASTER, el panel 01 (Captación) quedaba detrás del
   kicker y su barra roja decorativa se veía como un subrayado accidental
   sobre el texto. Se ajustan solo left/width/opacity del panel 01 (menos
   ancho, más a la derecha, algo más tenue) para despejar esa franja de
   texto; el resto de paneles conservan las posiciones del MASTER. No
   pueden ir inline: la CSP de esta página es style-src 'self'. */
.hero-panel-1{ top:2%;  left:64%; width:26%; max-width:340px; opacity:.4; }
.hero-panel-2{ top:16%; left:-9%; width:30%; max-width:380px; opacity:.42; }
.hero-panel-3{ bottom:8%; left:5%; width:29%; max-width:360px; opacity:.46; }
.hero-panel-4{ bottom:10%; right:-7%; width:33%; max-width:420px; opacity:.44; }
.hero-panel-5{ top:2%; left:22%; width:25%; max-width:320px; opacity:.5; }

.bar-h-35{ height:35%; }
.bar-h-45{ height:45%; }
.bar-h-55{ height:55%; }
.bar-h-62{ height:62%; }
.bar-h-80{ height:80%; }

/* ── Secciones: ritmo y cabeceras ─────────────────────────────────────── */
/* .section-copy compartido: ver css/ronin-components.css */
.proof-strip{
  border-top: 1px solid var(--ronin-border);
  padding-block: 56px;
}
.ronin-page .mid-cta{
  border-top: none;
  padding-block: 0 96px;
}
.ronin-page .price-teaser{ padding-block: 96px; }

/* ── ¿Te suena? — filas de problema ───────────────────────────────────── */
.problem-list{ border-top-color: var(--ronin-border); }
.problem-row{
  border-bottom-color: var(--ronin-border);
}
.problem-row:hover{
  background: linear-gradient(90deg, rgba(207,0,12,.06), transparent 60%);
}
.problem-row:hover .problem-row-num{ color: var(--ronin-red); }
.problem-row-body h3{ font-family: var(--ronin-font-sans); }
.problem-row-body p{ color: var(--ronin-text-muted); }

/* ── Proof strip — principios de trabajo ──────────────────────────────── */
.principles{
  border-top: 1px solid var(--ronin-border);
  border-bottom: 1px solid var(--ronin-border);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  list-style: none;
}
.principle-card{
  padding: 26px 28px;
  border-right: 1px solid var(--ronin-border);
}
.principle-card:last-child{ border-right: none; }
.principle-card-title{
  display:block; margin-top:10px;
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
}
.principle-card-desc{ margin-top:8px; color: var(--ronin-text-muted); font-size: 14px; }

/* ── Servicios — el carrusel viene entero de ronin-components.css; aquí
     solo se ajusta que la card sea un <a> (toda la card es clicable,
     no solo el título) en vez del <div> del prototipo, y el padding del
     shell (el prototipo lo quitaba inline; aquí no puede ir inline).
     Refinado tras la primera revisión: card algo más ancha (672→760px,
     sigue sin ser full-width), más contraste en el texto inferior
     ("Ideal si...", que usaba --ronin-text-ghost y quedaba casi ilegible),
     flechas prev/next más presentes, hover/focus propio de la card. ──── */
.ronin-services-shell.ronin-wrap-xs{ padding-inline: 0; max-width: 760px; }
.ronin-service-card{
  display:block;
  transition: border-color var(--ronin-duration-fast) var(--ronin-ease),
              background-color var(--ronin-duration-fast) var(--ronin-ease);
}
.ronin-service-card:hover,
.ronin-service-card:focus-visible{
  border-color: var(--ronin-border-hover);
  background: var(--ronin-surface-raised);
}
.ronin-service-card .ronin-examples ul{ list-style: none; }
.ronin-service-card .ronin-examples li{
  font-size:14px; color: var(--ronin-text-muted);
  display:flex; gap:8px; align-items:baseline;
}
.ronin-service-card .ronin-examples li::before{ content:"→"; color: var(--ronin-text-tertiary); }
.ronin-service-card .ronin-tags{
  font-family: var(--ronin-font-mono); font-size:11px; letter-spacing:.06em;
  color: #9a9a9a; text-transform:none;
}
.ronin-carousel-nav{
  width: 42px; height: 42px;
  border-color: var(--ronin-border-hover);
}
.ronin-carousel-nav:hover{
  border-color: var(--ronin-red);
  color: var(--ronin-white);
  background: var(--ronin-surface-raised);
}
/* -21px = -width/2, mismo criterio que el MASTER (-19px con 38px) para
   que el botón quede centrado a caballo del borde de la card. */
.ronin-carousel-prev{ left: -21px; }
.ronin-carousel-next{ right: -21px; }

/* ── Proceso / FAQ — el acordeón viene entero de ronin-components.css;
     solo se ajusta el ancho del contenedor a la composición de esta página */
#proceso .ronin-wrap-sm,
#faq .ronin-wrap-sm{ padding-inline: 0; }
.process-note{ margin-top:26px; color: var(--ronin-text-muted); font-size:15px; }

/* ── Portfolio — case study (estructura y contenido intactos, se refina
     el CONTENEDOR para que lea "RŌNIN presenta un caso de Drakkar" y no
     "la sección se convierte en Drakkar": border-radius mucho menor y
     hairline fino (antes 32px + glow cálido, demasiado "tarjeta de
     diseño anterior"), fondo neutro, glow ambiental cálido eliminado,
     hover neutro en vez de dorado. El dorado de Drakkar se mantiene
     DENTRO del contenido (browser mock, chat mock, tags), que es donde
     representa su marca real — eso no se toca. ─────────────────────── */
.case-study{
  border-radius: 8px;
  border-color: var(--ronin-border);
  background: var(--ronin-surface);
}
.case-study::before{ background: none; } /* fuera el glow ambiental cálido */
.case-study:hover{ border-color: var(--ronin-border-hover); } /* antes: dorado */
.case-eyebrow{ text-transform: uppercase; }
.case-label{ color: var(--ronin-text-tertiary); }
.case-block p{ color: var(--ronin-text-muted); }
.case-block p strong{ color: var(--ronin-text); }
.case-client-name{ color: var(--ronin-text); }
.case-tags li{ font-family: var(--ronin-font-mono); }

/* Badge "Proyecto real": el verde no existe en la paleta RŌNIN — se
   sustituye por una solución sobria en rojo RŌNIN, sin inventar ninguna
   otra etiqueta ni dato. */
.case-badge-real{
  color: var(--ronin-red);
  border-color: rgba(207,0,12,.35);
  background: rgba(207,0,12,.08);
}

/* ── Equipo ────────────────────────────────────────────────────────────── */
.about-placeholder{
  border-color: var(--ronin-border-hover);
  background: linear-gradient(160deg, var(--ronin-surface-raised), var(--ronin-bg));
  color: var(--ronin-text-ghost);
}
.about-copy .lead-small{ color: var(--ronin-text-muted); }
.about-location{ color: var(--ronin-text-tertiary); }

/* ── Regla sencilla (bloque de impacto) ───────────────────────────────── */
.ronin-impact .principle{
  border-color: var(--ronin-border);
  background: var(--ronin-surface);
}
.ronin-impact blockquote{ font-family: var(--ronin-font-sans); }
.ronin-impact blockquote span{ color: var(--ronin-red); }

/* ── Price teaser ─────────────────────────────────────────────────────── */
.price-teaser-inner{
  border-color: var(--ronin-border);
  background: var(--ronin-surface);
}
.price-teaser-copy p{ color: var(--ronin-text-muted); }

/* ── Contacto — solo recolor del wrapper y de los campos; el formulario
     no toca nombres/ids/required (funcionalidad intacta) ──────────────── */
.contact{
  border-color: var(--ronin-border);
  background: var(--ronin-surface);
}
.contact-copy{ background: linear-gradient(150deg, var(--ronin-surface-raised), var(--ronin-surface)); }
.contact-copy p{ color: var(--ronin-text-muted); }
.contact-trust{ color: var(--ronin-text-muted); }
.contact-trust div::before{ color: var(--ronin-red); }
label{
  font-family: var(--ronin-font-mono);
  color: var(--ronin-text-tertiary);
  letter-spacing: .08em;
}
input,textarea{
  background: var(--ronin-surface-elevated);
  border-color: var(--ronin-border);
  color: var(--ronin-text);
  font-family: var(--ronin-font-sans);
  border-radius: 3px;
}
input:focus,textarea:focus{
  border-color: var(--ronin-red);
  box-shadow: 0 0 0 3px rgba(207,0,12,.12);
}
.success{
  background: var(--ronin-surface-elevated);
  border-color: var(--ronin-border);
  color: var(--ronin-text-muted);
  font-family: var(--ronin-font-mono);
  font-size: 13px;
}

/* Footer compartido: ver css/ronin-components.css */

} /* /@media (min-width: 1024px) */