/* ==========================================================
   RejillaDeAcero.com.mx — hoja de estilos
   Énfasis: celeste + verde bajo + gris
   Fondos: gris / blanco / negro
   ========================================================== */

:root {
  --celeste: #3FA9D6;
  --celeste-osc: #1B6F93;
  --celeste-claro: #DDF1FA;
  --verde: #8DBF9E;
  --verde-osc: #3C7453;
  --verde-claro: #E6F2EA;
  --gris: #5E6A72;
  --gris-medio: #A7B0B5;
  --gris-claro: #EEF1F2;
  --gris-oscuro: #2B3236;
  --blanco: #FFFFFF;
  --negro: #000000;
  --texto: #23292D;
  --fuente: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ancho: 1180px;
  --radio: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); font-size: 1.0625rem; line-height: 1.6; color: var(--texto); background: var(--blanco); }
img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-stretch: 72%; font-weight: 800; line-height: 1.08; margin: 0 0 .6em; color: var(--negro); }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); max-width: 22ch; }
h3 { font-size: 1.35rem; font-stretch: 85%; font-weight: 700; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--celeste-osc); text-underline-offset: 3px; }
a:hover { color: var(--negro); }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }

.wrap { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.wrap-narrow { max-width: 820px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -60px; z-index: 100; background: var(--negro); color: var(--blanco); padding: .6rem 1rem; border-radius: var(--radio); }
.skip-link:focus { top: 1rem; color: var(--blanco); }

/* ---------- Botones ---------- */
.btn { display: inline-block; font-family: inherit; font-weight: 700; font-stretch: 90%; font-size: 1rem; text-decoration: none; padding: .85rem 1.5rem; border-radius: var(--radio); border: 2px solid transparent; transition: background-color .2s, color .2s, border-color .2s; text-align: center; }
.btn-primary { background: var(--celeste); color: var(--negro); }
.btn-primary:hover { background: var(--negro); color: var(--celeste); border-color: var(--celeste); }
.btn-ghost { border-color: var(--blanco); color: var(--blanco); }
.btn-ghost:hover { background: var(--blanco); color: var(--negro); }
.btn-green { background: var(--verde); color: var(--negro); }
.btn-green:hover { background: var(--verde-osc); color: var(--blanco); }
.btn-sm { padding: .5rem 1rem; font-size: .95rem; }
.btn-lg { padding: 1.1rem 2rem; font-size: 1.1rem; }
.text-link { font-weight: 700; color: var(--celeste-osc); text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--blanco); border-bottom: 1px solid #D8DEE1; }
.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--negro); }
.brand-mark { width: 34px; height: 34px; }
.brand-text { font-weight: 800; font-stretch: 70%; font-size: 1.45rem; line-height: 1; }
.brand-sep { color: var(--celeste-osc); margin: 0 .12em; font-weight: 600; }
.brand-text small { font-size: .7em; color: var(--gris); font-weight: 600; }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-btn { display: none; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.6rem; }
.main-nav a:not(.btn) { color: var(--texto); text-decoration: none; font-weight: 600; font-size: .98rem; padding: .3rem 0; border-bottom: 2px solid transparent; }
.main-nav a:not(.btn):hover { border-bottom-color: var(--verde); color: var(--negro); }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: var(--blanco); background-color: var(--negro);
  /* Sube tu fotografía como img/hero-rejilla.webp; si no existe, se muestra el SVG */
  background-image:
    linear-gradient(100deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 45%, rgba(0,0,0,.35) 100%),
    url("../img/hero-rejilla.webp"),
    url("../img/hero-rejilla.svg");
  background-size: cover; background-position: center;
  min-height: min(88vh, 760px); display: flex; align-items: center;
  border-bottom: 6px solid var(--celeste);
}
.hero-inner { padding: 6rem 0 5rem; }
.hero h1 { color: var(--blanco); font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem); font-stretch: 64%; line-height: .98; max-width: 13ch; margin-bottom: .45em; }
.hero-sub { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: #DCE3E6; max-width: 58ch; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.5rem; }
.hero-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--verde); font-weight: 600; font-size: .98rem; }
.hero-facts li { display: flex; align-items: center; gap: .5rem; }
.hero-facts li::before { content: ""; width: 10px; height: 10px; background: var(--verde); border-radius: 1px; }

/* ---------- Secciones ---------- */
.section { padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0; }
.section-white { background: var(--blanco); }
.section-gray { background: var(--gris-claro); }
.section-black { background: var(--negro); color: #D5DCDF; }
.section-black h2 { color: var(--blanco); }
.lead { font-size: 1.15rem; color: var(--gris); margin-bottom: 2.5rem; }
.lead-invert { color: #B9C3C8; }
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.split-reverse { grid-template-columns: .9fr 1.1fr; align-items: start; }

/* Diagrama de partes */
.anatomy { margin: 0; }
.anatomy svg { width: 100%; border-radius: var(--radio); border: 1px solid #D8DEE1; }
.anat-label text { font-family: var(--fuente); font-size: 17px; font-weight: 600; fill: var(--negro); }
.anatomy figcaption { font-size: .92rem; color: var(--gris); margin-top: .8rem; }

/* Tipos */
.types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.type { background: var(--blanco); padding: 1.75rem 1.75rem 1.5rem; border-left: 5px solid var(--gris-medio); }
.type p { margin-bottom: 0; }
.type-featured { grid-row: span 2; background: var(--negro); color: #D5DCDF; border-left-color: var(--celeste); padding: 2.25rem; }
.type-featured h3 { color: var(--blanco); font-size: 1.9rem; font-stretch: 70%; font-weight: 800; }
.type-featured p { margin-bottom: 1.25rem; }
.type-featured .text-link { color: var(--celeste); }
.type-featured .text-link:hover { color: var(--blanco); }
.checks { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.checks li { position: relative; padding-left: 1.8rem; margin-bottom: .55rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 7px; border-left: 3px solid var(--verde); border-bottom: 3px solid var(--verde); transform: rotate(-45deg); }

/* Tabla de especificaciones */
.table-scroll { overflow-x: auto; border: 1px solid #D8DEE1; border-radius: var(--radio); }
.spec-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.spec-table thead th { background: var(--gris-oscuro); color: var(--blanco); text-align: left; padding: 1rem 1.25rem; font-stretch: 85%; font-size: 1.02rem; }
.spec-table thead th:first-child { border-left: 5px solid var(--celeste); }
.spec-table tbody th, .spec-table td { padding: .95rem 1.25rem; text-align: left; vertical-align: top; border-top: 1px solid #E1E6E8; }
.spec-table tbody th { width: 30%; font-weight: 700; color: var(--negro); }
.spec-table tbody tr:nth-child(even) { background: var(--gris-claro); }
.spec-table tbody tr:hover { background: var(--celeste-claro); }
.note { margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--verde-claro); border-left: 5px solid var(--verde); max-width: none; }
.note a { font-weight: 700; color: var(--verde-osc); }

/* Nomenclatura */
.code { display: flex; align-items: baseline; flex-wrap: wrap; font-weight: 800; font-stretch: 62%; font-size: clamp(5rem, 2rem + 14vw, 12rem); line-height: .9; margin: 0 0 2rem; }
.code-a { color: var(--celeste); }
.code-b { color: var(--blanco); }
.code-c { color: var(--verde); }
.code-dash { color: var(--gris); margin: 0 .08em; }
.code-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0 0 2rem; }
.code-legend div { border-top: 4px solid var(--gris); padding-top: 1rem; }
.code-legend .legend-a { border-top-color: var(--celeste); }
.code-legend .legend-b { border-top-color: var(--blanco); }
.code-legend .legend-c { border-top-color: var(--verde); }
.code-legend dt { font-weight: 800; font-size: 1.6rem; font-stretch: 70%; color: var(--blanco); }
.code-legend dd { margin: .3rem 0 0; }
.code-example { color: #D5DCDF; }
.code-example strong { color: var(--blanco); }

/* Aplicaciones */
.apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
.apps li { padding: 1rem 0; border-bottom: 1px solid #CDD4D8; }
.apps strong { color: var(--negro); }

/* Pasos */
.steps { list-style: none; counter-reset: paso; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.steps li { counter-increment: paso; position: relative; padding-top: 4.2rem; }
.steps li::before { content: counter(paso); position: absolute; top: 0; left: 0; width: 3rem; height: 3rem; display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; font-stretch: 70%; background: var(--verde-claro); color: var(--verde-osc); border: 2px solid var(--verde); border-radius: 50%; }
.steps li::after { content: ""; position: absolute; top: 1.5rem; left: 3.6rem; right: -1.4rem; height: 2px; background: var(--gris-medio); }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 1.25rem; }
.steps p { color: var(--gris); margin: 0; }
.steps-cta { margin: 3rem 0 0; }

/* Preguntas frecuentes */
.faq { border-top: 2px solid var(--negro); }
.faq details { border-bottom: 1px solid #CDD4D8; }
.faq summary { cursor: pointer; list-style: none; padding: 1.25rem 3rem 1.25rem 0; font-weight: 700; font-size: 1.12rem; color: var(--negro); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .5rem; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 3px solid var(--celeste-osc); border-bottom: 3px solid var(--celeste-osc); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details[open] { border-left: 4px solid var(--verde); padding-left: 1rem; background: var(--blanco); }
.faq details p { padding-bottom: 1.25rem; margin: 0; }

/* Llamada a la acción */
.cta { background: var(--gris-oscuro); color: #D5DCDF; padding: clamp(3rem, 2rem + 4vw, 5rem) 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.cta h2 { color: var(--blanco); margin-bottom: .4em; }
.cta p { margin: 0; }

/* Footer */
.site-footer { background: var(--negro); color: #AEB8BD; padding: 3.5rem 0 1.5rem; font-size: .96rem; }
.site-footer a { color: var(--celeste); }
.site-footer a:hover { color: var(--blanco); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer-name { font-weight: 800; font-stretch: 70%; font-size: 1.5rem; color: var(--blanco); }
.footer-title { font-weight: 700; color: var(--verde); margin-bottom: .6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .4rem; }
.footer-legal { border-top: 1px solid #2E3538; margin-top: 2.5rem; padding-top: 1.25rem; font-size: .88rem; }
.footer-legal p { max-width: none; margin: 0; }

/* Página 404 */
.error-page { min-height: 100vh; display: grid; place-items: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps li::after { display: none; }
}

@media (max-width: 900px) {
  .nav-btn { display: grid; place-items: center; width: 46px; height: 46px; cursor: pointer; border: 1px solid #D8DEE1; border-radius: var(--radio); }
  .nav-btn-bars, .nav-btn-bars::before, .nav-btn-bars::after { display: block; width: 22px; height: 2px; background: var(--negro); transition: transform .2s, background-color .2s; }
  .nav-btn-bars { position: relative; }
  .nav-btn-bars::before, .nav-btn-bars::after { content: ""; position: absolute; left: 0; }
  .nav-btn-bars::before { top: -7px; }
  .nav-btn-bars::after { top: 7px; }
  .nav-toggle:checked + .nav-btn .nav-btn-bars { background: transparent; }
  .nav-toggle:checked + .nav-btn .nav-btn-bars::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .nav-btn .nav-btn-bars::after { transform: translateY(-7px) rotate(-45deg); }
  .nav-toggle:focus-visible + .nav-btn { outline: 3px solid var(--celeste); outline-offset: 2px; }

  .main-nav { display: none; position: absolute; left: -1.25rem; right: -1.25rem; top: 100%; background: var(--blanco); border-bottom: 4px solid var(--celeste); box-shadow: 0 12px 24px rgba(0,0,0,.12); }
  .nav-toggle:checked ~ .main-nav { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; }
  .main-nav li { border-bottom: 1px solid var(--gris-claro); }
  .main-nav li:last-child { border-bottom: 0; padding-top: 1rem; }
  .main-nav a:not(.btn) { display: block; padding: .9rem 0; border-bottom: 0; }
  .main-nav .btn { display: block; }

  .split, .split-reverse { grid-template-columns: 1fr; }
  .types { grid-template-columns: 1fr; }
  .type-featured { grid-row: auto; }
  .code-legend { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .hero { min-height: auto; }
  .hero-inner { padding: 4rem 0 3.5rem; }
  .hero-actions .btn { width: 100%; }
  .apps { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .btn-lg { width: 100%; }
  .brand-text { font-size: 1.25rem; }
  .type, .type-featured { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@media print {
  .site-header, .hero-actions, .cta, .nav-btn { display: none; }
  .hero { background: none; color: #000; min-height: auto; }
  .hero h1 { color: #000; }
}