/* ============================================================
   PAGINAS.CSS — Listados y fichas en negro minimalista (estilo home).
   Se carga DESPUÉS de style.css y starlink.css y unifica el look de
   /noticias, /noticia, /proyecto, /trabajo, /libro y /libros con el
   de la portada (negro puro, tarjetas #111, tipografía del sistema,
   botones píldora, imágenes en escala de grises con color al pasar).
   ============================================================ */

:root{
  --pg-bg:#000;
  --pg-card:#111;
  --pg-card-2:#0e0e0e;
  --pg-line:rgba(255,255,255,.12);
  --pg-line-soft:rgba(255,255,255,.08);
  --pg-white:#ffffff;
  --pg-text:#d4d4d4;
  --pg-muted:#9a9a9a;
  --pg-dim:#7f7f7f;
  --pg-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- 0. Matar los "Blue Refresh": fondos negros en TODAS las secciones ---------- */
.noticias-page-section,.noticia-detail-section,.project-detail-section,
.trabajo-detail-section,.book-detail-section,.section-works,.section-books,
.noticia-related-section,.noticia-faq-section,.noticias-archive-section{
  background:var(--pg-bg) !important;
  background-image:none !important;
  font-family:var(--pg-font);
}
.noticias-page-section,.noticia-detail-section,.project-detail-section,
.trabajo-detail-section,.book-detail-section{
  padding:118px 0 90px !important;
}

/* ============================================================
   1. FICHAS DE DETALLE (proyecto · trabajo · libro · noticia)
   ============================================================ */
.project-detail-section .container,.trabajo-detail-section .container,
.book-detail-section .container,.noticia-detail-section .container{
  max-width:1080px;
}

/* --- Enlace "volver" --- */
.project-back-link,.book-back-link,.trabajo-back-link,.noticia-back-link{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--pg-muted) !important;text-decoration:none;
  font-size:.86rem;font-weight:600;letter-spacing:.01em;
  margin-bottom:34px;transition:color .2s ease;
}
.project-back-link:hover,.book-back-link:hover,
.trabajo-back-link:hover,.noticia-back-link:hover{color:#fff !important;}
.project-back-link i,.book-back-link i,.trabajo-back-link i,.noticia-back-link i{font-size:.82rem;}

/* --- Cabecera de la ficha --- */
.project-detail-header,.book-detail-header,.trabajo-detail-header,.noticia-detail-header{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;margin:0 0 40px !important;text-align:left;
}
/* El "title-section" del tema viejo era una tarjeta blanca: lo dejamos transparente */
.project-detail-title-section,.book-detail-title-section,
.noticia-detail-title-section,.trabajo-detail-title-section{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;max-width:none !important;
}

/* Imagen destacada de la ficha */
.project-detail-image,.book-detail-image,.noticia-detail-imagen{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  border-radius:22px;overflow:hidden;margin:0 0 34px;
  border:1px solid var(--pg-line) !important;
}
.project-detail-image img,.noticia-detail-imagen img{
  display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.03);
  transition:filter .4s ease;
}
.project-detail-image:hover img,.noticia-detail-imagen:hover img{filter:grayscale(0);}
/* La portada de un libro sí en color y a tamaño contenido */
.book-detail-image{max-width:260px;border-radius:14px;}
.book-detail-image img{display:block;width:100%;height:auto;filter:none;}

/* Cabecera de la ficha de libro a dos columnas: portada a la izquierda y
   título + autor a la derecha. Antes iban apilados —portada pegada al margen
   izquierdo y título centrado debajo—, y no había forma de que casaran. */
.book-detail-section .book-back-link{display:inline-flex;margin:0 0 34px;}
.book-detail-header{
  display:grid;grid-template-columns:240px minmax(0,1fr);
  gap:48px;align-items:center;margin:0 0 52px !important;
}
.book-detail-header--sin-portada{grid-template-columns:minmax(0,1fr);}
.book-detail-header .book-detail-image{
  max-width:none;width:100%;margin:0;border-radius:12px;
  box-shadow:0 20px 46px rgba(0,0,0,.6) !important;
}
/* style.css centraba este bloque (text-align:center + margin:0 auto), así que
   el título salía centrado en su columna y sin eje común con el texto. */
.book-detail-title-section{
  padding-bottom:6px !important;margin:0 !important;text-align:left !important;
}
.book-detail-title-section .book-detail-title{text-align:left !important;}
.book-detail-eyebrow{
  display:block;color:var(--pg-dim) !important;text-transform:uppercase;
  letter-spacing:.24em;font-weight:700;margin:0 0 14px;
}
.book-detail-title{margin:0 0 12px !important;}
.book-detail-autor{
  color:var(--pg-muted) !important;font-family:var(--pg-font);
  font-weight:400;margin:0;letter-spacing:-.005em;
}
.noticia-related-autor{color:var(--pg-muted) !important;margin:0 0 14px;}

/* En móvil el «volver» del tema es un botón flotante NEGRO, que sobre el fondo
   negro se quedaba en una flecha suelta en el aire. Un borde y lo devuelve a
   ser un botón. */
@media only screen and (max-width:991px){
  .book-detail-section .book-back-link{
    background-color:#111 !important;
    border:1px solid rgba(255,255,255,.22) !important;
    box-shadow:0 6px 22px rgba(0,0,0,.7) !important;
  }
}

/* El cuerpo arranca en el mismo eje que el título, con la portada viviendo en
   el margen izquierdo. Si no, el título empieza a la derecha de la portada y el
   texto al borde del contenedor: dos ejes distintos y la ficha se ve desarmada. */
@media (min-width:761px){
  .book-detail-content{margin-left:288px;}
  /* Medida de lectura: a 18px, 760px se iban a ~85 caracteres por línea. */
  .book-detail-section .book-detail-description{max-width:680px;}
}

@media (max-width:760px){
  .book-detail-header{grid-template-columns:minmax(0,1fr);gap:26px;align-items:start;}
  .book-detail-header .book-detail-image{max-width:170px;}
}

/* Títulos de ficha */
.project-detail-title,.book-detail-title,.trabajo-detail-title{
  color:var(--pg-white) !important;font-family:var(--pg-font);
  font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.04;letter-spacing:-.025em;
  font-weight:800;margin:0 0 14px;text-wrap:balance;
}
.project-detail-subtitle{
  color:var(--pg-muted) !important;font-size:1.12rem;line-height:1.55;
  font-weight:400;margin:0 0 20px;max-width:60ch;
}

/* Píldoras de categoría / área */
.project-detail-categories,.trabajo-detail-areas{
  display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;
}
.project-category-badge,.trabajo-area-badge{
  display:inline-flex;align-items:center;
  background:rgba(255,255,255,.06) !important;color:#cfcfcf !important;
  border:1px solid var(--pg-line) !important;border-radius:999px;
  padding:7px 15px;font-size:.8rem;font-weight:600;letter-spacing:.01em;
  text-transform:none;box-shadow:none !important;
}

/* --- Cuerpo de la ficha --- */
.project-detail-content,.book-detail-content{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;
}
.project-detail-description,.book-detail-description,.trabajo-detail-description{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;margin:0 0 46px;max-width:760px;
}
.project-detail-description h2,.book-detail-description h2,
.trabajo-detail-description h2,.project-detail-technologies h2{
  color:var(--pg-white) !important;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;margin:0 0 18px;
  padding-bottom:14px;border-bottom:1px solid var(--pg-line-soft);
}
.project-detail-description p,.book-detail-description p,.trabajo-detail-description p{
  color:var(--pg-text) !important;font-size:1.06rem;line-height:1.75;margin:0 0 18px;
}

/* Rejilla de tecnologías */
.project-detail-technologies{margin:0 0 46px;}
.technologies-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;
}
.technology-item{
  display:flex;align-items:center;gap:10px;
  background:var(--pg-card) !important;border:1px solid var(--pg-line) !important;
  border-radius:12px;padding:13px 16px;color:#e6e6e6 !important;box-shadow:none !important;
}
.technology-item i{color:#fff !important;font-size:.95rem;}
.technology-item span{color:#e6e6e6 !important;font-weight:500;font-size:.95rem;}

/* Botón principal (visitar / descargar) */
.btn-project-visit,.btn-book-back{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff !important;color:#000 !important;border:1px solid #fff !important;
  border-radius:999px;padding:14px 28px;font-size:.95rem;font-weight:700;
  text-decoration:none;box-shadow:none !important;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.btn-project-visit:hover,.btn-book-back:hover{
  background:transparent !important;color:#fff !important;transform:translateY(-2px);
}
.project-detail-action{margin:0 0 10px;}

/* ---------- Trabajo: empresa, fechas ---------- */
.trabajo-detail-company{
  display:flex;align-items:center;gap:16px;margin:0 0 22px;
  background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;
}
.trabajo-detail-company-info{background:transparent !important;}
.trabajo-detail-logo{
  width:60px;height:60px;flex:0 0 auto;border-radius:14px;overflow:hidden;
  background:#fff !important;border:1px solid var(--pg-line) !important;
  display:flex;align-items:center;justify-content:center;padding:8px;
}
.trabajo-detail-logo img{max-width:100%;max-height:100%;object-fit:contain;}
.trabajo-detail-company-name{
  margin:0 !important;font-size:1rem;font-weight:600;
}
.trabajo-detail-company-name,.trabajo-detail-company-name a{color:var(--pg-muted) !important;text-decoration:none;}
.trabajo-detail-company-name a:hover{color:#fff !important;}
.trabajo-detail-dates{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  background:var(--pg-card) !important;border:1px solid var(--pg-line) !important;
  border-radius:14px;padding:16px 20px;margin:0 0 40px;box-shadow:none !important;
}
.trabajo-date-item{display:inline-flex;align-items:center;gap:8px;color:var(--pg-text) !important;font-size:.92rem;}
.trabajo-date-item i{color:var(--pg-muted) !important;}
.trabajo-date-item strong{color:#fff !important;font-weight:600;}
.trabajo-badge-current{
  display:inline-flex;align-items:center;background:#fff !important;color:#000 !important;
  border-radius:999px;padding:5px 14px;font-size:.76rem;font-weight:700;letter-spacing:.02em;
}

/* ============================================================
   2. BLOQUE "RELACIONADOS" (compartido por las 3 fichas)
   ============================================================ */
.noticia-related-section{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  margin-top:56px;padding-top:40px;border-top:1px solid var(--pg-line-soft) !important;
}
/* Barra decorativa cian del tema viejo: fuera */
.noticia-related-section::before,.noticia-faq-section::before{display:none !important;}
/* Y la chapa numerada azul («01») que el tema viejo pega en cada pregunta,
   que además salía encima del texto porque aquí el padding es menor. */
.noticia-faq-item::before{display:none !important;content:none !important;}
.noticia-section-heading{margin:0 0 24px;}
.noticia-section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;color:var(--pg-dim) !important;
  text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;font-weight:700;margin:0 0 10px;
  background:transparent !important;border:0 !important;padding:0 !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
.noticia-section-eyebrow::before{background:rgba(255,255,255,.35) !important;}
.noticia-section-heading h2{
  color:#fff !important;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:0;
}
.noticia-related-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;
}
.noticia-related-card{
  background:var(--pg-card) !important;border:1px solid var(--pg-line) !important;
  border-radius:16px !important;box-shadow:none !important;overflow:hidden;
  transition:transform .25s ease,border-color .2s ease;
}
.noticia-related-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28) !important;}
.noticia-related-content{padding:20px;}
.noticia-related-card h3{margin:0 0 10px;font-size:1.05rem;line-height:1.3;font-weight:700;}
.noticia-related-card h3 a{color:#fff !important;text-decoration:none;}
.noticia-related-content p{color:var(--pg-muted) !important;font-size:.9rem;line-height:1.5;margin:0 0 14px;}
.noticia-related-link{
  display:inline-flex;align-items:center;gap:6px;color:#cfcfcf !important;
  font-size:.85rem;font-weight:600;text-decoration:none;
}
.noticia-related-link:hover{color:#fff !important;}
.noticia-related-link::after{content:"\2192";}

/* ============================================================
   3. FICHA DE NOTICIA (artículo)
   ============================================================ */
.noticia-detail-title{
  color:#fff !important;font-family:var(--pg-font);
  font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.05;letter-spacing:-.025em;
  font-weight:800;margin:0 0 16px;max-width:16ch;text-wrap:balance;
}
.noticia-detail-title-section{max-width:820px;}
.noticia-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;}
.noticia-meta,.noticia-fecha-completa,.noticia-fecha-corta,.noticia-separador{
  color:var(--pg-dim) !important;font-size:.82rem;font-weight:500;
}
.noticia-detail-content{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;max-width:760px;margin:0 auto;
}
.noticia-detail-contenido{color:var(--pg-text) !important;font-size:1.1rem;line-height:1.8;}
.noticia-detail-contenido p,.noticia-detail-contenido li{color:var(--pg-text) !important;margin:0 0 20px;}
.noticia-detail-contenido h2,.noticia-detail-contenido h3,.noticia-detail-contenido h4{
  color:#fff !important;letter-spacing:-.01em;margin:38px 0 14px;line-height:1.2;
}
.noticia-detail-contenido h2{font-size:1.6rem;font-weight:700;}
.noticia-detail-contenido h3{font-size:1.28rem;font-weight:700;}
.noticia-detail-contenido a{color:#fff !important;text-decoration:underline;text-underline-offset:3px;}
.noticia-detail-contenido strong{color:#fff !important;}
.noticia-detail-contenido img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--pg-line);margin:8px 0;}
.noticia-detail-contenido blockquote{
  border-left:3px solid rgba(255,255,255,.3) !important;background:var(--pg-card-2) !important;
  color:#cfcfcf !important;margin:24px 0;padding:16px 22px;border-radius:0 12px 12px 0;
}
.noticia-detail-contenido code{background:#161616 !important;color:#e8e8e8 !important;padding:2px 6px;border-radius:6px;}
.noticia-firma{
  max-width:760px;margin:36px auto 0;padding-top:22px;
  border-top:1px solid var(--pg-line-soft) !important;
  display:flex;align-items:center;gap:14px;
}
.noticia-firma p{color:#e8e8e8 !important;margin:0;font-size:.95rem;}

/* FAQ */
.noticia-faq-section{background:var(--pg-bg) !important;background-image:none !important;padding:20px 0 0;}
.noticia-faq-section .container{max-width:820px;}
.noticia-faq-list{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
.noticia-faq-item{
  background:var(--pg-card) !important;border:1px solid var(--pg-line) !important;
  border-radius:14px !important;box-shadow:none !important;padding:20px 22px;
}
.noticia-faq-item h3{color:#fff !important;font-size:1.05rem;font-weight:700;margin:0 0 8px;}
.noticia-faq-respuesta,.noticia-faq-respuesta p{color:var(--pg-muted) !important;margin:0;line-height:1.6;}

/* ============================================================
   4. LISTADO DE NOTICIAS (/noticias/)
   ============================================================ */
.noticias-page-section{padding:118px 0 90px !important;}
.noticias-page-container{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  max-width:1200px;margin:0 auto;padding:0 24px;
}
.noticias-page-header{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  text-align:center;max-width:760px;margin:0 auto 54px;padding:0;
}
.noticias-back-link{margin-bottom:26px;}
.noticias-back-link,.noticias-back-text{color:var(--pg-muted) !important;text-decoration:none;font-size:.86rem;font-weight:600;}
.noticias-back-link:hover,.noticias-back-link:hover .noticias-back-text{color:#fff !important;}
.noticias-page-title{
  color:#fff !important;font-family:var(--pg-font);font-size:clamp(2.6rem,6vw,4.2rem);
  line-height:1;letter-spacing:-.035em;font-weight:800;margin:0 0 16px;
}
.noticias-page-subtitle{color:var(--pg-muted) !important;font-size:1.08rem;line-height:1.55;margin:0 auto 26px;max-width:60ch;}

/* Buscador + filtros */
.noticias-filtros{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:10px;}
.noticias-buscador{
  position:relative;display:flex;align-items:center;width:100%;max-width:440px;
  background:var(--pg-card) !important;border:1px solid var(--pg-line) !important;
  border-radius:999px;padding:0 18px;
}
.noticias-buscador i{color:var(--pg-muted) !important;}
.noticias-search-input{
  flex:1;background:transparent !important;border:0 !important;outline:0 !important;
  color:#fff !important;padding:13px 12px;font-size:.95rem;font-family:var(--pg-font);
}
.noticias-search-input::placeholder{color:var(--pg-dim) !important;}
.noticias-filtros-categorias{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.filtro-categoria-btn{
  background:transparent !important;color:#bfbfbf !important;
  border:1px solid var(--pg-line) !important;border-radius:999px;
  padding:8px 16px;font-size:.82rem;font-weight:600;cursor:pointer;
  font-family:var(--pg-font);transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.filtro-categoria-btn:hover{color:#fff !important;border-color:rgba(255,255,255,.35) !important;}
.filtro-categoria-btn.active{background:#fff !important;color:#000 !important;border-color:#fff !important;}

/* Botón "leer más" / "explorar" */
.btn-leer-mas{
  display:inline-flex;align-items:center;gap:7px;color:#cfcfcf !important;
  font-size:.86rem;font-weight:600;text-decoration:none;transition:color .2s ease;
}
.btn-leer-mas:hover{color:#fff !important;}

/* Destacadas (2 columnas) */
.noticias-dos-columnas{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;margin:0 0 22px;}
.noticias-columna-der{display:flex;flex-direction:column;gap:22px;}

/* Tarjeta genérica de noticia (destacada, secundaria/columna derecha y de rejilla) */
.noticia-destacada-columna,.noticia-item,.noticia-columna-der-item{
  background:var(--pg-card) !important;border:1px solid var(--pg-line) !important;
  border-radius:18px !important;box-shadow:none !important;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s ease,border-color .2s ease;
}
.noticia-destacada-columna:hover,.noticia-item:hover,.noticia-columna-der-item:hover{
  transform:translateY(-4px);border-color:rgba(255,255,255,.26) !important;
}
.noticia-imagen-link{display:block;overflow:hidden;}
.noticia-destacada-imagen,.noticia-item-imagen,.noticia-columna-der-imagen{
  overflow:hidden;background:#0a0a0a !important;aspect-ratio:16/9;
}
.noticia-destacada-imagen img,.noticia-item-imagen img,.noticia-columna-der-imagen img{
  width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);
  transition:filter .4s ease,transform .5s ease;display:block;
}
.noticia-destacada-columna:hover .noticia-destacada-imagen img,
.noticia-item:hover .noticia-item-imagen img,
.noticia-columna-der-item:hover .noticia-columna-der-imagen img{filter:grayscale(0);transform:scale(1.03);}
.noticia-destacada-content,.noticia-item-content,.noticia-columna-der-content{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1;background:transparent !important;}
.noticia-categorias-badges{display:flex;flex-wrap:wrap;gap:7px;}
.noticia-categoria-badge,.noticia-categoria-badge-small{
  background:rgba(255,255,255,.06) !important;color:#c4c4c4 !important;
  border:1px solid var(--pg-line) !important;border-radius:999px;
  padding:4px 11px;font-size:.72rem;font-weight:600;letter-spacing:.02em;
}
.noticia-destacada-titulo,.noticia-item-titulo,.noticia-columna-der-titulo,
.noticia-destacada-columna .noticia-destacada-titulo{
  margin:0 !important;line-height:1.25;letter-spacing:-.01em;color:#fff !important;
  border-left:0 !important;padding-left:0 !important;
}
.noticia-destacada-titulo{font-size:1.5rem;font-weight:700;}
.noticia-item-titulo,.noticia-columna-der-titulo{font-size:1.1rem;font-weight:700;}
.noticia-titulo-link,.noticia-titulo-link:hover{color:#fff !important;text-decoration:none;}
.noticia-titulo-link:hover{text-decoration:underline;text-underline-offset:3px;}
.noticia-resumen,.noticia-columna-der-resumen{color:var(--pg-muted) !important;font-size:.95rem;line-height:1.6;margin:0;}
.noticia-destacada-content .btn-leer-mas,.noticia-item-content .btn-leer-mas,
.noticia-columna-der-content .btn-leer-mas{margin-top:auto;align-self:flex-start;}

/* Rejilla principal */
.noticias-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin:0 0 40px;
}

/* Paginación */
.noticias-paginacion{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:20px 0 0;}
.noticias-paginacion a,.noticias-paginacion span,.pagina-numero,.pagina-nav{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;
  background:var(--pg-card) !important;color:#ddd !important;border:1px solid var(--pg-line) !important;
  border-radius:999px;font-size:.9rem;font-weight:600;text-decoration:none;transition:background .2s ease,color .2s ease;
}
.noticias-paginacion a:hover,.pagina-numero:hover,.pagina-nav:hover{background:rgba(255,255,255,.1) !important;color:#fff !important;}
.noticias-paginacion .active,.pagina-numero.active{background:#fff !important;color:#000 !important;border-color:#fff !important;}

/* ============================================================
   5. BIBLIOTECA (/libros/ y /libro/{slug})
   Estantería sobre negro: la portada es el objeto, sin tarjeta
   alrededor. Título y autor debajo, en texto plano.
   ============================================================ */

/* --- 5.0 El velo blanco del tema viejo -------------------------------------
   style.css pinta un ::before con inset:0 sobre TODA la sección:
     radial-gradient(rgba(0,229,255,.16)) + linear-gradient(rgba(255,255,255,.92))
   Es decir, cian y blanco casi opaco encima del negro. starlink.css solo pisaba
   el `background` del elemento, no el del pseudo, así que la rejilla entera se
   veía sobre un fondo blanco azulado. Esto lo mata. */
.section-books::before{content:none !important;display:none !important;}
.section-books{
  background:#000 !important;background-image:none !important;
  overflow:visible;padding:80px 0 100px;
}
.section-books .container{max-width:1400px;padding:0 24px;}

/* --- 5.1 Rejilla ---------------------------------------------------------- */
.books-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:40px 26px;
  padding:0 !important;margin:0;
  align-items:start;
}
.book-card-wrapper{padding:0;margin:0;}
.book-card-link{display:block;text-decoration:none;color:inherit;}

/* Sin caja: la tarjeta es solo la columna portada + texto. */
.books-grid .book-card{
  background:transparent !important;background-image:none !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  overflow:visible;display:flex;flex-direction:column;gap:14px;height:auto;
  transform:none !important;transition:none;
}

/* La portada: proporción de libro fija para que la fila quede a escuadra.
   Antes era `height:340px` con el ancho variable de la columna, así que cada
   portada se recortaba de una forma distinta (a «Tirant lo Blanc» le cortaba
   el título). */
.book-card-image{
  position:relative;width:100%;
  aspect-ratio:2/3;height:auto !important;
  border-radius:10px;overflow:hidden;
  background:#0d0d0d !important;background-image:none !important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 30px rgba(0,0,0,.55);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),
             border-color .35s ease, box-shadow .35s ease;
}
.book-card-image img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.03);
  transition:filter .45s ease;transform:none !important;
}
.book-card-link:hover .book-card-image,
.book-card-link:focus-visible .book-card-image{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,.34);
  box-shadow:0 26px 50px rgba(0,0,0,.75);
}
.book-card-link:hover .book-card-image img,
.book-card-link:focus-visible .book-card-image img{filter:grayscale(0);}
.book-card-link:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:12px;}

/* El círculo con la flecha encima de la portada: fuera. Tapaba la cubierta y
   sobraba, si la tarjeta entera ya es un enlace. */
.book-card-overlay,.book-card-icon{display:none !important;}

.book-card-placeholder{
  width:100%;height:100%;
  background:#141414 !important;
  background-image:radial-gradient(circle at 50% 40%,#1d1d1d 0%,#0d0d0d 100%) !important;
  color:#4a4a4a !important;display:flex;align-items:center;justify-content:center;
}

/* Texto bajo la portada, alineado a la izquierda como en una estantería. */
.book-card-content{
  background:transparent !important;background-image:none !important;
  border:0 !important;padding:0 2px !important;margin:0;
  display:block;flex:none;
}
.book-card-title{
  color:#fff !important;font-family:var(--pg-font);
  font-weight:600;text-align:left !important;margin:0 0 5px;
  letter-spacing:-.012em;text-wrap:pretty;hyphens:none;
}
.book-card-autor{
  color:var(--pg-muted) !important;font-family:var(--pg-font);
  font-weight:400;margin:0;text-align:left;letter-spacing:0;
}
.book-card-link:hover .book-card-title{color:#fff !important;}
.book-card-link:hover .book-card-autor{color:#c9c9c9 !important;}

.books-empty{
  grid-column:1/-1;text-align:center;padding:64px 20px !important;
  background:var(--pg-card-2) !important;
  border:1px dashed var(--pg-line) !important;border-radius:16px;
}
.books-empty p{color:var(--pg-muted) !important;margin:0;}

/* --- 5.2 Cabecera de la sección en la home -------------------------------- */
.books-hero{
  background:var(--pg-card-2) !important;background-image:none !important;
  border:1px solid var(--pg-line) !important;box-shadow:none !important;
  border-radius:20px;padding:34px 36px !important;margin:0 0 44px !important;
  align-items:center;
}
.books-hero h2{color:#fff !important;}
/* El tema viejo cuelga dos rayitas decorativas del subtítulo
   (.section-subtitle span:before/:after) pensadas para un bloque centrado;
   aquí el texto va alineado a la izquierda y quedaban flotando sueltas. */
.books-hero .section-subtitle{margin:0;text-align:left;}
.books-hero .section-subtitle span:before,
.books-hero .section-subtitle span:after{content:none !important;display:none !important;}
/* El h2 seguía centrado y el <span> conservaba el padding que dejaba sitio a
   esas rayitas: el bloque cuadraba pero el TEXTO salía 17px desplazado. */
.books-hero h2{text-align:left !important;}
.books-hero .section-subtitle span{padding:0 !important;}
.books-hero-cta{margin:18px 0 0;}
.books-hero-cta a{
  display:inline-flex;align-items:center;gap:8px;
  color:#fff !important;text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;
  transition:border-color .2s ease;
}
.books-hero-cta a:hover{border-bottom-color:#fff;}
.book-counter{
  background:transparent !important;background-image:none !important;
  border:0 !important;box-shadow:none !important;
  color:var(--pg-muted) !important;text-transform:none;letter-spacing:0;
  min-width:0;text-align:right;font-weight:500;
}
.book-counter #count,.book-counter span{
  display:block;background:transparent !important;box-shadow:none !important;
  padding:0 !important;margin:0 0 2px;color:#fff !important;
  font-weight:700;letter-spacing:-.04em;line-height:1;
}

/* --- 5.3 Contador dentro de la cabecera del archivo ----------------------- */
.archive-stat{
  display:inline-flex;align-items:baseline;gap:10px;
  margin:22px 0 0;color:var(--pg-muted) !important;
}
.archive-stat #count{
  color:#fff !important;font-weight:700;letter-spacing:-.04em;line-height:1;
}

/* ============================================================
   6. CABECERA DE ARCHIVO (compartida: /proyectos, /trabajos, /libros)
   ============================================================ */
.archive-hero{
  background:#000;text-align:center;font-family:var(--pg-font);
  padding:120px 24px 8px;
}
.archive-hero .container{max-width:840px;}
/* El enlace y el eyebrow son dos inline seguidos, así que salían pegados en la
   misma línea («← Volver al inicio  ARCHIVO»). Cada uno en su renglón. */
.archive-back{
  display:inline-flex;align-items:center;gap:8px;color:var(--pg-muted) !important;
  text-decoration:none;font-weight:600;transition:color .2s ease;
}
.archive-back:hover{color:#fff !important;}
.archive-hero .archive-back{margin:0 0 28px;}
.archive-eyebrow{
  display:block;color:var(--pg-dim) !important;text-transform:uppercase;
  letter-spacing:.24em;font-weight:700;margin:0 0 16px;
}
.archive-hero h1{
  color:#fff !important;font-size:clamp(2.6rem,6vw,4.2rem);line-height:1;
  letter-spacing:-.035em;font-weight:800;margin:0 0 16px;text-wrap:balance;
}
.archive-hero .archive-sub{
  color:var(--pg-muted) !important;font-size:1.1rem;line-height:1.55;
  margin:0 auto;max-width:60ch;
}
/* Junta la cabecera con la sección de contenido que la sigue */
.archive-hero + section{padding-top:44px !important;}

/* ---------- Grid de archivo de proyectos (12 fichas, sin iframes) ---------- */
.proj-archive-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;margin:0 auto;max-width:1180px;text-align:left;
}
.proj-archive-card{
  display:flex;flex-direction:column;background:var(--pg-card);
  border:1px solid var(--pg-line);border-radius:18px;overflow:hidden;
  transition:transform .25s ease,border-color .2s ease;
}
.proj-archive-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.26);}
.proj-archive-cover{display:block;aspect-ratio:16/10;overflow:hidden;background:#0a0a0a;}
.proj-archive-cover img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:grayscale(1) contrast(1.03);transition:filter .4s ease,transform .5s ease;display:block;
}
.proj-archive-card:hover .proj-archive-cover img{filter:grayscale(0);transform:scale(1.03);}
.proj-archive-body{display:flex;flex-direction:column;gap:12px;padding:20px 22px;flex:1;}
.proj-archive-tags{display:flex;flex-wrap:wrap;gap:7px;}
.proj-archive-tags span{
  background:rgba(255,255,255,.06);color:#c4c4c4;border:1px solid var(--pg-line);
  border-radius:999px;padding:4px 11px;font-size:.72rem;font-weight:600;letter-spacing:.02em;
}
.proj-archive-card h3{margin:0;font-size:1.2rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;}
.proj-archive-card h3 a{color:#fff;text-decoration:none;}
.proj-archive-card h3 a:hover{text-decoration:underline;text-underline-offset:3px;}
.proj-archive-desc{color:var(--pg-muted);font-size:.94rem;line-height:1.55;margin:0;}
.proj-archive-cta{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  color:#cfcfcf;font-size:.88rem;font-weight:600;text-decoration:none;
}
.proj-archive-cta:hover{color:#fff;}
.proj-archive-cta i{transition:transform .2s ease;}
.proj-archive-card:hover .proj-archive-cta i{transform:translateX(3px);}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  .noticias-dos-columnas{grid-template-columns:1fr;}
  .noticia-destacada-titulo{font-size:1.25rem;}
}
@media (max-width:560px){
  .noticias-page-section,.noticia-detail-section,.project-detail-section,
  .trabajo-detail-section,.book-detail-section{padding:96px 0 64px !important;}
  .noticias-grid{grid-template-columns:1fr;}
  .noticia-related-grid,.technologies-grid{grid-template-columns:1fr 1fr;}
}

/* ---------- Override final: títulos de noticia siempre blancos (vencen al teal heredado) ---------- */
.noticias-page-section a.noticia-titulo-link,
.noticia-destacada-titulo a,.noticia-item-titulo a,.noticia-columna-der-titulo a,
.noticia-titulo-link{color:#fff !important;}
.noticias-page-section a.noticia-titulo-link:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------- Filtros de noticias en servidor (enlaces) ---------- */
a.filtro-categoria-btn{text-decoration:none !important;}
.noticias-buscador{margin:0;}
.noticias-search-clear{display:inline-flex;align-items:center;color:var(--pg-dim) !important;padding:0 4px 0 8px;text-decoration:none;font-size:.9rem;}
.noticias-search-clear:hover{color:#fff !important;}
.noticias-filtro-resultado{margin:14px 0 0;color:var(--pg-muted) !important;font-size:.9rem;letter-spacing:.01em;}
.noticias-filtro-resultado strong{color:#fff !important;font-weight:600;}

/* ============================================================
   OVERRIDE FINAL — legibilidad de enlaces + paginación (matar el navy del tema viejo)
   El tema viejo pinta ".noticias-page-section a" en #00354F !important (0-1-1),
   que ganaba a mis clases (0-1-0). Aquí igualo/supero esa especificidad.
   ============================================================ */
/* Enlaces sueltos legibles por defecto SOLO en el listado de noticias */
.noticias-page-section a{color:#cfcfcf !important;}
.noticias-page-section a:hover{color:#ffffff !important;}

/* Títulos de tarjeta/artículo: blancos (0-2-1, gana al default) */
.noticias-page-section a.noticia-titulo-link,
.noticia-destacada-titulo a,.noticia-item-titulo a,.noticia-columna-der-titulo a{color:#ffffff !important;}

/* Botones de categoría (ahora enlaces) */
.noticias-page-section a.filtro-categoria-btn{
  color:#cfcfcf !important;background:transparent !important;
  border:1px solid rgba(255,255,255,.16) !important;border-radius:999px !important;box-shadow:none !important;}
.noticias-page-section a.filtro-categoria-btn:hover{
  color:#ffffff !important;border-color:rgba(255,255,255,.42) !important;background:transparent !important;}
.noticias-page-section a.filtro-categoria-btn.active{
  color:#000000 !important;background:#ffffff !important;border-color:#ffffff !important;}

/* Badges de categoría en el listado */
.noticias-page-section .noticia-categoria-badge,
.noticias-page-section .noticia-categoria-badge-small{
  color:#c8c8c8 !important;background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.14) !important;}

/* "Leer más" y "Explorar archivo completo" */
.noticias-page-section a.btn-leer-mas{color:#cfcfcf !important;}
.noticias-page-section a.btn-leer-mas:hover{color:#ffffff !important;}

/* -------- Paginación minimalista (clases reales del markup) -------- */
.noticias-paginacion{
  background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;
  width:auto !important;margin:48px auto 0 !important;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;}
.noticias-pagina-numeros{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.noticias-page-section a.noticias-pagina-numero,
.noticias-page-section a.noticias-pagina-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:46px;height:46px;padding:0 18px;border-radius:999px;
  background:#111 !important;color:#e8e8e8 !important;border:1px solid rgba(255,255,255,.14) !important;
  font-size:.92rem;font-weight:600;text-decoration:none !important;box-shadow:none !important;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;}
.noticias-page-section a.noticias-pagina-numero:hover,
.noticias-page-section a.noticias-pagina-btn:hover{
  background:rgba(255,255,255,.10) !important;color:#ffffff !important;border-color:rgba(255,255,255,.32) !important;transform:translateY(-1px);}
.noticias-page-section a.noticias-pagina-numero.active,
.noticias-page-section .noticias-pagina-numero.active{
  background:#ffffff !important;color:#000000 !important;border-color:#ffffff !important;}
.noticias-pagina-ellipsis{color:#7f7f7f !important;padding:0 4px;background:transparent !important;border:0 !important;}

/* ============================================================
   9. ARTÍCULOS ESTÁTICOS Y TARJETAS CON PREVIEW (31/08/2026)
   Todo blanco/gris sobre negro. Nada de azul, ni siquiera heredado.
   ============================================================ */

/* ---------- Miniatura en las tarjetas de "seguir leyendo" / "otros proyectos" ---------- */
.noticia-related-image-link{display:block;text-decoration:none;}
.noticia-related-image{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a0a0a;
  border-bottom:1px solid var(--pg-line-soft);
}
.noticia-related-image img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;
  filter:grayscale(1) contrast(1.04);opacity:.86;
  transition:filter .35s ease,opacity .35s ease,transform .45s ease;
}
.noticia-related-card:hover .noticia-related-image img{
  filter:grayscale(0);opacity:1;transform:scale(1.03);
}
.noticia-related-date{
  display:block;color:var(--pg-dim) !important;font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;
}
.noticia-related-body{padding:20px;}
.noticia-related-body h3{margin:0 0 10px;font-size:1.05rem;line-height:1.3;font-weight:700;}
.noticia-related-body h3 a{color:#fff !important;text-decoration:none;}

/* ---------- Cabecera de la ficha de artículo ---------- */
.noticia-declaracion-eyebrow{
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:700;
  color:var(--pg-dim) !important;margin:0 0 12px;
}
.noticia-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  color:var(--pg-dim) !important;font-size:.82rem;margin:0 0 16px;
}
.noticia-meta .noticia-separador{opacity:.45;}
.noticia-categoria-tag,.noticia-lectura{color:var(--pg-muted) !important;}
.noticia-entradilla{
  color:var(--pg-muted) !important;font-size:1.22rem;line-height:1.6;font-weight:400;
  max-width:760px;margin:20px 0 0;
}

/* ---------- Cuerpo del artículo ---------- */
.noticia-detail-contenido ol{margin:0 0 20px;padding-left:22px;}
.noticia-detail-contenido ol li{margin:0 0 12px;}
.noticia-detail-contenido h2{margin-top:44px;}
.noticia-detail-contenido h3{margin-top:32px;}
.noticia-detail-contenido em{color:#e2e2e2 !important;}

.noticia-detail-contenido .tabla-articulo,
.tabla-articulo{
  width:100%;border-collapse:collapse;margin:8px 0 28px;font-size:.95rem;
  display:block;overflow-x:auto;
}
.tabla-articulo th,.tabla-articulo td{
  border:1px solid var(--pg-line) !important;padding:12px 14px;text-align:left;
  color:var(--pg-text) !important;vertical-align:top;
}
.tabla-articulo thead th{
  background:#0d0d0d !important;color:#fff !important;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;
}
.tabla-articulo tbody tr:nth-child(even) td{background:#0a0a0a !important;}
.tabla-articulo strong{color:#fff !important;}

.noticia-detail-contenido blockquote{
  color:#fff !important;font-size:1.28rem;line-height:1.5;font-weight:500;
  border-left:2px solid rgba(255,255,255,.55) !important;
  padding:4px 0 4px 24px;margin:32px 0;background:transparent !important;font-style:normal;
}

.aviso-articulo{
  border:1px solid var(--pg-line) !important;border-radius:14px;background:#0d0d0d !important;
  padding:20px 22px;margin:28px 0;
}
.aviso-articulo p:last-child{margin-bottom:0 !important;}
.aviso-articulo strong{color:#fff !important;}

/* ---------- Firma ---------- */
.noticia-firma{
  max-width:760px;margin:40px auto 0;padding-top:22px;
  border-top:1px solid var(--pg-line-soft) !important;
  display:flex;align-items:center;gap:14px;
}
.noticia-firma img{
  width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  filter:grayscale(1);flex:0 0 auto;
}
.noticia-firma-nombre{margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:#fff !important;}
.noticia-firma-rol{margin:0;font-size:.82rem;color:var(--pg-dim) !important;}

/* ---------- Preguntas frecuentes ---------- */
.noticia-faq-inner{max-width:760px;margin:0 auto;}
.noticia-faq-inner > h2{color:#fff !important;font-size:1.5rem;font-weight:700;margin:0 0 22px;}
.noticia-faq-item{padding:20px 22px;margin:0 0 12px;}
.noticia-faq-item h3{color:#fff !important;font-size:1.05rem;font-weight:700;margin:0 0 10px;}
.noticia-faq-respuesta,.noticia-faq-respuesta p{
  color:var(--pg-text) !important;font-size:.98rem;line-height:1.7;margin:0;
}

/* ---------- Buscador del listado ---------- */
.noticias-filtros{margin:0 0 36px;}
/* Una sola píldora: la lupa y la equis van dentro, no como bloque blanco al lado. */
.noticias-buscador{
  position:relative;display:flex;align-items:center;gap:4px;width:100%;max-width:440px;margin:0 0 18px;
  background:#0d0d0d !important;border:1px solid var(--pg-line) !important;border-radius:999px;
  padding:4px 8px 4px 6px;transition:border-color .2s ease;
}
.noticias-buscador:focus-within{border-color:rgba(255,255,255,.4) !important;}
.noticias-search-input{
  flex:1;min-width:0;background:transparent !important;border:0 !important;border-radius:0;
  padding:9px 4px;color:#fff !important;font-size:.92rem;font-family:var(--pg-font);
  outline:none !important;box-shadow:none !important;
}
.noticias-search-input::placeholder{color:var(--pg-dim) !important;}
.noticias-search-input:focus{border:0 !important;}
.noticias-search-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0 !important;border-radius:50% !important;
  background:transparent !important;color:var(--pg-dim) !important;cursor:pointer;
  transition:color .2s ease,background .2s ease;
}
.noticias-search-btn:hover,.noticias-search-btn:focus-visible{
  color:#fff !important;background:rgba(255,255,255,.08) !important;
}
.noticias-search-btn svg{display:block;}
.noticias-search-limpiar{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.08);color:#bdbdbd;font-size:1.05rem;line-height:1;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.noticias-search-limpiar:hover{background:rgba(255,255,255,.18);color:#fff;}
.noticias-search-limpiar[hidden]{display:none !important;}
/* Búsqueda en vivo: mientras llega la respuesta, los resultados se atenúan. */
#noticias-resultados{transition:opacity .18s ease;}
#noticias-resultados.cargando{opacity:.4;}
.noticias-filtros-categorias{display:flex;flex-wrap:wrap;gap:8px;}
.noticias-page-section a.noticias-filtro-resultado-link{color:#fff !important;}
.noticias-filtro-resultado{color:var(--pg-dim) !important;font-size:.85rem;margin:16px 0 0;}

/* ---------- Archivo por años ---------- */
.archivo-ano{margin:0 0 44px;}
.archivo-ano-titulo{
  display:flex;align-items:baseline;gap:12px;color:#fff !important;
  font-size:1.6rem;font-weight:700;letter-spacing:-.02em;
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--pg-line) !important;
}
.archivo-ano-cuenta{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--pg-dim) !important;
}
.archivo-lista{list-style:none;margin:0;padding:0;}
.archivo-item{
  display:flex;align-items:baseline;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--pg-line-soft) !important;
}
.archivo-fecha{
  flex:0 0 46px;color:var(--pg-dim) !important;font-size:.8rem;
  font-variant-numeric:tabular-nums;
}
.noticias-page-section a.archivo-titulo{
  flex:1;color:#e8e8e8 !important;text-decoration:none !important;font-size:1rem;line-height:1.45;
}
.noticias-page-section a.archivo-titulo:hover{color:#fff !important;text-decoration:underline !important;text-underline-offset:3px;}
.archivo-categoria{
  flex:0 0 auto;color:var(--pg-dim) !important;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
}

/* ---------- 404 de artículo ---------- */
.noticia-vacio{max-width:640px;margin:60px auto;text-align:center;}
.noticia-vacio p{color:var(--pg-muted) !important;line-height:1.7;}
.btn-pill{
  display:inline-block;margin-top:12px;padding:12px 28px;border-radius:999px;
  background:#fff !important;color:#000 !important;font-weight:600;text-decoration:none !important;
}
.btn-pill:hover{background:#e2e2e2 !important;}

@media (max-width:600px){
  .noticia-entradilla{font-size:1.08rem;}
  .archivo-categoria{display:none;}
  .noticia-detail-contenido blockquote{font-size:1.1rem;}
}

/* ============================================================
   BUG REAL (31/08/2026): el tema viejo pintaba el CUERPO del artículo
   como una tarjeta BLANCA (style.css ~10449: linear-gradient blanco +
   sombra navy). Sobre el sitio en negro quedaba texto gris claro sobre
   blanco: prácticamente ilegible. Aquí se mata, junto con el resto de
   tarjetas claras heredadas en la ficha de artículo.
   ============================================================ */
.noticia-detail-contenido,
.noticia-detail-title-section,
.noticia-detail-content,
.noticia-faq-section,
.noticia-related-section{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.noticia-detail-contenido{border-radius:0 !important;padding-top:0 !important;padding-bottom:0 !important;}
.noticia-detail-title-section{border-radius:0 !important;padding-top:0 !important;}
/* La FAQ sí es tarjeta, pero oscura (starlink la deja en #111). */
.noticia-faq-item{
  background:#111 !important;border:1px solid rgba(255,255,255,.1) !important;
  border-radius:14px !important;padding:20px 22px !important;margin:0 0 12px !important;
  box-shadow:none !important;
}

/* La columna de lectura se alinea con el titular, no centrada en el contenedor. */
.noticia-detail-content,
.noticia-faq-inner,
.noticia-firma{margin-left:0 !important;margin-right:0 !important;}

/* El tema viejo mete un borde navy semitransparente encima de la rejilla de
   noticias (rgba(0,83,122,.24)); sobre negro se ve como una línea azulada. */
.noticias-dos-columnas,
.noticias-grid,
.noticias-page-container,
.noticias-filtros{border-color:rgba(255,255,255,.10) !important;}
.noticias-dos-columnas{border-top:0 !important;}
/* Mismo caso en la ficha de proyecto. */
.project-detail-action,
.project-detail-content,
.technologies-grid{border-color:rgba(255,255,255,.10) !important;}

/* Resto de navy heredado: un borde de 1px rgba(0,53,79,.12) en los <span>
   sueltos de los subtítulos. Sobre negro es casi invisible, pero es azul. */
.section-subtitle span,
.noticias-page-subtitle span{border-color:transparent !important;}

/* ============================================================
   TIPOGRAFÍA EN PÍXELES (31/08/2026)
   Bootstrap 3 fija html{font-size:10px}, así que TODOS los rem de este
   tema valen un 62,5% de lo previsto: el cuerpo de los artículos se
   estaba pintando a 11px y las tablas a 9,5px. Aquí se fijan tamaños
   absolutos para que no dependan de la raíz.
   ============================================================ */

/* ---------- Titular del artículo ---------- */
.noticia-detail-title{
  font-size:clamp(34px,4.4vw,54px) !important;
  line-height:1.08 !important;
  letter-spacing:-.022em !important;
  max-width:22ch !important;      /* medida de lectura, no 16ch a 32px */
  hyphens:none !important;        /* nada de «esmorza-dor» */
  text-wrap:balance;
}
.noticia-detail-title-section{max-width:900px !important;}
.noticia-declaracion-eyebrow{font-size:12px !important;}
.noticia-meta,.noticia-fecha-completa,.noticia-fecha-corta,
.noticia-separador,.noticia-categoria-tag,.noticia-lectura{font-size:13px !important;}
.noticia-entradilla{font-size:21px !important;line-height:1.55 !important;}

/* ---------- Cuerpo del artículo ---------- */
.noticia-detail-contenido{font-size:18px !important;line-height:1.75 !important;}
.noticia-detail-contenido p,
.noticia-detail-contenido li{font-size:18px !important;line-height:1.75 !important;}
.noticia-detail-contenido h2{font-size:30px !important;line-height:1.2 !important;}
.noticia-detail-contenido h3{font-size:22px !important;line-height:1.25 !important;}
.noticia-detail-contenido h4{font-size:19px !important;}
.noticia-detail-contenido blockquote{font-size:23px !important;line-height:1.5 !important;}
.noticia-detail-contenido code{font-size:16px !important;}
.tabla-articulo{font-size:16px !important;}
.tabla-articulo thead th{font-size:12px !important;}
.aviso-articulo{font-size:16px !important;line-height:1.65 !important;}
.noticia-detail-contenido,
.noticia-detail-contenido p,
.noticia-detail-contenido li,
.noticia-entradilla{hyphens:none !important;}

/* ---------- Firma y preguntas frecuentes ---------- */
.noticia-firma-nombre{font-size:16px !important;}
.noticia-firma-rol{font-size:13px !important;}
.noticia-faq-inner > h2{font-size:26px !important;}
.noticia-faq-item h3{font-size:18px !important;}
.noticia-faq-respuesta,.noticia-faq-respuesta p{font-size:16px !important;line-height:1.7 !important;}

/* ---------- Tarjetas de «seguir leyendo» / otros proyectos ---------- */
.noticia-section-heading h2{font-size:24px !important;}
.noticia-section-eyebrow{font-size:11px !important;}
.noticia-related-card h3,
.noticia-related-body h3,
.noticia-related-content h3{font-size:17px !important;line-height:1.3 !important;}
.noticia-related-content p{font-size:14px !important;}
.noticia-related-link{font-size:14px !important;}
.noticia-related-date{font-size:11px !important;}

/* ---------- Listado ---------- */
.noticias-page-title{font-size:clamp(40px,5vw,62px) !important;line-height:1.05 !important;}
.noticias-page-subtitle{font-size:17px !important;line-height:1.6 !important;}
.noticia-destacada-titulo{font-size:27px !important;line-height:1.2 !important;}
.noticia-item-titulo{font-size:19px !important;line-height:1.3 !important;}
.noticia-resumen{font-size:15px !important;line-height:1.6 !important;}
.noticia-categoria-badge{font-size:11px !important;}
.btn-leer-mas{font-size:14px !important;}
.noticias-search-input,.noticias-search-btn{font-size:15px !important;}
.noticias-page-section a.filtro-categoria-btn{font-size:14px !important;}
.noticias-filtro-resultado{font-size:14px !important;}
.noticias-page-section a.noticias-pagina-numero,
.noticias-page-section a.noticias-pagina-btn{font-size:15px !important;}

/* ---------- Archivo ---------- */
.archivo-ano-titulo{font-size:28px !important;}
.archivo-ano-cuenta{font-size:11px !important;}
.noticias-page-section a.archivo-titulo{font-size:16px !important;}
.archivo-fecha{font-size:13px !important;}
.archivo-categoria{font-size:11px !important;}

@media (max-width:700px){
  .noticia-detail-contenido,
  .noticia-detail-contenido p,
  .noticia-detail-contenido li{font-size:17px !important;}
  .noticia-entradilla{font-size:18px !important;}
  .noticia-detail-contenido h2{font-size:24px !important;}
  .noticia-detail-contenido blockquote{font-size:19px !important;}
  .noticia-detail-title{max-width:none !important;}
}
/* La lupa va en SVG y toma el color del botón (ya no es un bloque blanco). */
.noticias-search-btn i,.noticias-search-btn .fa,.noticias-search-btn svg{color:inherit !important;}

/* Red de seguridad: si algún navegador autodetecta un número y lo convierte en
   enlace telefónico (iOS lo hace), que no lo pinte de azul sobre el negro. */
a[href^="tel:"],
a[x-apple-data-detectors],
.noticia-detail-contenido a[href^="tel:"],
.noticias-page-section a[href^="tel:"]{
  color:inherit !important;text-decoration:none !important;
}

/* ============================================================
   TIPOGRAFÍA EN PÍXELES — BIBLIOTECA (01/09/2026)
   La misma trampa del rem que se arregló para las noticias, que a la sección
   de libros nunca se le aplicó. Con html{font-size:10px} de Bootstrap 3 se
   estaba pintando: títulos de tarjeta a 9,5px, el subtítulo del archivo a
   11px, el eyebrow «ARCHIVO» a 7,2px y —lo peor— el cuerpo entero de la ficha
   de un libro a 10,6px, con su encabezado «Resumen» a 7,8px (más pequeño que
   el texto que titulaba). Aquí van todos en píxeles absolutos.
   ============================================================ */

/* ---------- Cabecera de archivo (/libros, /proyectos, /trabajos) ---------- */
.archive-hero{padding:120px 24px 0 !important;}
.archive-hero h1{font-size:clamp(38px,5vw,58px) !important;line-height:1.04 !important;}
.archive-hero .archive-sub{font-size:17px !important;line-height:1.6 !important;}
.archive-eyebrow{font-size:12px !important;}
.archive-back{font-size:14px !important;}
.archive-back i{font-size:13px !important;}
.archive-stat{font-size:14px !important;}
.archive-stat #count{font-size:34px !important;}

/* ---------- Rejilla de libros ---------- */
.book-card-title{font-size:15px !important;line-height:1.35 !important;}
.book-card-autor{font-size:13px !important;line-height:1.4 !important;}
.book-card-placeholder i{font-size:32px !important;}

/* ---------- Cabecera de la sección en la home ---------- */
.books-kicker{font-size:12px !important;letter-spacing:.14em !important;}
.books-hero h2{font-size:clamp(30px,3.4vw,42px) !important;line-height:1.05 !important;}
.section-books .section-subtitle span{font-size:17px !important;line-height:1.55 !important;}
.books-hero-cta a{font-size:15px !important;}
.book-counter{font-size:14px !important;}
.book-counter #count{font-size:40px !important;}

/* ---------- Ficha del libro ---------- */
.book-detail-title{font-size:clamp(32px,4.2vw,50px) !important;line-height:1.06 !important;}
.book-detail-eyebrow{font-size:12px !important;}
.book-detail-autor{font-size:18px !important;line-height:1.5 !important;}
.book-back-link{font-size:14px !important;}
.book-back-link i{font-size:13px !important;}
.book-detail-description h2{font-size:12px !important;letter-spacing:.18em !important;}
.book-detail-description,
.book-detail-description p{font-size:18px !important;line-height:1.75 !important;hyphens:none !important;}
.noticia-related-autor{font-size:14px !important;line-height:1.4 !important;}
/* El tema le pone un max-width de ~187px a este h2 (pensado para «Seguir
   leyendo»), y «Otros libros relacionados» partía en dos líneas cortas. */
.book-detail-section .noticia-section-heading h2{max-width:none !important;}
.btn-book-back{font-size:15px !important;}

@media (max-width:700px){
  .book-detail-description,
  .book-detail-description p{font-size:17px !important;}
  .book-detail-autor{font-size:16px !important;}
  /* Con minmax(180px) en un móvil de 390px solo cabía UNA columna: portadas
     gigantes, una por fila. En la estantería siempre van de dos en dos. */
  .books-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:30px 16px !important;}
  .book-card-title{font-size:14px !important;}
  .book-card-autor{font-size:12px !important;}
  .archive-hero{padding:96px 20px 0 !important;}
}
@media (max-width:380px){
  .books-grid{gap:26px 12px !important;}
}

/* ============================================================
   FICHA DE UNA EXPERIENCIA — /trabajo/{slug}
   Clases propias (tj-) para no heredar el tema claro con cian del
   style.css viejo: aquí se empieza de cero en blanco y negro.
   ============================================================ */
.tj-ficha{background:var(--pg-bg);padding:110px 20px 90px;}
.tj-inner{max-width:820px;margin:0 auto;}

.tj-migas{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.82rem;color:var(--pg-dim);margin:0 0 34px;
}
.tj-ficha a.tj-migas > a,
.tj-migas a{color:var(--pg-muted) !important;text-decoration:none !important;}
.tj-migas a:hover{color:#fff !important;}
.tj-migas-actual{color:var(--pg-dim);}

.tj-cabecera{display:flex;align-items:center;gap:20px;margin:0 0 34px;}
.tj-logo{
  flex:0 0 auto;width:74px;height:74px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:transparent;
}
.tj-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.tj-cabecera-texto{min-width:0;}
.tj-empresa{margin:0 0 6px;font-size:.92rem;font-weight:600;letter-spacing:.02em;color:var(--pg-muted) !important;}
.tj-ficha .tj-empresa a{color:var(--pg-muted) !important;text-decoration:none !important;}
.tj-ficha .tj-empresa a:hover{color:#fff !important;}
.tj-cargo{
  margin:0;color:#fff !important;font-family:var(--pg-font);
  font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;
}
.tj-periodo{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:12px 0 0;color:var(--pg-dim) !important;font-size:.9rem;
}
.tj-punto{color:#3c3c3c;}
.tj-ahora{
  background:rgba(255,255,255,.1);color:#d8d8d8;border-radius:999px;
  padding:3px 10px;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}

.tj-cuerpo{display:grid;grid-template-columns:1fr 260px;gap:34px;align-items:start;margin:0 0 54px;}
.tj-texto p{color:var(--pg-text) !important;font-size:1.06rem;line-height:1.8;margin:0 0 18px;}
.tj-texto p:last-child{margin-bottom:0;}
.tj-subtitulo{
  /* Con !important porque el tema viejo pinta los h2 del sitio a 26px y con
     sangría en móvil, y aquí es un subtítulo dentro del texto, no un titular. */
  color:#fff !important;font-size:1.05rem !important;font-weight:700 !important;
  letter-spacing:-.01em !important;line-height:1.35 !important;
  margin:30px 0 14px !important;padding:0 !important;text-align:left !important;
}
.tj-puntos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.tj-puntos li{
  position:relative;padding-left:20px;color:var(--pg-text) !important;
  font-size:1rem;line-height:1.65;
}
.tj-puntos li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.45);
}

.tj-datos{
  background:var(--pg-card);border:1px solid var(--pg-line);border-radius:16px;padding:20px 22px;
}
.tj-datos dl{margin:0;display:flex;flex-direction:column;gap:14px;}
.tj-datos dt{
  margin:0 0 3px;color:var(--pg-dim) !important;font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.tj-datos dd{margin:0;color:#fff !important;font-size:.92rem;line-height:1.45;word-break:break-word;}
.tj-ficha .tj-datos a{color:#fff !important;text-decoration:none !important;border-bottom:1px solid rgba(255,255,255,.28);}
.tj-ficha .tj-datos a:hover{border-bottom-color:#fff;}

.tj-vecinos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 54px;}
.tj-ficha a.tj-vecino{
  display:flex;flex-direction:column;gap:4px;text-decoration:none !important;
  background:var(--pg-card);border:1px solid var(--pg-line);border-radius:16px;padding:16px 18px;
  transition:border-color .2s ease,background .2s ease;
}
.tj-ficha a.tj-vecino:hover{border-color:rgba(255,255,255,.3);background:#131313;}
.tj-vecino--next{text-align:right;}
.tj-vecino-etiqueta{color:var(--pg-dim) !important;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.tj-vecino-titulo{color:#fff !important;font-size:1rem;font-weight:700;}
.tj-vecino-empresa{color:var(--pg-muted) !important;font-size:.85rem;}

.tj-otras{margin:0 0 54px;}
.tj-otras h2{color:#fff !important;font-size:1.3rem;font-weight:700;margin:0 0 18px;letter-spacing:-.01em;}
.tj-otras-lista{display:flex;flex-direction:column;gap:10px;}
.tj-ficha a.tj-otra{
  display:flex;align-items:center;gap:14px;text-decoration:none !important;
  background:var(--pg-card);border:1px solid var(--pg-line);border-radius:14px;padding:12px 16px;
  transition:border-color .2s ease,background .2s ease;
}
.tj-ficha a.tj-otra:hover{border-color:rgba(255,255,255,.3);background:#131313;}
.tj-otra-logo{
  flex:0 0 auto;width:40px;height:40px;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.tj-otra-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.tj-otra-texto{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;}
.tj-otra-empresa{color:#fff !important;font-size:.95rem;font-weight:700;}
.tj-otra-cargo{color:var(--pg-muted) !important;font-size:.85rem;}
.tj-otra-anio{color:var(--pg-dim) !important;font-size:.82rem;font-weight:600;flex:0 0 auto;}
.tj-ficha a.tj-todas{
  display:inline-block;margin-top:18px;color:var(--pg-muted) !important;
  font-size:.88rem;font-weight:600;text-decoration:none !important;
}
.tj-ficha a.tj-todas:hover{color:#fff !important;}

.tj-cta{
  border-top:1px solid var(--pg-line-soft);padding-top:38px;text-align:center;
}
.tj-cta p{color:var(--pg-muted) !important;font-size:1.02rem;margin:0 0 18px;}
.tj-ficha a.tj-cta-btn{
  display:inline-block;background:#fff;color:#000 !important;text-decoration:none !important;
  border-radius:999px;padding:14px 30px;font-size:.95rem;font-weight:700;
  transition:transform .2s ease,background .2s ease;
}
.tj-ficha a.tj-cta-btn:hover{transform:translateY(-2px);background:#ececec;}

@media(max-width:760px){
  .tj-ficha{padding:92px 16px 70px;}
  .tj-cuerpo{grid-template-columns:1fr;gap:26px;}
  .tj-vecinos{grid-template-columns:1fr;}
  .tj-vecino--next{text-align:left;}
  .tj-cabecera{gap:14px;}
  .tj-logo{width:58px;height:58px;border-radius:13px;}
}

/* ============================================================
   8. SERVICIOS (/servicio y las landings de /diseno, /seo y /programacion)
   Negro minimalista, como el resto. Aquí no hay ni un azul: el tema
   viejo mete `a:hover{color:#005b85}`, que pesa más que una clase, así
   que todos los enlaces repiten su color a mano.
   ============================================================ */
.srv-page{background:var(--pg-bg);font-family:var(--pg-font);}
.srv-ico{display:block;color:#fff;}

/* ---------- 8.1 Listado ---------- */
.srv-listado{background:var(--pg-bg);padding:16px 24px 40px;}
.srv-listado .srv-grid{max-width:1180px;}
.srv-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:20px;max-width:1180px;margin:0 auto;
}
.srv-card{
  display:flex;flex-direction:column;gap:14px;
  background:var(--pg-card);border:1px solid var(--pg-line);border-radius:18px;
  padding:26px 24px 24px;color:var(--pg-text) !important;text-decoration:none !important;
  transition:transform .25s ease,border-color .2s ease,background .25s ease;
}
.srv-card:hover,.srv-card:focus{
  transform:translateY(-4px);border-color:rgba(255,255,255,.28);
  background:#151515;color:var(--pg-text) !important;text-decoration:none !important;
}
.srv-card-cab{display:flex;align-items:center;gap:13px;}
.srv-card-ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--pg-line);
}
.srv-card-tag{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pg-dim);
}
.srv-card h2{
  margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em;
  line-height:1.25;color:#fff;
}
.srv-card p{margin:0;color:var(--pg-muted);font-size:15px;line-height:1.58;}
.srv-card-cta{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:7px;
  color:#cfcfcf;font-size:14px;font-weight:600;
}
.srv-card:hover .srv-card-cta{color:#fff;}
.srv-card-cta svg{transition:transform .2s ease;}
.srv-card:hover .srv-card-cta svg{transform:translateX(3px);}

/* ---------- 8.2 Ficha de servicio ---------- */
.srv-detail{background:var(--pg-bg);font-family:var(--pg-font);padding:112px 0 0;}
.srv-detail .container{max-width:940px;}
.srv-migas{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:var(--pg-dim);margin:0 0 30px;
}
.srv-migas a{color:var(--pg-muted) !important;text-decoration:none;font-weight:600;}
.srv-migas a:hover{color:#fff !important;}
.srv-migas span[aria-current]{color:var(--pg-dim);}
.srv-detail-cab{display:flex;align-items:flex-start;gap:18px;margin:0 0 26px;}
.srv-detail-ico{
  flex:0 0 auto;width:56px;height:56px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--pg-line);
}
.srv-detail-ico .srv-ico{width:30px;height:30px;}
.srv-detail-tag{
  display:block;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pg-dim);margin:0 0 10px;
}
.srv-detail h1{
  margin:0;color:#fff;font-size:clamp(34px,4.6vw,53px);line-height:1.04;
  letter-spacing:-.035em;font-weight:800;text-wrap:balance;
}
.srv-intro p{
  color:var(--pg-text);font-size:17px;line-height:1.68;margin:0 0 18px;max-width:68ch;
}
.srv-intro p:last-child{margin-bottom:0;}
.srv-sec{padding:52px 0 0;}
.srv-page h2{padding:0;}
.srv-sec h2{
  margin:0 0 24px;color:#fff;font-size:24px;font-weight:700;letter-spacing:-.02em;
}
.srv-incluye{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
  list-style:none;padding:0;margin:0;
}
.srv-incluye li{
  background:var(--pg-card);border:1px solid var(--pg-line);border-radius:15px;
  padding:20px 21px;
}
.srv-incluye strong{display:block;color:#fff;font-size:16px;font-weight:700;margin:0 0 7px;}
.srv-incluye span{color:var(--pg-muted);font-size:15px;line-height:1.56;}
.srv-quien{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.srv-quien li{
  position:relative;padding-left:26px;color:var(--pg-text);
  font-size:16px;line-height:1.6;
}
.srv-quien li::before{
  content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:#fff;opacity:.5;
}
.srv-pasos{list-style:none;padding:0;margin:0;counter-reset:paso;display:grid;gap:2px;}
.srv-pasos li{
  counter-increment:paso;display:grid;grid-template-columns:44px minmax(0,1fr);
  gap:16px;padding:18px 0;border-top:1px solid var(--pg-line-soft);
}
.srv-pasos li:last-child{border-bottom:1px solid var(--pg-line-soft);}
.srv-pasos li::before{
  content:counter(paso,decimal-leading-zero);
  color:var(--pg-dim);font-size:14px;font-weight:700;letter-spacing:.06em;padding-top:3px;
}
.srv-pasos strong{display:block;color:#fff;font-weight:700;font-size:16px;margin:0 0 5px;}
.srv-pasos span{color:var(--pg-muted);font-size:15px;line-height:1.58;}
.srv-faq{display:grid;gap:0;}
.srv-faq details{border-top:1px solid var(--pg-line-soft);}
.srv-faq details:last-of-type{border-bottom:1px solid var(--pg-line-soft);}
.srv-faq summary{
  cursor:pointer;list-style:none;padding:19px 34px 19px 0;position:relative;
  color:#fff;font-size:16px;font-weight:600;line-height:1.4;
}
.srv-faq summary::-webkit-details-marker{display:none;}
.srv-faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  color:var(--pg-muted);font-size:22px;font-weight:400;line-height:1;
}
.srv-faq details[open] summary::after{content:"–";}
.srv-faq p{color:var(--pg-muted);font-size:16px;line-height:1.68;margin:0 0 20px;max-width:70ch;}

/* --- La llamada a la agenda al final de la ficha --- */
.srv-cta{
  margin:64px 0 0;background:var(--pg-card);border:1px solid var(--pg-line);
  border-radius:22px;padding:44px 34px;text-align:center;
}
.srv-cta h2{margin:0 0 12px;color:#fff;font-size:28px;font-weight:800;letter-spacing:-.025em;}
.srv-cta p{color:var(--pg-muted);font-size:16px;line-height:1.6;margin:0 auto 26px;max-width:48ch;}
.srv-btn{
  border:0;border-radius:999px;background:#fff;color:#000 !important;
  padding:16px 34px;font-size:16px;font-weight:700;cursor:pointer;
  font-family:inherit;line-height:1;text-decoration:none !important;display:inline-block;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.srv-btn:hover{transform:translateY(-2px);background:#ececec;color:#000 !important;
  box-shadow:0 14px 34px -14px rgba(255,255,255,.3);}
.srv-cta-nota{margin:20px auto 0 !important;font-size:14px;color:var(--pg-dim) !important;}

/* --- Otros servicios --- */
.srv-otros{padding:56px 0 90px;}
.srv-otros h2{font-size:19px;}

@media (max-width:640px){
  .srv-detail{padding-top:92px;}
  .srv-detail-cab{gap:14px;}
  .srv-detail-ico{width:46px;height:46px;border-radius:13px;}
  .srv-detail-ico .srv-ico{width:24px;height:24px;}
  .srv-cta{padding:34px 22px;border-radius:18px;}
  .srv-listado{padding-bottom:30px;}
}

/* ---------- 8.3 Áreas del escaparate (Diseño · SEO · Programación) -------- */
.srv-area{max-width:1180px;margin:0 auto 56px;}
.srv-area:last-child{margin-bottom:0;}
.srv-area-cab{
  display:flex;align-items:flex-start;gap:16px;
  margin:0 0 22px;padding:0 0 18px;border-bottom:1px solid var(--pg-line-soft);
}
.srv-area-ico{
  flex:0 0 auto;width:48px;height:48px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--pg-line);
}
.srv-area-cab h2{
  margin:0 0 6px;padding:0;color:#fff;font-size:23px;font-weight:700;letter-spacing:-.02em;
}
.srv-area-cab p{margin:0;color:var(--pg-muted);font-size:15px;line-height:1.6;max-width:74ch;}
/* En las tarjetas del escaparate el título es h3 (el h2 es el del área) */
.srv-card h3{
  margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.25;color:#fff;padding:0;
}

/* ---------- 8.4 Bloques de las landings ---------------------------------- */
.srv-texto p{
  color:var(--pg-text);font-size:16px;line-height:1.72;margin:0 0 16px;max-width:72ch;
}
.srv-texto p:last-child{margin-bottom:0;}
/* Los títulos de las tarjetas y de los pasos son h3: se anula el estilo del
   tema viejo (que les mete padding y color propios) y se dejan como estaban
   cuando eran <strong>. */
.srv-incluye h3,.srv-pasos h3,.srv-faq summary h3{
  margin:0;padding:0;color:#fff;font-weight:700;letter-spacing:0;text-transform:none;
}
.srv-incluye h3{font-size:16px;margin:0 0 7px;line-height:1.35;}
.srv-pasos h3{font-size:16px;margin:0 0 5px;line-height:1.35;}
.srv-faq summary h3{display:inline;font-size:16px;font-weight:600;line-height:1.4;}
/* Variante sin tarjeta: para las listas largas (proyectos, beneficios, casos)
   la rejilla de cajas cansa; se dejan en columnas separadas por una línea. */
.srv-incluye--llano{gap:0;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  column-gap:34px;}
.srv-incluye--llano li{
  background:transparent;border:0;border-top:1px solid var(--pg-line-soft);
  border-radius:0;padding:17px 0;
}
.srv-chips{
  display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:20px 0 0;
}
.srv-chips li{
  background:rgba(255,255,255,.06);color:#c9c9c9;border:1px solid var(--pg-line);
  border-radius:999px;padding:7px 15px;font-size:14px;font-weight:600;
}
.srv-relacionados{list-style:none;padding:0;margin:0;display:grid;gap:0;}
.srv-relacionados li{
  display:flex;align-items:flex-start;gap:13px;
  padding:16px 0;border-top:1px solid var(--pg-line-soft);
  color:var(--pg-muted);font-size:15px;line-height:1.6;
}
.srv-relacionados li:last-child{border-bottom:1px solid var(--pg-line-soft);}
.srv-relacionados .srv-ico{width:20px;height:20px;flex:0 0 auto;margin-top:2px;color:var(--pg-dim);}
.srv-relacionados a{color:#fff !important;font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);}
.srv-relacionados a:hover{color:#fff !important;border-bottom-color:#fff;}
.srv-otros-todos{margin:24px 0 0;font-size:15px;}
.srv-otros-todos a{color:var(--pg-muted) !important;font-weight:600;text-decoration:none;}
.srv-otros-todos a:hover{color:#fff !important;}
.srv-otros{padding-bottom:90px;}

@media (max-width:640px){
  .srv-area{margin-bottom:42px;}
  .srv-area-cab{gap:13px;}
  .srv-area-ico{width:40px;height:40px;border-radius:11px;}
  .srv-area-cab h2{font-size:20px;}
  .srv-incluye--llano{grid-template-columns:1fr;}
  .srv-otros{padding-bottom:64px;}
}

/* ---------- 8.5 Precio y llamada a la agenda ----------------------------- */
/* El precio va pegado al H1, en su línea: es lo primero que quiere saber
   quien llega buscando «diseño web en Alzira». */
.srv-h1-precio{
  display:block;margin-top:10px;font-size:19px;font-weight:600;letter-spacing:0;
  color:var(--pg-muted);
}
.srv-precio-caja{
  background:var(--pg-card);border:1px solid var(--pg-line);border-radius:18px;
  padding:26px 26px 24px;display:grid;gap:12px;
}
.srv-precio-cifra{margin:0;color:var(--pg-muted);font-size:16px;line-height:1;}
.srv-precio-cifra strong{
  color:#fff;font-size:34px;font-weight:800;letter-spacing:-.03em;margin-left:6px;
}
.srv-precio-txt{margin:0;color:var(--pg-muted);font-size:15px;line-height:1.62;max-width:72ch;}

/* La versión compacta del bloque de agendar, la que va arriba */
.srv-cta--compacta{
  margin:34px 0 0;padding:26px 24px;border-radius:18px;text-align:left;
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;
}
.srv-cta--compacta p{margin:0;max-width:44ch;}
.srv-cta--compacta .srv-btn{padding:15px 30px;font-size:15px;}
.srv-cta--compacta .srv-cta-nota{flex-basis:100%;margin:0 !important;}
.srv-cta-precio{margin:0 !important;}
.srv-cta-precio span{
  display:inline-block;background:#fff;color:#000;border-radius:999px;
  padding:7px 15px;font-size:14px;font-weight:700;letter-spacing:-.01em;
}
.srv-cta:not(.srv-cta--compacta) .srv-cta-precio{margin:0 0 14px !important;}

/* ---------- 8.6 Barra fija de móvil -------------------------------------- */
/* Solo en pantalla pequeña: en escritorio el botón de arriba se ve sin bajar
   y una barra fija ensuciaría el diseño. */
.srv-barra{display:none;}
@media (max-width:860px){
  .srv-barra{
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    background:rgba(10,10,10,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,.12);
    font-family:var(--pg-font);
  }
  .srv-barra-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .srv-barra-txt strong{
    color:#fff;font-size:14px;font-weight:700;letter-spacing:-.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .srv-barra-txt span{color:var(--pg-muted);font-size:12.5px;}
  .srv-barra-btn{
    flex:0 0 auto;border:0;border-radius:999px;background:#fff;color:#000;
    padding:12px 22px;font:inherit;font-size:15px;font-weight:700;line-height:1;cursor:pointer;
  }
  .srv-barra-btn:active{background:#e2e2e2;}
  /* Que la barra no tape el final de la página */
  .srv-page{padding-bottom:74px;}
  .srv-cta--compacta{flex-direction:column;align-items:stretch;text-align:left;}
  .srv-cta--compacta .srv-btn{width:100%;}
}
@media (max-width:640px){
  .srv-precio-caja{padding:22px 20px;border-radius:15px;}
  .srv-precio-cifra strong{font-size:29px;}
  .srv-h1-precio{font-size:17px;}
}

/* Los municipios enlazados desde la página del servicio: son enlaces, no
   etiquetas, así que tienen que verse pinchables sin gritar. */
.srv-chips--zonas li{padding:0;background:transparent;border-color:var(--pg-line);}
.srv-chips--zonas a{
  display:block;padding:7px 15px;color:#d6d6d6 !important;text-decoration:none;
  border-radius:999px;transition:background .2s ease,color .2s ease;
}
.srv-chips--zonas a:hover{background:#fff;color:#000 !important;}
.srv-card-precio{margin:0 !important;color:var(--pg-muted);font-size:14px;}
.srv-card-precio strong{color:#fff;font-weight:700;font-size:16px;}