:root{
    --ink:#161514;
    --charcoal:#1a1817;
    --charcoal-2:#242120;
    --orange:#ec682a;
    --orange-deep:#c9541f;
    --orange-bright:#ff8a4c;
    --paper:#ececeb;
    --cream:#e0e0dd;
    --gray-900:#2b2826;
    --gray-700:#524d49;
    --gray-500:#847d77;
    --gray-300:#d8d3cc;
    --gray-line:#d2d2cf;
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Barlow', sans-serif;
  }
  /* Esta es una web de marca: mantenemos la misma paleta de día
     independientemente del tema del sistema, para no perder el
     contraste claro/oscuro que da la identidad de N1 Júndiz. */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --cream:#e0e0dd;
      --paper:#ececeb;
      --ink:#161514;
      --gray-500:#847d77;
      --gray-line:#d2d2cf;
    }
  }
  :root[data-theme="dark"]{
    --cream:#e0e0dd;
    --paper:#ececeb;
    --ink:#161514;
    --gray-500:#847d77;
    --gray-line:#d2d2cf;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
  @media (max-width:600px){ .wrap{padding:0 22px;} }

  .skip-link{position:absolute; left:-9999px; top:0; background:var(--orange); color:#fff; padding:10px 16px; z-index:999;}
  .skip-link:focus{left:12px; top:12px;}

  /* ---------- top accent bar (living detail) ---------- */
  .accent-bar{
    height:3px; width:100%;
    background:linear-gradient(90deg, var(--orange-deep), var(--orange-bright), var(--orange-deep));
    background-size:200% 100%;
    animation:shimmer 6s linear infinite;
  }
  @keyframes shimmer{ 0%{background-position:0% 0;} 100%{background-position:200% 0;} }

  /* ---------- header (no nav, one-pager) ---------- */
  header.site{
    position:sticky; top:0; z-index:100;
    background:rgba(15,15,15,.92);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; padding-top:16px; padding-bottom:16px;
  }
  .brand{display:flex; align-items:center; gap:14px; text-decoration:none;}
  .brand img{height:36px; width:auto;}
  .brand-slogan{
    display:none;
    color:var(--gray-500); font-size:.82rem; line-height:1.25; max-width:230px;
    border-left:1px solid #3a3533; padding-left:14px;
  }
  @media (min-width:760px){ .brand-slogan{display:block;} }

  .phone-pill{
    display:flex; align-items:center; gap:8px;
    color:var(--ink); text-decoration:none; font-weight:600;
    background:transparent; border:1.5px solid var(--orange); padding:9px 16px; border-radius:999px;
    font-size:.92rem; white-space:nowrap; color:#fff;
    transition:background .2s ease, color .2s ease;
  }
  .phone-pill:hover, .phone-pill:focus-visible{background:var(--orange);}
  .phone-pill svg{width:16px; height:16px; flex:none;}

  /* ---------- hero ---------- */
  .hero{position:relative; color:#fff; overflow:hidden;}
  .hero-media{
    position:absolute; inset:-6% -6%; overflow:hidden;
    will-change:transform;
  }
  .hero-slide{
    position:absolute; inset:0;
    background-size:cover; background-position:center 62%;
    animation:kenBurns 15s ease-in-out infinite alternate;
    transform-origin:56% 46%;
    opacity:0;
    transition:opacity 1.4s ease;
  }
  .hero-slide.is-active{opacity:1;}
  @keyframes kenBurns{ 0%{transform:scale(1);} 100%{transform:scale(1.13);} }
  .hero-media::before{
    /* rejilla sutil sobre la foto: da textura técnica y disimula la resolución */
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
    background-size:46px 46px;
    mix-blend-mode:overlay;
  }
  .hero-media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(115deg, rgba(15,13,12,.94) 14%, rgba(15,13,12,.72) 48%, rgba(15,13,12,.32) 88%);
  }
  .hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:38px; padding-top:72px; padding-bottom:96px;}
  @media (min-width:980px){
    .hero-grid{grid-template-columns:1.35fr .95fr; align-items:start; gap:52px;}
  }
  .hero-copy{min-width:0;}
  .eyebrow-line{
    display:inline-flex; align-items:center; gap:10px;
    color:var(--orange-bright); font-weight:600; font-size:.92rem; margin:0 0 20px 0;
    letter-spacing:.03em;
  }
  .eyebrow-line::before{content:""; width:34px; height:2px; background:var(--orange-bright); display:block;}
  .hero h1{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(2.1rem, 5.2vw, 3.25rem); line-height:1.05; margin:0 0 20px 0;
  }
  .hero p.lead{
    font-size:clamp(1.02rem, 2.2vw, 1.25rem); color:#dfdad3; max-width:46ch; margin:0 0 30px 0;
  }
  .hero-facts{display:flex; flex-wrap:wrap; margin:0 0 22px -24px;}
  .hero-fact{display:flex; align-items:center; color:#e9e4dc; font-size:.96rem; margin:0 0 14px 24px;}
  .hero-fact svg{width:19px; height:19px; color:var(--orange-bright); flex:none; margin-right:10px;}
  .hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px;}
  .btn{
    display:inline-flex; align-items:center; gap:10px; text-decoration:none;
    font-family:var(--font-display); font-size:1.08rem; letter-spacing:.01em;
    padding:13px 26px; border-radius:9px; border:1.5px solid transparent; cursor:pointer;
    transition:transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--orange); color:#fff;}
  .btn-primary:hover{background:var(--orange-deep);}
  .btn:disabled{opacity:.6; cursor:not-allowed; transform:none;}
  .btn-outline{border-color:rgba(255,255,255,.5); color:#fff; background:transparent;}
  .btn-outline:hover{background:rgba(255,255,255,.1); border-color:#fff;}

  .hero-notices{display:flex; flex-direction:column; gap:14px; width:100%;}
  .notice-card{border-radius:14px; padding:20px 22px;}
  .notice-award{
    background:rgba(236,104,42,.86);
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
    color:#fff;
    box-shadow:0 20px 44px rgba(0,0,0,.28);
  }
  .notice-award svg{width:24px; height:24px; margin-bottom:12px;}
  .notice-award p{margin:0 0 12px 0; font-size:.95rem; line-height:1.5;}
  .notice-award strong{font-weight:700;}
  .notice-date{
    display:inline-block; font-family:var(--font-display); letter-spacing:.06em;
    font-size:.85rem; padding-top:2px; border-top:1px solid rgba(255,255,255,.35); width:100%;
  }
  .notice-info{
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    color:#fff; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between;
  }
  .notice-info p{margin:0; font-size:.92rem; line-height:1.4;}
  .notice-link{font-weight:700; text-decoration:underline; color:var(--orange-bright); white-space:nowrap; flex:none;}

  /* hero load sequence — one deliberate moment */
  .hero-anim{opacity:0; transform:translateY(16px); animation:heroIn .7s ease forwards;}
  .hero-anim.d1{animation-delay:.05s;}
  .hero-anim.d2{animation-delay:.15s;}
  .hero-anim.d3{animation-delay:.27s;}
  .hero-anim.d4{animation-delay:.38s;}
  .hero-anim.d5{animation-delay:.5s;}
  .hero-anim.d6{animation-delay:.62s;}
  @keyframes heroIn{ to{opacity:1; transform:translateY(0);} }

  /* scroll reveal for sections */
  [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  [data-reveal].is-visible{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .accent-bar{animation:none;}
    header.site::after{animation:none;}
    .hero-anim{opacity:1; transform:none; animation:none;}
    [data-reveal]{opacity:1; transform:none; transition:none;}
    .hero-media{transform:none !important;}
    .hero-slide{animation:none; transition:none;}
  }

  /* ---------- section shell ---------- */
  section{padding:80px 0;}
  .section-head{max-width:640px; margin:0 0 42px 0;}
  .kicker{
    display:inline-block; color:var(--orange); font-family:var(--font-display);
    font-size:1rem; letter-spacing:.04em; margin-bottom:8px;
  }
  h2{
    font-family:var(--font-display); font-weight:700; font-size:clamp(1.85rem, 3.6vw, 2.6rem);
    line-height:1.08; margin:0 0 12px 0;
  }
  .section-head p{color:var(--gray-700); font-size:1.05rem; margin:0;}

  /* ---------- precios ---------- */
  .precios{background:var(--paper); border-top:1px solid var(--gray-line); border-bottom:1px solid var(--gray-line);}
  /* sección de precios más compacta que el resto */
  section.precios{padding:44px 0 56px;}
  .precios .section-head{margin-bottom:26px;}
  .price-grid{
    display:grid; grid-template-columns:1fr; gap:16px;
  }
  /* bloques "Precios tráiler" / "Precios profesionales" — misma letra que el título de la sección */
  .price-block + .price-block{margin-top:34px;}
  .price-block-title{
    font-family:var(--font-display); font-weight:700; font-size:clamp(1.35rem, 2.4vw, 1.75rem);
    line-height:1.1; margin:0 0 14px 0; color:var(--ink); scroll-margin-top:100px;
  }
  .price-block{scroll-margin-top:100px;}
  @media (min-width:480px){ .price-grid{grid-template-columns:repeat(2,1fr);} }
  @media (min-width:860px){ .price-grid{grid-template-columns:repeat(3,1fr); gap:20px;} }
  .price-card{
    background:var(--cream); border:1.5px solid var(--orange); border-radius:14px;
    padding:24px 22px 22px;
    display:flex; flex-direction:column; gap:6px;
  }
  .price-fuel{font-family:var(--font-display); font-size:1.3rem; letter-spacing:.01em; color:var(--ink);}
  .price-tag{font-size:.83rem; color:var(--gray-500); text-transform:uppercase; letter-spacing:.05em;}
  .price-icon{
    width:38px; height:38px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  }
  .price-icon svg{width:20px; height:20px;}
  /* colores por combustible: A negro · B rojo · Gasolina 95 verde · AdBlue azul */
  .price-icon.is-diesel{background:rgba(22,21,20,.12);} .price-icon.is-diesel svg{color:#161514;}
  .price-icon.is-diesel-b{background:rgba(214,62,43,.12);} .price-icon.is-diesel-b svg{color:#d63e2b;}
  .price-icon.is-adblue{background:rgba(43,110,214,.12);} .price-icon.is-adblue svg{color:#2b6ed6;}
  .price-icon.is-gasolina{background:rgba(46,158,99,.14);} .price-icon.is-gasolina svg{color:#2e9e63;}
  .price-badge{
    align-self:flex-start; background:var(--orange); color:#fff; font-size:.72rem; font-weight:700;
    letter-spacing:.03em; padding:4px 10px; border-radius:999px; margin-top:8px;
  }
  .price-amount{font-family:var(--font-display); font-size:3.1rem; color:var(--orange); line-height:1; margin:10px 0 2px;}
  .price-vat{font-size:.8rem; color:var(--gray-500);}
  .price-amount.is-pending{color:var(--gray-500);}
  /* tarjetas sin coletilla (bloque tráiler): el nombre centrado con el icono */
  .price-card.no-tag .price-fuel{grid-area:auto; grid-column:2; grid-row:1 / 3; align-self:center;}
  .price-updated{margin-top:28px; color:var(--gray-500); font-size:.9rem;}

  /* tarjetas de precio en tablet/escritorio: icono junto al nombre, precio grande y en negrita,
     4 por fila en escritorio. Las filas internas se alinean entre tarjetas (subgrid),
     así los precios quedan a la misma altura aunque una coletilla ocupe dos líneas. */
  @media (min-width:480px){
    .price-grid{grid-auto-rows:auto; row-gap:18px;}
    .price-card{
      display:grid; grid-row:span 4; grid-template-rows:subgrid;
      grid-template-columns:38px 1fr;
      grid-template-areas:"icon fuel" "icon tag" "amount amount" "vat vat";
      column-gap:12px; row-gap:0; padding:18px 20px 16px;
    }
    .price-icon{grid-area:icon; margin:0; align-self:center;}
    .price-fuel{grid-area:fuel; align-self:end; line-height:1.15; font-weight:600;}
    .price-tag{grid-area:tag; align-self:start; font-size:.72rem; letter-spacing:.04em; line-height:1.3; margin-top:2px;}
    .price-amount{
      grid-area:amount; align-self:end; font-weight:500; letter-spacing:0;
      font-size:clamp(3rem, 4.6vw, 3.75rem); margin:12px 0 0;
    }
    .price-vat{grid-area:vat;}
    .price-badge{grid-area:tag; justify-self:start; align-self:start; margin-top:4px; font-size:.66rem; padding:3px 9px;}
    .price-badge.is-bottom{grid-area:auto; grid-column:1 / -1;}
  }
  @media (min-width:1000px){
    .price-grid{grid-template-columns:repeat(4,1fr); column-gap:18px;}
  }

  @media (max-width:479px){
    .price-card{
      display:grid;
      grid-template-columns:44px 1fr auto;
      grid-template-areas:"icon fuel amount" "icon tag amount" "badge badge badge";
      column-gap:14px; row-gap:1px; align-items:center;
      padding:14px 16px;
    }
    .price-icon{grid-area:icon; width:40px; height:40px; margin-bottom:0;}
    .price-fuel{grid-area:fuel; font-size:1.05rem; align-self:end;}
    .price-tag{grid-area:tag; font-size:.72rem; align-self:start;}
    .price-amount{grid-area:amount; font-size:2.15rem; font-weight:500; margin:0; text-align:right; white-space:nowrap;}
    .price-vat{display:none;}
    .price-badge{grid-area:tag; justify-self:start; align-self:start; margin-top:3px; font-size:.64rem; padding:2px 8px;}
    .price-badge.is-bottom{grid-area:badge; margin-top:8px;}
  }

  /* ---------- tienda strip ---------- */
  .tienda{background:var(--charcoal); color:#fff;}
  .tienda-inner{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px;
    padding:38px 0;
  }
  .tienda-text h3{font-family:var(--font-display); font-size:1.65rem; margin:0 0 6px 0;}
  .tienda-text p{margin:0; color:var(--gray-300); max-width:46ch;}

  /* ---------- hazte socio ---------- */
  .socios{background:var(--cream);}
  .socios .kicker{color:var(--orange);}
  .socios-grid{display:grid; grid-template-columns:1fr; gap:36px;}
  @media (min-width:860px){ .socios-grid{grid-template-columns:1.1fr .7fr; align-items:center;} }
  .socios-lead{color:var(--gray-700); max-width:46ch; margin:0 0 24px 0; font-size:1.05rem;}
  .socios-stats{display:flex; flex-direction:row; flex-wrap:wrap; gap:16px;}
  @media (min-width:860px){ .socios-stats{flex-direction:column;} }
  .stat-block{
    background:var(--paper); border:1px solid var(--gray-line); border-radius:14px;
    padding:26px 24px; flex:1; min-width:150px;
  }
  .stat-number{display:block; font-family:var(--font-display); font-size:4.2rem; color:var(--orange); line-height:1;}
  .stat-label{display:block; color:var(--gray-700); font-size:.92rem; margin-top:8px;}

  /* ---------- compromiso ---------- */
  .compromiso{background:var(--paper);}
  .compromiso-grid{display:grid; grid-template-columns:1fr; gap:36px; align-items:center;}
  @media (min-width:860px){ .compromiso-grid{grid-template-columns:1.05fr .95fr;} }
  .check-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
  .check-list li{display:flex; gap:14px; align-items:flex-start; font-size:1.08rem;}
  .check-list svg{flex:none; width:24px; height:24px; color:var(--orange); margin-top:2px;}
  .compromiso-photo{
    border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:var(--charcoal);
  }
  .compromiso-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(.15);}

  /* ---------- servicios ---------- */
  .servicios{background:var(--cream); border-top:1px solid var(--gray-line); border-bottom:1px solid var(--gray-line);}
  .servicios .kicker{color:var(--orange);}
  .servicios .section-head p{color:var(--gray-700);}
  .servicios-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px;
    background:var(--gray-line); border-radius:16px; overflow:hidden;
  }
  .servicio-item{
    background:var(--paper); padding:22px 22px; display:flex; gap:14px; align-items:flex-start;
    transition:background .2s ease;
  }
  .servicio-item:hover{background:var(--gray-line);}
  .servicio-item:last-child{grid-column:1/-1; justify-content:center;}
  .servicio-item svg{flex:none; width:25px; height:25px; color:var(--orange); margin-top:2px;}
  .servicio-item span{font-size:.98rem; line-height:1.4; color:var(--ink);}

  /* ---------- carga eléctrica ---------- */
  .carga{position:relative; color:#fff; overflow:hidden;}
  .carga-media{position:absolute; inset:0; background-size:cover; background-position:center 58%;}
  .carga-media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(15,13,12,.92) 22%, rgba(15,13,12,.68) 62%, rgba(15,13,12,.4) 100%);
  }
  .carga-inner{position:relative; padding-top:80px; padding-bottom:80px; max-width:640px;}
  .carga .kicker{color:#4cc987;}
  .carga h2{color:#fff;}
  .carga-lead{color:#d8d3cc; font-size:1.05rem; margin:0 0 24px 0;}
  .carga .check-list li{color:#efe9e0;}
  .carga .check-list svg{color:#4cc987;}

  /* ---------- ubicacion ---------- */
  .ubicacion-grid{display:grid; grid-template-columns:1fr; gap:32px;}
  @media (min-width:900px){ .ubicacion-grid{grid-template-columns:1.2fr .8fr;} }
  .map-frame{border-radius:16px; overflow:hidden; border:1px solid var(--gray-line); aspect-ratio:4/3; background:var(--paper); filter:grayscale(.25) contrast(1.05);}
  .map-frame iframe{width:100%; height:100%; border:0;}
  .contact-card{
    background:var(--paper); border:1px solid var(--gray-line); border-radius:16px; padding:28px;
    display:flex; flex-direction:column; gap:20px;
  }
  .contact-row{display:flex; gap:14px; align-items:flex-start;}
  .contact-row svg{flex:none; width:22px; height:22px; color:var(--orange); margin-top:3px;}
  .contact-row h4{margin:0 0 3px 0; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-500);}
  .contact-row p, .contact-row a{margin:0; font-size:1.02rem; text-decoration:none;}
  .contact-row a:hover{color:var(--orange);}

  /* ---------- contacto ---------- */
  .contacto{background:var(--paper); border-top:1px solid var(--gray-line);}
  .form-shell{
    max-width:660px; margin:0 auto; background:var(--cream); border:1px solid var(--gray-line);
    border-radius:18px; padding:32px;
  }
  .form-row{margin-bottom:18px;}
  .form-row label{display:block; font-size:.85rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--gray-500); margin-bottom:7px;}
  .form-row input, .form-row textarea, .form-row select{
    width:100%; padding:13px 15px; font-family:var(--font-body); font-size:1rem;
    border:1px solid var(--gray-line); border-radius:10px; background:var(--paper); color:var(--ink);
  }
  .form-row select{appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23847d77' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:42px;
  }
  .form-row input:focus, .form-row textarea:focus, .form-row select:focus{outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange);}
  .form-two{display:grid; grid-template-columns:1fr; gap:0 16px;}
  @media (min-width:560px){ .form-two{grid-template-columns:1fr 1fr;} }
  .consent{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--gray-500); margin-bottom:22px;}
  .consent a{text-decoration:underline; color:var(--gray-500);}
  .consent input{margin-top:3px;}
  .form-note{
    display:none; margin-top:16px; padding:14px 16px; border-radius:10px;
    background:var(--charcoal); color:#fff; font-size:.95rem; border-left:3px solid var(--orange);
  }
  .form-note.visible{display:block;}
  .form-note.is-error{border-left-color:#d63e2b; background:#3a1f1c;}

  /* ---------- footer ---------- */
  footer.site{background:var(--charcoal); color:var(--gray-300); padding:46px 0 30px;}
  .footer-grant-wrap{text-align:center; margin-bottom:36px;}
  .footer-grant{
    display:inline-block; background:#fff; border-radius:10px;
    padding:12px 18px; max-width:460px;
  }
  .footer-grant img{width:100%; height:auto; display:block;}
  .footer-grid{display:grid; grid-template-columns:1fr; gap:28px;}
  @media (min-width:760px){ .footer-grid{grid-template-columns:1.2fr 1fr 1fr;} }
  .footer-brand img{height:32px; margin-bottom:14px;}
  .footer-brand p{max-width:36ch; font-size:.92rem; line-height:1.5;}
  footer h5{color:#fff; font-family:var(--font-display); font-size:1rem; margin:0 0 12px 0; letter-spacing:.02em;}
  footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:.92rem;}
  footer a{text-decoration:none; color:var(--gray-300);}
  footer a:hover{color:var(--orange-bright);}
  .footer-bottom{
    margin-top:34px; padding-top:22px; border-top:1px solid #34302e;
    display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; font-size:.82rem; color:#7a746f;
  }

  ::selection{background:var(--orange); color:#fff;}