/* ============================================================
   TOTEM GRAPHICS — Custom theme overrides
   Colores: #E8185A (magenta) / #000 / #fff
   Tipografías: Syne 700-800 (display) / Montserrat 400-700 (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Montserrat:wght@400;600;700&display=swap');

/* --- Tipografía global --- */
body {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.navbar-section .logo,
.site-title,
#header .logo,
#navbar {
  font-family: 'Syne', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
}

/* --- Color accent: #4a6a8a → #E8185A --- */

/* Fondos accent */
a,
a:link,
a:visited {
  color: #E8185A;
}

a:hover,
a:focus {
  color: #c01248;
}

/* Botones */
.button,
.btn,
input[type="submit"],
button[type="submit"] {
  background-color: #E8185A !important;
  border-color: #E8185A !important;
  color: #fff !important;
  /* La fuente base del tema (Novecento Sans Wide DemiBold) no tiene
     glifos para vocales acentuadas ni Ñ (É, Á, Í, Ú, Ñ ausentes) y el
     navegador cae a Helvetica/Arial solo para esa letra, con aspecto
     distinto al resto del texto. Syne ya se carga para los titulares
     y sí cubre el español completo. */
  font-family: 'Syne', 'Helvetica', Arial, sans-serif !important;
  font-weight: 700;
}

.button:hover,
.btn:hover,
input[type="submit"]:hover {
  background-color: #c01248 !important;
  border-color: #c01248 !important;
}

/* Navbar activo */
#navbar li.active > a,
#navbar li > a:hover,
.navbar-item.active {
  color: #E8185A !important;
}

/* Header / hero background */
#showcase .grav-lightslider .slideme-btn-primary,
.slideme-btn,
.showcase-nav a {
  background-color: #E8185A !important;
  border-color: #E8185A !important;
}

/* Highlight / accent backgrounds genéricos */
.highlight,
.accent,
.badge,
.label-primary,
[class*="bg-accent"],
.panel-default > .panel-heading {
  background-color: #E8185A !important;
  color: #fff !important;
}

/* Bordes accent */
.border-accent,
blockquote,
.sidebar-widget h4 {
  border-left-color: #E8185A !important;
}

/* Headings links */
h1 a, h2 a, h3 a, h4 a {
  color: #000;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
  color: #E8185A;
}

/* Footer */
.footer, #footer {
  background-color: #000;
  color: #ccc;
}

.footer a, #footer a {
  color: #E8185A;
}

/* Slideme / hero buttons */
.slideme-nav-btn,
.lSPager li.active a,
.lSPager li a:hover {
  background-color: #E8185A !important;
}

/* Portfolio / feature items hover */
.portfolio-item:hover .portfolio-overlay,
.feature-icon,
.feature-icon i {
  color: #E8185A;
}

/* Back to top */
#back-to-top {
  background-color: #E8185A;
}

#back-to-top:hover {
  background-color: #c01248;
}

/* Tags / taxonomy */
.tag,
.tags a {
  border-color: #E8185A;
  color: #E8185A;
}

.tag:hover,
.tags a:hover {
  background-color: #E8185A;
  color: #fff;
}

/* Forms focus */
input:focus,
textarea:focus,
select:focus {
  border-color: #E8185A !important;
  box-shadow: 0 0 5px rgba(232, 24, 90, 0.4) !important;
}

/* Menú móvil */
.sb-slidebar a:hover,
.sb-slidebar li.active > a {
  color: #E8185A !important;
}

/* ============================================================
   CONTACTO — Layout dos columnas
   ============================================================ */

.contact-layout {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 2rem 0;
}

.contact-form-col {
  flex: 1;
  min-width: 280px;
}

.contact-info-col {
  flex: 1.4;
  min-width: 280px;
}

/* Campos del formulario */
.contact-form-col .form-control,
.contact-form-col input[type="text"],
.contact-form-col input[type="email"],
.contact-form-col textarea {
  width: 100%;
  border: 1.5px solid #222;
  border-radius: 0;
  padding: 0.9rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  background: #fff;
  margin-bottom: 1rem;
  display: block;
  box-sizing: border-box;
}

.contact-form-col input[type="text"]:focus,
.contact-form-col input[type="email"]:focus,
.contact-form-col textarea:focus {
  border-color: #E8185A;
  outline: none;
}

.contact-form-col textarea {
  min-height: 130px;
  resize: vertical;
}

/* Botón enviar */
.contact-submit,
button.contact-submit,
input.contact-submit {
  background-color: #E8185A !important;
  color: #fff !important;
  border: none !important;
  padding: 0.85rem 2.5rem !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
}

.contact-submit:hover {
  background-color: #c01248 !important;
}

/* Ocultar labels (usamos placeholders) */
.contact-form-col .form-label,
.contact-form-col label {
  display: none;
}

/* Mapa */
.contact-map {
  margin-bottom: 1.5rem;
}

.contact-map iframe {
  width: 100%;
  height: 300px;
  display: block;
}

/* Lista de datos de contacto */
.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  color: #222;
  border-bottom: none;
}

.contact-star {
  color: #E8185A;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-layout {
    flex-direction: column;
    gap: 2rem;
  }
}

/* ============================================================
   CONTACTO — bloque inferior de datos en 3 columnas
   (Dónde estamos / Datos de contacto / Horario)
   ============================================================ */
.contact-info-section {
  padding: 2.5rem 0;
}

/* Alinear el contenedor de este bloque con .contact-home-grid (mismo max-width/padding) */
.contact-info-section .g-container {
  width: auto;
  max-width: 1160px;
  padding: 0 20px;
}

.contact-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.contact-info-item {
  flex: 1;
  min-width: 220px;
}

.contact-info-item h4 {
  margin-bottom: 0.3rem;
}

.contact-info-item p {
  margin-top: 0;
}

@media (max-width: 768px) {
  .contact-info-grid {
    flex-direction: column;
    gap: 2rem;
  }
}

/* Botón "Escríbenos por WhatsApp" — icono + texto centrados en el botón rectangular de marca */
.whatsapp-button {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.whatsapp-button .fa-whatsapp {
  font-size: 1.2rem;
}

/* Botón "Llamar" — mismo estilo que el botón de WhatsApp, con opción de llamada directa */
.call-button {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  margin-left: 0.75rem;
}

.call-button .fa-phone {
  font-size: 1.1rem;
}

/* Iconos en el bloque "Datos de contacto" — mismo tipo de icono que el resto del sitio */
.contact-info-item p .fa {
  color: #E8185A;
  width: 1.2rem;
  text-align: center;
  margin-right: 0.3rem;
}

/* ============================================================
   SERVICIOS HOME — iconos SVG centrados, hover float, sin marco
   ============================================================ */

.modular .features .feature-svg {
  display: block;
  margin: 0 auto 0;
  width: 140px !important;
  height: 140px !important;
  max-width: 140px !important;
  max-height: 140px !important;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.modular .features .feature:hover .feature-svg {
  transform: translateY(-5px);
}

/* Sin marco ni sombra en tarjeta */
.modular .features .feature,
.modular .features .feature:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* Centrar texto, quitar padding offset */
.modular .features.big .feature-content,
.modular .features .feature .feature-content {
  padding-right: 0;
  text-align: center;
  display: block;
}

/* Texto descripcion en negro, sin separación extra */
.modular .features .feature .feature-content p {
  color: #000 !important;
  margin: 0.2rem 0;
  line-height: 1.5;
}

/* Título en mayúscula inicial */
.modular .features .feature .feature-content h4 {
  text-transform: none !important;
  color: #000;
  margin-bottom: 0 !important;
}

/* Separación entre slider y bloque de servicios — 90px total */
.modular .features {
  padding-top: 90px !important;
}
.modular .features .feature-items {
  margin-top: 0 !important;
}

/* Títulos de tarjetas de servicios */
.modular .features .feature .feature-content h4 {
  font-size: 1.45rem !important;
}

/* Módulo reseñas Google */
.reviews-module {
  margin-top: 150px;
  padding: 60px 0;
  background: #BDBDBD;
}



/* ── Google Reviews Carousel ────────────────────────────────── */
.reviews-carousel-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}
.reviews-viewport {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.reviews-track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.4s ease;
}

/* Anchos por breakpoint — CSS controla, JS solo calcula el offset */
.review-card {
  flex: 0 0 25%;
  width: 25%;
  box-sizing: border-box;
  padding: 0 10px;
}
@media (max-width: 1023px) {
  .review-card { flex: 0 0 50%; width: 50%; }
}
@media (max-width: 639px) {
  .review-card { flex: 0 0 100%; width: 100%; }
}

.review-card__inner {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  box-sizing: border-box;
}
.review-card__top {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.review-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.review-avatar--init {
  background: #9e9e9e;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
}
.review-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.review-card__name {
  font-size: 0.93rem;
  color: #111;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-card__time {
  font-size: 0.78rem;
  color: #888;
  margin-top: 2px;
}
.review-glogo {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
}
.review-card__stars {
  display: flex !important;
  align-items: center;
  gap: 1px;
  margin-bottom: 10px;
}
.rstar { color: #ddd; font-size: 1.1rem; line-height: 1; }
.rstar--on { color: #FBBC05; }
.review-card__check {
  color: #1a73e8;
  font-size: 0.82rem;
  margin-left: 5px;
}
.review-card__text {
  font-size: 0.88rem !important;
  color: #444 !important;
  line-height: 1.6 !important;
  margin: 0 0 8px !important;
}
.review-card__more {
  font-size: 0.82rem;
  color: #999;
  text-decoration: none;
}
.review-card__more:hover { color: #E8185A; }

/* Botones flecha */
.reviews-btn {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: #555;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  transition: box-shadow .2s, opacity .2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;
}
.reviews-btn:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.reviews-btn:disabled { opacity: .25; cursor: default; }

@media (max-width: 639px) {
  .reviews-carousel-wrapper { padding: 0 8px; gap: 6px; }
  .reviews-btn { width: 34px; height: 34px; font-size: 1.4rem; }
}

.review-card__text {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

a.review-card__name {
  color: #111;
  text-decoration: none;
  font-weight: 700;
}
a.review-card__name:hover { color: #E8185A; }

/* ── Sección Contacto Home ───────────────────────────────────── */
.contact-home-section {
  padding: 60px 0;
  background: #fff;
}
.contact-home-grid {
  display: flex !important;
  gap: 48px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: stretch;
}
.contact-home-form,
.contact-home-map {
  flex: 1;
  min-width: 0;
}
.contact-home-map {
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.contact-home-map iframe {
  flex: 1;
  width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 8px;
  display: block;
}
.contact-home-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: #000;
  margin: 0 0 8px;
}
.contact-home-sub {
  color: #555;
  margin-bottom: 24px;
  font-size: 0.95rem;
}
.contact-home-form .form-field {
  margin-bottom: 16px;
}
.contact-home-form input[type="text"],
.contact-home-form input[type="email"],
.contact-home-form textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-family: 'Montserrat', sans-serif;
  color: #333;
  background: #fafafa;
  box-sizing: border-box;
  transition: border-color .2s;
}
.contact-home-form input[type="text"]:focus,
.contact-home-form input[type="email"]:focus,
.contact-home-form textarea:focus {
  outline: none;
  border-color: #E8185A;
  background: #fff;
}
.contact-home-form textarea { resize: vertical; }
.contact-home-form input[type="submit"],
.contact-home-form button[type="submit"] {
  background: #E8185A;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 32px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
  margin-top: 4px;
}
.contact-home-form input[type="submit"]:hover,
.contact-home-form button[type="submit"]:hover {
  background: #c4124b;
}
.contact-home-form .form-messages p {
  background: #f0faf0;
  border: 1px solid #4caf50;
  color: #2e7d32;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 0.9rem;
}
@media (max-width: 767px) {
  .contact-home-grid { flex-direction: column !important; gap: 32px; }
  .contact-home-title { font-size: 1.6rem; }
}

/* ============================================================
   PÁGINA SERVICIOS — tarjetas con SVG y espaciado
   ============================================================ */

/* Franja cabecera: fuerza negro aunque theme.css ponga otra cosa */
.services .blog-header {
  background-color: #000 !important;
}

/* El features de la página servicios no viene tras el slider → resetear padding-top de home */
.services .modular-row.features {
  padding-top: 60px !important;
  padding-bottom: 70px !important;
}

/* Grid flexible centrado, gap consistente entre tarjetas */
.services .features .feature-items {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 2rem !important;
  margin-top: 1.5rem !important;
}

/* Cada tarjeta: borde suave, relleno interno y transición */
.services .features .feature {
  flex: 0 1 calc(33.333% - 2rem) !important;
  min-width: 240px !important;
  max-width: 340px !important;
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 4px !important;
  padding: 2rem 1.8rem 1.8rem !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
  transform: none !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.services .features .feature:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
  transform: translateY(-4px) !important;
}

/* SVG centrado con margen inferior */
.services .features .feature-svg {
  display: block !important;
  margin: 0 auto 0.1rem !important;
  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  min-width: 150px !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

.services .features .feature:hover .feature-svg {
  transform: translateY(-5px) !important;
}

/* Título de tarjeta */
.services .features .feature-content {
  text-align: center !important;
  padding: 0 !important;
}

.services .features .feature-content h4 {
  font-family: Syne, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin: 0 0 0.75rem !important;
  text-transform: none !important;
}

/* Texto descriptivo */
.services .features .feature-content p {
  font-size: 0.93rem !important;
  line-height: 1.7 !important;
  color: #444 !important;
  margin: 0 !important;
}

/* Responsive: 2 columnas en tablet, 1 en móvil */
@media (max-width: 900px) {
  .services .features .feature {
    flex: 0 1 calc(50% - 2rem) !important;
  }
}

@media (max-width: 580px) {
  .services .features .feature {
    flex: 0 1 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   FOOTER — títulos de columna más arriba
   ============================================================ */
.footer .footer-module h4 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.footer .footer-items {
  padding-top: 2rem !important;
}


/* Servicios home: 3 columnas centradas, sin separarse en pantallas anchas */
@media (min-width: 992px) {
  .modular .features .feature-items {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .modular .features .feature {
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Icono y textos más juntos */
.modular .features .feature {
  row-gap: 0 !important;
}
.modular .features .feature .feature-content h4 {
  margin: 0 !important;
}
.modular .features .feature .feature-content p {
  margin: 0 !important;
}

/* Footer bottom: sin mayúsculas, mismo tamaño */
.footer .footer-copyright,
.footer .footer-menu {
  text-transform: none !important;
  font-size: 0.85rem !important;
  font-family: "Montserrat", sans-serif !important;
}

/* Logo footer: fondo transparente */
.footer .logo img {
  background: transparent !important;
  mix-blend-mode: normal;
}

/* ============================================================
   PÁGINA CONTACTO — texto normal en negro (no afecta a la franja
   del título, que usa title_bg_color / title_text_color)
   ============================================================ */
body.contact-page .modular-row.bottom h2,
body.contact-page .modular-row.bottom p,
body.contact-page .modular-row.bottom strong,
.contact-page .contact-info-item h4,
.contact-page .contact-info-item p,
.contact-page .contact-info-item strong,
.contact-page .contact-info-list li {
  color: #000 !important;
}

/* ============================================================
   PÁGINA NOSOTROS — texto normal en negro (no afecta a la franja
   del título, que usa title_bg_color / title_text_color)
   ============================================================ */
.about .modular-row.bottom p,
.about .modular-row.bottom strong {
  color: #000 !important;
}

/* ============================================================
   MENÚ CABECERA (header-lite) — el tema pinta el nav en gris
   #656161 en todas las páginas interiores; lo pasamos a negro
   ============================================================ */
.header-lite #header,
.header-lite #header a,
.header-lite #header .menu-btn,
.header-lite #header .search-box i {
  color: #000 !important;
}

/* Slider home: color detalle (<strong> en heading) magenta en vez de azul del tema */
.modular .showcase h1 strong,
.modular .showcase h1 th {
  color: #E8185A !important;
}

/* Footer bottom: separador "|" entre enlaces (como en totem.graphics) */
.footer .footer-menu ul li:after {
  content: "|" !important;
}

/* --- Logo header: contraste en páginas sin imagen de fondo ---
   El SVG del logo es blanco (pensado para el slider oscuro de home).
   En el resto de páginas el header tiene fondo blanco, así que el
   texto del logo pasa a negro para que se vea; el detalle magenta
   (cls-1) se mantiene igual en todas las páginas. */
body:not(.header-image) #header .logo svg .cls-2 {
  fill: #000;
}

/* --- Menú header: la fuente del tema (novecento_sans_widedemibold)
   solo existe en peso 400; al pedir peso 700 el navegador la
   emboldece sintéticamente y se ve borrosa (sobre todo en Safari).
   Se fuerza Syne 700, que sí está cargada, coherente con el resto
   de la identidad de marca. --- */
#header #navbar ul.navigation li a {
  font-family: 'Syne', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
}

/* --- Submenu (dropdown) del menu principal: texto mas pequeno que el
   menu superior, y ancho automatico para que items largos como
   "Merchandising" no se desborden del panel. --- */
#header #navbar ul.navigation li:hover > ul {
  width: auto !important;
  min-width: 10rem !important;
  white-space: nowrap !important;
}
#header #navbar ul.navigation li:hover li a {
  font-size: 0.85rem !important;
}

/* ============================================================
   PÁGINA CONTACTO — texto pegado a los títulos del sidebar
   ============================================================ */
.contact-page .contact-info-item h4 {
  margin-bottom: 0.3rem !important;
}
.contact-page .contact-info-item p {
  margin-top: 0 !important;
}

/* ============================================================
   PÁGINA GALERÍA — acercar las galerías a la franja negra del título
   ============================================================ */
.gallery-page .blog-header {
  padding-bottom: 0 !important;
}
.gallery-page .modular-row.gallery {
  padding-top: 20px !important;
}

/* ============================================================
   PORTFOLIO — fondo oscuro de las galerías (grilla de fotos)
   Scoped a rutas /portfolio/* vía clase .portfolio-gallery-page
   añadida en gallery.html.twig (el mismo template lo usa /services,
   que debe quedar intacto — no tocar sin scopear igual)
   ============================================================ */
.portfolio-gallery-page .gallery {
  background: #231A18;
}
.portfolio-gallery-page .gallery .gallery_item .title {
  color: #fff;
}
.portfolio-gallery-page .gallery .content-wrapper {
  color: #fff;
}

/* Fuente del portfolio: Montserrat semibold en vez de Syne 700
   (pedido de Agus, captura anotada 18/08/2026) — título de página
   y título de cada foto de la galería */
.portfolio-gallery-page .gallery_title,
.portfolio-gallery-page .gallery .gallery_item .title {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
}

.portfolio-gallery-page .gallery_title {
  color: #fff;
}

/* ============================================================
   TEXTOS EN GRIS → NEGRO (sitio completo)
   Excepciones respetadas: campos de formulario, textos con el
   color de detalle (magenta), y el slider/showcase de home.
   ============================================================ */

/* Color de texto por defecto del tema (gris #9A9898). Selector de
   especificidad mínima: cualquier bloque con su propio color (slider,
   footer, botones, menú activo…) sigue ganando sin tocarlo. */
body {
  color: #000;
}

/* Listado de blog: títulos en gris del tema */
.list-item .list-blog-header h4 a {
  color: #000;
}

/* Títulos de sección "bottom" (h2) en gris #656161 del tema:
   usado en Portfolio (CTA final), Contacto (intro/outro) y Nosotros */
.modular .bottom h2 {
  color: #000 !important;
}

/* Reseñas Google: nombre ya es negro; hora, texto y "ver más" en gris */
.review-card__time {
  color: #000;
}
.review-card__text {
  color: #000 !important;
}
.review-card__more {
  color: #000;
}
.reviews-btn {
  color: #000;
}

/* Subtítulo de la sección Contacto en home */
.contact-home-sub {
  color: #000;
}

/* ============================================================
   PORTFOLIO — 5 accesos a galería: 3 arriba + 2 centradas abajo
   ============================================================ */
.portfolio-page .features .feature-items {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 2rem !important;
}

.portfolio-page .features .feature {
  flex: 0 1 calc(33.333% - 2rem) !important;
  min-width: 240px !important;
  max-width: 300px !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .portfolio-page .features .feature {
    flex: 0 1 calc(50% - 2rem) !important;
  }
}

@media (max-width: 580px) {
  .portfolio-page .features .feature {
    flex: 0 1 100% !important;
    max-width: 100% !important;
  }
}

/* Fuente del portfolio: Montserrat semibold en vez de Syne 700
   (pedido de Agus, captura anotada 18/08/2026) — título "Portfolio"
   y título de cada una de las 5 tarjetas de acceso a galería */
.portfolio-page .blog-header h1,
.portfolio-page .features .feature-content h4 {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
}

/* ============================================================
   NOSOTROS — Cuadrícula "Confían en nosotros" (logos clientes)
   ============================================================ */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #000;
  margin: 0 -100vw;
  padding: 0 100vw;
  width: calc(100% + 200vw);
  position: relative;
  left: 0;
}

.clients-grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin: -1px 0 0 -1px;
}

.clients-grid-item img {
  max-width: 140px;
  max-height: 60px;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

@media (max-width: 900px) {
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .clients-grid-item img {
    max-width: 110px;
    max-height: 48px;
  }
}

/* Neutraliza el contenedor .callout (gris, overflow:hidden, franja blanca)
   para que la cuadrícula de clientes pueda ser full-bleed y no se corte */
.callout:has(.clients-grid) {
  background: #000;
  padding: 0;
  overflow: visible;
}
.callout:has(.clients-grid) .callout-line {
  display: none;
}

/* ============================================================
   PORTFOLIO — botón "Ver galería" en el listado de subsecciones
   (blog_item.html.twig marca estos hijos con .button-gallery)
   ============================================================ */
.button-gallery {
  display: inline-block;
  padding: 7px 20px;
  background-color: #000 !important;
  color: #E8185A !important;
  border: 1px solid #000 !important;
  border-radius: 0;
  font-family: 'Syne', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button-gallery:hover {
  background-color: #E8185A !important;
  color: #000 !important;
  border-color: #E8185A !important;
}

/* ============================================================
   PORTFOLIO — listado de subsecciones (páginas template "blog"
   con body_classes: portfolio-blog). Tarjetas centradas con
   fondo propio para que cada sección destaque sobre el blanco.
   Estas páginas llevan show_sidebar:false en el frontmatter, así
   que #listing ocupa el ancho completo: tarjetas en grid 2 columnas.
   ============================================================ */
.portfolio-blog .blog-header h1 {
  text-align: center;
  width: 100%;
}

/* Fuente del portfolio: Montserrat semibold en vez de Syne 700
   (pedido de Agus, captura anotada 18/08/2026) — título del hub
   y título de cada tarjeta de subsección */
.portfolio-blog .blog-header h1,
.portfolio-blog .list-item.gallery-teaser .list-blog-header h4 {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
}

.portfolio-blog #listing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media only all and (max-width: 74.938em) {
  .portfolio-blog #listing {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only all and (max-width: 61.938em) {
  .portfolio-blog #listing {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only all and (max-width: 47.938em) {
  .portfolio-blog #listing {
    grid-template-columns: 1fr;
  }
}

.portfolio-blog .list-item.gallery-teaser {
  background-color: #f2f2f2;
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 0;
  border-bottom: none;
  text-align: center;
}

.portfolio-blog .list-item.gallery-teaser .list-blog-header h4 {
  text-align: center;
  margin-bottom: 0.5rem;
}

.portfolio-blog .list-item.gallery-teaser .list-blog-header h4 a {
  color: #000;
}

.portfolio-blog .list-item.gallery-teaser .list-blog-header h4 a:hover {
  color: #E8185A;
}

.portfolio-blog .list-item.gallery-teaser .list-blog-padding p {
  line-height: 1.4;
  margin: 0.25rem 0 1.25rem;
}

.portfolio-blog .list-item.gallery-teaser .list-blog-header img {
  display: block;
  margin: 0 auto;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
}

.portfolio-blog .list-item.gallery-teaser .list-blog-padding {
  text-align: center;
}

/* Camisetas — bloque de técnicas (DTG/DTF/Serigrafía) en la intro del hub:
   3 columnas compactas, sin los saltos de línea del cuerpo largo original */
.tecnicas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2rem 0 3rem;
  text-align: left;
}

.tecnicas-grid .tecnica h3 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.tecnicas-grid .tecnica p {
  margin: 0;
  line-height: 1.4;
  font-size: 0.95rem;
}

@media only all and (max-width: 61.938em) {
  .tecnicas-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Tarjetas de servicio clickables (icono + texto): sin subrayado ni cambio de color */
.modular .features a.feature,
.services .features a.feature,
.portfolio-page .features a.feature {
  color: inherit !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* ============================================================
   BLOG CORPORATIVO (/blog) — TARJETAS DEL LISTADO únicamente.
   `blog.html.twig` (listado) y `item.html.twig` (post individual)
   comparten el mismo body_classes ('blogstyling') y el mismo
   partial de tarjeta (`blog_item.html.twig`), pero el listado
   envuelve las tarjetas en `#listing` y el post individual en
   `#item` — por eso todo lo de acá va scoped a `#listing`, para
   que la página de un post individual (imagen, autor, fecha,
   título) no herede el recorte/estilo pensado para las tarjetas.
   ============================================================ */
.blogstyling #listing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media only all and (max-width: 47.938em) {
  .blogstyling #listing {
    grid-template-columns: 1fr;
  }
}

.blogstyling #listing .list-item {
  background-color: #f2f2f2;
  border-radius: 6px;
  padding: 2rem;
  margin-bottom: 0;
  border-bottom: none;
}

.blogstyling #listing .list-blog-header img {
  border-radius: 14px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

/* Fecha, autor y etiquetas fuera de la previa del listado (Agus las quitó
   tras verlas mezclarse mal en la tarjeta angosta) — se mantienen en la
   página del post individual (fuera de #listing). */
.blogstyling #listing .list-blog-date,
.blogstyling #listing .list-blog-author,
.blogstyling #listing .tags {
  display: none;
}

/* Extracto del post: máximo 3 líneas antes de "Continuar leyendo" */
.blogstyling #listing .excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.4;
  margin: 0 0 1rem;
}

.blogstyling #listing .excerpt p {
  margin: 0;
}

/* Con fecha y etiquetas ocultas, el título queda pegado al extracto.
   Interlineado bien apretado (heredaba el line-height:1.7 del body) y
   recortado a 3 líneas máximo en la previa. */
.blogstyling #listing .list-blog-header h4 {
  margin-bottom: 0.5rem;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Sidebar: etiquetas — flujo en línea con fondo gris, no lista vertical */
.sidebar-content .tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-content .tag-cloud li {
  margin: 0;
}

.sidebar-content .tag-cloud a {
  display: inline-block;
  background-color: #f2f2f2;
  color: #000;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-content .tag-cloud a:hover {
  background-color: #E8185A;
  color: #fff;
}

.gallery .gallery_item .title {
  font-size: 0.95rem;
  line-height: 1.3;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery .gallery_item .gallery_item_content {
  margin-top: 0.25em;
}

.gallery .gallery_item_content_title {
  display: none;
}

.portfolio-blog .list-item.gallery-teaser .button-gallery {
  display: none;
}


/* ============================================================
   PORTFOLIO / SERVICIOS — página de detalle (gallery.html.twig,
   compartida por /portfolio/* y /services/*). El body heredaba
   p{margin:1.7rem 0} + h2/h3{margin-bottom:1.7rem} de nucleus.css,
   dejando un hueco enorme entre cada título y su texto (pedido de
   Agus, captura de /services/diseno-grafico, 19/08/2026).
   ============================================================ */
.modular-row.gallery .content-wrapper > p:first-child {
  margin-top: 0.5rem;
}
.modular-row.gallery .content-wrapper h2,
.modular-row.gallery .content-wrapper h3 {
  margin-bottom: 0.5rem;
}
.modular-row.gallery .content-wrapper h2 + p,
.modular-row.gallery .content-wrapper h3 + p {
  margin-top: 0;
}

/* ============================================================
   AVISO DE COOKIES (vanilla-cookieconsent) — 20/08/2026
   ============================================================ */
#cc-main {
  --cc-font-family: 'Montserrat', sans-serif;
  --cc-btn-primary-bg: #E8185A;
  --cc-btn-primary-border-color: #E8185A;
  --cc-btn-primary-hover-bg: #c01249;
  --cc-btn-primary-hover-border-color: #c01249;
  --cc-btn-primary-color: #fff;
  --cc-btn-secondary-bg: #f2f2f2;
  --cc-btn-secondary-border-color: #f2f2f2;
  --cc-btn-secondary-hover-bg: #e2e2e2;
  --cc-btn-secondary-hover-border-color: #e2e2e2;
  --cc-toggle-on-bg: #E8185A;
  --cc-btn-border-radius: 6px;
}

.contact-home-map {
  position: relative;
}
.map-consent-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  background: #f2f2f2;
  border-radius: 8px;
  z-index: 1;
}
.map-consent-placeholder p {
  margin: 0;
  max-width: 320px;
  color: #333;
}
.map-consent-btn {
  background: #E8185A;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 700;
  cursor: pointer;
}
.map-consent-btn:hover {
  background: #c01249;
}
body.cc-thirdparty-accepted .map-consent-placeholder {
  display: none;
}

/* ============================================================
   MINI-GALERÍAS POR TRABAJO dentro de una sola página de galería
   (pedido de Agus 20/08/2026): varias fotos de un mismo trabajo se
   agrupan bajo una sola tarjeta "portada" con badge "+N fotos".
   El resto de fotos del grupo (hide_thumb: true en el frontmatter)
   se ocultan de la grilla pero siguen en el DOM para que GLightbox
   las use como carrusel del mismo trabajo (data-gallery en cada
   item, ver modular/gallery.html.twig).
   ============================================================ */
.gallery_item_hidden {
  display: none;
}
.gallery_photo_count {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  z-index: 2;
  pointer-events: none;
}

/* ============================================================
   Selector de idioma ES/EU (20/08/2026) — hereda color de
   #header a / .header-lite #header a ya definidos en el tema,
   así se comporta igual que el resto del menú (blanco en home,
   negro en header-lite) sin declarar color propio.
   ============================================================ */
#header #navbar .lang-switcher {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  float: right;
  margin: 0 1.2rem;
  list-style: none;
  padding: 0;
  font-family: 'Syne', sans-serif;
}
#header #navbar .lang-switcher li a {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  opacity: 0.55;
  transition: opacity 0.2s;
}
#header #navbar .lang-switcher li a:hover,
#header #navbar .lang-switcher li.active a {
  opacity: 1;
}
#header #navbar .lang-switcher li:not(:last-child)::after {
  content: '/';
  margin: 0 6px;
  opacity: 0.4;
}
@media only all and (max-width: 61.938em) {
  #header #navbar .lang-switcher {
    margin: 0 0.5rem;
  }
}