/*
Theme Name: Hacheté Status
Description: Página de estado de los servicios de Hacheté con la imagen corporativa de www.hachete.com.
Author: Hacheté Diseños Web SLU
Version: 1.0.2
Requires PHP: 7.3
Text Domain: hachete-status
*/

@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Colores de www.hachete.com */
:root{
  --naranja:#ff971c;
  --naranja-osc:#e07f0a;
  --texto:#272727;
  --texto-suave:#727272;
  --oscuro:#242424;
  --gris-claro:#f6f6f6;
  --borde:#e6e6e6;
  --total:#d64541;
  --parcial:#ff971c;
  --servidor:#c98a00;
  --mantenimiento:#2f7cc0;
  --varios:#5e6266;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--texto);font:400 15px/1.75 Poppins,sans-serif}
a{color:var(--naranja);text-decoration:none}
a:hover{color:var(--naranja-osc)}
img{max-width:100%;height:auto}
.contenedor{max-width:1170px;margin:0 auto;padding:0 16px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.icono{width:1em;height:1em;vertical-align:-.125em;fill:currentColor}

/* Barra superior */
.topbar{background:var(--gris-claro);font-size:13px}
.topbar .contenedor{display:flex;justify-content:flex-end;flex-wrap:wrap}
.topbar a{color:#242424;display:inline-flex;align-items:center;gap:5px;padding:10px 12px;border-left:1px solid #ddd}
.topbar a:first-child{border-left:0}
.topbar a:hover{color:var(--naranja)}

/* Cabecera */
.cabecera{background:#fff;border-bottom:1px solid #ddd;position:sticky;top:0;z-index:50}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.logo{display:flex;align-items:center;gap:14px}
.logo img{display:block;width:150px;height:auto}
.logo span{font-size:13px;color:var(--texto-suave);border-left:1px solid var(--borde);padding-left:14px;line-height:1.3}
.menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:20px 12px;color:#333;font-weight:500;font-size:15px;letter-spacing:1px;text-transform:uppercase}
.menu a:hover,.menu .activo a{color:var(--naranja)}
.boton-menu{display:none;background:none;border:0;padding:10px;cursor:pointer;color:#333}
.boton-menu svg{width:26px;height:26px}

/* Banda de título */
.banda{background:var(--naranja);color:#fff;padding:44px 0 40px}
.banda h1{margin:0;font-size:34px;font-weight:300;line-height:1.25}
.banda h1 strong{font-weight:700}
.banda p{margin:8px 0 0;font-size:16px;opacity:.95}
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.filtros a{color:#fff;border:2px solid rgba(255,255,255,.85);padding:5px 14px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;font-weight:500}
.filtros a:hover,.filtros a.activo{background:#fff;color:var(--naranja)}
.miga{font-size:13px;margin-bottom:6px;opacity:.95}
.miga a{color:#fff;text-decoration:underline}

/* Listado */
.principal{padding:48px 0 64px}
.ultimo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;background:var(--gris-claro);border-left:4px solid var(--naranja);padding:14px 18px;margin-bottom:32px;font-size:14px}
.ultimo strong{font-weight:500}
.aviso{border:1px solid var(--borde);border-left:4px solid var(--varios);background:#fff;padding:22px 26px;margin-bottom:22px;transition:box-shadow .2s}
.aviso:hover{box-shadow:0 6px 22px rgba(0,0,0,.07)}
.aviso h2{margin:6px 0 4px;font-size:20px;font-weight:500;line-height:1.4}
.aviso h2 a{color:var(--texto)}
.aviso h2 a:hover{color:var(--naranja)}
.meta{font-size:13px;color:var(--texto-suave)}
.aviso p{margin:10px 0 0;color:#444}
.leer{display:inline-block;margin-top:12px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.etiquetas{display:flex;flex-wrap:wrap;gap:6px}
.etiqueta{display:inline-block;color:#fff;background:var(--varios);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.6px;padding:3px 9px;line-height:1.5}
.etiqueta:hover{color:#fff;opacity:.9}
.cat-sinconectividad{--c:var(--total)}
.cat-sinconectividadparcial{--c:var(--parcial)}
.cat-afectacion-un-unico-servidor{--c:var(--servidor)}
.cat-mantenimientoplanificado{--c:var(--mantenimiento)}
.cat-varios{--c:var(--varios)}
.etiqueta[class*=cat-]{background:var(--c)}
.aviso[class*=cat-]{border-left-color:var(--c)}

/* Aviso completo */
.articulo{max-width:860px}
.articulo .contenido{margin-top:22px;font-size:16px}
.contenido h2,.contenido h3{font-weight:500;line-height:1.35;margin:1.6em 0 .5em}
.contenido ul,.contenido ol{padding-left:1.3em}
.contenido blockquote{margin:1.2em 0;padding:10px 18px;border-left:4px solid var(--naranja);background:var(--gris-claro)}
.contenido table{border-collapse:collapse;width:100%}
.contenido td,.contenido th{border:1px solid var(--borde);padding:6px 10px}
.contenido pre{background:var(--gris-claro);padding:12px;overflow:auto}
.volver{display:inline-block;margin-top:34px;border:2px solid var(--naranja);padding:8px 20px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.volver:hover{background:var(--naranja);color:#fff}
.vacio{padding:30px;background:var(--gris-claro);text-align:center}

/* Paginación */
.navigation.pagination{margin-top:36px}
.nav-links{display:flex;flex-wrap:wrap;gap:6px}
.page-numbers{display:inline-block;min-width:40px;text-align:center;padding:7px 12px;border:1px solid var(--borde);color:var(--texto);font-size:14px}
.page-numbers.current,.page-numbers:hover{background:var(--naranja);border-color:var(--naranja);color:#fff}
.page-numbers.dots{border:0}

/* Pie, como el de www.hachete.com */
.llamada{background:var(--naranja);color:#fff;padding:26px 0}
.llamada .contenedor{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 30px;text-align:center}
.llamada .texto{font-size:22px;font-weight:300}
.llamada .texto strong{font-weight:700}
.btn-borde{display:inline-block;border:2px solid #fff;color:#fff;padding:10px 26px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:1px}
.btn-borde:hover{background:#fff;color:var(--naranja)}
.pie{background:var(--oscuro);color:#bbb;padding:54px 0 30px;font-size:15px}
.pie .columnas{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:10px}
.pie a{color:#f6f6f6;display:inline-flex;gap:8px;align-items:flex-start}
.pie a:hover{color:var(--naranja)}
.pie .icono{flex:none;margin-top:.35em;color:var(--naranja)}
.copyright{text-align:center;padding:18px 0;font-size:14px;color:var(--texto)}

@media (max-width:1199px){
  .menu a{padding:20px 9px;font-size:14px;letter-spacing:.5px}
  .logo span{display:none}
}
@media (max-width:991px){
  .boton-menu{display:block;margin-left:auto}
  .cabecera nav{position:static}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;border-bottom:1px solid #ddd;box-shadow:0 8px 16px rgba(0,0,0,.06)}
  .menu.abierto{display:flex}
  .menu a{padding:12px 16px;border-top:1px solid #f0f0f0}
  .pie .columnas{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  body{font-size:14px}
  .topbar .contenedor{justify-content:center;flex-wrap:nowrap}
  .topbar a{padding:8px 7px;font-size:12px;white-space:nowrap}
  .topbar .icono{display:none}
  .topbar .solo-ancho{display:none}
  .logo img{width:120px}
  .logo span{display:none}
  .banda{padding:30px 0}
  .banda h1{font-size:25px}
  .aviso{padding:18px 16px}
  .aviso h2{font-size:17px}
  .pie .columnas{grid-template-columns:1fr}
  .llamada .texto{font-size:18px}
}