/* =========================================================
   fix.css — CERRAJEROELMASNOU.NET (corregido 100%)
   - Arregla el HERO blanco en internas (servicios/zonas/blog)
   - Mantiene paleta original (usa variables siempre que pueda)
   - Arregla badges de la foto SOLO en HOME (sin tocar CTAs)
   - Restaura botones del HERO (pill amarillo + outline blanco)
   - NO rompe navbar, widgets ni botones fuera del HERO
   ========================================================= */


/* -------------------------
   0) Base segura
-------------------------- */
html, body { color: #1a1a1a; }
p, li, h1, h2, h3, h4, h5, h6 { color: inherit; }


/* -------------------------
   1) Contenido legible (solo cuerpo)
   IMPORTANTE: no forzamos color dentro de .hero
-------------------------- */
main, article,
.container, .content,
.page-content, .service-content, .zone-content, .blog-content {
  color: #1a1a1a !important;
}


/* -------------------------
   2) HERO internas: fondo oscuro + texto blanco visible
   Nota: el selector main > section:first-of-type se mantiene como “rescate”
   pero NO debe afectar al HOME si tu home hero tiene estructura distinta.
-------------------------- */
.hero,
.service-hero,
.page-hero,
header.hero,
section.hero,
div.hero,
main > section:first-of-type {
  background: linear-gradient(
    135deg,
    var(--primary, #1a5f7a) 0%,
    var(--dark, #1a1a2e) 100%
  ) !important;
  color: #ffffff !important;
}

/* Texto dentro del hero (solo hero) */
.hero *, .service-hero *, .page-hero *, main > section:first-of-type * {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Evitar overlays blancos que tapen el fondo del hero */
.hero::before,
.service-hero::before,
.page-hero::before,
main > section:first-of-type::before,
.hero::after,
.service-hero::after,
.page-hero::after,
main > section:first-of-type::after {
  background: transparent !important;
}


/* -------------------------
   3) Navbar siempre blanca (OK)
-------------------------- */
.navbar, .navbar * { color: #ffffff !important; }


/* -------------------------
   4) HOME: Badges sobre la foto (QUIRÚRGICO)
   IMPORTANTE: NO tocamos links/botones globales.
   Solo ajustamos overlays hermanos del <img> dentro del hero.
-------------------------- */
.hero img ~ div,
.hero img ~ span {
  background: rgba(255,255,255,0.92) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
  border-radius: 12px !important;
}

/* Texto dentro de esos overlays */
.hero img ~ div *,
.hero img ~ span * {
  color: #111 !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* -------------------------
   5) Botones del HERO (HOME + internas)
   REGLA: estilizamos SOLO los botones/links dentro del hero.
   No tocamos enlaces normales ni cards (“Ver detalles”, etc.)
-------------------------- */

/* Base de botón dentro de HERO:
   - pill
   - padding
   - tipografía
*/
.hero a[href^="tel:"],
.service-hero a[href^="tel:"],
.page-hero a[href^="tel:"],
main > section:first-of-type a[href^="tel:"],

.hero .btn-primary,
.hero a.btn-primary,
.hero .cta-primary,

.service-hero .btn-primary,
.service-hero a.btn-primary,
.service-hero .cta-primary,

.page-hero .btn-primary,
.page-hero a.btn-primary,
.page-hero .cta-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  background: var(--accent, #ffc107) !important;
  color: var(--dark, #1a1a2e) !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;
}

/* Secundario outline dentro del HERO */
.hero .btn-secondary,
.hero a.btn-secondary,
.hero .cta-secondary,

.service-hero .btn-secondary,
.service-hero a.btn-secondary,
.service-hero .cta-secondary,

.page-hero .btn-secondary,
.page-hero a.btn-secondary,
.page-hero .cta-secondary,

/* fallback: 2º botón si existe un contenedor de acciones */
.hero .hero-actions a:nth-of-type(2),
.service-hero .hero-actions a:nth-of-type(2),
.page-hero .hero-actions a:nth-of-type(2),
main > section:first-of-type .hero-actions a:nth-of-type(2) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.75) !important;
  box-shadow: none !important;
}

/* fallback: 1er botón del bloque como primario */
.hero .hero-actions a:nth-of-type(1),
.service-hero .hero-actions a:nth-of-type(1),
.page-hero .hero-actions a:nth-of-type(1),
main > section:first-of-type .hero-actions a:nth-of-type(1) {
  background: var(--accent, #ffc107) !important;
  color: var(--dark, #1a1a2e) !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;
}

/* Importante: NO tocar enlaces normales dentro de cards/listados */
.services-grid a,
.zones-grid a,
.blog-grid a,
.card a,
.service-card a,
.zone-card a,
.blog-card a {
  background: initial !important;
  color: initial !important;
  border: initial !important;
  box-shadow: initial !important;
  border-radius: initial !important;
  padding: initial !important;
  font-weight: initial !important;
}


/* -------------------------
   6) No tocar botones fuera del hero
   (evita que un tel: de footer o cards se convierta en botón)
-------------------------- */
main:not(.hero):not(.service-hero):not(.page-hero) a[href^="tel:"] {
  background: initial !important;
  color: initial !important;
  border: initial !important;
  box-shadow: initial !important;
  border-radius: initial !important;
  padding: initial !important;
  font-weight: initial !important;
}