/* 
   Rinosirunti Premium Design System 
   Aesthetic: Industrial Utilitarian Noir
*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Barlow+Condensed:wght@100;200;300;400;500;600;700;800&family=Barlow+Semi+Condensed:wght@100;200;300;400;500;600;700;800&family=Barlow:wght@300;400;500;600;700&display=swap");

:root {
  /* PALETA CORPORATIVA OFICIAL */
  --rino-red: #af3922;
  --rino-red-dark: #8a2b19;
  --rino-gray-carbon: #393738;

  /* ACENTOS POR SECTOR */
  --sector-mining: #07529c;
  --sector-construction: #dc962a;
  --sector-agri: #af3922; /* Agricultura usa el rojo corporativo */
  --accent-lime: #a5d02f; /* Verde Lima para botones específicos */
  
  /* Automoción Gradient */
  --grad-automocion: linear-gradient(to right, #b026ff, #00d4ff);

  /* COLORES TEMA NOIR (FONDO) */
  --bg-black: #0a0a0a;
  --bg-deep: #0f0f0f;
  --bg-surface: #141414;

  /* TEXTO */
  --text-white: #f4f4f4;
  --text-muted: #a0a0a0;
  --text-dim: #555555;

  /* RECURSOS */
  --font-display: "Montserrat", sans-serif;
  --font-main: "Barlow", sans-serif;

  /* Borders & Accents */
  --border-subtle: rgba(244, 244, 244, 0.08);
  --border-active: rgba(244, 244, 244, 0.15);
}

html {
  scroll-behavior: smooth;
}

h1, h2, h3 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  zoom: 0.885; /* Reduce globalmente el tamaño un ~11.5% (ej. 13 a 11.5) */
}

/* Fix for Montserrat overlapping paths with -webkit-text-stroke */
[style*="-webkit-text-stroke: 1.5px #AF3922"],
[style*="-webkit-text-stroke: 1.5px #AF3922;"] {
    -webkit-text-stroke: 0 !important;
    text-shadow: -1.5px -1.5px 0 #AF3922, 1.5px -1.5px 0 #AF3922, -1.5px 1.5px 0 #AF3922, 1.5px 1.5px 0 #AF3922 !important;
}
[style*="-webkit-text-stroke: 1.5px #FFFDFA"],
[style*="-webkit-text-stroke: 1.5px #FFFDFA;"] {
    -webkit-text-stroke: 0 !important;
    text-shadow: -1.5px -1.5px 0 #FFFDFA, 1.5px -1.5px 0 #FFFDFA, -1.5px 1.5px 0 #FFFDFA, 1.5px 1.5px 0 #FFFDFA !important;
}
[style*="-webkit-text-stroke: 1.5px #07529C"],
[style*="-webkit-text-stroke: 1.5px #07529C;"] {
    -webkit-text-stroke: 0 !important;
    text-shadow: -1.5px -1.5px 0 #07529C, 1.5px -1.5px 0 #07529C, -1.5px 1.5px 0 #07529C, 1.5px 1.5px 0 #07529C !important;
}
[style*="-webkit-text-stroke: 1.5px #DC962A"],
[style*="-webkit-text-stroke: 1.5px #DC962A;"] {
    -webkit-text-stroke: 0 !important;
    text-shadow: -1.5px -1.5px 0 #DC962A, 1.5px -1.5px 0 #DC962A, -1.5px 1.5px 0 #DC962A, 1.5px 1.5px 0 #DC962A !important;
}
[style*="-webkit-text-stroke: 1.5px #DEDEDE"],
[style*="-webkit-text-stroke: 1.5px #DEDEDE;"] {
    -webkit-text-stroke: 0 !important;
    text-shadow: -1.5px -1.5px 0 #DEDEDE, 1.5px -1.5px 0 #DEDEDE, -1.5px 1.5px 0 #DEDEDE, 1.5px 1.5px 0 #DEDEDE !important;
}

/* Custom Submenu Hover for Navbar */
.rino-submenu-content {
  opacity: 0;
  visibility: hidden;
  transform: translateX(0.5rem);
  transition: all 0.3s ease;
  pointer-events: none;
  /* Ajuste de posición para no superponerse (compensa el p-4 del padre y añade espacio) */
  left: 100% !important;
  margin-left: 1.5rem !important; /* Separación extra */
  top: -1rem !important;
}
/* Puente invisible para no perder el hover al cruzar el gap */
.rino-submenu-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1.5rem;
  width: 1.5rem;
  height: 100%;
}
.rino-submenu-container:hover .rino-submenu-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

/* Dynamic Navbar Theme Classes */
.bg-nav-theme {
  background-color: var(--nav-theme-color, #af3922) !important;
}
.text-hover-theme:hover {
  color: var(--nav-theme-color, #af3922) !important;
}
.bg-underline-theme {
  background-color: var(--nav-theme-color, #af3922) !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Barlow", sans-serif;
  background-color: #2d2b2c; /* Grafito cálido – canvas externo */
  color: #f4f4f4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page-frame {
  background-color: #fffdfa; /* Off-white – consistent with section backgrounds */
  min-height: 100vh;
  position: relative;
  border-left: 1px solid rgba(244, 244, 244, 0.08);
  border-right: 1px solid rgba(244, 244, 244, 0.08);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.4);
}

h1,
h2,
h3,
.font-display {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* --- Grain Texture Overlay --- */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 9999;
}

/* --- Global Transitions --- */
a,
button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Layout Utilities --- */
.container-rino {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Custom Components --- */

/* Borde tricolor Rusia (Mejorado) */
.border-tricolor {
  position: relative;
}
.border-tricolor::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    #f4f4f4 0% 33%,
    #0039a6 33% 66%,
    #d52b1e 66% 100%
  );
}

.rounded-corporate {
  border-radius: 4px; /* Industrial is sharp, not round */
}

/* Glassmorphism for Dark Theme */
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-reveal {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Section Masks */
.mask-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .mask-diagonal {
    clip-path: none;
  }
}

/* --- Background Animations --- */
@keyframes patternMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}

.bg-pattern-animated {
  animation: patternMove 10s linear infinite;
  will-change: background-position;
}

/* Industrial Blueprint Background Pattern */
.bg-industrial-blueprint {
  background-color: #dedede;
  background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3Etext%7Bfont-family:sans-serif;font-weight:900;font-style:italic;fill:%233B3B3B;opacity:0.04;text-transform:uppercase;%7D%3C/style%3E%3Ctext x='20' y='50' font-size='32'%3ERINUSIRUNTI%3C/text%3E%3Ctext x='250' y='180' font-size='24' transform='rotate(90, 250, 180)'%3EINDUSTRIAL%3C/text%3E%3Ctext x='50' y='250' font-size='22' transform='rotate(45, 50, 250)'%3EINDESTRUCTIBLE%3C/text%3E%3Ctext x='220' y='350' font-size='28'%3EPOTENCIA%3C/text%3E%3Ctext x='80' y='120' font-size='20' transform='rotate(-45, 80, 120)'%3EINGENIER%C3%8DA%3C/text%3E%3Ctext x='350' y='50' font-size='18' transform='rotate(90, 350, 50)'%3ETRACTOR%3C/text%3E%3Ctext x='300' y='300' font-size='20' transform='rotate(45, 300, 300)'%3ETRACCI%C3%93N%3C/text%3E%3C/svg%3E");
  background-size: 400px 400px;
}

/* Master Product Card System */
.master-product-card {
  --card-bg: #1a1a1a;
  --card-border: rgba(255, 255, 255, 0.06);
  --sector-color: var(--rino-red); /* Default */

  background: var(--card-bg);
  border: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .master-product-card {
    flex-direction: row;
  }
}

.master-product-card:hover {
  border-color: var(--sector-color);
  transform: translateY(-5px);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.6),
    0 0 20px var(--sector-color-alpha, rgba(175, 57, 34, 0.1));
}

/* Visual Zone */
.card-visual-zone {
  width: 100%;
  background: #000;
  position: relative;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .card-visual-zone {
    width: 45%;
    min-height: 380px;
  }
}

.card-visual-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    var(--sector-color-alpha, rgba(175, 57, 34, 0.15)) 0%,
    transparent 70%
  );
  opacity: 0.5;
}

.card-visual-zone .product-img {
  position: relative;
  z-index: 10;
  width: 110%;
  height: 110%;
  object-fit: contain;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.8));
}

.master-product-card:hover .product-img {
  transform: scale(1.1) rotate(-2deg);
}

.sector-badge {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 20;
  background: var(--sector-color);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 4px 12px;
  text-transform: uppercase;
}

/* Content Zone */
.card-content-zone {
  width: 100%;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 1px solid var(--card-border);
}

@media (min-width: 768px) {
  .card-content-zone {
    width: 55%;
    border-top: none;
    border-left: 1px solid var(--card-border);
  }
}

.card-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.card-model {
  color: var(--sector-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  display: block;
}

/* Specs Grid */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.spec-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.spec-item .label {
  font-size: 9px;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

.spec-item .value {
  font-size: 1.1rem;
  font-weight: 800;
  color: #eee;
  font-family: var(--font-display);
}

/* Actions */
.card-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .card-actions {
    grid-template-columns: 1.2fr 1fr;
  }
}

.btn-master {
  padding: 1.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
}

.btn-quote {
  background: var(--sector-color);
  color: #fff;
  border: 1px solid var(--sector-color);
}

.btn-quote:hover {
  background: #fff;
  color: var(--sector-color);
}

.btn-specs {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-specs:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #fff;
}

/* Modal Premium Styles */
.modal-noir-premium {
  background: #fff !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.modal-header-sector {
  height: 6px;
  width: 100%;
  background: var(--sector-color);
}

.spec-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.spec-row:last-child {
  border-bottom: none;
}

.spec-row .label {
  color: #888;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.spec-row .value {
  color: #111;
  font-size: 14px;
  font-weight: 700;
}

/* Ficha Técnica button: icon turns white on hover */
.ficha-btn:hover .pdf-icon {
  filter: brightness(0) invert(1) !important;
}

/* --- Automocion Gradient Utilities --- */
.grad-automocion {
  background: var(--grad-automocion) !important;
}

.text-grad-automocion {
  background: var(--grad-automocion) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Custom Automocion Hover Underline */
.hover-grad-automocion {
  position: relative;
}
.hover-grad-automocion::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--grad-automocion);
  transition: width 0.3s ease;
}
.hover-grad-automocion:hover::after {
  width: 100%;
}