/*
 * Estilos específicos de la landing LEPAS L8 (lepas-l8.html).
 * Incluye variables :root propias de esta página (paleta y layout del héroe,
 * specs, galería, precios, tecnología, etc.). No se comparte con otras páginas
 * porque cada modelo tiene su propia paleta visual.
 */

    :root {
      --bg: #0f1113;
      --panel: #15191c;
      --panel-soft: #1d2328;
      --line: #2a333a;
      --text: #f4f6f8;
      --muted: #a5b0ba;
      --brand: #c98a2e;
      --brand-strong: #e0a64a;
      --brand-text: #111317;
      --radius-lg: 22px;
      --radius-md: 14px;
      --maxw: 1240px;
      --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
    }

    body {
      margin: 0;
      font-family: "SourceHan", "Segoe UI", sans-serif;
      background: radial-gradient(circle at 15% 0%, #1b2025 0%, var(--bg) 42%) fixed;
      color: var(--text);
      line-height: 1.45;
    }

    .hero {
      padding: 64px 0 40px;
    }

    .brand-video-hero {
      position: relative;
      width: 100%;
      min-height: 82vh;
      overflow: hidden;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: #0b0d0f;
    }

    .brand-video-hero video {
      width: 100%;
      height: 82vh;
      object-fit: cover;
      object-position: center center;
      display: block;
    }

    .brand-video-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(7, 9, 11, 0.38) 0%, rgba(7, 9, 11, 0.62) 65%, rgba(7, 9, 11, 0.88) 100%),
        linear-gradient(120deg, rgba(11, 13, 16, 0.6) 0%, rgba(11, 13, 16, 0.05) 48%);
      pointer-events: none;
    }

    .brand-video-hero__content {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      z-index: 1;
      padding-bottom: 56px;
    }

    .brand-video-hero__panel {
      max-width: 650px;
    }

    .brand-video-hero__title {
      margin: 10px 0 0;
      font-size: clamp(34px, 5vw, 66px);
      line-height: 1.02;
      letter-spacing: -0.03em;
    }

    .brand-video-hero__desc {
      margin: 16px 0 0;
      color: #ced6de;
      max-width: 54ch;
      font-size: 16px;
      line-height: 1.55;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 28px;
      align-items: stretch;
    }

    .hero-copy {
      background: linear-gradient(160deg, #151a1f, #12161a);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 42px;
      box-shadow: var(--shadow);
    }

    .eyebrow {
      color: var(--brand);
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    h1 {
      margin: 0;
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.04;
      letter-spacing: -0.02em;
    }

    .hero-copy p {
      color: var(--muted);
      font-size: 16px;
      margin: 20px 0 30px;
      max-width: 52ch;
    }

    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .metric {
      background: var(--panel-soft);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 14px;
    }
    .metric strong { font-size: 24px; display: block; }
    .metric span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }

    .hero-visual {
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--line);
      position: relative;
      min-height: 530px;
      box-shadow: var(--shadow);
    }

    .hero-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-badge {
      position: absolute;
      left: 16px;
      bottom: 16px;
      background: rgba(17, 20, 24, 0.86);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .hero-badge img { width: 54px; height: auto; }
    .hero-badge small { color: var(--muted); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

    section { padding: 72px 0; }

    .section-title {
      margin: 0 0 18px;
      font-size: clamp(28px, 3.4vw, 44px);
      letter-spacing: -0.02em;
    }

    .section-lead {
      margin: 0;
      color: var(--muted);
      max-width: 70ch;
    }

    .faq-list {
      display: grid;
      gap: 10px;
      margin-top: 28px;
    }
    .faq-item {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--panel);
      padding: 4px 18px;
    }
    .faq-item summary {
      cursor: pointer;
      list-style: none;
      padding: 14px 0;
      font-weight: 600;
      color: var(--text);
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      float: right;
      color: var(--brand-strong);
    }
    .faq-item[open] summary::after { content: "−"; }
    .faq-item p {
      margin: 0 0 16px;
      color: var(--muted);
    }

    .gallery-grid {
      margin-top: 28px;
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      grid-template-rows: 250px 250px;
      gap: 16px;
    }

    .gallery-item {
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--line);
      position: relative;
      background: var(--panel);
    }

    .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
    .gallery-item:hover img { transform: scale(1.04); }
    .gallery-item--main { grid-row: 1 / span 2; }

    .gallery-tag {
      position: absolute;
      top: 12px;
      left: 12px;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .interior-row {
      margin-top: 28px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .card {
      background: linear-gradient(180deg, #181d22 0%, #14181c 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: transform .25s ease, border-color .25s ease;
    }
    .card:hover { transform: translateY(-3px); border-color: #3a4852; }

    .card img { width: 100%; height: 170px; object-fit: cover; }
    .card-body { padding: 16px; }
    .card-body h3 { margin: 0 0 8px; font-size: 16px; }
    .card-body p { margin: 0; color: var(--muted); font-size: 14px; }

    .pricing-grid {
      margin-top: 28px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .price-card {
      background: linear-gradient(180deg, #181d22 0%, #13171b 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 22px;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
    }

    .price-card__eyebrow {
      margin: 0;
      color: var(--brand);
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .price-card__amount {
      margin: 10px 0 4px;
      font-size: clamp(30px, 4vw, 42px);
      line-height: 1;
      letter-spacing: -0.03em;
      font-weight: 700;
    }

    .price-card__sub {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .price-card ul {
      margin: 18px 0 0;
      padding-left: 18px;
      color: var(--text);
    }

    .price-card li + li {
      margin-top: 8px;
    }

    .prices-note {
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 13px;
      max-width: 82ch;
    }

    .prices-note a {
      color: var(--brand);
      text-decoration: none;
    }

    .prices-note a:hover {
      text-decoration: underline;
    }

    .color-showcase {
      margin-top: 56px;
    }

    .color-showcase .section-title {
      margin-bottom: 24px;
    }

    .color-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(220px, 1fr));
      gap: 12px;
      align-items: end;
    }

    .color-option {
      margin: 0;
      position: relative;
      z-index: 1;
      transition: transform .25s ease;
    }

    .color-option:hover {
      z-index: 40;
      transform: translateY(-3px);
    }

    .color-option img {
      width: 100%;
      height: 200px;
      max-height: none;
      object-fit: contain;
      object-position: center;
    }

    .color-option figcaption {
      margin-top: -30px;
      color: var(--text);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-align: center;
    }

    .color-preview {
      position: absolute;
      left: calc(100% + 18px);
      top: 50%;
      z-index: 20;
      width: min(440px, 42vw);
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: var(--radius-md);
      background: #0f1113 !important;
      background-image: none !important;
      box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
      opacity: 1;
      visibility: hidden;
      pointer-events: none;
      transform: translate(10px, -50%) scale(.98);
      transition: transform .2s ease, visibility 0s linear .2s;
    }

    .color-preview img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .color-option:hover .color-preview {
      visibility: visible;
      transform: translate(0, -50%) scale(1);
      transition-delay: 0s;
    }

    .color-option:nth-child(4) .color-preview,
    .color-option:last-child .color-preview {
      left: auto;
      right: calc(100% + 18px);
      transform: translate(-10px, -50%) scale(.98);
    }

    .color-option:nth-child(4):hover .color-preview,
    .color-option:last-child:hover .color-preview {
      transform: translate(0, -50%) scale(1);
    }

    .equipment-matrix {
      margin-top: 58px;
      width: 100%;
      padding: 28px 30px 34px;
      background: linear-gradient(180deg, #111417 0%, #0d1013 100%);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
    }

    .equipment-table + .equipment-table {
      margin-top: 20px;
    }

    .equipment-title {
      border-bottom: 1px solid #c98a2e;
      color:  #c98a2e;
      font-size: 17px;
      font-weight: 700;
      line-height: 1;
      text-align: center;
      padding: 6px 12px;
    }

    .equipment-title small {
      font-size: 13px;
      font-weight: 700;
    }

    .equipment-content {
      display: grid;
      grid-template-columns: 1.25fr 1.35fr 1fr;
      gap: 22px;
      padding: 8px 12px;

      font-size: 12px;
      font-weight: 300;
      line-height: 1.15;
    }

    .equipment-content ul {
      margin: 0;
      padding-left: 18px;
    }

    .equipment-content li {
      margin: 0 0 2px;
      margin-top: 10px;
    }

    .brand-strip {
      background: #13171b;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      margin-top: 24px;
      padding: 34px 0;
    }

    .brand-strip__inner {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 38px;
      flex-wrap: wrap;
    }

    .brand-strip img { height: 30px; width: auto; opacity: .92; }

    /* El formulario de contacto (.contact-grid, .panel, #contacto,
       .contact-points, .contact-phone, form, inputs, botón, .consent-row,
       .lead-modal*) es un componente único compartido por toda la web: ver
       public/assets/css/lead-form.css (fuente de verdad de su diseño). */

    .tech-panel-image {
      margin-top: 18px;
      border-radius: 12px;
      border: 1px solid var(--line);
      width: 100%;
      height: 220px;
      object-fit: cover;
    }

    @media (max-width: 1024px) {
      .hero-grid { grid-template-columns: 1fr; }

      .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 230px 230px 230px;
      }
      .gallery-item--main { grid-column: 1 / span 2; grid-row: auto; }
      .interior-row { grid-template-columns: repeat(2, 1fr); }
      .color-grid {
        grid-template-columns: repeat(5, minmax(230px, 1fr));
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: thin;
      }
      .pricing-grid { grid-template-columns: 1fr; }
      .color-option img { height: 220px; }
      .hero-visual { min-height: 400px; }
      .equipment-matrix { padding: 24px 20px 28px; }
      .equipment-content {
        grid-template-columns: 1fr;
        gap: 0;
        font-size: 15px;
      }
    }

    @media (max-width: 700px) {
      .brand-video-hero,
      .brand-video-hero video { min-height: 72vh; height: 72vh; }
      .brand-video-hero__content { padding-bottom: 32px; }
      .brand-video-hero__title { font-size: clamp(30px, 8vw, 44px); }
      .brand-video-hero__desc { font-size: 14px; }
      .hero-copy { padding: 24px; }
      .hero-metrics { grid-template-columns: 1fr; }
      .interior-row { grid-template-columns: 1fr; }
      .color-showcase { margin-top: 44px; }
      .color-grid { grid-template-columns: repeat(5, 210px); }
      .color-option img { height: 190px; }
      .color-preview { display: none; }
      .pricing-grid { grid-template-columns: 1fr; }
      .gallery-grid { grid-template-columns: 1fr; grid-template-rows: repeat(5, 220px); }
      .gallery-item--main { grid-column: auto; }
      .tech-panel-image { height: 200px; }
      .equipment-matrix {
        margin-top: 44px;
        padding: 22px 14px 24px;
      }
      .equipment-title { font-size: 15px; }
      .equipment-content { font-size: 14px; }
    }