/* =====================================================================
   ABCD Remodeling Group — hoja de estilos
   Misma plantilla base del grupo (tres marcas); solo cambian los tokens de marca
   (paleta muestreada del logo real, ver inventario-contenido.md) y las
   correcciones listadas en analisis-plantilla.md.
   ===================================================================== */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-variable.woff2') format('woff2');
}

:root {
  /* Marca real (logo ABCD Remodeling Group) */
  --dark: #2f5277;
  --dark-2: #274462;
  --dark-3: #1e3650;
  --accent: #186b79;          /* color exacto del logo: fondos oscuros, iconos, detalles */
  --accent-text: #186b79; /* mismo matiz, ajustado hasta pasar AA sobre blanco */
  --accent-light: #74d1e0; /* mismo matiz, ajustado hasta pasar AA sobre los fondos oscuros */
  --accent-dark: #125561;
  --steel: #9fb3c4;
  --white: #ffffff;

  /* Neutros derivados para texto/fondos */
  --ink: #0d1b24;
  --muted: #5b6b76;
  --muted-light: #8b98a1;
  --bg-light: #f4f6f7;
  --bg-card: #ffffff;
  --border: #e2e6e8;

  --font-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1240px;
  --radius: 6px;
  --shadow-sm: 0 2px 10px rgba(47,82,119,0.08);
  --shadow-md: 0 10px 30px rgba(47,82,119,0.16);
  --shadow-lg: 0 24px 60px rgba(47,82,119,0.28);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 .5em;
  letter-spacing: .3px;
}
p { margin: 0 0 1em; color: var(--muted); }
button { font: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Placeholder visible (dato no confirmado por el cliente) ---------- */
.pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff3cd;
  color: #7a5b00;
  border: 1px dashed #d8a900;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .8em;
  font-weight: 600;
  font-family: var(--font-body);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent-text);
  color: #fff;
  padding: 12px 20px;
  z-index: 9999;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  background: rgba(47,82,119,0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-sm);
}
/* Menu movil abierto: el nav propio ya trae su fondo solido,
   pero la barra del header debe quedar solida mientras esta abierto
   para que el boton burger (blanco) no se pierda sobre el hero claro. */
.site-header.menu-open {
  background: rgba(47,82,119,0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand img {
  height: 52px;
  width: auto;
  background: #fff;
  border-radius: 8px;
  padding: 3px;
}
.brand-text {
  font-family: var(--font-head);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.05;
}
.brand-text span {
  display: block;
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--steel);
  text-transform: uppercase;
}

.main-nav ul {
  display: flex;
  gap: 4px;
}
.main-nav a {
  display: block;
  padding: 10px 14px;
  font-size: .88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  text-transform: uppercase;
  letter-spacing: .4px;
  border-radius: 4px;
  transition: color .2s ease, background .2s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(24,107,121,0.85);
}
.main-nav .has-children { position: relative; }
.main-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--dark);
  border-radius: 6px;
  padding: 8px;
  box-shadow: var(--shadow-lg);
}
.main-nav .has-children:hover .submenu,
.main-nav .has-children:focus-within .submenu { display: block; }
.main-nav .submenu a { padding: 10px 14px; font-size: .9rem; border-radius: 4px; text-transform: none; letter-spacing: 0; }

.header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .4px;
  text-transform: uppercase;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary {
  background: var(--accent-text);
  color: #fff;
  box-shadow: 0 10px 24px rgba(24,107,121,0.35);
}
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-light {
  background: #fff;
  color: var(--dark);
}
.btn-light:hover { background: var(--steel); transform: translateY(-2px); }
.btn-sm { padding: 9px 18px; font-size: .82rem; }

.header-cta .btn { display: none; }
@media (min-width: 860px) {
  .header-cta .btn { display: inline-flex; }
}

/* Burger */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 600;
}
.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  transition: transform .25s ease, opacity .25s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 981px) {
  .burger { display: none; }
}
@media (max-width: 980px) {
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 84vw);
    background: var(--dark);
    padding: 100px 28px 40px;
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -20px 0 60px rgba(0,0,0,.4);
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 2px; }
  .main-nav a { padding: 14px 10px; font-size: 1rem; }
  .main-nav .btn { display: inline-flex; margin-top: 18px; width: 100%; justify-content: center; }
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,54,80,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 400;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: var(--dark);
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slide.active { animation: heroKenBurns 9s ease-in-out infinite alternate; }
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(47,82,119,0.55) 0%, rgba(47,82,119,0.78) 55%, rgba(47,82,119,0.94) 100%);
}
@keyframes heroKenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 160px 24px 120px;
  margin: 0 auto;
  width: 100%;
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero h1 span { color: var(--accent-light); }
.hero-lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
  margin-bottom: 32px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-dots {
  position: absolute;
  z-index: 3;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.hero-dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.hero-dots button[aria-current="true"] {
  background: var(--accent-light);
  transform: scale(1.3);
}

/* Page banner (paginas de servicio, mas bajo que el hero de home) */
.page-banner {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--dark) center/cover no-repeat;
  overflow: hidden;
}
.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(47,82,119,0.55) 0%, rgba(47,82,119,0.92) 100%);
}
.page-banner-inner {
  position: relative;
  z-index: 2;
  padding: 160px 24px 56px;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}
.breadcrumbs {
  font-size: .82rem;
  color: var(--steel);
  margin-bottom: 12px;
  letter-spacing: .3px;
}
.breadcrumbs a { color: var(--steel); }
.breadcrumbs a:hover { color: #fff; }
.page-banner h1 {
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  text-transform: uppercase;
}

.service-lead {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 820px;
  margin: 0;
}

/* ---------- Trust bar ---------- */
.trust-bar {
  background: var(--accent-text);
  padding: 20px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.trust-icon { width: 34px; height: 34px; flex-shrink: 0; }
.trust-icon svg { width: 100%; height: 100%; }
.trust-text strong { display: block; font-size: .92rem; font-weight: 700; }
.trust-text span { font-size: .78rem; opacity: .9; }
@media (max-width: 860px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Sections generic ---------- */
.section { padding: 90px 0; }
.section-tight { padding: 60px 0; }
.section-light { background: var(--bg-light); }
.section-dark {
  background: linear-gradient(160deg, var(--dark) 0%, var(--dark-2) 100%);
  color: #fff;
}
.section-dark p { color: rgba(255,255,255,0.72); }
.section-head { max-width: 640px; margin: 0 0 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow { display: block; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); text-transform: uppercase; }
.section-dark .section-head h2 { color: #fff; }
.section-dark .eyebrow, .hero .eyebrow, .page-banner .eyebrow, .cta-band .eyebrow { color: var(--accent); }

/* ---------- About / posicionamiento (reemplaza la bio de fundador de la referencia) ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-media { position: relative; }
.about-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}
.about-media::before {
  content: '';
  position: absolute;
  inset: -14px auto auto -14px;
  width: 90%;
  height: 90%;
  border: 3px solid var(--accent-light);
  border-radius: var(--radius);
  z-index: -1;
}
.about-copy .divider {
  width: 52px; height: 4px;
  background: var(--accent-light);
  margin: 18px 0 26px;
}
.about-copy p { font-size: 1.02rem; }
.material-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.material-tags span {
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-media::before { display: none; }
}

/* ---------- Services overview grid (home) ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.service-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-sm);
  display: block;
}
.service-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.service-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(47,82,119,0) 30%, rgba(47,82,119,0.92) 100%);
}
.service-card:hover img { transform: scale(1.08); }
.service-card-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.service-card-label h3 {
  color: #fff;
  font-size: 1.3rem;
  text-transform: uppercase;
  margin: 0;
}
.service-card-label svg {
  width: 20px; height: 20px;
  color: var(--accent-light);
  flex-shrink: 0;
  transition: transform .25s ease;
}
.service-card:hover .service-card-label svg { transform: translateX(4px); }

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

/* ---------- Gallery grid + lightbox ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: zoom-in;
  background: var(--bg-light);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(24,107,121,0);
  transition: background .25s ease;
}
.gallery-item:hover::after { background: rgba(24,107,121,0.12); }
.gallery-item .zoom-icon {
  position: absolute;
  right: 12px; top: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(47,82,119,0.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .2s ease;
}
.gallery-item:hover .zoom-icon { opacity: 1; }
.gallery-item .zoom-icon svg { width: 16px; height: 16px; color: #fff; }

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

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(30,54,80,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: min(90vw, 1100px);
  max-height: 84vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 50%;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(24,107,121,0.85); }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg { width: 20px; height: 20px; }
.lightbox-counter {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: .85rem;
  letter-spacing: .5px;
}
@media (max-width: 640px) {
  .lightbox-prev, .lightbox-next { width: 38px; height: 38px; }
}

/* ---------- CTA banda final ---------- */
.cta-band {
  position: relative;
  color: #fff;
  background: var(--dark) center/cover no-repeat;
  overflow: hidden;
}
.cta-band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(47,82,119,0.92) 0%, rgba(24,107,121,0.55) 130%);
}
.cta-band-inner {
  position: relative; z-index: 2;
  padding: 90px 24px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  text-transform: uppercase;
  color: #fff;
}
.cta-band p { color: rgba(255,255,255,0.85); font-size: 1.1rem; margin-bottom: 30px; }
.cta-band .btn { justify-content: center; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Materials strip ---------- */
.materials-strip {
  background: var(--ink);
  color: rgba(255,255,255,0.75);
  padding: 16px 0;
  font-size: .82rem;
  text-align: center;
  letter-spacing: .4px;
}
.materials-strip a { color: var(--accent-light); font-weight: 600; }
.materials-strip a:hover { text-decoration: underline; }

/* ---------- Featured single photo (paginas About/Contact) ---------- */
.featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.featured-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}
.featured-copy p { font-size: 1.08rem; }
@media (max-width: 860px) {
  .featured-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Contact form ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-info-card {
  background: var(--dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 40px;
}
.contact-info-card h3 { color: #fff; font-size: 1.4rem; }
.contact-info-list { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.contact-info-list li { display: flex; align-items: flex-start; gap: 14px; }
.contact-info-list svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; color: var(--accent-light); }
.contact-info-list a { color: rgba(255,255,255,0.88); }
.contact-info-list a:hover { color: #fff; }
.contact-info-list span.label { display: block; font-size: .78rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.contact-info-card .footer-social { margin-top: 28px; }

.contact-form-title { font-size: 1.9rem; }
.contact-form-lead { margin-bottom: 24px; }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.form-group input,
.form-group textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: .96rem;
  color: var(--ink);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgba(24,107,121,0.15);
}
.form-group textarea { resize: vertical; min-height: 130px; }
/* Honeypot: senuelo visible en el DOM para bots pero invisible/inalcanzable para personas */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-note {
  font-size: .82rem;
  color: var(--muted-light);
}
.form-status {
  display: none;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 600;
}
.form-status.show { display: block; }
.form-status.info { background: #fff3cd; color: #7a5b00; border: 1px solid #d8a900; }
.form-status.success { background: #d7f3e3; color: #146c43; border: 1px solid #146c43; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,0.65);
  padding: 64px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand img {
  height: 64px;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 16px;
}
.footer-brand p { max-width: 320px; font-size: .92rem; }
.footer-col .footer-title {
  color: #fff;
  font-size: 1.05rem;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: .92rem; transition: color .2s ease; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; }
.footer-contact svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--accent-light); }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.footer-social a:hover { background: var(--accent-text); border-color: var(--accent-text); }
.footer-social svg { width: 17px; height: 17px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-top: 24px;
  font-size: .8rem;
}
.footer-bottom a:hover { color: #fff; }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- WhatsApp floating button ---------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 480;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; color: #fff; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* =====================================================================
   Añadidos respecto a la plantilla (ver analisis-plantilla.md)
   ===================================================================== */

/* Contraste AA en textos secundarios (la plantilla se quedaba por debajo de 4.5:1) */
.form-note { color: var(--muted); }
.site-footer { color: rgba(255,255,255,0.74); }
.site-footer p { color: inherit; }          /* p{color:var(--muted)} ganaba a la herencia del footer oscuro */
.footer-brand img { width: auto; }          /* logo no cuadrado: conservar proporcion */
.breadcrumbs, .breadcrumbs a { color: rgba(255,255,255,0.85); }
.brand-text span { color: rgba(255,255,255,0.78); }
.contact-info-list span.label { color: rgba(255,255,255,0.72); }
.trust-text span { opacity: 1; }

/* Dots del slider: área táctil de 24px (WCAG 2.5.8) manteniendo el punto de 9px */
.hero-dots { gap: 2px; }
.hero-dots button { width: 24px; height: 24px; background: transparent; position: relative; }
.hero-dots button::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: translate(-50%, -50%);
  transition: background .2s ease, transform .2s ease;
}
.hero-dots button[aria-current="true"] { background: transparent; transform: none; }
.hero-dots button[aria-current="true"]::before { background: var(--accent-light); transform: translate(-50%, -50%) scale(1.3); }

/* El boton de WhatsApp del menu heredaba peso 600 de .main-nav a y cargaba una fuente extra */
.main-nav .btn { font-weight: 700; color: #fff; }

/* Foco visible (WCAG 2.2 AA) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.main-nav a:focus-visible, .btn:focus-visible { outline-color: #fff; }

/* Primer slide del hero y banner como <img> real: la imagen LCP se descubre en el HTML */
.hero-slide img, .page-banner .banner-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.page-banner .banner-img { position: absolute; inset: 0; }
.hero-slide.active { opacity: 1; }

/* Marco decorativo de .about-media: contexto de apilamiento propio */
.about-media { isolation: isolate; }

/* Miga de pan visible y discreta (encima del H1) */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: 6px; opacity: .6; }

/* Rejilla de servicios con última fila centrada (5 y 4 tarjetas) */
.services-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.services-grid .service-card { flex: 0 0 calc((100% - 44px) / 3); }
@media (max-width: 980px) { .services-grid .service-card { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 620px) { .services-grid .service-card { flex-basis: 100%; } }

/* Frase corta del servicio (texto literal del slider del sitio anterior) */
.service-short { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.featured-grid.reverse .featured-media { order: -1; }
.featured-media a { display: block; cursor: zoom-in; }
.featured-copy h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); text-transform: uppercase; }
.featured-copy .btn { margin-top: 8px; }
@media (max-width: 860px) { .featured-grid.reverse .featured-media { order: 0; } }

/* Reveal sin transición (elementos ya visibles al cargar y red de seguridad) */
.reveal.no-anim { transition: none; }

/* Lightbox accesible: foco atrapado, roles */
.lightbox[aria-hidden="true"] { visibility: hidden; }
.lightbox.open { visibility: visible; }

/* Formulario: estado de error */
.form-status.error { background: #fde2e1; color: #8a1c13; border: 1px solid #b83228; }

/* Página 404 */
.error-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }