/*
Theme Name: Triax Industrial
Theme URI: https://triaxindustrial.com
Author: Triax Industrial
Description: Tema a medida para Triax Industrial — abastecimiento industrial e institucional para minería, oil & gas y sector público.
Version: 1.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: triax
*/

/* ============================================================
   El CSS de diseño del sitio empieza aquí (variables, tipografía,
   layout de todas las secciones). Para cambiar colores, ver
   el bloque :root{} más abajo.
   ============================================================ */

  :root{
    --ink:#1C140F;
    --panel:#271D16;
    --panel-2:#33261A;
    --line: rgba(232,150,61,0.20);
    --line-soft: rgba(232,150,61,0.10);
    --paper:#F7F1E6;
    --paper-dim:#E7DCC9;
    --muted:#C9B8A2;
    --muted-2:#93816B;
    --accent:#E8963D;
    --accent-dark:#B36A1E;
    --accent-ink:#241000;
    --accent2:#B0492B;
    --danger-stripe: repeating-linear-gradient(135deg, var(--accent) 0 10px, #1C140F 10px 20px);
    --radius: 2px;
    --maxw: 1240px;

    /* curvas de animación — más naturales que el ease/ease-in por defecto */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    /* textura de grano de película, reutilizada en paneles "fotográficos" */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  html, body{
    -webkit-tap-highlight-color:transparent;
    overscroll-behavior-y:none;
  }
  /* Ancla de secciones: evita que el header fijo tape el destino al navegar por link */
  section[id], .service-category[id]{
    scroll-margin-top:96px;
  }

  body{
    background:var(--ink);
    color:var(--paper);
    font-family:'Barlow', 'Inter', sans-serif;
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    font-feature-settings:"kern" 1, "liga" 1;
  }
  p{color:var(--muted);}

  h1,h2,h3,h4{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:1.05;
  }

  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.03em;
  }

  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 32px;
  }

  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  img,svg{display:block; max-width:100%;}
  button{font-family:inherit; cursor:pointer;}

  /* ---------- focus ---------- */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }

  /* ---------- eyebrow ---------- */
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--accent);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:22px;
    height:2px;
    background:var(--accent);
    display:inline-block;
  }

  /* ================= TOP BAR ================= */
  .topbar{
    position:fixed;
    top:0; left:0; right:0;
    z-index:101;
    height:38px;
    background:var(--ink);
    border-bottom:1px solid var(--line-soft);
  }
  .topbar-inner{
    height:100%;
    display:flex;
    align-items:center;
    gap:28px;
  }
  .topbar-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.02em;
    color:var(--muted);
    white-space:nowrap;
  }
  .topbar-item svg{width:14px; height:14px; color:var(--accent); flex-shrink:0;}
  .topbar-item a:hover{color:var(--accent);}
  .topbar-hours{margin-left:auto; color:var(--muted-2);}

  /* ================= HEADER ================= */
  header{
    position:fixed;
    top:38px; left:0; right:0;
    z-index:100;
    background:rgba(4,28,58,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
    transition:top 220ms var(--ease-out);
  }
  .nav-inner{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 32px;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    line-height:1;
  }
  .brand img.logo-icon{
    height:46px;
    width:auto;
    display:block;
  }
  .brand-text{
    display:flex;
    flex-direction:column;
  }
  .brand-name{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:800;
    font-size:26px;
    letter-spacing:0.06em;
  }
  .brand-name span{color:var(--accent);}
  .brand-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:9.5px;
    letter-spacing:0.14em;
    color:var(--muted);
    text-transform:uppercase;
    margin-top:3px;
  }
  nav.primary{
    display:flex;
    align-items:center;
    gap:36px;
  }
  nav.primary a{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--paper-dim);
    position:relative;
    padding:4px 0;
  }
  nav.primary a::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:0; height:2px;
    background:var(--accent);
    transition:width 220ms var(--ease-out);
  }
  @media (hover:hover) and (pointer:fine){
    nav.primary a:hover::after{width:100%;}
    nav.primary a:hover{color:var(--paper);}
  }

  /* El link "Solicitar cotización" vive dentro de nav.primary y tiene
     clase .btn: sin esta regla, "nav.primary a" (más específica) le
     pisaba el color de texto oscuro del botón por el de los links del
     menú, generando texto claro sobre fondo verde lima (bajo contraste). */
  nav.primary a.btn,
  nav.primary a.btn:hover{
    color:var(--accent-ink);
  }
  nav.primary a.btn::after{
    content:none;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 22px;
    background:var(--accent);
    color:var(--accent-ink);
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    font-weight:500;
    letter-spacing:0.1em;
    text-transform:uppercase;
    border:none;
    border-radius:var(--radius);
    transition:transform 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
    touch-action:manipulation;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  @media (hover:hover) and (pointer:fine){
    .btn:hover{background:#F5B268; transform:translateY(-1px); box-shadow:0 8px 22px -8px rgba(232,150,61,0.5);}
    .btn-outline:hover{border-color:var(--accent); color:var(--accent); background:transparent; transform:translateY(-1px);}
  }
  .btn:active{transform:scale(0.97) translateY(0); transition-duration:100ms;}
  .btn-outline{
    background:transparent;
    border:1px solid var(--line);
    color:var(--paper);
  }

  .menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    padding:8px;
    touch-action:manipulation;
    transition:transform 160ms var(--ease-out);
  }
  .menu-toggle:active{transform:scale(0.9);}
  .menu-toggle span{
    width:24px; height:2px; background:var(--paper);
    transition:transform 220ms var(--ease-out), opacity 160ms var(--ease-out);
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ================= HERO ================= */
  .hero{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
    padding-top:114px;
    overflow:hidden;
    background:var(--ink);
  }
  .hero-photo{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
  }
  .hero-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:60% 40%;
    animation:heroKenBurns 26s var(--ease-in-out) infinite alternate;
    filter:saturate(1.06) contrast(1.04);
  }
  @keyframes heroKenBurns{
    0%{transform:scale(1.02) translate(0,0);}
    100%{transform:scale(1.14) translate(-1.5%,-2%);}
  }
  .hero-scrim{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      linear-gradient(100deg, rgba(28,20,15,0.97) 0%, rgba(28,20,15,0.88) 32%, rgba(28,20,15,0.55) 58%, rgba(28,20,15,0.82) 100%),
      linear-gradient(0deg, var(--ink) 0%, transparent 22%);
  }
  .hero-topo{
    position:absolute;
    inset:0;
    z-index:1;
    opacity:0.4;
    pointer-events:none;
    will-change:transform;
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    z-index:1;
    background-image:var(--grain);
    opacity:0.045;
    mix-blend-mode:overlay;
    pointer-events:none;
  }
  @media (prefers-reduced-motion: reduce){
    .hero-photo img{animation:none;}
  }
  .hero-inner{
    position:relative;
    z-index:2;
    max-width:var(--maxw);
    margin:0 auto;
    padding:100px 32px 70px;
    width:100%;
  }
  .hero h1{
    font-size:clamp(42px, 6.4vw, 92px);
    max-width:16ch;
    color:var(--paper);
  }
  .hero h1 em{
    font-style:normal;
    color:var(--accent);
  }
  .hero-sub{
    max-width:52ch;
    color:var(--muted);
    font-size:17.5px;
    margin-top:26px;
    margin-bottom:38px;
  }
  .hero-ctas{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:64px;
  }

  .sector-chips{
    display:flex;
    gap:0;
    flex-wrap:wrap;
    border-top:1px solid var(--line);
    padding-top:0;
  }
  .sector-chip{
    flex:1;
    min-width:180px;
    padding:22px 22px 20px 0;
    border-right:1px solid var(--line);
    margin-right:22px;
  }
  .sector-chip:last-child{border-right:none;}
  .sector-chip .num{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--accent);
    letter-spacing:0.12em;
  }
  .sector-chip .label{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:700;
    font-size:21px;
    text-transform:uppercase;
    margin-top:6px;
    letter-spacing:0.01em;
  }

  /* ================= STATS BAND ================= */
  .stats-band{
    position:relative;
    background:
      linear-gradient(120deg, rgba(232,150,61,0.08) 0%, transparent 45%),
      var(--panel);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:64px 0;
    overflow:hidden;
  }
  .stats-band::before{
    content:"";
    position:absolute; inset:0;
    background-image:var(--grain);
    opacity:0.05;
    mix-blend-mode:overlay;
    pointer-events:none;
  }
  .stats-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  .stat-item{
    text-align:center;
    padding:0 12px;
    border-right:1px solid var(--line);
  }
  .stat-item:last-child{border-right:none;}
  .stat-number{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:800;
    font-size:clamp(40px,5vw,60px);
    color:var(--accent);
    line-height:1;
  }
  .stat-label{
    margin-top:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--paper-dim);
  }
  @media (max-width:760px){
    .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:36px;}
    .stat-item:nth-child(2){border-right:none;}
  }

  /* ================= PANEL FOTOGRÁFICO (servicios) ================= */
  .service-visual{
    position:relative;
    height:190px;
    margin:-36px -34px 26px;
    overflow:hidden;
    background:
      radial-gradient(circle at 78% 20%, rgba(232,150,61,0.20), transparent 55%),
      linear-gradient(150deg, var(--panel-2) 0%, var(--ink) 78%);
  }
  .service-visual::before{
    content:"";
    position:absolute; inset:0;
    background-image:var(--grain);
    opacity:0.07;
    mix-blend-mode:overlay;
  }
  .service-visual::after{
    content:"";
    position:absolute;
    top:0; bottom:0; right:22%;
    width:6px;
    background:var(--accent);
    transform:skewX(-12deg);
    opacity:0.85;
  }
  .service-visual .visual-icon{
    position:absolute;
    right:-8px; bottom:-14px;
    width:130px; height:130px;
    color:var(--accent);
    opacity:0.92;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,0.35));
    transition:transform 600ms var(--ease-out);
  }
  @media (hover:hover) and (pointer:fine){
    a:hover > .service-visual .visual-icon,
    .service-detail-card:hover .service-visual .visual-icon{
      transform:scale(1.08) rotate(-4deg) translateY(-4px);
    }
  }
  .service-visual .visual-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.04);
    transition:transform 700ms var(--ease-out), filter 700ms var(--ease-out);
    filter:saturate(1.05) contrast(1.03);
  }
  .service-visual .photo-scrim{
    position:absolute;
    inset:0;
    background:linear-gradient(0deg, rgba(28,20,15,0.82) 0%, rgba(28,20,15,0.1) 55%, rgba(28,20,15,0.15) 100%);
  }
  @media (hover:hover) and (pointer:fine){
    a:hover > .service-visual .visual-photo,
    .service-detail-card:hover .service-visual .visual-photo{
      transform:scale(1.12);
    }
  }
  .service-visual .visual-tag{
    position:absolute;
    left:0; bottom:14px;
    padding:5px 14px 5px 18px;
    background:var(--accent);
    color:var(--accent-ink);
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    font-weight:600;
  }

  /* ================= VALUE STRIP ================= */
  .value-strip{
    background:var(--paper);
    color:var(--ink);
    padding:52px 0;
    border-bottom:1px solid rgba(4,28,58,0.08);
  }
  .value-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
  }
  .value-item{
    display:flex;
    gap:16px;
  }
  .value-item .mark{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:800;
    font-size:34px;
    color:var(--accent-dark);
    line-height:1;
  }
  .value-item h4{
    font-size:16.5px;
    letter-spacing:0.02em;
    margin-bottom:6px;
    color:var(--ink);
  }
  .value-item p{
    font-size:14px;
    color:#4B5157;
    max-width:32ch;
  }

  /* ================= SECTION shared ================= */
  section{
    padding:110px 0;
    position:relative;
  }
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:24px;
    margin-bottom:64px;
  }
  .section-head h2{
    font-size:clamp(34px,4.2vw,54px);
    color:var(--paper);
  }
  .section-head p{
    max-width:38ch;
    color:var(--muted);
    font-size:15.5px;
  }
  section.on-paper{
    background:var(--paper);
    color:var(--ink);
  }
  section.on-paper .section-head h2{color:var(--ink);}
  section.on-paper .section-head p{color:#5A6066;}
  section.on-paper .eyebrow{color:var(--accent-dark);}
  section.on-paper .eyebrow::before{background:var(--accent-dark);}
  .pipeline .eyebrow{color:var(--accent-dark);}
  .pipeline .eyebrow::before{background:var(--accent-dark);}

  /* ================= SERVICIOS ================= */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .service-card{
    background:var(--panel);
    padding:38px 32px 34px;
    transition:background 0.2s ease;
  }
  .service-card:hover{background:var(--panel-2);}
  .service-card .icon{
    width:40px; height:40px;
    margin-bottom:26px;
    color:var(--accent);
  }
  .service-card h3{
    font-size:22px;
    margin-bottom:12px;
    color:var(--paper);
  }
  .service-card p{
    font-size:14.5px;
    color:var(--muted);
  }

  /* ================= ABASTECIMIENTO / PIPELINE ================= */
  .pipeline{
    background:var(--paper);
    color:var(--ink);
  }
  .pipeline-diagram{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    margin-bottom:90px;
  }
  .pipeline-track{
    position:absolute;
    top:19px;
    left:0;
    right:0;
    height:3px;
    background:repeating-linear-gradient(90deg, #B9C4C0 0 14px, transparent 14px 22px);
    z-index:0;
  }
  .pipe-stage{
    position:relative;
    z-index:1;
    padding-right:22px;
  }
  .pipe-node{
    width:40px; height:40px;
    border-radius:50%;
    background:var(--ink);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    font-weight:500;
    border:3px solid var(--paper);
    box-shadow:0 0 0 2px var(--ink);
    margin-bottom:22px;
    transition:transform 220ms var(--ease-out);
  }
  .pipe-stage:hover .pipe-node{transform:scale(1.08);}
  .pipe-stage h4{
    font-size:19px;
    margin-bottom:8px;
    letter-spacing:0.01em;
  }
  .pipe-stage p{
    font-size:13.5px;
    color:#5A6066;
    max-width:22ch;
  }

  .sectors-detail{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
  }
  .sector-panel{
    background:var(--ink);
    color:var(--paper);
    padding:34px 30px;
    border-top:3px solid var(--accent);
    transition:transform 220ms var(--ease-out), background 220ms var(--ease-out);
    touch-action:manipulation;
  }
  @media (hover:hover) and (pointer:fine){
    .sector-panel:hover{transform:translateY(-3px); background:#071e38;}
  }
  .sector-panel:active{transform:scale(0.99); transition-duration:100ms;}
  .sector-panel h3{
    font-size:24px;
    margin-bottom:14px;
  }
  .sector-panel p{
    font-size:14px;
    color:var(--muted);
    margin-bottom:18px;
  }
  .sector-panel ul{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .sector-panel li{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--paper-dim);
    letter-spacing:0.02em;
    display:flex;
    gap:10px;
  }
  .sector-panel li::before{
    content:"—";
    color:var(--accent);
  }

  /* ================= MARCAS ================= */
  .brands-band{
    background:var(--ink);
  }
  .brands-intro{
    max-width:60ch;
    color:var(--muted);
    font-size:15.5px;
    margin-bottom:56px;
  }
  .brands-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .brand-plate{
    position:relative;
    background:var(--panel);
    aspect-ratio:16/10;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    overflow:hidden;
    transition:background 220ms var(--ease-out), transform 220ms var(--ease-out);
    touch-action:manipulation;
  }
  .brand-plate::before{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:2px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 260ms var(--ease-out);
    z-index:2;
  }
  @media (hover:hover) and (pointer:fine){
    .brand-plate:hover{background:var(--panel-2); transform:translateY(-3px);}
    .brand-plate:hover::before{transform:scaleX(1);}
    .brand-plate:hover .logo-chip{box-shadow:0 10px 24px -10px rgba(0,0,0,0.45); transform:scale(1.03);}
  }
  .brand-plate:active{transform:scale(0.98); transition-duration:100ms;}
  .brand-plate .logo-chip{
    width:100%;
    height:100%;
    background:#FFFFFF;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 18px;
    box-shadow:0 4px 14px -8px rgba(0,0,0,0.3);
    transition:box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out);
  }
  .brand-plate img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
  }
  .brand-plate span.wordmark{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:700;
    font-size:clamp(15px,1.8vw,21px);
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ink);
    text-align:center;
  }
  .brands-note{
    margin-top:26px;
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    color:var(--muted-2);
    letter-spacing:0.03em;
  }

  /* ================= CONTACTO ================= */
  .contact-section{
    background:var(--panel);
  }
  .contact-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:70px;
  }
  .contact-info h3{
    font-size:20px;
    margin-bottom:6px;
    color:var(--paper);
  }
  .contact-block{
    margin-bottom:34px;
    padding-bottom:34px;
    border-bottom:1px solid var(--line);
  }
  .contact-block:last-child{border-bottom:none;}
  .contact-block .mono-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:10px;
    display:block;
  }
  .contact-block a, .contact-block p{
    font-size:15px;
    color:var(--paper-dim);
  }
  .contact-block a:hover{color:var(--accent);}

  form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  form .full{grid-column:1 / -1;}
  label{
    display:block;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:9px;
  }
  input, select, textarea{
    width:100%;
    background:var(--ink);
    border:1px solid var(--line);
    color:var(--paper);
    padding:14px 14px;
    font-family:'Barlow', 'Inter', sans-serif;
    font-size:14.5px;
    border-radius:var(--radius);
    transition:border-color 160ms var(--ease-out);
  }
  input::placeholder, textarea::placeholder{color:var(--muted-2);}
  input:focus, select:focus, textarea:focus{border-color:var(--accent);}
  textarea{resize:vertical; min-height:110px;}
  /* Evita que iOS haga zoom automático al enfocar un input con fuente <16px */
  @media (pointer:coarse){
    input, select, textarea{font-size:16px;}
  }
  .form-note{
    grid-column:1/-1;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--muted-2);
    margin-top:4px;
  }

  /* ================= FOOTER ================= */
  footer{
    background:var(--ink);
    border-top:1px solid var(--line);
    padding:44px 0 32px;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
  }
  .footer-inner .brand-name{font-size:20px;}
  footer .foot-links{
    display:flex;
    gap:26px;
  }
  footer .foot-links a{
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  footer .foot-links a:hover{color:var(--accent);}
  .copyright{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--muted-2);
    margin-top:26px;
  }

  /* ================= reveal on scroll ================= */
  .reveal{
    opacity:0;
    transform:translateY(20px) scale(0.985);
    transition:opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
  }
  .reveal.in{opacity:1; transform:translateY(0) scale(1);}

  /* ================= RESPONSIVE ================= */
  @media (max-width: 980px){
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .brands-grid{grid-template-columns:repeat(3,1fr);}
    .sectors-detail{grid-template-columns:1fr;}
    .value-grid{grid-template-columns:1fr; gap:28px;}
    .contact-grid{grid-template-columns:1fr; gap:48px;}
    .pipeline-diagram{grid-template-columns:repeat(3,1fr); row-gap:36px;}
    .pipeline-track{display:none;}
  }
  @media (max-width: 480px){
    .brand img.logo-icon{height:36px;}
    .brand-name{font-size:20px;}
    .brand-tag{display:none;}
  }
  @media (max-width: 760px){
    .topbar{display:none;}
    header{top:0;}
    .hero{padding-top:76px;}
    nav.primary{
      position:fixed;
      top:76px; left:0; right:0;
      background:var(--ink);
      flex-direction:column;
      align-items:flex-start;
      padding:26px 32px 34px;
      gap:22px;
      border-bottom:1px solid var(--line);
      transform:translateY(-130%);
      transition:transform 320ms var(--ease-in-out);
    }
    nav.primary.open{transform:translateY(0);}
    .menu-toggle{display:flex;}
    .services-grid{grid-template-columns:1fr;}
    .brands-grid{grid-template-columns:repeat(2,1fr);}
    .sector-chips{flex-direction:column;}
    .sector-chip{border-right:none; border-bottom:1px solid var(--line); margin-right:0; padding-bottom:18px;}
    form{grid-template-columns:1fr;}
    .pipeline-diagram{grid-template-columns:1fr;}
    .hero-ctas{flex-direction:column; align-items:stretch;}
    .footer-inner{flex-direction:column; align-items:flex-start;}
  }

/* ================= AJUSTES PARA EL MENÚ DE WORDPRESS =================
   wp_nav_menu() genera <ul class="menu-list"><li><a>...</a></li></ul>
   dentro de nav.primary. Estas reglas hacen que se vea igual que el
   menú original (los estilos de "nav.primary a" ya definidos arriba
   siguen aplicando porque son selectores descendientes). */
.menu-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:36px;
  margin:0;
  padding:0;
}
.menu-list li{list-style:none;}

@media (max-width: 760px){
  .menu-list{
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    width:100%;
  }
}

/* Formulario de contacto conectado con Contact Form 7 (ver Tutorial 3) */
.wpcf7-form p{margin-bottom:0;}
.wpcf7-form label{display:block; margin-bottom:20px;}
.wpcf7 form.sent .wpcf7-response-output{
  border-color:var(--accent) !important;
  color:var(--paper);
}

/* ============================================================
   TEASER DE SERVICIOS EN EL HOME (dos líneas de servicio,
   enlazan a la página completa /servicios/)
   ============================================================ */
.service-lines{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.service-line-card{
  display:block;
  background:var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
  padding:36px 34px 32px;
  transition:transform 220ms var(--ease-out), background 220ms var(--ease-out);
  touch-action:manipulation;
}
@media (hover:hover) and (pointer:fine){
  .service-line-card:hover{background:var(--panel-2); transform:translateY(-4px);}
}
.service-line-card:active{transform:scale(0.99); transition-duration:100ms;}
.service-line-icon{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
  margin-bottom:24px;
  transition:transform 260ms var(--ease-out);
}
.service-line-icon svg{width:28px; height:28px;}
@media (hover:hover) and (pointer:fine){
  .service-line-card:hover .service-line-icon{transform:scale(1.1) rotate(-6deg);}
}
.service-line-card h3{font-size:23px; color:var(--paper); margin-bottom:12px;}
.service-line-card p{font-size:14.5px; color:var(--muted); margin-bottom:22px;}
.service-line-link{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:gap 220ms var(--ease-out);
}
.service-line-card:hover .service-line-link{gap:12px;}

@media (max-width:760px){
  .service-lines{grid-template-columns:1fr;}
}

/* ============================================================
   PÁGINA /servicios/ — hero, categorías, credenciales y grilla
   de detalle de cada servicio
   ============================================================ */
.service-hero{
  position:relative;
  padding:218px 0 70px;
  background:var(--ink);
  overflow:hidden;
}
.service-hero .hero-photo{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.service-hero .hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
  animation:heroKenBurns 26s var(--ease-in-out) infinite alternate;
  filter:saturate(1.05) contrast(1.03);
}
.service-hero .hero-scrim{
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(100deg, rgba(28,20,15,0.97) 0%, rgba(28,20,15,0.92) 38%, rgba(28,20,15,0.68) 62%, rgba(28,20,15,0.9) 100%);
}
@media (prefers-reduced-motion: reduce){
  .service-hero .hero-photo img{animation:none;}
}
.service-hero .wrap{
  position:relative;
  z-index:2;
}
.service-hero h1{
  font-size:clamp(38px,5.2vw,64px);
  color:var(--paper);
  max-width:22ch;
}
.service-hero p{
  max-width:62ch;
  color:var(--muted);
  font-size:16.5px;
  margin-top:22px;
}

.service-category{padding:100px 0;}
.service-category.on-paper{background:var(--paper); color:var(--ink);}
.service-category .category-head{max-width:82ch; margin-bottom:0;}
.service-category .category-head h2{font-size:clamp(30px,3.6vw,44px); color:var(--paper);}
.service-category.on-paper .category-head h2{color:var(--ink);}
.service-category .category-head p{font-size:15.5px; color:var(--muted); margin-top:16px;}
.service-category.on-paper .category-head p{color:#5A6066;}
.service-category .eyebrow{color:var(--accent);}
.service-detail-card .service-visual{
  margin:-36px -30px 24px;
}
.service-category.on-paper .eyebrow{color:var(--accent-dark);}
.service-category.on-paper .eyebrow::before{background:var(--accent-dark);}

.cred-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:30px 0 50px;
}
.cred-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--paper-dim);
  transition:border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .cred-badge:hover{border-color:var(--accent); transform:translateY(-2px);}
}
.cred-badge svg{width:15px; height:15px; color:var(--accent); flex-shrink:0;}
.service-category.on-paper .cred-badge{color:#3A4046; border-color:rgba(4,28,58,0.16);}
.service-category.on-paper .cred-badge svg{color:var(--accent-dark);}

.service-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.service-category.on-paper .service-detail-grid{background:rgba(4,28,58,0.12); border-color:rgba(4,28,58,0.12);}
.service-detail-card{
  background:var(--panel);
  padding:36px 30px 32px;
  transition:background 220ms var(--ease-out), transform 220ms var(--ease-out);
  touch-action:manipulation;
}
@media (hover:hover) and (pointer:fine){
  .service-detail-card:hover{transform:translateY(-3px);}
}
.service-detail-card:active{transform:scale(0.99); transition-duration:100ms;}
.service-category.on-paper .service-detail-card{background:var(--paper);}
.service-detail-card .icon-circle{
  width:60px; height:60px;
  border-radius:50%;
  background:var(--ink);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
  transition:transform 260ms var(--ease-out);
}
.service-detail-card .icon-circle svg{width:30px; height:30px;}
@media (hover:hover) and (pointer:fine){
  .service-detail-card:hover .icon-circle{transform:scale(1.1) rotate(-6deg);}
}
.service-detail-card h3{font-size:20.5px; margin-bottom:12px; color:var(--paper); letter-spacing:0.005em;}
.service-category.on-paper .service-detail-card h3{color:var(--ink);}
.service-detail-card p{font-size:14px; color:var(--muted); line-height:1.6;}
.service-category.on-paper .service-detail-card p{color:#4B5157;}

.service-cta{
  background:var(--panel);
  padding:90px 0;
  text-align:center;
}
.service-cta h2{font-size:clamp(28px,3.4vw,42px); color:var(--paper); margin-bottom:18px;}
.service-cta p{color:var(--muted); max-width:52ch; margin:0 auto 34px;}

@media (max-width:980px){
  .service-detail-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .service-detail-grid{grid-template-columns:1fr;}
  .hero-topo{opacity:0.5;}
  .service-hero{padding-top:188px;}
}