/* Extraído de salud-01-blog.html (lo que añade sobre base.css). NO EDITAR: se regenera. */

/* Página interior: mismas tres diferencias con el home que en PDP, PLP, carrito y cuenta. */
.s01-siteheader.is-inner{ margin-bottom:0; }
.s01-stage{ background:var(--paper); min-height:100vh; }
.s01-siteheader.is-inner:not(.paint) .s01-links > a,
.s01-siteheader.is-inner:not(.paint) .s01-navitem > a,
.s01-siteheader.is-inner:not(.paint) .s01-login,
.s01-siteheader.is-inner:not(.paint) .s01-icon{ color:var(--ink); }
.s01-siteheader.is-inner:not(.paint) .s01-logo-img{ filter:brightness(0); }
.s01-siteheader.is-inner:not(.paint) .s01-cta{ background:var(--azul-fuerte); color:#fff; }
.s01-siteheader.is-inner:not(.paint) .s01-cta:hover{ background:var(--azul-navy); }

/* ——— Primitivos de formulario ———
   Vivían sueltos en el generador de contacto y el cotizador los usaba sin tenerlos: sus campos
   salían con el estilo nativo del navegador. Un primitivo compartido va en el armazón. */
.s01-campo{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.s01-campo > span{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:var(--gris-medio); }
.s01-campo > span i{ font-style:normal; text-transform:none; letter-spacing:0; }
.s01-campo input,.s01-campo textarea{ width:100%; min-width:0; font-family:var(--font-ui); font-size:16px; letter-spacing:-.01em; color:var(--ink);
  background:#fff; border:1px solid var(--gris-claro); border-radius:2.4px; padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease; }
.s01-campo textarea{ resize:vertical; line-height:23px; }
.s01-campo input::placeholder,.s01-campo textarea::placeholder{ color:var(--gris-medio); }
.s01-campo input:focus,.s01-campo textarea:focus{ outline:none; border-color:var(--azul-fuerte); box-shadow:0 0 0 3px rgba(53,57,142,.10); }
.s01-campo input:user-invalid{ border-color:#C0392B; }

/* Desplegable propio. El <select> nativo pinta el control del sistema operativo y rompe el
   lenguaje del sitio; este es el mismo patrón del orden del catálogo, en versión campo. */
.s01-sel{ position:relative; }
.s01-sel-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; text-align:left;
  font-family:var(--font-ui); font-size:16px; letter-spacing:-.01em; color:var(--ink);
  background:#fff; border:1px solid var(--gris-claro); border-radius:2.4px; padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease; }
.s01-sel-btn:hover{ border-color:var(--azul-medio); }
.s01-sel-btn[aria-expanded="true"]{ border-color:var(--azul-fuerte); box-shadow:0 0 0 3px rgba(53,57,142,.10); }
.s01-sel-btn:focus-visible{ outline:2px solid var(--azul-fuerte); outline-offset:1px; }
.s01-sel-chev{ flex:none; width:7px; height:7px; margin-top:-3px; border-right:1.5px solid var(--gris-medio); border-bottom:1.5px solid var(--gris-medio); transform:rotate(45deg); transition:transform .2s cubic-bezier(.16,1,.3,1); }
.s01-sel-btn[aria-expanded="true"] .s01-sel-chev{ margin-top:3px; transform:rotate(225deg); }
.s01-sel-list{ position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--gris-claro); border-radius:9.6px; box-shadow:0 18px 44px rgba(15,22,32,.14); max-height:280px; overflow-y:auto; }
.s01-sel-o{ padding:10px 12px; border-radius:2.4px; cursor:pointer; font-family:var(--font-ui); font-size:15px; letter-spacing:-.01em; color:#41485A; }
.s01-sel-o:hover{ background:#EEF1F9; color:var(--ink); }
.s01-sel-o.is-on{ background:#EEF1F9; color:var(--azul-navy); font-weight:600; }

/* Cabecera común a las páginas de contenido: mismas medidas que la de catálogo. */
.s01-pg-head{ padding:56px var(--edge) 0; }
.s01-pg-h1{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:56px; line-height:1.02; letter-spacing:-.02em; color:var(--ink); margin:18px 0 0; }
.s01-pg-sub{ font-family:var(--font-ui); font-size:17px; line-height:26px; letter-spacing:-.01em; color:#5A6472; max-width:60ch; margin:16px 0 0; }
.s01-pg{ padding:70px var(--edge) 96px; }
@media (max-width:1024px){ .s01-pg-h1{ font-size:42px; } .s01-pg{ padding-top:40px; } }
@media (max-width:767px){ .s01-pg-head{ padding-top:36px; } .s01-pg-h1{ font-size:32px; } .s01-pg-sub{ font-size:15px; line-height:23px; } }


.s01-blg-filtros{ display:flex; flex-wrap:wrap; gap:8px; padding-bottom:36px; }
.s01-blg-f{ cursor:pointer; border:1px solid var(--gris-claro); border-radius:2.4px; background:#fff; padding:9px 16px;
  font-family:var(--font-ui); font-size:14px; font-weight:500; letter-spacing:-.01em; color:#41485A; transition:all .15s ease; }
.s01-blg-f:hover{ border-color:var(--azul-medio); color:var(--ink); }
.s01-blg-f.is-on{ background:var(--azul-fuerte); border-color:var(--azul-fuerte); color:#fff; }

/* El .s01-blogcard del home coloca sus columnas con nth-of-type SIN ámbito, así que aquí se
   colarían las posiciones editoriales del home. Se neutralizan antes de poner las nuestras. */
.s01-blg-destacada .s01-blogcard,
.s01-blg-grid .s01-blogcard{ grid-column:auto; }

.s01-blg-destacada{ display:grid; grid-template-columns:repeat(12,1fr); gap:12.8px; padding-bottom:56px; }
.s01-blg-destacada .s01-blogcard{ grid-column:1 / 13; flex-direction:row; align-items:center; gap:48px; }
.s01-blg-destacada .s01-blogcard-img{ flex:none; width:56%; aspect-ratio:16/9; }
.s01-blg-destacada .s01-blog-info{ width:auto; }
.s01-blg-destacada h3{ font-size:38px; line-height:1.06; letter-spacing:-.02em; }

.s01-blg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px 12.8px; }

.s01-blg-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:var(--gris-medio); }
.s01-blg-e{ color:var(--azul-medio); }
.s01-blg-r{ margin:12px 0 0; max-width:52ch; font-family:var(--font-ui); font-size:16px; line-height:25px; letter-spacing:-.01em; color:#5A6472; }
.s01-blog-info .s01-blog-read{ display:inline-block; margin-top:14px; }
.s01-blg-vacio{ text-align:center; padding:72px 24px; }
.s01-blg-vacio p{ margin:10px 0 0; font-family:var(--font-ui); font-size:15px; color:#5A6472; }
.s01-pg [hidden]{ display:none !important; }

@media (max-width:1024px){
  .s01-blg-destacada .s01-blogcard{ flex-direction:column; align-items:flex-start; gap:24px; }
  .s01-blg-destacada .s01-blogcard-img{ width:100%; }
  .s01-blg-destacada h3{ font-size:26px; }
  .s01-blg-grid{ grid-template-columns:repeat(2,1fr); gap:44px 12.8px; }
}
@media (max-width:767px){ .s01-blg-grid{ grid-template-columns:1fr; } }