/* ==========================================================================
   herga_piel.css  ·  PIEL COMÚN DE LAS PÁGINAS PROPIAS DE HERGA ENERGY
   Va en:  public_html/herga_piel.css
   13-11-2026 · Jose: «mejorar el diseño sin cambiar textos, enlaces, idiomas
   ni funciones». Este archivo SOLO cambia cómo se ve.
   - Solo actúa en páginas que llevan <body class="piel">: las demás no cambian.
   - Ley de la Visión: letra oscura sobre claro, letra blanca sobre oscuro;
     nada de resaltados en los títulos.
   - Colores HERGA: azul #08508A y naranja #E87722.
   - Para ver el diseño de antes: añadir ?piel=0 a la dirección.
   ========================================================================== */

body.piel{
  --hg-azul:#08508A; --hg-azul-osc:#063b66; --hg-naranja:#E87722;
  --hg-borde:#e3e9f2; --hg-sombra:0 6px 22px rgba(8,40,80,.08); --hg-sombra-alta:0 14px 34px rgba(8,40,80,.16);
  --hg-radio:16px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.piel h1,body.piel h2,body.piel h3{text-wrap:balance;letter-spacing:-.2px}
body.piel ::selection{background:#ffe08a;color:#111}

/* ---- Teclado: se ve dónde estás al pasar con el tabulador ---- */
body.piel a:focus-visible,body.piel button:focus-visible,body.piel summary:focus-visible,body.piel [tabindex]:focus-visible{
  outline:3px solid var(--hg-naranja);outline-offset:3px;border-radius:6px}

/* ==== CABECERA ==== */
body.piel header{box-shadow:0 3px 16px rgba(8,80,138,.10)}
/* botón de idioma: AZUL · botón del menú ☰: NARANJA (cada desplegable de su color) */
body.piel .idioma-btn{background:linear-gradient(135deg,#08508A,#0b6bb8);border:1px solid #063b66;color:#fff;box-shadow:0 2px 8px rgba(8,80,138,.25)}
body.piel .idioma-btn:hover{filter:brightness(1.08)}
body.piel .menu-btn{background:linear-gradient(135deg,#a8530f,#d0661a);border:1px solid #8f460c;color:#fff;box-shadow:0 2px 8px rgba(176,90,16,.28)}
body.piel .idioma-list{background:linear-gradient(180deg,#eef5fd,#dcebf9);border:2px solid #08508A;border-radius:12px}
body.piel .idioma-list .op{color:#063b66;font-weight:800}
body.piel .idioma-list .op:hover{background:#08508A;color:#fff}
/* menú en el ordenador: rayita naranja debajo al pasar el ratón */
@media (min-width:821px) and (hover:hover){
  body.piel .menu-nav a{position:relative;transition:color .2s}
  body.piel .menu-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:3px;border-radius:2px;background:var(--hg-naranja);transform:scaleX(0);transition:transform .22s}
  body.piel .menu-nav a:hover{background:transparent;color:var(--hg-azul)}
  body.piel .menu-nav a:hover::after{transform:scaleX(1)}
}
/* menú ☰ abierto en el móvil: fondo naranja pastel */
@media (max-width:820px),(hover:none) and (pointer:coarse) and (max-width:1024px){
  body.piel .menu-nav{background:linear-gradient(180deg,#fff6ee,#ffe9d6);border-top:3px solid var(--hg-naranja)}
  body.piel .menu-nav a{border-bottom-color:#f6d9bf;color:#3a2410}
}
body.piel .franja-azul{background:linear-gradient(90deg,#063b66,#08508A 50%,#063b66);color:#fff}

/* ==== BOTONES NARANJAS (todos iguales) ==== */
body.piel .cta,body.piel .cta2{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.06)),var(--acento-osc);
  border-radius:12px;box-shadow:0 6px 16px rgba(176,90,16,.30);
  transition:transform .18s,box-shadow .18s,filter .18s;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-align:center}
body.piel .cta:hover,body.piel .cta2:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(176,90,16,.38);filter:brightness(1.05)}
body.piel .botones .cta2.cl{box-shadow:none}
/* botón oscuro de las tarjetas de producto */
body.piel .pcard a{border-radius:10px;background:var(--hg-azul);transition:background .2s,transform .18s;min-height:40px;display:inline-flex;align-items:center}
body.piel .pcard a:hover{background:var(--hg-azul-osc);transform:translateY(-1px)}
body.piel .fondo-b a{border-radius:12px;min-height:44px;display:inline-flex;align-items:center}

/* ==== TÍTULOS DE SECCIÓN: rayita azul-naranja debajo (adorno, no resalta el texto) ==== */
body.piel h2.tit::after,body.piel .empresa-v h2::after{
  content:"";display:block;width:56px;height:4px;border-radius:2px;margin:10px auto 0;
  background:linear-gradient(90deg,var(--hg-azul),var(--hg-naranja))}

/* ==== TARJETAS ==== */
body.piel .pcard{border:1px solid var(--hg-borde);border-top:3px solid var(--hg-naranja);border-radius:var(--hg-radio);box-shadow:var(--hg-sombra);transition:transform .22s,box-shadow .22s}
body.piel .pcard:hover{transform:translateY(-4px);box-shadow:var(--hg-sombra-alta)}
body.piel .clv{border-top:3px solid var(--hg-azul);border-radius:var(--hg-radio);box-shadow:var(--hg-sombra);transition:box-shadow .2s}
body.piel .clv:hover{box-shadow:var(--hg-sombra-alta)}
body.piel .seg .g{border-radius:14px}
body.piel .sellos .s{border-radius:14px}
@media (min-width:1025px),(min-width:821px) and (hover:hover){
  body.piel .sellos .s{border-top:3px solid var(--hg-naranja)}
}

/* ==== RECUADROS DE COLOR (mantienen su color; mismas esquinas) ==== */
body.piel .seg,body.piel .impacto,body.piel .ambiente,body.piel .bloque-calc,body.piel .bloque{border-radius:20px}
body.piel .yt-c{border-radius:20px;transition:box-shadow .2s}
body.piel .yt-c:hover{box-shadow:var(--hg-sombra-alta)}
body.piel .conv-v,body.piel .empresa-v .ev{border-radius:16px}

/* ==== CERTIFICADOS ==== */
body.piel .certs h3{color:var(--hg-azul)}

/* ==== PIE DE PÁGINA: azul oscuro HERGA ==== */
body.piel footer{background:linear-gradient(180deg,#0a2f52,#061c32);color:#c9d5e7;border-top:4px solid var(--hg-naranja)}
body.piel footer b{color:#fff}
body.piel .footer-links{border-bottom-color:rgba(255,255,255,.14)}
body.piel .footer-links a{color:#e1eaf6}
body.piel .footer-links a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--hg-naranja);text-underline-offset:4px}

/* ==== Con «reducir movimiento», nada se mueve ==== */
@media (prefers-reduced-motion:reduce){
  body.piel .cta,body.piel .cta2,body.piel .pcard,body.piel .pcard a,body.piel .menu-nav a::after{transition:none!important}
  body.piel .cta:hover,body.piel .cta2:hover,body.piel .pcard:hover,body.piel .pcard a:hover{transform:none!important}
}
/* ==== Al imprimir, sin sombras ==== */
@media print{ body.piel *{box-shadow:none!important} }