@font-face {
  font-family: 'AndreaD';
  font-display: swap;
  src: url('https://acwebstudio.com/blog/wp-content/themes/acws2025/fontes/Andrea/micro.woff2') format('woff2');
}

@font-face {
  font-family: 'PPsupply';
  font-display: swap;
  src: url('https://acwebstudio.com/blog/wp-content/themes/acws2025/fontes/ppsupplymono-ultralight-webfont.woff2') format('woff2');}

@font-face {
  font-family: 'SCTO grotesk';
  font-display: swap;
  src: url('https://acwebstudio.com/blog/wp-content/themes/acws2025/fontes/scto_grotesk.woff2') format('woff2');
}

body.blog .blog, body.single-post .blog, body.category .blog, body.tag .blog {  display: list-item;}
main{}
.webpage {
  display: none;
}

@layer raw {
:root{
   /* azul consistente, oscuro -> claro */
    --azul-900:#0f2f3f;
    --azul-800: #0f2f3f;
    --azul-700: #164b62;
    --azul-600: #1b5f7c;
    --azul-500: #20759a;
    --azul-400: #3a8ab0;
    --azul-300: #78b3cf;
    --azul-200: #c7e0ee;

    /* neutrales útiles */
    --gris-900: #111111;
    --gris-700: #3f3f46;
    --gris-400: #a1a1aa;
    --gris-050: #f7f7f8;



}
}


@layer tokens {
:root {
  --font-base: "SCTO grotesk", system-ui, sans-serif;
  --font-heading: "AndreaD", Georgia, serif;
  --font-extras: "PPsupply", Georgia, serif;

  --font-size-h1:calc(1.3rem + 0.9vw);
  --font-size-h2:calc(1rem + 0.7vw);
  --font-size-h3:calc(1rem + 0.3vw);
  --font-size-h4:calc(1rem + 0.1vw);
  --font-size-default:calc(1rem + 0.1vw);

  --letter-spacing-heading:2px;
  --color-surface-footer: var(--azul-900);
  --color-surface-nav: var(--azul-900);



}
}



*{box-sizing:border-box; margin:0px;}
h1,h2,h3,h4,h5,h6, .titulo{ font-family: var(--font-heading);letter-spacing: var(--heading-letter-spacing);}
p, ul, ol, li, blockquote,span { font-family: var(--font-base);}
.logo span{ font-size:calc(1.6rem + 0.8vw);}
.logo { font-size:calc(1.6rem + 0.8vw);}

.titulo{font-size:calc(1rem + 0.4vw); margin-bottom: calc(0.5rem + 0.1vw); margin-top: calc(2.5rem + 0.1vw); font-weight: 800;}




a{text-decoration:none;}
a:link    { color: #0A58CA; } /* contraste 6.44 */
a:visited { color: #003366; } /* contraste ~12.6 */
a:hover   { color: #0056B3; } /* contraste ~8.6 */
a:active  { color: #002147; } /* contraste ~15.3 */

footer a:link    { color: #4DA3FF; }  /* azul vivo */
footer a:visited { color: #80BFFF; }  /* un poco más claro */
footer a:hover   { color: #B3D9FF; }  /* se ilumina */
footer a:active  { color: #66B2FF; }  /* azul medio, contraste 6.26 */



p{color:#515151;}
h1 {font-size:var(--font-size-h1); margin-bottom: calc(1rem + 0.1vw); line-height:1.2;}
h2 {font-size:var(--font-size-h2); margin:calc(1.3rem + 0.1vw) 0 calc(1rem + 0.1vw) 0; line-height: 1.3;}
h3 {font-size:var(--font-size-h3); margin-bottom: calc(0.2rem + 0.1vw); margin-top: calc(2.5rem + 0.1vw);}
h4 {font-size:var(--font-size-h4); margin-bottom: calc(0.5rem + 0.1vw); margin-top: calc(2.5rem + 0.1vw);}
p, ul, ol, blockquote  {font-size: var(--font-size-default); line-height: 1.6; margin-bottom: calc(0.8rem + 0.2vw);}
small {font-size:0.9rem;}

.inline{list-style-type:none; padding:0; margin:0.5rem 0;}
.inline li{display:inline; color:#13729f;}
.inline li:first-of-type::after{content:'-';}
.metadatos{margin:0.3rem 0; color:#13729f; font-size:0.9rem;}

.paginacion {text-align: center; padding-bottom: 4rem; font-family: var(--font-extras); font-weight: bold;}
.page-numbers {padding:.3rem 1rem; border:1px solid #0f2f3f;}
.current {background:#0f2f3f; color:#fff;}

.navegacion{background:var(--color-surface-nav); font-family: var(--font-extras); font-weight:900;}
.navegacion .logo {text-align:right; padding:2rem 6rem 2rem 0;}
.logo a { text-decoration:none; color:#ffbb00;letter-spacing: 2px;  transition: color 0.5s;}
.logo a span { text-decoration:none; color:#fff; letter-spacing: 2px;  transition: color 0.5s; font-family: var(--font-extras); font-weight:900;}
.logo a:hover span {color:#39FF14;}
.logo a:hover {color:#fff;}







    .menu-button {
      position: fixed;
      top: 3rem;
      left: 1rem;
      font-size: 2.5rem;
      background: #0f2f3f; padding:0.5rem;
      border: none;
      color: #fff;
      cursor: pointer;
      z-index: 1001;
    }

    .menu-close {
      display: none;
    }

    /* Fondo oscuro */
    .offcanvas-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
    }

    .offcanvas-backdrop.active {
      opacity: 1;
      visibility: visible;
    }

    /* Menú lateral */
    .offcanvas-menu {
      position: fixed;
      top: 0;
      left: -300px;
      width: 300px;
      height: 100vh;
      background: #0f2f3f;
      color: white;
      padding: 4rem 0 0 0;
      z-index: 1000;
      transition: left 0.4s ease;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .offcanvas-menu.active {
      left: 0;
    }

    .offcanvas-menu nav ul {
      list-style: none;
      padding: 0;
      margin-top: 5rem; width:300px;
      border-bottom:1px solid #fff;
    }

    .offcanvas-menu nav li {
      padding-bottom: 1.5rem;
      padding-top:1.5rem;
      border-top:1px solid #fff;
    }

    .offcanvas-menu nav a {
      color: white;
      text-decoration: none;
      font-size: 1.1rem;
      font-weight: normal;
      transition: color 0.3s ease;
      padding:2rem;
    }

    .offcanvas-menu nav a:hover {
      color: #ffd700;
    }

@media (max-width: 768px) {
  .menu-toggle {
    bottom: 1rem;
    top: auto;
    right: 1rem;
    left: auto;
    position: fixed;
    z-index: 1001;
    background:#333;
    padding:0 1rem;
  }

  .menu-close {
    bottom: 1rem;
    top: auto;
    right: 1rem;
    left: auto;
    position: fixed;
    z-index: 1001;
    background:#333;
    padding:0 1rem;
  }
}





/**  SEARCH  **/
.toggle-search{display:none;}
#searchBar{position:fixed;bottom:0;left:0;width:100%;display:none;justify-content:space-between;align-items:center;background:#ffbb00;padding:10px 5%;box-sizing:border-box;z-index:1000;border:1px solid #333;}
form{width:100vw;}
#searchInput{width:70%;padding:10px;margin-right:5%;box-sizing:border-box;}
.do-search{width:20%;padding:10px;box-sizing:border-box;cursor:pointer;text-align:center;}
.toggle-search:checked + #searchBar,.toggle-search:checked ~ #searchBar{display: flex;}
.do-search, .search-label{cursor:pointer;text-decoration:none;}
.do-search:hover,.search-label:hover{text-decoration:underline;}

/** COOKIE **/
#cookie-banner{color:#fff;background-color:#000000;box-shadow:0 0 5px rgba(0,0,0,0.2);padding:1rem;}
#cookie-banner p{padding:1rem;}
#cookie-banner a{color:#99C4C8;text-decoration:underline;color:#fff;}
#cookie-banner button{margin:0 5px;padding:5px 10px;background-color:#fff;color:#000;border:none;border-radius:5px;cursor:pointer;}
#cookie-banner button#reject-cookies{background-color:#fff;color:#000;}

/**ARRIBA **/
#btnVolverArriba{position:fixed;bottom:20px;left:30px;z-index:99;border:none;outline:none;background-color:#333;color:white;cursor:pointer;padding:15px 20px;border-radius:10px;display:none;}
#btnVolverArriba:hover{background-color:#555;}

.boton-animado {padding:0.5rem 2rem; border-radius:5px;}
.fo {background:#fff;}
a.fo {color:#0f2f3f;}
a:hover.fo {color:#fff; background: #0f2f3f; border:1px solid #fff;}
.copy {font-family:  var(--font-heading); font-size: 1rem;}







footer {
  background: var(--color-surface-footer);
  display: grid;
  align-items: center;
  color: #fff;
}

footer a {
  text-decoration: none;
}

footer div {
  padding-top: 2rem;
}

footer header {
font-family: var(--font-extras); font-weight:900;
}

footer div:nth-child(2) {
  font-weight: 700;
  font-size: 1.6rem;
}

footer div:nth-child(2) ul {
  padding-left: 1rem;
  padding-top: 0.5rem;
}

footer div:nth-child(2) li {
  font-size: 1rem;
  font-weight: normal;
  margin-bottom: 5px;
}

footer div:nth-child(3) li {
  font-size: 14px;
}

footer div:nth-child(4) {
  text-align: right;
  font-size: 12px;
  padding-top: 0;
}

@media (min-width: 801px) {
  footer {
    grid-template-columns: repeat(3, 1fr);
  }

  footer div:nth-child(1) {
    grid-column: span 3;
    font-size: 3rem;
    letter-spacing: 2px;
  }

  footer div:nth-child(2) {
    grid-column: 1 / 4;
  }

  footer div:nth-child(3) {
    grid-column: 1 / 3;
  }

  footer div:nth-child(3) li {
    display: inline;
    padding-right: 1rem;
  }

  footer div:nth-child(4) {
    grid-column: 3 / 4;
  }
}

@media (max-width: 800px) {
  footer {
    grid-template-columns: 1fr;
  }

 footer div:nth-child(1) {
    font-size: 2.4rem;
    grid-row: 1 / 2;
  }

  footer div:nth-child(2) {
    grid-row: 2 / 3;
  }

  footer div:nth-child(2) li {
    padding: 0.4rem 0;
  }

  footer div:nth-child(3) {
    grid-row: 3 / 4;
    padding-top: 1rem;
  }

  footer div:nth-child(3) li {
    padding: 0.4rem;
  }

 footer div:nth-child(4) {
    font-size: 0.9rem;
    grid-row: 4 / 5;
  }
}



@media (max-width:400px){
footer {padding: 10rem 2rem;}  
}

@media (min-width:401px) and (max-width:768px){
footer {padding: 10rem 2rem;}  
}

@media (min-width:769px) and (max-width:992px){
footer {padding: 10rem 4rem;}  
}

@media (min-width:993px) and (max-width:1340px){
footer {padding: 10rem 6rem;}  
}

@media (min-width:1341px) and (max-width:1920px){
footer {padding: 10rem 8rem;}  
}

@media (min-width:1921px) and (max-width:2560px){
footer {padding: 10rem;}  
}

@media (min-width:2561px) and (max-width:3840px){
footer {padding: 10rem 12rem;}  
}

@media (min-width:3841px){
footer {padding: 10rem 14rem;}  
}

footer ul {list-style-type: none;}