/* Fuerza la barra de scroll vertical siempre presente (aunque la página no
   la necesite) para que el ancho disponible sea idéntico en todas las
   páginas. Sin esto, una página corta (sin scroll) tiene ~15px más de
   ancho que una larga (con scroll) en Windows/Chrome, y el header —
   alineado con space-between— se corre esos 15px según cuánto contenido
   tenga cada página, aunque el CSS del header sea exactamente el mismo. */
html{ overflow-y:scroll; }
:root{
    --ink:#141210;
    --charcoal:#0C0C0C;
    --plaster:#EDE6D9;
    --brick:#BB5631;
    --brick-deep:#8F3F22;
    --terracotta-ingles:#71372C;
    --sand:#C9B99B;
    --mortar:#A69C87;
    --line-on-dark: rgba(237,230,217,0.28);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background:var(--charcoal);
    color:var(--plaster);
    font-family:'Work Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  button{font-family:inherit; cursor:pointer; border:none;}

  .eyebrow{
    font-family:'Space Grotesk', sans-serif;
    font-size:11px;
    letter-spacing:0.16em;
    text-transform:uppercase;
  }

  /* ============ HOME / HERO CINEMATOGRÁFICO ============ */
  .home{
    position:relative;
    height:100vh;
    min-height:680px;
    width:100%;
    overflow:hidden;
  }

  /* --- Escenas en bucle con paneo (Ken Burns) --- */
  .scenes{ position:absolute; inset:0; }
  .scene{
    position:absolute; inset:0;
    opacity:0;
    transition:opacity 1.6s ease;
  }
  .scene img{
    position:absolute;
    top:-4%;
    width:150%;
    max-width:none;
    height:108%;
    object-fit:cover;
    animation-duration:24s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    animation-play-state:paused;
  }
  .scene.active{ opacity:1; z-index:2; }
  .scene.active img{ animation-play-state:running; }
  .scene:nth-child(odd) img{ animation-name:pan-right; }
  .scene:nth-child(even) img{ animation-name:pan-left; }

  /* Paneo puramente horizontal, con margen de seguridad para evitar bordes negros */
  @keyframes pan-right{ from{ left:-3%; } to{ left:-47%; } }
  @keyframes pan-left{ from{ left:-47%; } to{ left:-3%; } }

  .home::after{
    content:"";
    position:absolute; inset:0; z-index:3;
    background:
      linear-gradient(180deg, rgba(12,12,12,0.6) 0%, rgba(12,12,12,0.22) 18%, rgba(12,12,12,0.34) 55%, rgba(12,12,12,0.78) 100%);
    pointer-events:none;
  }

  /* --- Header: disponible de inmediato, no bloqueante --- */
  header{
    position:absolute;
    top:0; left:0; right:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 5vw;
  }
  .logo-mark{
    height:51px;
    width:auto;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,0.35));
  }
  nav{ display:flex; align-items:center; gap:32px; }
  nav a{
    font-family:'Space Grotesk', sans-serif;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--plaster);
    opacity:0.92;
    padding:6px 0;
    position:relative;
    text-shadow:0 1px 8px rgba(0,0,0,0.6);
  }
  nav a::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:1px; background:var(--brick);
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.3s ease;
  }
  nav a:hover::after{ transform:scaleX(1); }
  .nav-toggle{
    display:none;
    background:none;
    color:var(--plaster);
    width:34px; height:26px;
    flex-direction:column;
    justify-content:space-between;
  }
  .nav-toggle span{ display:block; height:1.5px; background:var(--plaster); width:100%; }

  /* --- Bienvenida + Split Routing (fade a los 2.2s) --- */
  .welcome{
    position:absolute;
    inset:0;
    z-index:10;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 6vw;
    opacity:0;
    transform:translateY(14px);
    transition:opacity 1.1s ease, transform 1.1s ease;
  }
  .welcome.in{ opacity:1; transform:translateY(0); }

  .welcome::before{
    content:"";
    position:absolute;
    inset:-14% -8%;
    z-index:-1;
    background:radial-gradient(58% 58% at 50% 46%, rgba(12,12,12,0.55) 0%, rgba(12,12,12,0.28) 45%, rgba(12,12,12,0) 75%);
  }

  .welcome .eyebrow{
    color:var(--sand);
    margin-bottom:20px;
    text-shadow:0 2px 16px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.7);
  }
  .welcome h1{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:clamp(42px, 7vw, 104px);
    line-height:1;
    letter-spacing:-0.01em;
    margin-bottom:34px;
    color:#fff;
    text-shadow:0 6px 34px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.65);
  }
  .welcome h1 em{ font-style:italic; font-weight:300; color:var(--sand); }

  .cta-row{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'Space Grotesk', sans-serif;
    font-size:12.5px;
    letter-spacing:0.07em;
    text-transform:uppercase;
    padding:17px 28px;
    transition:transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color .25s ease;
  }
  .btn-primary{
    background:var(--brick);
    color:#fff;
  }
  .btn-primary:hover{ background:var(--brick-deep); transform:translateY(-2px); }
  .btn-secondary{
    background:rgba(237,230,217,0.92);
    color:var(--charcoal);
  }
  .btn-secondary:hover{ background:#fff; transform:translateY(-2px); }

  /* --- Franja de métricas --- */
  .metrics{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:10;
    padding:22px 5vw;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .metrics ul{
    list-style:none;
    display:flex;
    width:100%;
  }
  .metrics li{
    flex:1;
    padding:0 22px;
    border-left:1px solid var(--line-on-dark);
    font-family:'Space Grotesk', sans-serif;
  }
  .metrics li:first-child{ border-left:none; padding-left:0; }
  .metrics .num{
    display:block;
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:20px;
    color:var(--plaster);
    margin-bottom:4px;
  }
  .metrics .lbl{
    display:block;
    font-size:10.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--mortar);
  }

  .scene-dots{
    position:absolute;
    right:5vw; top:50%;
    transform:translateY(-50%);
    z-index:10;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .scene-dots button{
    width:6px; height:6px;
    border-radius:50%;
    background:rgba(237,230,217,0.35);
    transition:background .3s, transform .3s;
    padding:0;
  }
  .scene-dots button.active{
    background:var(--brick);
    transform:scale(1.5);
  }

  @media (max-width: 860px){
    header{ padding:16px 6vw; }
    nav{
      position:absolute;
      top:60px; right:6vw;
      background:var(--charcoal);
      border:1px solid var(--line-on-dark);
      flex-direction:column;
      align-items:flex-start;
      gap:0;
      padding:8px 0;
      display:none;
    }
    nav.open{ display:flex; }
    nav a{ padding:12px 22px; width:100%; }
    .nav-toggle{ display:flex; }
    .logo-mark{ height:44px; }

    .welcome h1{ font-size:clamp(34px, 9vw, 54px); }
    .cta-row{ flex-direction:column; width:100%; }
    .btn{ justify-content:center; width:100%; }

    .scene-dots{ display:none; }

    .metrics{ padding:16px 6vw 20px; }
    .metrics ul{ flex-direction:column; gap:12px; }
    .metrics li{ border-left:none; border-top:1px solid var(--line-on-dark); padding:12px 0 0; }
    .metrics li:first-child{ border-top:none; padding-top:0; }
  }

  /* Móvil en horizontal: el hero cabe en la pantalla y el contenido queda
     centrado de verdad (antes min-height:680px lo empujaba fuera de la vista). */
  @media (orientation:landscape) and (max-height:560px){
    .home{ min-height:0; height:100vh; height:100svh; }
    .welcome{ padding:52px 6vw 12px; }
    .welcome .eyebrow{ margin-bottom:8px; }
    .welcome h1{ font-size:clamp(22px, 6vw, 38px); margin-bottom:16px; }
    .cta-row{ flex-direction:row; width:auto; gap:10px; flex-wrap:wrap; }
    .btn{ width:auto; padding:11px 18px; font-size:11px; }
    .metrics{ display:none; }
    .scene-dots{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    .scene img{ animation:none !important; transform:scale(1.06); }
    .welcome{ transition:opacity 0.4s ease; }
  }

  :focus-visible{ outline:2px solid var(--brick); outline-offset:3px; }
  .sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0, 0, 0, 0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
  body.modal-open{ overflow:hidden; }

  /* ============ PÁGINA CON HEADER + LAYOUT 2 COLUMNAS (compartido: configuradores, contacto) ============ */
  .config-header{
    position:relative;
    padding:40px 5vw 0;
    background:var(--charcoal);
    color:var(--plaster);
  }
  .config-crumbs{
    font-family:'Space Grotesk', sans-serif;
    font-size:11px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--mortar);
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .config-crumbs a{ color:var(--plaster); opacity:0.7; display:inline-flex; align-items:center; }
  .config-crumbs a:hover{ opacity:1; }
  .crumb-home{ width:13px; height:13px; }
  .config-header h1{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:clamp(26px, 3vw, 40px);
    margin-bottom:6px;
  }
  .config-header .sub{
    font-size:13.5px;
    color:var(--mortar);
    margin-bottom:22px;
  }

  .config-layout{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:36px;
    padding:0 5vw 90px;
    background:var(--charcoal);
    color:var(--plaster);
    align-items:start;
  }

  .sidebar{
    position:sticky;
    top:82px;
    max-height:calc(100vh - 82px - 24px);
    overflow-y:auto;
    border:1px solid var(--line-on-dark);
    background:rgba(237,230,217,0.03);
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:20px;
    scrollbar-width:thin;
    scrollbar-color:var(--mortar) transparent;
  }
  .sidebar::-webkit-scrollbar{ width:10px; background:transparent; }
  .sidebar::-webkit-scrollbar-track{ background:transparent; }
  .sidebar::-webkit-scrollbar-thumb{ background:var(--mortar); border-radius:4px; }
  .sidebar::-webkit-scrollbar-button{ background:var(--mortar); height:9px; }
  .sidebar h3{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:17px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .sidebar .badge{
    background:var(--brick);
    color:#fff;
    font-family:'Space Grotesk', sans-serif;
    font-size:10.5px;
    width:18px; height:18px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  /* Imagen + nombre + info + ficha técnica de "Tu selección" agrupados con
     espaciado propio, más chico que el gap:20px entre secciones del sidebar
     (título, selección, cantidad, carrito, totales...) — evita que cada
     línea de ese bloque se vea separada como si fuera su propia sección. */
  .sel-block{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .btn-block{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:13px 16px;
    font-family:'Space Grotesk', sans-serif;
    font-size:11.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    border:1px solid var(--line-on-dark);
    background:transparent;
    color:var(--plaster);
    transition:all 0.2s ease;
  }
  .btn-block:hover:not(:disabled){ border-color:var(--sand); }
  .btn-block.solid{
    background:var(--brick);
    border-color:var(--brick);
    color:#fff;
  }
  .btn-block.solid:hover:not(:disabled){ background:var(--brick-deep); }
  .btn-block:disabled{ opacity:0.35; cursor:not-allowed; }
  .btn-block .btn-icon{ width:16px; height:16px; flex-shrink:0; }

  .sel-empty{
    font-family:'Space Grotesk', sans-serif;
    font-size:11.5px;
    color:var(--mortar);
  }

  .cart-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:260px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--mortar) transparent;
  }
  .cart-list::-webkit-scrollbar{ width:10px; background:transparent; }
  .cart-list::-webkit-scrollbar-track{ background:transparent; }
  .cart-list::-webkit-scrollbar-thumb{ background:var(--mortar); border-radius:4px; }
  .cart-list::-webkit-scrollbar-button{ background:var(--mortar); height:9px; }
  .cart-item{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding-bottom:14px;
    border-bottom:1px solid var(--line-on-dark);
  }
  .cart-item:last-child{ border-bottom:none; }
  .cart-thumb{
    width:52px; height:52px;
    flex-shrink:0;
    border-radius:8px;
    background-repeat:no-repeat;
    background-position:center;
    background-color:#7a5a3c;
    background-image:
      repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 3px, transparent 3px 30px),
      repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0 2px, transparent 2px 62px);
  }
  .cart-info{ flex:1; min-width:0; }
  .cart-info .cname{ font-size:13px; margin-bottom:2px; }
  .cart-info .cname .cart-fam{
    display:inline-block;
    font-family:'Space Grotesk', sans-serif;
    font-size:8.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--brick);
    border:1px solid rgba(187,86,49,0.5);
    border-radius:4px;
    padding:1px 5px;
    margin-right:6px;
    vertical-align:middle;
  }
  .cart-info .cmeta{
    font-family:'Space Grotesk', sans-serif;
    font-size:10px;
    color:var(--mortar);
  }
  .cart-stepper{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:9px;
  }
  .cart-stepper button{
    width:22px; height:22px;
    flex-shrink:0;
    border-radius:50%;
    border:1px solid var(--line-on-dark);
    background:none;
    color:var(--plaster);
    font-size:13px;
    line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .cart-stepper button:hover{ border-color:var(--sand); }
  .cstep-qty{
    font-family:'Space Grotesk', sans-serif;
    font-size:10.5px;
    min-width:14px;
    text-align:center;
    white-space:nowrap;
  }
  .cstep-piezas{
    font-family:'Space Grotesk', sans-serif;
    font-size:10px;
    color:var(--mortar);
    margin-left:2px;
  }
  .cart-del{
    background:none;
    color:var(--mortar);
    width:22px; height:22px;
    flex-shrink:0;
  }
  .cart-del:hover{ color:var(--brick); }

  /* ---- Stepper de tarimas + resumen de piezas (compartido por todos los
     configuradores de producto: Caravista, Ladrillos Repellables, y los que
     sigan) — antes vivía duplicado en cada <producto>.css con el mismo bug
     en los 2: el número de piezas por tarima salía en texto gris de 11px,
     fácil de perder justo donde el cliente lo necesita para decidir cuántas
     tarimas pedir. Ahora es un bloque de 2 estadísticas grandes y con
     etiqueta clara, y el stepper usa un <input> real (antes era un <span>,
     no se podía escribir la cantidad a mano, solo +/-). ---- */
  .qty-action-row{
    display:flex;
    align-items:stretch;
    gap:10px;
  }
  .qty-action-row .stepper{ flex-shrink:0; }
  .qty-action-row .btn-block{ flex:1; margin:0; }
  .stepper{
    display:flex;
    align-items:center;
    border:1px solid var(--line-on-dark);
    flex-shrink:0;
  }
  .stepper button{
    width:32px; height:34px;
    background:none;
    color:var(--plaster);
    font-size:16px;
    flex-shrink:0;
  }
  .stepper button:hover{ background:rgba(237,230,217,0.06); }
  .stepper .qty{
    width:48px;
    height:34px;
    text-align:center;
    font-family:'Space Grotesk', sans-serif;
    font-size:14px;
    color:var(--plaster);
    background:none;
    border:none;
    border-left:1px solid var(--line-on-dark);
    border-right:1px solid var(--line-on-dark);
    -moz-appearance:textfield;
  }
  .stepper .qty::-webkit-outer-spin-button,
  .stepper .qty::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }
  .stepper .qty:focus{ outline:none; background:rgba(237,230,217,0.08); }

  .qty-facts{
    display:flex;
    margin:14px 0;
    border:1px solid var(--line-on-dark);
  }
  .qty-facts .qf-stat{
    flex:1;
    padding:10px 12px;
    text-align:center;
    min-width:0;
  }
  .qty-facts .qf-stat + .qf-stat{ border-left:1px solid var(--line-on-dark); }
  .qty-facts .qf-label{
    display:block;
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:9.5px;
    letter-spacing:0.07em;
    text-transform:uppercase;
    color:var(--mortar);
    margin-bottom:4px;
  }
  .qty-facts .qf-value{
    display:block;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:21px;
    line-height:1.15;
    color:var(--plaster);
  }
  .qty-facts .qf-value.qf-total{ color:var(--brick); }
  /* Fachaletas muestra 4 datos (piezas/m² por paquete + totales) -> 2×2 en
     vez de una fila apretada. Caravista solo tiene 2 y esto no le afecta. */
  .qty-facts{ flex-wrap:wrap; }
  .qty-facts .qf-stat{ flex:1 1 40%; }
  .qty-facts .qf-stat:nth-child(2n+1){ border-left:0; }
  .qty-facts .qf-stat:nth-child(n+3){ border-top:1px solid var(--line-on-dark); }
  .qty-facts .qf-note{
    flex:1 1 100%;
    padding:7px 12px;
    border-top:1px solid var(--line-on-dark);
    text-align:center;
    font-family:'Space Grotesk', sans-serif;
    font-size:9.5px;
    letter-spacing:0.03em;
    color:var(--mortar);
  }
  .qty-facts.qf-empty{
    display:block;
    padding:11px 14px;
    text-align:center;
    font-family:'Space Grotesk', sans-serif;
    font-size:11px;
    color:var(--mortar);
    border-style:dashed;
  }

  .cart-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:'Space Grotesk', sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--mortar);
    padding-top:6px;
    border-top:1px solid var(--line-on-dark);
  }
  .cart-total b{
    font-family:'Fraunces', serif;
    font-size:17px;
    color:var(--plaster);
    font-weight:400;
  }

  @media (max-width: 980px){
    .config-layout{ grid-template-columns:1fr; }
    .sidebar{ position:relative; top:0; max-height:none; overflow-y:visible; }
  }

  /* ============ SITE HEADER (páginas internas, sin hero de fondo) ============ */
  .site-header{
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 5vw;
    background:rgba(12,12,12,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line-on-dark);
  }
  .site-logo{ height:51px; width:auto; }
  .site-nav{ display:flex; align-items:center; gap:32px; }
  .site-nav a{
    font-family:'Space Grotesk', sans-serif;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--plaster);
    opacity:0.75;
    padding:6px 0;
    position:relative;
    transition:opacity 0.2s ease;
  }
  .site-nav a:hover{ opacity:1; }
  .site-nav a::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:1px; background:var(--brick);
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.3s ease;
  }
  .site-nav a:hover::after{ transform:scaleX(1); }
  .site-nav a.active{ opacity:1; }
  .site-nav a.active::after{ transform:scaleX(1); }

  /* --- Item de nav con submenú (Soluciones y productos) --- */
  .site-nav-item{ position:relative; display:flex; align-items:center; }
  .site-nav-item > a{ display:inline-flex; align-items:center; gap:5px; }
  .site-nav-chevron{ width:10px; height:10px; transition:transform 0.2s ease; }
  .site-dropdown{
    position:absolute;
    top:100%; left:50%;
    transform:translateX(-50%) translateY(4px);
    min-width:230px;
    background:var(--charcoal);
    border:1px solid var(--line-on-dark);
    padding:8px 0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 0.18s ease, transform 0.18s ease;
    z-index:40;
  }
  .site-dropdown a{
    display:block;
    padding:10px 20px;
    font-family:'Space Grotesk', sans-serif;
    font-size:11.5px;
    letter-spacing:0.03em;
    text-transform:none;
    color:var(--plaster);
    opacity:0.8;
  }
  .site-dropdown a:hover{ opacity:1; background:rgba(237,230,217,0.05); }
  .site-dropdown a::after{ content:none; }

  @media (hover: hover){
    .site-nav-item:hover .site-dropdown,
    .site-nav-item:focus-within .site-dropdown{
      opacity:1; visibility:visible; pointer-events:auto;
      transform:translateX(-50%) translateY(0);
    }
    .site-nav-item:hover .site-nav-chevron,
    .site-nav-item:focus-within .site-nav-chevron{ transform:rotate(180deg); }
  }

  /* --- Iconos: búsqueda / cuenta (decorativos) / carrito (funcional) --- */
  .site-header-right{ display:flex; align-items:center; gap:12px; }
  .site-icons{ display:flex; align-items:center; gap:4px; }
  .site-icon-btn{
    position:relative;
    width:44px; height:44px;
    display:grid;
    place-items:center;
    color:var(--plaster);
    opacity:0.85;
    background:none;
    transition:opacity 0.2s ease;
  }
  .site-icon-btn svg{ width:21px; height:21px; }
  .site-icon-btn:hover:not(:disabled){ opacity:1; }
  .site-icon-btn:disabled{ opacity:0.35; cursor:not-allowed; }
  .site-cart-badge{
    position:absolute;
    top:-7px; right:-9px;
    min-width:16px; height:16px;
    padding:0 4px;
    border-radius:8px;
    background:var(--brick);
    color:#fff;
    font-family:'Space Grotesk', sans-serif;
    font-size:9.5px;
    display:flex; align-items:center; justify-content:center;
    line-height:1;
  }
  .site-cart-badge[hidden]{ display:none; }

  /* --- Buscador del header: la lupa despliega un campo de texto (site-search.js) --- */
  .site-search{ display:flex; align-items:center; }
  .site-search-input{
    width:0;
    min-width:0;
    padding:0;
    border:0;
    border-bottom:1px solid transparent;
    background:none;
    color:var(--plaster);
    font:400 13px/1 'Space Grotesk', sans-serif;
    opacity:0;
    pointer-events:none;
    transition:width .28s ease, opacity .18s ease, padding .28s ease, border-color .28s ease;
  }
  .site-search-input::placeholder{ color:rgba(237,230,217,0.45); }
  .site-search-input:focus{ outline:none; }
  .site-search.is-open .site-search-input{
    width:210px;
    padding:6px 4px;
    border-bottom-color:var(--line-on-dark);
    opacity:1;
    pointer-events:auto;
  }
  .site-search.is-open .site-search-toggle{ opacity:1; }

  @media (max-width: 860px){
    .site-header{ padding:16px 6vw; }
    .site-nav{
      position:absolute;
      top:60px; right:6vw;
      background:var(--charcoal);
      border:1px solid var(--line-on-dark);
      flex-direction:column;
      align-items:flex-start;
      gap:0;
      padding:8px 0;
      display:none;
      max-height:calc(100vh - 90px);
      overflow-y:auto;
    }
    .site-nav.open{ display:flex; }
    .site-nav a{ padding:12px 22px; width:100%; }
    .site-nav-item{ flex-direction:column; align-items:flex-start; width:100%; }
    .site-nav-item > a::after{ content:none; }
    .site-nav-chevron{ display:none; }
    .site-dropdown{
      position:static;
      opacity:1; visibility:visible; pointer-events:auto;
      transform:none;
      border:none;
      background:none;
      padding:0 0 4px;
      width:100%;
    }
    .site-dropdown a{ padding:10px 22px 10px 34px; opacity:0.65; }
    .site-header .nav-toggle{ display:flex; }
    .site-logo{ height:44px; }
    .site-header-right{ gap:8px; }
    .site-icons{ gap:2px; }
    .site-search.is-open .site-search-input{ width:150px; }
  }
  @media (max-width:560px){
    .site-icons .site-icon-btn:disabled{ display:none; }
    /* En pantallas angostas el campo no cabe en la fila: se despliega como
       una barra bajo el header, de borde a borde. */
    .site-search{ position:static; }
    .site-search.is-open .site-search-input{
      position:absolute;
      left:0; right:0;
      top:100%;
      width:auto;
      margin:0;
      padding:12px 6vw;
      background:var(--charcoal);
      border-bottom:1px solid var(--line-on-dark);
      z-index:60;
    }
  }

  /* ============ SITE FOOTER ============ */
  .site-footer{
    background:var(--terracotta-ingles);
    color:var(--plaster);
    padding:16px 5vw 8px;
  }
  .sf-grid{
    display:grid;
    grid-template-columns:1.45fr repeat(4, 1fr);
    gap:22px clamp(16px, 2vw, 28px);
    align-items:start;
  }
  /* Catálogo e Inspiración: enlace con más peso visual. */
  .sf-col-feature .sf-links a{ font-weight:600; font-size:12px; }
  /* Marca: logo pequeño a la izquierda + lema a su derecha, ambos arrancando
     a la misma altura que los encabezados; "Síguenos" y redes debajo del lema. */
  .sf-brand{ display:flex; flex-direction:row; align-items:flex-start; gap:14px; }
  .sf-brand img{ width:78px; height:auto; flex-shrink:0; margin:0; }
  .sf-brand > div{ display:flex; flex-direction:column; }
  .sf-brand .sf-tagline{font:400 13.5px/1.32 'Fraunces',serif;max-width:24ch;color:var(--plaster);opacity:1;margin:0}
  .sf-brand .sf-tagline em{font-weight:500}
  .sf-follow{display:block;margin-top:11px;font:700 9px/1 'Space Grotesk',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,230,217,.78)}
  .sf-socials{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:9px;
  }
  .sf-social-icon{
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(237,230,217,0.34);
    border-radius:50%;
    color:var(--plaster);
  }
  .sf-social-icon svg{ width:15px; height:15px; }
  /* Solo los íconos que ya son enlace real (Facebook, Instagram, YouTube)
     reaccionan al mouse; LinkedIn sigue siendo <span> decorativo hasta tener URL. */
  a.sf-social-icon{ transition:border-color .2s ease, color .2s ease; }
  a.sf-social-icon:hover{ border-color:var(--brick); color:var(--brick); }
  .sf-heading{
    margin:0 0 6px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:12.5px;
    letter-spacing:0.065em;
    text-transform:uppercase;
    color:var(--plaster);
  }
  .site-footer nav.sf-col{
    position:static;
    inset:auto;
    display:block;
    padding:0;
    border:0;
    background:none;
  }
  .sf-links{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:0;
    padding-left:8px;
    margin:0;
  }
  .sf-links li{margin:0;padding:0;line-height:1}
  .sf-links a,
  .sf-links span{
    display:inline-flex;
    align-items:center;
    min-height:18px;
    max-width:100%;
    color:var(--plaster);
    font-size:11px;
    line-height:1.25;
  }
  .site-footer .sf-links a{
    position:static;
    width:auto;
    padding:0;
    font-family:'Work Sans', sans-serif;
    letter-spacing:normal;
    text-transform:none;
    text-shadow:none;
    opacity:1;
  }
  .site-footer .sf-links a::after{ content:none; }
  .sf-links a:hover{ text-decoration:underline; text-underline-offset:3px; }
  .sf-link-muted{ opacity:0.62; }
  /* Subtítulo dentro de una columna del pie (p. ej. "Próximamente" en Soluciones). */
  .sf-subheading{
    margin:14px 0 5px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(237,230,217,0.55);
  }
  .sf-contact-email{ overflow-wrap:anywhere; }

  .sf-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-top:9px;
    padding-top:7px;
    border-top:1px solid rgba(237,230,217,0.22);
    font-family:'Space Grotesk', sans-serif;
    font-size:10px;
    letter-spacing:0.04em;
    opacity:0.8;
  }
  .sf-legal{ display:flex; align-items:center; gap:16px; }
  .sf-legal a{ color:var(--plaster); }
  .sf-legal a:hover{ text-decoration:underline; text-underline-offset:3px; }

  @media (max-width: 1080px){
    .sf-grid{ grid-template-columns:repeat(4, 1fr); }
    .sf-brand{ grid-column:1 / -1; }
  }
  @media (max-width: 720px){
    .site-footer{ padding-top:16px; }
    /* Móvil: el pie se reduce a marca (logo + lema + redes). Las columnas de
       enlaces se ocultan; para navegar se usa el botón "Volver arriba". */
    .sf-grid{ display:block; }
    .site-footer .sf-grid .sf-col{ display:none; }
    .sf-brand{ align-items:center; text-align:center; flex-direction:column; gap:12px; }
    .sf-brand > div{ align-items:center; }
    .sf-brand .sf-tagline{ max-width:32ch; text-align:center; }
    .sf-brand img{ width:96px; }
    .sf-socials{ justify-content:center; }
    .sf-bottom{ flex-direction:column; align-items:center; text-align:center; gap:5px; margin-top:10px; }
    .sf-legal{ justify-content:center; flex-wrap:wrap; gap:4px 12px; }
  }
  @media (max-width: 480px){
    .sf-social-icon{ width:44px; height:44px; }
  }