/* =============================================================
   CE CONSTRUCTION — MAIN STYLESHEET
   Arquitectura: Mobile First / BEM / Design Tokens (CSS vars)
   Índice:
   1.  Reset moderno
   2.  Variables (fallback — las oficiales viven en style.css raíz)
   3.  Tipografía base
   4.  Layout: contenedor + grid
   5.  Espaciados (helpers)
   6.  Botones
   7.  Cards
   8.  Formularios
   9.  Navbar / Header
   10. Hero
   11. Secciones genéricas (about, stats, why-us, testimonials, gallery, cta)
   12. Footer
   13. Componentes flotantes (WhatsApp, back-to-top)
   14. Modales
   15. Lightbox
   16. Breadcrumbs
   17. Utilidades
   18. Animaciones
   19. Responsive (mobile-first, min-width breakpoints)
   ============================================================= */

/* -------------------------------------------------------------
   1. RESET MODERNO
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
a:not([class]) { text-decoration-skip-ink: auto; }
img, picture, svg, video {
  max-width: 100%;
  display: block;
}
input, button, textarea, select {
  font: inherit;
  color: inherit;
}
button { background: none; border: none; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible {
  outline: 3px solid var(--ce-color-secondary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------
   2. VARIABLES (fallback de seguridad si main.css carga solo)
   Las variables reales/canónicas están en style.css y pueden
   ser sobreescritas dinámicamente por el Customizer
   (ver inc/customizer.php -> ce_construction_customizer_css).
   ------------------------------------------------------------- */
:root {
  --ce-color-primary:       #0F2A43;
  --ce-color-primary-dark:  #081A2B;
  --ce-color-secondary:     #D98E29;
  --ce-color-secondary-dark:#B8721A;
  --ce-color-accent:        #1E6F5C;
  --ce-color-neutral-900:   #10161C;
  --ce-color-neutral-800:   #1B2530;
  --ce-color-neutral-600:   #4A5A68;
  --ce-color-neutral-300:   #C7D0D6;
  --ce-color-neutral-100:   #F4F6F7;
  --ce-color-white:         #FFFFFF;
  --ce-color-error:         #B3261E;
  --ce-color-success:       #1E6F5C;

  --ce-font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --ce-font-body: 'Inter', 'Segoe UI', sans-serif;

  --ce-space-1: 4px;  --ce-space-2: 8px;  --ce-space-3: 16px;
  --ce-space-4: 24px; --ce-space-5: 32px; --ce-space-6: 48px;
  --ce-space-7: 64px; --ce-space-8: 96px;

  --ce-radius-sm: 6px;
  --ce-radius-md: 12px;
  --ce-radius-lg: 20px;
  --ce-radius-pill: 999px;

  --ce-shadow-sm: 0 2px 8px rgba(15,42,67,0.08);
  --ce-shadow-md: 0 8px 24px rgba(15,42,67,0.12);
  --ce-shadow-lg: 0 20px 48px rgba(15,42,67,0.18);

  --ce-transition-fast: 150ms ease;
  --ce-transition-base: 250ms ease;
  --ce-transition-slow: 450ms ease;

  --ce-container-max: 1240px;
  --ce-header-height: 84px;
}

/* -------------------------------------------------------------
   3. TIPOGRAFÍA BASE
   ------------------------------------------------------------- */
body {
  font-family: var(--ce-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ce-color-neutral-900);
  background: var(--ce-color-white);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ce-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ce-color-primary);
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw + 1rem, 2.6rem); }
h3 { font-size: clamp(1.25rem, 1.6vw + 1rem, 1.75rem); }
h4 { font-size: 1.15rem; }
p  { color: var(--ce-color-neutral-600); }
.ce-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ce-space-2);
  font-family: var(--ce-font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ce-color-secondary);
  margin-bottom: var(--ce-space-2);
}
.ce-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--ce-color-secondary);
  display: inline-block;
}
.ce-section-title { margin-bottom: var(--ce-space-3); }
.ce-section-lead {
  max-width: 640px;
  color: var(--ce-color-neutral-600);
  margin-bottom: var(--ce-space-6);
}
.ce-text-white { color: var(--ce-color-white); }
.ce-text-white h1, .ce-text-white h2, .ce-text-white h3 { color: var(--ce-color-white); }

/* -------------------------------------------------------------
   4. LAYOUT: CONTENEDOR + GRID
   ------------------------------------------------------------- */
.ce-container {
  width: 100%;
  max-width: var(--ce-container-max);
  margin-inline: auto;
  padding-inline: var(--ce-space-4);
}
.ce-section { padding-block: var(--ce-space-7); }
.ce-section--tight { padding-block: var(--ce-space-6); }
.ce-section--dark {
  background: var(--ce-color-primary);
  color: var(--ce-color-white);
}
.ce-section--alt { background: var(--ce-color-neutral-100); }

.ce-grid {
  display: grid;
  gap: var(--ce-space-5);
  grid-template-columns: 1fr;
}
.ce-grid--2 { grid-template-columns: 1fr; }
.ce-grid--3 { grid-template-columns: 1fr; }
.ce-grid--4 { grid-template-columns: 1fr; }
.ce-flex { display: flex; }
.ce-flex-wrap { flex-wrap: wrap; }
.ce-items-center { align-items: center; }
.ce-justify-between { justify-content: space-between; }
.ce-gap-2 { gap: var(--ce-space-2); }
.ce-gap-3 { gap: var(--ce-space-3); }
.ce-gap-4 { gap: var(--ce-space-4); }

/* -------------------------------------------------------------
   5. ESPACIADOS (helpers rápidos)
   ------------------------------------------------------------- */
.ce-mt-2{margin-top:var(--ce-space-2);} .ce-mt-3{margin-top:var(--ce-space-3);}
.ce-mt-4{margin-top:var(--ce-space-4);} .ce-mt-5{margin-top:var(--ce-space-5);}
.ce-mb-2{margin-bottom:var(--ce-space-2);} .ce-mb-3{margin-bottom:var(--ce-space-3);}
.ce-mb-4{margin-bottom:var(--ce-space-4);} .ce-mb-5{margin-bottom:var(--ce-space-5);}
.ce-mt-6{margin-top:var(--ce-space-6);} .ce-mb-6{margin-bottom:var(--ce-space-6);}
.ce-py-2{padding-block:var(--ce-space-2);} .ce-py-3{padding-block:var(--ce-space-3);}

/* -------------------------------------------------------------
   6. BOTONES
   ------------------------------------------------------------- */
.ce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ce-space-2);
  font-family: var(--ce-font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: var(--ce-radius-pill);
  border: 2px solid transparent;
  transition: transform var(--ce-transition-fast), box-shadow var(--ce-transition-fast), background var(--ce-transition-fast), color var(--ce-transition-fast);
  white-space: nowrap;
  cursor: pointer;
}
.ce-btn:hover { transform: translateY(-2px); }
.ce-btn:active { transform: translateY(0); }

.ce-btn--primary {
  background: var(--ce-color-secondary);
  color: var(--ce-color-white);
  box-shadow: var(--ce-shadow-sm);
}
.ce-btn--primary:hover {
  background: var(--ce-color-secondary-dark);
  box-shadow: var(--ce-shadow-md);
}
.ce-btn--outline {
  background: transparent;
  border-color: currentColor;
  color: var(--ce-color-white);
}
.ce-btn--outline:hover { background: rgba(255,255,255,0.12); }
.ce-btn--dark {
  background: var(--ce-color-primary);
  color: var(--ce-color-white);
}
.ce-btn--dark:hover { background: var(--ce-color-primary-dark); }
.ce-btn--sm { padding: 10px 20px; font-size: 0.85rem; }
.ce-btn--block { width: 100%; }
.ce-btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }
.ce-btn--icon-only { padding: 12px; border-radius: 50%; }

/* -------------------------------------------------------------
   7. CARDS
   ------------------------------------------------------------- */
.ce-card {
  background: var(--ce-color-white);
  border-radius: var(--ce-radius-md);
  box-shadow: var(--ce-shadow-sm);
  overflow: hidden;
  transition: transform var(--ce-transition-base), box-shadow var(--ce-transition-base);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ce-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ce-shadow-lg);
}
.ce-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.ce-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--ce-transition-slow);
}
.ce-card:hover .ce-card__media img { transform: scale(1.08); }
.ce-card__badge {
  position: absolute; top: var(--ce-space-3); left: var(--ce-space-3);
  background: var(--ce-color-secondary); color: var(--ce-color-white);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 6px 12px; border-radius: var(--ce-radius-pill);
}
.ce-card__icon {
  width: 56px; height: 56px; border-radius: var(--ce-radius-md);
  background: rgba(217,142,41,0.12); color: var(--ce-color-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: var(--ce-space-3);
}
.ce-card__body { padding: var(--ce-space-4); flex: 1; display: flex; flex-direction: column; }
.ce-card__title { margin-bottom: var(--ce-space-2); }
.ce-card__text { color: var(--ce-color-neutral-600); flex: 1; margin-bottom: var(--ce-space-3); }
.ce-card__link {
  font-family: var(--ce-font-heading); font-weight: 600; font-size: 0.9rem;
  color: var(--ce-color-primary); display: inline-flex; align-items: center; gap: 8px;
  transition: gap var(--ce-transition-fast), color var(--ce-transition-fast);
}
.ce-card__link:hover { gap: 12px; color: var(--ce-color-secondary); }
.ce-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--ce-space-3);
  font-size: 0.82rem; color: var(--ce-color-neutral-600);
  border-top: 1px solid var(--ce-color-neutral-300);
  padding-top: var(--ce-space-3); margin-top: auto;
}
.ce-card__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* -------------------------------------------------------------
   8. FORMULARIOS
   ------------------------------------------------------------- */
.ce-form { display: grid; gap: var(--ce-space-4); }
.ce-form__row { display: grid; gap: var(--ce-space-4); grid-template-columns: 1fr; }
.ce-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.ce-field label {
  font-family: var(--ce-font-heading); font-weight: 600; font-size: 0.85rem;
  color: var(--ce-color-primary);
}
.ce-field label .required { color: var(--ce-color-secondary); }
.ce-field input,
.ce-field select,
.ce-field textarea {
  border: 1.5px solid var(--ce-color-neutral-300);
  border-radius: var(--ce-radius-sm);
  padding: 13px 16px;
  background: var(--ce-color-white);
  color: var(--ce-color-neutral-900);
  transition: border-color var(--ce-transition-fast), box-shadow var(--ce-transition-fast);
  width: 100%;
}
.ce-field textarea { resize: vertical; min-height: 120px; }
.ce-field input:focus,
.ce-field select:focus,
.ce-field textarea:focus {
  outline: none;
  border-color: var(--ce-color-secondary);
  box-shadow: 0 0 0 4px rgba(217,142,41,0.15);
}
.ce-field--file {
  border: 2px dashed var(--ce-color-neutral-300);
  border-radius: var(--ce-radius-sm);
  padding: var(--ce-space-4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ce-transition-fast), background var(--ce-transition-fast);
}
.ce-field--file:hover, .ce-field--file.is-dragover {
  border-color: var(--ce-color-secondary);
  background: rgba(217,142,41,0.05);
}
.ce-field--file input[type="file"] { display: none; }
.ce-field__error {
  display: none;
  color: var(--ce-color-error);
  font-size: 0.8rem;
  font-weight: 500;
}
.ce-field.is-invalid input,
.ce-field.is-invalid select,
.ce-field.is-invalid textarea {
  border-color: var(--ce-color-error);
}
.ce-field.is-invalid .ce-field__error { display: block; }
.ce-field.is-valid input,
.ce-field.is-valid select,
.ce-field.is-valid textarea {
  border-color: var(--ce-color-success);
}
.ce-honeypot { position: absolute !important; left: -9999px !important; top: -9999px; }

.ce-form-status {
  display: none;
  padding: var(--ce-space-3);
  border-radius: var(--ce-radius-sm);
  font-weight: 500;
  font-size: 0.92rem;
}
.ce-form-status.is-visible { display: block; }
.ce-form-status--success { background: rgba(30,111,92,0.1); color: var(--ce-color-success); }
.ce-form-status--error { background: rgba(179,38,30,0.1); color: var(--ce-color-error); }

/* -------------------------------------------------------------
   9. NAVBAR / HEADER
   ------------------------------------------------------------- */
.ce-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(15,42,67,0.06);
  transition: box-shadow var(--ce-transition-base), padding var(--ce-transition-base);
}
.ce-header.is-scrolled { box-shadow: var(--ce-shadow-md); }
.ce-header__top {
  background: var(--ce-color-primary);
  color: var(--ce-color-white);
  font-size: 0.82rem;
}
.ce-header__top .ce-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--ce-space-2) var(--ce-space-5);
  padding-block: 8px;
}
.ce-header__top a { color: var(--ce-color-white); }
.ce-header__top .ce-header__contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ce-space-4); }
/* 🆕 Sprint UX-11 (D-090, resuelve QA-043, incorporado a este Entregable
   por decisión explícita del usuario): `.ce-header__social` no tenía
   ninguna regla base de display/gap/tamaño en esta barra (a
   diferencia de `.ce-footer__social`, sección 12, que sí las tiene)
   — los iconos se apilaban sin espaciado. Mismo patrón visual que
   `.ce-footer__social`, adaptado a la barra superior (círculos más
   pequeños, acordes al tamaño de fuente 0.82rem de `.ce-header__top`). */
.ce-header__top .ce-header__social {
  display: flex;
  align-items: center;
  gap: var(--ce-space-2);
  margin-left: var(--ce-space-3);
}
.ce-header__top .ce-header__social a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background var(--ce-transition-fast), transform var(--ce-transition-fast);
}
.ce-header__top .ce-header__social a:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.ce-header__main {
  padding-block: 16px;
}
.ce-header__main .ce-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ce-space-4);
}
.ce-header__logo img { height: 48px; width: auto; }
.ce-header__logo { font-family: var(--ce-font-heading); font-weight: 800; font-size: 1.3rem; color: var(--ce-color-primary); }

.ce-nav { display: flex; }
.ce-nav__list { display: flex; gap: var(--ce-space-5); align-items: center; }
.ce-nav__list a {
  font-family: var(--ce-font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ce-color-neutral-900);
  position: relative;
  padding: 6px 0;
  transition: color var(--ce-transition-fast);
}
.ce-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--ce-color-secondary);
  transition: width var(--ce-transition-base);
}
.ce-nav__list a:hover,
.ce-nav__list .current-menu-item > a { color: var(--ce-color-secondary); }
.ce-nav__list a:hover::after,
.ce-nav__list .current-menu-item > a::after { width: 100%; }

.ce-header__actions { display: flex; align-items: center; gap: var(--ce-space-3); }
.ce-header__phone {
  display: none;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--ce-color-primary);
}

.ce-nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  z-index: 110;
}
.ce-nav-toggle span {
  width: 26px; height: 2px;
  background: var(--ce-color-primary);
  border-radius: 2px;
  transition: transform var(--ce-transition-base), opacity var(--ce-transition-base);
}
.ce-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ce-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.ce-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ce-nav-mobile {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 85vw);
  height: 100vh;
  background: var(--ce-color-white);
  box-shadow: var(--ce-shadow-lg);
  transform: translateX(100%);
  transition: transform var(--ce-transition-slow);
  z-index: 105;
  padding: var(--ce-space-7) var(--ce-space-4) var(--ce-space-4);
  overflow-y: auto;
}
.ce-nav-mobile.is-open { transform: translateX(0); }
.ce-nav-mobile__list { display: flex; flex-direction: column; gap: var(--ce-space-4); }
.ce-nav-mobile__list a {
  font-family: var(--ce-font-heading); font-weight: 600; font-size: 1.1rem; color: var(--ce-color-primary);
}
.ce-nav-overlay {
  position: fixed; inset: 0; background: rgba(8,26,43,0.5);
  opacity: 0; visibility: hidden; transition: opacity var(--ce-transition-base);
  z-index: 104;
}
.ce-nav-overlay.is-visible { opacity: 1; visibility: visible; }
body.ce-no-scroll { overflow: hidden; }

/* -------------------------------------------------------------
   10. HERO
   ------------------------------------------------------------- */
.ce-hero {
  position: relative;
  /* 🆕 Sprint UX-11 (D-088): reducción ~15% respecto a la altura
     histórica (88vh). Se usa clamp() en vez de un min-height fijo en
     px, para que el piso (480px) solo actúe como red de seguridad en
     viewports muy bajos (móviles en horizontal) sin anular la
     reducción en los tamaños de viewport habituales — donde 75vh ya
     supera holgadamente ese piso. El techo (760px) evita que el Hero
     crezca más de lo razonable en monitores muy altos por debajo del
     breakpoint xl. */
  min-height: clamp(480px, 75vh, 760px);
  display: flex;
  align-items: center;
  color: var(--ce-color-white);
  background-color: var(--ce-color-primary);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.ce-hero,
.ce-page-hero {
  /* 🆕 Sprint UX-7, Entregable UX-7.1 (D-063): fuente única del
     gradiente de overlay, compartida por .ce-hero__overlay (Home) y
     .ce-page-hero__overlay (interior, sección 20) — antes eran dos
     gradientes definidos por separado. Declarada en ambos selectores
     de sección (no en :root) para no introducir una variable global
     nueva fuera del alcance de estos dos componentes. */
  --ce-hero-overlay-gradient: linear-gradient(120deg, rgba(8,26,43,0.92) 0%, rgba(15,42,67,0.78) 55%, rgba(15,42,67,0.45) 100%);
}
.ce-hero__overlay {
  position: absolute; inset: 0;
  background: var(--ce-hero-overlay-gradient);
}
.ce-hero__content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  animation: ce-fade-up 0.9s ease both;
}
.ce-hero__subtitle {
  font-size: 1.1rem;
  color: var(--ce-color-neutral-300);
  margin-block: var(--ce-space-3) var(--ce-space-5);
  max-width: 540px;
}
.ce-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ce-space-3); }
.ce-hero__scroll {
  position: absolute; bottom: var(--ce-space-5); left: 50%; transform: translateX(-50%);
  color: var(--ce-color-white); opacity: 0.8; z-index: 2;
  animation: ce-bounce 2s infinite;
}

/* -------------------------------------------------------------
   11. SECCIONES GENÉRICAS
   ------------------------------------------------------------- */
/* Stats / contadores */
.ce-stats { background: var(--ce-color-primary); color: var(--ce-color-white); }
.ce-stat { text-align: center; }
.ce-stat__number {
  font-family: var(--ce-font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--ce-color-secondary);
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
.ce-stat__label { color: var(--ce-color-neutral-300); font-weight: 500; margin-top: var(--ce-space-2); }

/* Why us */
.ce-why-item { text-align: left; padding: var(--ce-space-4); }

/* Testimonials slider */
.ce-testimonials { position: relative; }
.ce-testimonial-slider { position: relative; overflow: hidden; }
.ce-testimonial-track {
  display: flex;
  transition: transform var(--ce-transition-slow);
  will-change: transform;
}
.ce-testimonial-slide {
  flex: 0 0 100%;
  padding: var(--ce-space-3);
}
.ce-testimonial-card {
  background: var(--ce-color-white);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-md);
  padding: var(--ce-space-5);
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.ce-testimonial-card__rating { color: var(--ce-color-secondary); margin-bottom: var(--ce-space-3); }
.ce-testimonial-card__quote { font-size: 1.1rem; font-style: italic; color: var(--ce-color-neutral-800); margin-bottom: var(--ce-space-4); }
.ce-testimonial-card__author { display: flex; align-items: center; justify-content: center; gap: var(--ce-space-3); }
.ce-testimonial-card__author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.ce-testimonial-card__name { font-weight: 700; color: var(--ce-color-primary); }
.ce-testimonial-card__role { font-size: 0.85rem; color: var(--ce-color-neutral-600); }

/* Sprint UX-7, Entregable UX-7.3: variante compacta de la card de
   testimonio para el slot opcional de los sidebars de
   Servicios/Proyectos (columna de 1fr en .ce-layout-with-sidebar,
   ver más abajo) — mismo componente que el slider del Home
   (template-parts/content-testimonio-card.php), sin el max-width de
   720px pensado para ancho completo, y con la cita más pequeña para
   no dominar visualmente una columna angosta. */
.ce-testimonial-card--compact {
  max-width: none;
  padding: var(--ce-space-4);
}
.ce-testimonial-card--compact .ce-testimonial-card__quote { font-size: 0.95rem; margin-bottom: var(--ce-space-3); }
.ce-testimonial-card--compact .ce-testimonial-card__author img { width: 40px; height: 40px; }
.ce-slider-nav { display: flex; justify-content: center; gap: var(--ce-space-3); margin-top: var(--ce-space-4); }
.ce-slider-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ce-color-neutral-300);
  transition: background var(--ce-transition-fast), transform var(--ce-transition-fast);
}
.ce-slider-dot.is-active { background: var(--ce-color-secondary); transform: scale(1.3); }
.ce-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ce-color-white); box-shadow: var(--ce-shadow-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--ce-color-primary); z-index: 3;
  transition: background var(--ce-transition-fast);
}
.ce-slider-arrow:hover { background: var(--ce-color-secondary); color: var(--ce-color-white); }
.ce-slider-arrow--prev { left: -6px; }
.ce-slider-arrow--next { right: -6px; }

/* QA-035 (Sprint 8, Entregable 8.5): botón de pausa/reanudación del
   autoplay del slider — vive dentro de .ce-slider-nav, junto a los
   dots (ver createSliderController()/buildPauseToggle() en
   assets/js/main.js). Mismo lenguaje visual que .ce-slider-dot (forma
   redonda, misma paleta de foco/hover que el resto de los controles
   del slider), pero de mayor tamaño por ser un botón operable, no un
   indicador. El estado :focus-visible es intencional: este control
   existe específicamente para quien navega con teclado, así que su
   anillo de foco debe ser al menos tan visible como el de cualquier
   otro control interactivo del tema. */
.ce-slider-pause {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ce-color-neutral-300); color: var(--ce-color-neutral-600);
  font-size: 0.7rem; line-height: 1;
  transition: background var(--ce-transition-fast), color var(--ce-transition-fast);
}
.ce-slider-pause:hover,
.ce-slider-pause[aria-pressed="true"] { background: var(--ce-color-secondary); color: var(--ce-color-white); }
.ce-slider-pause:focus-visible { outline: 2px solid var(--ce-color-secondary); outline-offset: 2px; }

/* Gallery / lightbox trigger */
.ce-gallery-grid { display: grid; gap: var(--ce-space-3); grid-template-columns: repeat(2, 1fr); }
.ce-gallery-item {
  position: relative; border-radius: var(--ce-radius-md); overflow: hidden;
  cursor: pointer; aspect-ratio: 1/1;
}
.ce-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ce-transition-slow); }
.ce-gallery-item:hover img { transform: scale(1.1); }
.ce-gallery-item__icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,42,67,0.35); color: var(--ce-color-white); font-size: 1.4rem;
  opacity: 0; transition: opacity var(--ce-transition-fast);
}
.ce-gallery-item:hover .ce-gallery-item__icon { opacity: 1; }

/* CTA */
.ce-cta {
  background: linear-gradient(120deg, var(--ce-color-primary), var(--ce-color-primary-dark));
  color: var(--ce-color-white);
  border-radius: var(--ce-radius-lg);
  padding: var(--ce-space-7) var(--ce-space-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ce-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(217,142,41,0.25), transparent 60%);
}
.ce-cta__content { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.ce-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--ce-space-3); margin-top: var(--ce-space-4); }

/* -------------------------------------------------------------
   12. FOOTER
   ------------------------------------------------------------- */
.ce-footer { background: var(--ce-color-neutral-900); color: var(--ce-color-neutral-300); }
.ce-footer__top { padding-block: var(--ce-space-7); }
.ce-footer__grid { display: grid; gap: var(--ce-space-6); grid-template-columns: 1fr; }
.ce-footer__brand img { height: 44px; margin-bottom: var(--ce-space-3); }
.ce-footer__about { font-size: 0.92rem; line-height: 1.7; }
.ce-footer__widget-title, .ce-footer h4 {
  font-family: var(--ce-font-heading);
  color: var(--ce-color-white);
  margin-bottom: var(--ce-space-3);
  font-size: 1rem;
}
.ce-footer__list { display: flex; flex-direction: column; gap: var(--ce-space-2); }
.ce-footer__list a { font-size: 0.92rem; transition: color var(--ce-transition-fast); }
.ce-footer__list a:hover { color: var(--ce-color-secondary); }
.ce-footer__contact-item { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; margin-bottom: var(--ce-space-2); }
.ce-footer__contact-item i { color: var(--ce-color-secondary); margin-top: 3px; }
.ce-footer__social { display: flex; gap: var(--ce-space-2); margin-top: var(--ce-space-3); }
.ce-footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ce-transition-fast), transform var(--ce-transition-fast);
}
.ce-footer__social a:hover { background: var(--ce-color-secondary); transform: translateY(-3px); }
.ce-footer__map iframe { width: 100%; height: 220px; border: 0; border-radius: var(--ce-radius-md); filter: grayscale(0.3); }
.ce-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-block: var(--ce-space-4);
  font-size: 0.82rem;
  display: flex; flex-wrap: wrap; gap: var(--ce-space-2); justify-content: space-between;
}
.ce-footer__bottom a:hover { color: var(--ce-color-secondary); }

/* -------------------------------------------------------------
   13. COMPONENTES FLOTANTES
   ------------------------------------------------------------- */
.ce-float-stack {
  position: fixed;
  right: var(--ce-space-4);
  bottom: var(--ce-space-4);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--ce-space-3);
  align-items: flex-end;
}
.ce-float-btn {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--ce-shadow-lg);
  transition: transform var(--ce-transition-fast), opacity var(--ce-transition-base), visibility var(--ce-transition-base);
}
.ce-float-btn--whatsapp {
  background: #25D366; color: var(--ce-color-white);
  animation: ce-pulse 2.4s infinite;
}
.ce-float-btn--whatsapp:hover { transform: scale(1.08); }
.ce-float-btn--top {
  background: var(--ce-color-primary); color: var(--ce-color-white);
  opacity: 0; visibility: hidden; transform: translateY(10px);
}
.ce-float-btn--top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.ce-float-btn--top:hover { background: var(--ce-color-secondary); }

/* -------------------------------------------------------------
   14. MODALES
   ------------------------------------------------------------- */
.ce-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(8,26,43,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: var(--ce-space-4);
  z-index: 200;
  opacity: 0; visibility: hidden;
  transition: opacity var(--ce-transition-base), visibility var(--ce-transition-base);
}
.ce-modal-overlay.is-open { opacity: 1; visibility: visible; }
.ce-modal {
  background: var(--ce-color-white);
  border-radius: var(--ce-radius-lg);
  padding: var(--ce-space-6) var(--ce-space-5);
  max-width: 460px;
  width: 100%;
  text-align: center;
  position: relative;
  transform: scale(0.92) translateY(10px);
  transition: transform var(--ce-transition-base);
  box-shadow: var(--ce-shadow-lg);
}
.ce-modal-overlay.is-open .ce-modal { transform: scale(1) translateY(0); }
.ce-modal__icon { font-size: 3rem; margin-bottom: var(--ce-space-3); }
.ce-modal__icon--success { color: var(--ce-color-success); }
.ce-modal__icon--error { color: var(--ce-color-error); }
.ce-modal__title { margin-bottom: var(--ce-space-2); }
.ce-modal__text { color: var(--ce-color-neutral-600); margin-bottom: var(--ce-space-4); }
.ce-modal__close {
  position: absolute; top: var(--ce-space-3); right: var(--ce-space-3);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ce-color-neutral-100); color: var(--ce-color-neutral-600);
  transition: background var(--ce-transition-fast);
}
.ce-modal__close:hover { background: var(--ce-color-neutral-300); }

/* QA-019 (Sprint 8, Entregable 8.7): regla propia para el botón de
   cerrar del menú móvil — antes reutilizaba .ce-modal__close (de un
   componente sin relación) solo para heredar esta misma apariencia.
   Misma declaración exacta, sin ningún cambio visual, ahora
   desacoplada de los modales. */
.ce-nav-mobile__close {
  position: absolute; top: var(--ce-space-3); right: var(--ce-space-3);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ce-color-neutral-100); color: var(--ce-color-neutral-600);
  transition: background var(--ce-transition-fast);
}
.ce-nav-mobile__close:hover { background: var(--ce-color-neutral-300); }

/* Lightbox */
.ce-lightbox {
  position: fixed; inset: 0; background: rgba(8,26,43,0.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 210; opacity: 0; visibility: hidden;
  transition: opacity var(--ce-transition-base), visibility var(--ce-transition-base);
}
.ce-lightbox.is-open { opacity: 1; visibility: visible; }
.ce-lightbox__img { max-width: 90vw; max-height: 85vh; border-radius: var(--ce-radius-md); box-shadow: var(--ce-shadow-lg); }
.ce-lightbox__close, .ce-lightbox__nav {
  position: absolute; color: var(--ce-color-white);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; transition: background var(--ce-transition-fast);
}
.ce-lightbox__close:hover, .ce-lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.ce-lightbox__close { top: var(--ce-space-4); right: var(--ce-space-4); }
.ce-lightbox__nav--prev { left: var(--ce-space-4); top: 50%; transform: translateY(-50%); }
.ce-lightbox__nav--next { right: var(--ce-space-4); top: 50%; transform: translateY(-50%); }

/* -------------------------------------------------------------
   15. LOADER / SPINNER (usado en envío AJAX)
   ------------------------------------------------------------- */
.ce-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: var(--ce-color-white);
  border-radius: 50%;
  animation: ce-spin 0.7s linear infinite;
  display: none;
}
.is-loading .ce-spinner { display: inline-block; }
.is-loading .ce-btn__label { opacity: 0.7; }

/* -------------------------------------------------------------
   16. BREADCRUMBS
   ------------------------------------------------------------- */
.ce-breadcrumbs { padding-block: var(--ce-space-3); }
.ce-breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; color: var(--ce-color-neutral-600); }
.ce-breadcrumbs__item:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--ce-color-neutral-300); }
.ce-breadcrumbs__item a:hover { color: var(--ce-color-secondary); }

/* -------------------------------------------------------------
   17. UTILIDADES
   ------------------------------------------------------------- */
.ce-text-center { text-align: center; }
.ce-hidden { display: none !important; }
.ce-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ce-relative { position: relative; }
.ce-w-full { width: 100%; }
.ce-max-w-content { max-width: 640px; margin-inline: auto; }
.ce-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(30,111,92,0.1); color: var(--ce-color-accent);
  font-size: 0.78rem; font-weight: 600; padding: 5px 12px; border-radius: var(--ce-radius-pill);
}
img[loading="lazy"] {
  background: var(--ce-color-neutral-100);
}

/* -------------------------------------------------------------
   18. ANIMACIONES
   ------------------------------------------------------------- */
@keyframes ce-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ce-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ce-spin { to { transform: rotate(360deg); } }
@keyframes ce-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 10px); }
}
@keyframes ce-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.ce-animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ce-animate-on-scroll.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------
   19. RESPONSIVE — MOBILE FIRST (min-width breakpoints)
   Base:   < 576px  (móvil)
   sm:     >= 576px (móvil grande)
   md:     >= 768px (tablet)
   lg:     >= 992px (laptop)
   xl:     >= 1200px (desktop)
   ------------------------------------------------------------- */

/* sm */
@media (min-width: 576px) {
  .ce-hero__actions { flex-wrap: nowrap; }
  .ce-form__row--2 { grid-template-columns: repeat(2, 1fr); }
}

/* md: tablet */
@media (min-width: 768px) {
  .ce-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ce-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ce-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ce-gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .ce-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .ce-form__row { grid-template-columns: repeat(2, 1fr); }
  .ce-testimonial-card { padding: var(--ce-space-6); }
}

/* lg: laptop — navegación de escritorio aparece aquí */
@media (min-width: 992px) {
  .ce-nav-toggle, .ce-nav-mobile, .ce-nav-overlay { display: none; }
  .ce-header__phone { display: flex; }
  .ce-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ce-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .ce-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
  .ce-why-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop: navbar oculta en móvil, visible en desktop */
@media (max-width: 991.98px) {
  .ce-nav { display: none; }
}

/* xl: desktop grande */
@media (min-width: 1200px) {
  /* 🆕 Sprint UX-11 (D-088): mismo criterio de clamp() que la regla
     base — reducción ~15% respecto a 92vh, piso 560px (no anula la
     reducción en resoluciones de escritorio habituales), techo 820px. */
  .ce-hero { min-height: clamp(560px, 78vh, 820px); }
  .ce-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================
   20. SPRINT 3 — MÓDULO SERVICIOS
   (page-hero interno, layout con sidebar, accordion FAQ,
   navegación entre servicios, "relacionados")
   Sección añadida sin modificar reglas anteriores.
   ============================================================= */

/* Hero interno (archive/single de contenido) */
.ce-page-hero {
  position: relative;
  padding-block: var(--ce-space-7) var(--ce-space-6);
  margin-top: calc(-1 * var(--ce-space-3));
  background-color: var(--ce-color-primary);
  background-size: cover;
  background-position: center;
  color: var(--ce-color-white);
  overflow: hidden;
}
.ce-page-hero__overlay {
  /* 🆕 Sprint UX-7, Entregable UX-7.1 (D-063): antes tenía su propio
     gradiente de 2 stops, distinto del de .ce-hero__overlay (sección
     10). Ahora reutiliza --ce-hero-overlay-gradient (declarada en
     .ce-page-hero, arriba) — misma fuente que el Hero de Home,
     consistencia intencional entre ambos Heros. Cambio visual menor
     esperado (gradiente de 3 stops en vez de 2) — es el objetivo
     mismo de este Entregable ("Consistencia y configurabilidad").
     Opacidad configurable vía el mismo ce_hero_overlay_opacity del
     Customizer que ya usa el Hero de Home (sección 26,
     --ce-hero-overlay-opacity, fallback 1 si faltara el atributo
     style).

     🆕 Sprint UX-11 (D-086): --ce-hero-overlay-gradient ya no es un
     valor fijo — template-parts/page-hero.php la sobreescribe
     inline con el resultado de
     ce_construction_get_hero_overlay_gradient_css() (color/
     dirección/extensión configurables desde el Customizer, mismos 3
     controles que usa el Hero de Home). El valor declarado aquí en
     .ce-page-hero (bloque de arriba, compartido con .ce-hero) queda
     como respaldo si por alguna razón faltara el atributo style. */
  position: absolute; inset: 0;
  background: var(--ce-hero-overlay-gradient);
  opacity: var(--ce-hero-overlay-opacity, 1);
}
.ce-page-hero__content { position: relative; z-index: 2; max-width: 720px; }
.ce-page-hero__subtitle { color: var(--ce-color-neutral-300); margin-top: var(--ce-space-2); max-width: 620px; }

/* Layout de contenido + sidebar opcional */
.ce-layout-with-sidebar {
  display: grid;
  gap: var(--ce-space-6);
  grid-template-columns: 1fr;
  align-items: start;
}
.ce-sidebar { display: flex; flex-direction: column; gap: var(--ce-space-4); }
.ce-sidebar__list { display: flex; flex-direction: column; gap: 4px; }
.ce-sidebar__link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--ce-radius-sm);
  color: var(--ce-color-neutral-800);
  font-weight: 500;
  transition: background var(--ce-transition-fast), color var(--ce-transition-fast);
}
.ce-sidebar__link i { color: var(--ce-color-secondary); font-size: 0.75rem; }
.ce-sidebar__link:hover, .ce-sidebar__link.is-current {
  background: var(--ce-color-neutral-100);
  color: var(--ce-color-secondary);
}

/* Navegación entre servicios (prev/next) */
.ce-service-nav {
  display: grid;
  gap: var(--ce-space-3);
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ce-color-neutral-300);
  border-bottom: 1px solid var(--ce-color-neutral-300);
  padding-block: var(--ce-space-4);
  margin-block: var(--ce-space-6);
}
.ce-service-nav__item {
  display: flex;
  align-items: center;
  gap: var(--ce-space-3);
  padding: var(--ce-space-3);
  border-radius: var(--ce-radius-md);
  transition: background var(--ce-transition-fast);
}
.ce-service-nav__item:hover { background: var(--ce-color-neutral-100); }
.ce-service-nav__item--next { justify-content: flex-end; text-align: right; }
.ce-service-nav__label {
  display: block; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ce-color-neutral-600); margin-bottom: 4px;
}
.ce-service-nav__title { font-family: var(--ce-font-heading); font-weight: 700; color: var(--ce-color-primary); }
.ce-service-nav__icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(217,142,41,0.12); color: var(--ce-color-secondary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Accordion (usado por FAQ relacionadas) */
.ce-accordion { display: flex; flex-direction: column; gap: var(--ce-space-3); }
.ce-accordion__item {
  background: var(--ce-color-white);
  border: 1px solid var(--ce-color-neutral-300);
  border-radius: var(--ce-radius-md);
  overflow: hidden;
}
.ce-accordion__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ce-space-3);
  padding: var(--ce-space-4);
  text-align: left;
  font-family: var(--ce-font-heading);
  font-weight: 600;
  color: var(--ce-color-primary);
  background: var(--ce-color-white);
}
.ce-accordion__question .fa-chevron-down {
  transition: transform var(--ce-transition-base);
  color: var(--ce-color-secondary);
  flex-shrink: 0;
}
.ce-accordion__item.is-open .ce-accordion__question .fa-chevron-down { transform: rotate(180deg); }
.ce-accordion__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ce-transition-slow);
}
.ce-accordion__answer-inner { padding: 0 var(--ce-space-4) var(--ce-space-4); color: var(--ce-color-neutral-600); }

/* Contenido principal de single (tipografía de cuerpo del servicio) */
.ce-service-content { line-height: 1.75; }
.ce-service-content h2, .ce-service-content h3 { margin-top: var(--ce-space-5); margin-bottom: var(--ce-space-2); }
.ce-service-content ul, .ce-service-content ol { padding-left: 1.4em; color: var(--ce-color-neutral-600); }
.ce-service-content ul { list-style: disc; }
.ce-service-content ol { list-style: decimal; }
.ce-service-icon-badge {
  width: 72px; height: 72px; border-radius: var(--ce-radius-md);
  background: rgba(217,142,41,0.12); color: var(--ce-color-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; margin-bottom: var(--ce-space-3);
}

/* -------------------------------------------------------------
   4.1 BREAKOUT DE CONTENIDO — Sprint UX-6, Entregable UX-6.3
   -------------------------------------------------------------
   Ver docs/DECISIONS.md D-061.

   Problema: single.php y page.php envolvían todo the_content() en
   .ce-max-w-content (640px), lo que dejaba cualquier [ce_section]
   embebido (inc/section-shortcode.php) encogido a 640px en vez de
   usar el ancho completo del .ce-container, como sí ocurre en el
   Home (front-page.php nunca usa .ce-max-w-content).

   Solución: clase adicional .ce-content-breakout, añadida SOLO
   junto a .ce-service-content en single.php y page.php (no en
   single-servicio.php / single-proyecto.php / single-equipo.php,
   que siguen sin cambios). NO se modifica la regla de
   .ce-max-w-content de arriba (línea ~777): sigue intacta para sus
   ~15 usos existentes en el resto del proyecto.

   Mecanismo: grid de 3 columnas. La columna central usa
   min(640px, 100%) — mismo ancho de lectura que .ce-max-w-content
   ya daba a párrafos, encabezados, listas, etc. Los hijos
   directos .ce-section (lo que renderiza [ce_section]) ocupan la
   fila completa (1 / -1) y cancelan, con margen negativo, el
   padding-inline del .ce-container exterior (misma variable
   --ce-space-4, fija en todos los breakpoints — ver línea ~164),
   para que su propio .ce-container interno (template-parts/*.php)
   vuelva a aplicar ese padding una sola vez: el resultado queda
   pixel-idéntico al ancho/alineación que la misma sección tiene
   en el Home. */
.ce-content-breakout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(640px, 100%) minmax(0, 1fr);
}
.ce-content-breakout > * {
  grid-column: 2;
}
.ce-content-breakout > .ce-section {
  grid-column: 1 / -1;
  width: calc(100% + (2 * var(--ce-space-4)));
  margin-inline: calc(-1 * var(--ce-space-4));
}

/* Responsive: sidebar visible en 2 columnas desde tablet grande */
@media (min-width: 992px) {
  .ce-layout-with-sidebar { grid-template-columns: 2fr 1fr; }
  .ce-service-nav { grid-template-columns: 1fr 1fr; }
}

/* Paginación estándar de WordPress (paginate_links, type=list) */
.page-numbers { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.page-numbers li { list-style: none; }
.page-numbers a, span.page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding-inline: 10px;
  border-radius: var(--ce-radius-sm);
  background: var(--ce-color-white);
  border: 1.5px solid var(--ce-color-neutral-300);
  font-weight: 600; color: var(--ce-color-primary);
  transition: background var(--ce-transition-fast), color var(--ce-transition-fast);
}
.page-numbers a:hover { background: var(--ce-color-neutral-100); }
.page-numbers .current { background: var(--ce-color-secondary); border-color: var(--ce-color-secondary); color: var(--ce-color-white); }

/* =============================================================
   21. SPRINT 4 — MÓDULO PROYECTOS
   (ficha de metadatos: cliente/ubicación/fecha/estado)
   Sección añadida sin modificar reglas anteriores. Reutiliza
   deliberadamente .ce-layout-with-sidebar, .ce-page-hero,
   .ce-service-nav, .ce-gallery-grid/.ce-gallery-item y
   .ce-card ya existentes (ver DECISIONS.md D-016).
   ============================================================= */

.ce-project-meta-grid {
  display: grid;
  gap: var(--ce-space-3);
  grid-template-columns: repeat(2, 1fr);
  background: var(--ce-color-neutral-100);
  border-radius: var(--ce-radius-md);
  padding: var(--ce-space-4);
  margin-bottom: var(--ce-space-5);
}
.ce-project-meta-item { display: flex; align-items: flex-start; gap: 12px; }
.ce-project-meta-item__icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ce-color-white); color: var(--ce-color-secondary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: var(--ce-shadow-sm);
}
.ce-project-meta-item__label {
  display: block; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ce-color-neutral-600);
}
.ce-project-meta-item__value {
  display: block; font-family: var(--ce-font-heading);
  font-weight: 700; color: var(--ce-color-primary);
}

/* Responsive: 4 columnas en pantallas medianas+ */
@media (min-width: 768px) {
  .ce-project-meta-grid { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================
   22. SPRINT 5 — MÓDULO EQUIPO Y CLIENTES
   Sección añadida sin modificar reglas anteriores. Reutiliza
   deliberadamente .ce-card, .ce-layout-with-sidebar,
   .ce-service-nav y .ce-page-hero ya existentes.
   ============================================================= */

/* Tarjeta de miembro del equipo (archive-miembro_equipo.php) */
.ce-team-card { text-align: center; }
.ce-team-card__media {
  width: 140px; height: 140px; border-radius: 50%; overflow: hidden;
  margin: 0 auto var(--ce-space-3); box-shadow: var(--ce-shadow-sm);
  border: 4px solid var(--ce-color-white);
}
.ce-team-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ce-team-card__placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--ce-color-neutral-100); color: var(--ce-color-neutral-300); font-size: 2.5rem;
}
.ce-team-card__role {
  color: var(--ce-color-secondary-dark);
  font-weight: 600; font-size: 0.9rem; margin-bottom: var(--ce-space-2);
}
.ce-team-card__social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ce-color-neutral-100); color: var(--ce-color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--ce-transition-fast), color var(--ce-transition-fast);
}
.ce-team-card__social a:hover { background: var(--ce-color-secondary); color: var(--ce-color-white); }

/* Bio de single-miembro_equipo.php */
.ce-team-bio__header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--ce-space-5); }
.ce-team-bio__photo {
  width: 180px; height: 180px; border-radius: 50%; overflow: hidden;
  box-shadow: var(--ce-shadow-md); border: 5px solid var(--ce-color-white);
  margin-bottom: var(--ce-space-3);
}
.ce-team-bio__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Grid de logos de Clientes (template-parts/clients.php) */
.ce-clients-grid {
  display: grid;
  gap: var(--ce-space-4);
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
.ce-clients-grid__item {
  display: flex; align-items: center; justify-content: center;
  padding: var(--ce-space-3);
  background: var(--ce-color-white);
  border-radius: var(--ce-radius-md);
  box-shadow: var(--ce-shadow-sm);
  filter: grayscale(1); opacity: 0.7;
  transition: filter var(--ce-transition-base), opacity var(--ce-transition-base), transform var(--ce-transition-fast);
  aspect-ratio: 16/9;
}
.ce-clients-grid__item:hover { filter: grayscale(0); opacity: 1; transform: translateY(-3px); }
.ce-clients-grid__item img { max-width: 100%; max-height: 60px; object-fit: contain; }
.ce-clients-grid__item span {
  font-family: var(--ce-font-heading); font-weight: 700; font-size: 0.95rem;
  color: var(--ce-color-primary); text-align: center;
}

/* Página de cliente individual (single-cliente.php) */
.ce-client-single { text-align: center; max-width: 480px; margin-inline: auto; }
.ce-client-single__logo {
  max-width: 260px; margin: 0 auto var(--ce-space-4);
  padding: var(--ce-space-4); background: var(--ce-color-white);
  border-radius: var(--ce-radius-md); box-shadow: var(--ce-shadow-sm);
}

/* Responsive */
@media (min-width: 576px) {
  .ce-clients-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .ce-clients-grid { grid-template-columns: repeat(5, 1fr); }
}

/* =============================================================
   22. QA-005 (Sprint 5, Fase 1 — corrección alta)
   Fallo de contraste WCAG AA verificado numéricamente:
   --ce-color-secondary (#D98E29) sobre blanco medía 2.67:1
   (mínimo AA para texto normal: 4.5:1). Se añade una nueva
   variable --ce-color-secondary-text (#9C5F16, verificada en
   5.17:1 sobre blanco) exclusivamente para texto/enlaces sobre
   fondo claro, y se sobreescriben aquí (mayor orden de origen,
   misma especificidad) únicamente los selectores señalados en
   QA_REPORT.md: .ce-eyebrow y los estados hover/current de
   enlaces sobre fondo claro. No se modifica ninguna declaración
   original; esta sección solo añade reglas nuevas al final.
   ============================================================= */
:root {
  --ce-color-secondary-text: #9C5F16;
}

.ce-eyebrow { color: var(--ce-color-secondary-text); }
.ce-eyebrow::before { background: var(--ce-color-secondary-text); }
.ce-card__link:hover { color: var(--ce-color-secondary-text); }
.ce-nav__list a:hover,
.ce-nav__list .current-menu-item > a { color: var(--ce-color-secondary-text); }
.ce-sidebar__link:hover, .ce-sidebar__link.is-current { color: var(--ce-color-secondary-text); }
.ce-breadcrumbs__item a:hover { color: var(--ce-color-secondary-text); }

/* =============================================================
   23. ENTREGABLE 6B.2 — COMENTARIOS (comments.php)
   Sección añadida sin modificar reglas anteriores. El formulario
   de comentarios reutiliza deliberadamente .ce-form/.ce-field/
   .ce-btn ya existentes (ver comments.php); aquí solo se añaden
   las clases específicas del árbol de comentarios en sí.
   ============================================================= */

.ce-comments { margin-top: var(--ce-space-6); }
.ce-comments__title { font-family: var(--ce-font-heading); }
.ce-comments__list { display: flex; flex-direction: column; gap: var(--ce-space-4); }
.ce-comments__list .ce-comments__list { margin-top: var(--ce-space-4); padding-left: var(--ce-space-5); border-left: 2px solid var(--ce-color-neutral-300); }
.ce-comments__closed {
  background: var(--ce-color-neutral-100); border-radius: var(--ce-radius-md);
  padding: var(--ce-space-4); color: var(--ce-color-neutral-600); text-align: center;
}

.ce-comment { list-style: none; }
.ce-comment__body { display: flex; gap: var(--ce-space-3); }
.ce-comment__avatar img { width: 56px; height: 56px; border-radius: 50%; box-shadow: var(--ce-shadow-sm); }
.ce-comment__content-wrap {
  flex: 1; background: var(--ce-color-white); border: 1px solid var(--ce-color-neutral-300);
  border-radius: var(--ce-radius-md); padding: var(--ce-space-4);
}
.ce-comment__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ce-space-2); margin-bottom: var(--ce-space-2); }
.ce-comment__author { font-family: var(--ce-font-heading); font-weight: 700; color: var(--ce-color-primary); }
.ce-comment__date a { font-size: 0.82rem; color: var(--ce-color-neutral-600); }
.ce-comment__date a:hover { color: var(--ce-color-secondary-text); }
.ce-comment__text { color: var(--ce-color-neutral-800); line-height: 1.7; }
.ce-comment__text p:last-child { margin-bottom: 0; }
.ce-comment__reply { margin-top: var(--ce-space-2); }
.ce-comment__reply a {
  font-family: var(--ce-font-heading); font-weight: 600; font-size: 0.85rem;
  color: var(--ce-color-secondary-text); display: inline-flex; align-items: center; gap: 6px;
}
.ce-comment.bypostauthor > .ce-comment__body .ce-comment__content-wrap { border-color: var(--ce-color-secondary); }

.ce-comments__form { max-width: 640px; margin-top: var(--ce-space-4); }

/* =============================================================
   24. QA-018 (Sprint 7, Entregable 7.3 — corrección Media, con
   aprobación explícita del usuario; el resto de hallazgos Medios
   QA-010 a QA-017 permanecen sin corregir, fuera de este alcance).

   Hallazgo: la barra superior del header (.ce-header__top) no
   tenía ninguna regla @media que la ocultara, apilara o adaptara
   para viewports pequeños. En 320-375px, la combinación de
   teléfono + correo + horario + iconos sociales en una sola fila
   flex sin flex-wrap podía desbordar horizontalmente o comprimirse
   de forma ilegible (verificado por búsqueda exhaustiva en el
   archivo, confirmando la ausencia total de la regla).

   Corrección: se envuelve (flex-wrap) y centra el contenido de
   .ce-header__top por debajo de 768px, sin tocar ninguna regla
   original de la sección 9 (Navbar / Header) ni el layout de
   escritorio. Sección 100% aditiva, añadida al final del archivo.
   Ver DECISIONS.md D-039.
   ============================================================= */
@media (max-width: 767.98px) {
  .ce-header__top .ce-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ce-space-2);
    text-align: center;
  }
  .ce-header__top .ce-header__contact {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ce-space-2) var(--ce-space-3);
  }
  .ce-header__top .ce-header__social {
    justify-content: center;
    margin-left: 0;
  }
}

/* =============================================================
   25. SPRINT UX-3, ENTREGABLE UX-3.2 — MODAL DE COTIZACIÓN
   Sección añadida sin modificar ninguna regla anterior.

   `.ce-modal--form` es un modificador BEM sobre el `.ce-modal` ya
   existente (sección 14, MODALES) — el componente base
   `.ce-modal-overlay`/`.ce-modal` (usado por #ce-modal-success y
   #ce-modal-error) no cambia. Necesario porque `.ce-modal` tiene
   `max-width: 460px` y `text-align: center`, pensado para el
   contenido corto de un modal de aviso — insuficiente para alojar
   el formulario completo de cotización (7 campos + adjunto),
   reutilizado sin cambios desde template-parts/quote-form.php
   (Sprint UX-3, Entregable UX-3.2, ver DECISIONS.md D-051).
   ============================================================= */
.ce-modal--form {
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: left;
}
.ce-modal--form .ce-modal__title {
  text-align: center;
}

/* =============================================================
   26. SPRINT UX-4, ENTREGABLE UX-4.1 — HERO CONFIGURABLE
   (imagen/video + overlay). Sección añadida sin modificar ninguna
   regla anterior — ver DECISIONS.md D-054.

   `.ce-hero__video`: capa de fondo alternativa a `background-image`
   (sección 10, HERO). Mismo posicionamiento absoluto que ocuparía un
   fondo de imagen, por detrás de `.ce-hero__overlay` (z-index nativo
   por orden de aparición en el DOM, sin necesidad de declarar
   z-index explícito: el <video> se imprime antes que el overlay).

   `--ce-hero-overlay-opacity`: custom property inline (impresa por
   template-parts/hero.php según `ce_hero_overlay_opacity`, con
   fallback `1` aquí mismo si por alguna razón no llegara el atributo
   `style` — nunca debería faltar, pero un fallback explícito es más
   seguro que asumirlo). No se modifica el `background` original de
   `.ce-hero__overlay` (sección 10): esta regla solo añade la
   propiedad `opacity`, que no existía antes.

   🆕 Sprint UX-7, Entregable UX-7.1 (D-063): `.ce-hero__video` pasó a
   ser también consumida por `template-parts/page-hero.php` (Hero
   interno) — selectores genéricos, sin depender de `.ce-hero` como
   padre. La regla de opacidad de `.ce-hero__overlay` de abajo sigue
   siendo exclusiva del Hero de Home; `.ce-page-hero__overlay`
   declara su propia opacidad por separado (sección 20).

   🆕 Sprint UX-11 (D-084): `template-parts/page-hero.php` dejó de
   usar `.ce-hero__video`/`.ce-hero-slider` (el Hero interno ya no
   admite video/slider — ver docblock de ese archivo). Las reglas de
   este bloque y del bloque 27 de abajo no se eliminan: siguen en uso
   exclusivo de `template-parts/hero.php` (Home).
   ============================================================= */
.ce-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ce-hero__overlay {
  opacity: var(--ce-hero-overlay-opacity, 1);
}

/* =============================================================
   27. SPRINT UX-4, ENTREGABLE UX-4.2 — HERO CONFIGURABLE (modo
   slider). Sección añadida sin modificar ninguna regla anterior
   (incluida la sección 26 de arriba) — ver DECISIONS.md D-055.

   `.ce-hero-slider`: mismo criterio de capa que `.ce-hero__video`
   (sección 26): posicionamiento absoluto a pantalla completa,
   detrás de `.ce-hero__overlay` por orden de aparición en el DOM
   (mismo mecanismo, sin z-index explícito).

   `.ce-hero-slider__track`/`.ce-hero-slider__slide`: mismo patrón
   ya usado por `.ce-testimonial-track`/`.ce-testimonial-slide`
   (sección 11, Testimonials slider) — track en flex con
   `transition: transform`, cada slide al 100% del ancho del track,
   movido por `ModuleHeroSlider` (assets/js/main.js) exactamente
   igual que `ModuleTestimonialSlider` mueve el suyo (misma fábrica
   `createSliderController()`). Diferencia intencional: cada slide
   aquí es una capa de fondo a pantalla completa (`background-size:
   cover`), no una tarjeta de contenido — por eso no reutiliza
   `.ce-testimonial-slide` tal cual, que trae su propio padding
   pensado para una tarjeta centrada.

   🆕 Sprint UX-7, Entregable UX-7.1 (D-063): estas 3 clases también
   las imprime ahora `template-parts/page-hero.php` cuando
   `ce_hero_type = 'slider'` — sin ninguna regla nueva (ya eran
   genéricas, ver nota de la sección 26). `ModuleHeroSlider` las
   auto-detecta igual en cualquiera de los dos contextos, nunca
   ambos a la vez en la misma carga de página.
   ============================================================= */
.ce-hero-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ce-hero-slider__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform var(--ce-transition-slow);
  will-change: transform;
}
.ce-hero-slider__slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* =============================================================
   28. SPRINT UX-7, ENTREGABLE UX-7.2 — LAYOUT DE COLUMNAS DEL HERO
   (SOLO HOME) + QUOTE FORM EMBEBIDO. Sección añadida sin modificar
   ninguna regla anterior (incluidas las secciones 10/26/27 de
   arriba) — ver DECISIONS.md D-064.

   `.ce-hero__layout`: solo se imprime cuando
   `ce_hero_show_quote_form` está activado (ver template-parts/hero.php)
   — con el formulario desactivado, `.ce-hero__content` sigue suelto,
   sin este wrapper, comportamiento histórico intacto.

   Mobile-first: apilado (1 columna) por defecto en todos los
   anchos, igual que el resto del sistema de grid del tema
   (`.ce-grid--2`/`.ce-grid--3`, sección 4) — los 2 modificadores de
   columnas (`--2` 7/5, `--3` 8/4) solo aplican desde `lg` (992px),
   mismo breakpoint que el resto de layouts de 2 columnas del tema
   (`.ce-layout-with-sidebar`, sección 20). `--stacked` es
   explícito (mismo `grid-template-columns: 1fr` que el default)
   para dejar constancia en el HTML de que layout='1' fue una
   elección explícita, no la ausencia de modificador.
   ============================================================= */
.ce-hero__layout {
  display: grid;
  gap: var(--ce-space-6);
  grid-template-columns: 1fr;
  align-items: center;
}
.ce-hero__quote-form-col { width: 100%; }

/* Tarjeta compacta del formulario embebido en el Hero — mismo
   componente `.ce-card` ya existente (sección 7), fondo blanco
   sólido para mantener contraste sobre el fondo oscuro del Hero.
   Sin `:hover` de elevación (`.ce-card:hover`, sección 7): ese
   efecto está pensado para tarjetas clicables/listados, no para un
   formulario fijo — se anula aquí explícitamente. */
.ce-hero-quote-card {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}
.ce-hero__layout--2 .ce-hero-quote-card,
.ce-hero__layout--3 .ce-hero-quote-card { margin-inline: 0; }
.ce-hero-quote-card:hover { transform: none; box-shadow: var(--ce-shadow-sm); }
.ce-hero-quote-card .ce-card__body { padding: var(--ce-space-5); }
.ce-hero-quote-card .ce-section-title,
.ce-hero-quote-card .ce-eyebrow { display: none; } /* defensivo: este contexto nunca los imprime, ver quote-form.php */

@media (min-width: 992px) {
  .ce-hero__layout--2 { grid-template-columns: 7fr 5fr; }
  .ce-hero__layout--3 { grid-template-columns: 8fr 4fr; }
}

/* =============================================================
   28 BIS. AJUSTE PUNTUAL DENTRO DE UX-7.2 (aún sin aprobar —
   amparado por la excepción de UX_CONVERSION_ANALISIS_Y_PLAN.md
   §8.2/§8.4 para correcciones de bajo riesgo dentro de un
   Entregable ya entregado). Sección 100% aditiva, no modifica
   ninguna regla de la sección 28 ni de la sección 10 (Hero) de
   arriba. Ver DECISIONS.md D-065 (referencia D-064).
   ============================================================= */

/* -------------------------------------------------------------
   1) Breakpoint intermedio (768px–991.98px): proporción más
   angosta (6fr/6fr) que 7/5 y 8/4 (que solo aplican desde 992px)
   para los layouts de 2 columnas, antes de caer a apilado por
   debajo de 768px. En este rango de ancho, dar al formulario la
   misma proporción que al contenido evita que la columna del
   Quote Form quede demasiado angosta para sus 2 campos por fila
   (`.ce-form__row--2`, sección 8) sin necesidad de forzar un
   layout apilado tan pronto.
   ------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ce-hero__layout--2,
  .ce-hero__layout--3 { grid-template-columns: 6fr 6fr; }
}

/* -------------------------------------------------------------
   2) `.ce-hero--has-form`: altura automática (con padding
   vertical) en vez de forzar `min-height: 88vh` (sección 10) o
   `min-height: 92vh` (sección 19, `xl`) siempre — el formulario ya
   aporta contenido suficiente, especialmente notorio en móvil,
   donde forzar el viewport completo dejaba mucho espacio vacío o
   forzaba scroll interno innecesario. Selector de igual
   especificidad que `.ce-hero`; al declararse después en el
   archivo, tiene prioridad en cascada sin necesidad de `!important`.
   Ver template-parts/hero.php (aplica el modificador solo cuando
   `ce_hero_show_quote_form` está activo).
   ------------------------------------------------------------- */
.ce-hero--has-form {
  min-height: auto;
  padding-block: var(--ce-space-8) var(--ce-space-7);
  /* 🆕 Sprint UX-11 (D-089): corrige el recorte del botón "Enviar
     Solicitud" (y de cualquier campo final del formulario). Causa
     real, verificada contra el CSS: `.ce-hero` tiene `overflow:
     hidden` (regla base, arriba) Y `.ce-hero-quote-card` hereda de
     `.ce-card` (sección 7) tanto `overflow: hidden` como
     `height: 100%` — esa combinación, dentro de un grid con
     `align-items: center` (`.ce-hero__layout`), podía recortar el
     contenido final de la columna del formulario cuando esta era más
     alta que su columna hermana. Se neutraliza en las 2 capas
     implicadas, sin tocar `.ce-card`/`.ce-hero` fuera de este
     contexto (cero impacto en el resto del theme). */
  overflow: visible;
  align-items: flex-start;
}
@media (min-width: 992px) {
  .ce-hero--has-form { min-height: 70vh; padding-block: var(--ce-space-8); }
}
.ce-hero--has-form .ce-hero__layout {
  /* Ver nota de arriba: se evita "center" para que ambas columnas
     partan de su altura natural desde el borde superior, sin
     depender de ningún cálculo de centrado entre columnas de alturas
     distintas. */
  align-items: start;
}
.ce-hero--has-form .ce-hero-quote-card {
  height: auto;
  overflow: visible;
}

/* -------------------------------------------------------------
   3) Tratamiento visual de "oferta" en `.ce-hero-quote-card`:
   franja superior de acento + badge corto (ver el markup del badge
   en template-parts/quote-form.php, contexto 'hero'). Sin bullets
   de confianza — eso se absorbe en UX-7.7 (sin aprobar).
   ------------------------------------------------------------- */
.ce-hero-quote-card {
  border-top: 4px solid var(--ce-color-secondary);
  /* 🆕 Sprint UX-11 (D-089): panel visualmente separado del fondo del
     Hero — inspirado en concepto en la referencia proporcionada por
     el usuario (panel flotante, no fusionado con la imagen), sin
     copiarla: aquí se mantiene la identidad visual del theme (franja
     de acento superior ya existente, tipografía y radios del sistema
     de diseño) en vez del estilo de la referencia. Fondo ligeramente
     translúcido + desenfoque para que se perciba "flotando" sobre la
     foto, sombra más pronunciada y un borde sutil para reforzar el
     límite entre panel y fondo — sustituye la sombra `--ce-shadow-sm`
     que quedaba por defecto tras el `:hover` (sección 28, arriba;
     aquí se sobreescribe también en reposo para que sea consistente
     sin depender de :hover). */
  /* 🆕 Ajuste puntual dentro de UX-11 (D-092): la opacidad del fondo
     ya no es un valor fijo — usa la variable CSS
     `--ce-hero-quote-card-opacity`, impresa en línea por
     template-parts/quote-form.php (contexto 'hero' únicamente) a
     partir del theme_mod `ce_hero_quote_card_opacity`. El `0.97` que
     antes era el único valor ahora queda como *fallback* de la
     función `var()` — si por lo que sea el atributo `style` no
     llegara a imprimirse, el resultado es idéntico al de antes de
     este ajuste (cero regresión). */
  background: rgba(255, 255, 255, var(--ce-hero-quote-card-opacity, 0.97));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ce-shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.ce-hero-quote-card:hover {
  box-shadow: var(--ce-shadow-lg);
}
.ce-hero-quote-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(217,142,41,0.12);
  color: var(--ce-color-secondary-text);
  font-family: var(--ce-font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  padding: 6px 14px;
  border-radius: var(--ce-radius-pill);
  margin-bottom: var(--ce-space-3);
}

/* -------------------------------------------------------------
   4) Paddings/spacing compactos SOLO en el contexto del Hero
   (selector `.ce-hero-quote-card .ce-form`) — `.ce-form` global
   (sección 8) y las instancias normal/modal del formulario no se
   tocan.
   ------------------------------------------------------------- */
.ce-hero-quote-card .ce-form {
  gap: var(--ce-space-4);
}
.ce-hero-quote-card .ce-form__row {
  gap: var(--ce-space-3);
}
.ce-hero-quote-card .ce-field input,
.ce-hero-quote-card .ce-field select,
.ce-hero-quote-card .ce-field textarea {
  padding: 11px 14px;
}
.ce-hero-quote-card .ce-field textarea {
  min-height: 90px;
}

/* -------------------------------------------------------------
   5) Breakpoint `max-width: 575.98px`: padding/tipografía más
   ceñidos para `.ce-hero-quote-card` en móvil pequeño.
   ------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .ce-hero-quote-card .ce-card__body {
    padding: var(--ce-space-3);
  }
  .ce-hero-quote-card__badge {
    font-size: 0.72rem;
    padding: 5px 12px;
  }
  .ce-hero-quote-card .ce-field label {
    font-size: 0.8rem;
  }
}

/* -------------------------------------------------------------
   6) Ajuste puntual dentro de UX-11 (D-091): expansión progresiva
   del formulario del Hero. Wrapper `.ce-hero-quote-form__extra`
   (impreso ÚNICAMENTE en el contexto 'hero', ver
   template-parts/quote-form.php) que envuelve Mensaje, Adjuntar
   archivo y el botón de envío.
   Progressive enhancement OBLIGATORIO: esta regla, por sí sola, NO
   oculta nada — no fija ningún `max-height` ni `display`. Sin
   `ModuleHeroFormProgressive` (assets/js/main.js) el wrapper se
   muestra con su altura natural, exactamente como cualquier otro
   `<div>` del formulario. Es el propio JS el que, solo si llega a
   ejecutarse, fija `max-height` en línea (primero al alto real
   medido, después a `0`) para poder animar la expansión — aquí solo
   se define la transición y el recorte (`overflow: hidden`) que esa
   animación necesita.
   `prefers-reduced-motion: reduce` ya queda cubierto por la regla
   global de la sección 1 de este archivo (fuerza
   `transition-duration: 0.01ms` en todos los elementos) — no hace
   falta una excepción específica aquí.
   ------------------------------------------------------------- */
.ce-hero-quote-form__extra {
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* =============================================================
   29. SPRINT UX-7, ENTREGABLE UX-7.6 — ESTADÍSTICAS CONFIGURABLES
   Nueva clase dedicada `.ce-stats-grid`, en vez de reutilizar
   `.ce-grid--4` (sección 4): con una cantidad variable de
   estadísticas (Customizer, ver inc/customizer.php "CE:
   Estadísticas"), una clase pensada para "4 columnas fijas" ya no
   describe el layout real. Mismos breakpoints/espaciado que
   `.ce-grid--4` hasta tablet (1 columna en móvil, 2 desde 768px)
   para no cambiar el aspecto por defecto con las 4 estadísticas de
   siempre; desde escritorio (992px) se usa `auto-fit` con un mínimo
   de 180px por columna, de forma que el layout se adapta
   automáticamente sin importar cuántas estadísticas configure el
   administrador (menos de 4: columnas más anchas; más de 4: se
   ajustan más por fila, sin desbordar ni encogerse ilegiblemente).
   Sección 100% aditiva — ninguna regla de `.ce-grid--4` (sección 4)
   se modifica; sigue usándose sin cambios en el resto del tema.
   Ver DECISIONS.md D-070.
   ============================================================= */
.ce-stats-grid {
  display: grid;
  gap: var(--ce-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .ce-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .ce-stats-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* =============================================================
   30. SPRINT UX-7, ENTREGABLE UX-7.7 — INSIGNIAS DE CONFIANZA /
   LICENCIAS. Sección añadida sin modificar ninguna regla anterior
   (incluidas las secciones 7 "Cards", 17 "Utilidades" — reutiliza
   `.ce-badge` para el número de licencia sin tocar esa regla — y
   28/28 bis del Hero). Ver DECISIONS.md D-071.

   Dos variantes del mismo componente, mismo criterio ya usado por
   `.ce-testimonial-card--compact` (UX-7.3):
     - `.ce-trust-badges-list` (sección completa, Home Builder /
       shortcode): tarjetas más grandes, con etiqueta y número de
       licencia visibles.
     - `.ce-trust-badges-list--compact` (dentro de
       `.ce-hero-quote-card`, ver template-parts/quote-form.php):
       fila compacta de iconos/miniaturas pequeñas, sin texto visible
       salvo cuando no hay imagen (fallback a icono + etiqueta corta)
       — el número de licencia queda disponible vía `title=` en vez
       de ocupar espacio visual, dado el tamaño reducido de la
       tarjeta del Hero.
   ============================================================= */

/* --- Variante completa (Home Builder / shortcode) --- */
.ce-trust-badges-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ce-space-4);
}
.ce-trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ce-space-2);
  padding: var(--ce-space-4);
  background: var(--ce-color-white);
  border-radius: var(--ce-radius-md);
  box-shadow: var(--ce-shadow-sm);
  width: 160px;
  transition: transform var(--ce-transition-fast), box-shadow var(--ce-transition-fast);
}
a.ce-trust-badge:hover {
  transform: translateY(-3px);
  box-shadow: var(--ce-shadow-md);
}
.ce-trust-badge__media {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(217,142,41,0.12);
  color: var(--ce-color-secondary);
  font-size: 1.5rem;
  overflow: hidden;
}
.ce-trust-badge__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ce-trust-badge__label {
  font-family: var(--ce-font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ce-color-primary);
}
.ce-trust-badge__license {
  /* Reutiliza .ce-badge (sección 17) sin tocarla; este selector solo
     ajusta el tamaño de fuente para el contexto compacto de la card. */
  font-size: 0.72rem;
}

/* --- Variante compacta (dentro de .ce-hero-quote-card) --- */
.ce-trust-badges-list--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ce-space-3);
  margin-top: var(--ce-space-3);
  padding-top: var(--ce-space-3);
  border-top: 1px solid var(--ce-color-neutral-300);
}
.ce-trust-badge--compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ce-color-neutral-600);
}
.ce-trust-badge--compact img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.ce-trust-badge--compact i {
  font-size: 1.1rem;
  color: var(--ce-color-secondary);
}
.ce-trust-badge--compact .ce-trust-badge__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ce-color-neutral-600);
}
a.ce-trust-badge--compact:hover {
  color: var(--ce-color-secondary-text);
}
a.ce-trust-badge--compact:hover .ce-trust-badge__label {
  color: var(--ce-color-secondary-text);
}

/* =============================================================
   31. SPRINT UX-10, ENTREGABLE UX-10.3 — GOOGLE REVIEWS (TRUSTINDEX).
   Sección añadida sin modificar ninguna regla anterior. Ver
   DECISIONS.md D-075 (corrige la premisa funcional de D-072/D-073)
   y D-076 (implementación de este Entregable).

   Deliberadamente mínima: el widget de Trustindex trae su propio
   diseño interno (tarjetas, carrusel, tipografía) — este tema no lo
   reproduce ni lo sobreescribe (D-075: ambas fuentes se mantienen
   conceptualmente separadas, sin normalización visual entre ellas).
   Esta única clase solo resuelve el contenedor donde se imprime ese
   embed dentro de `.ce-container`:
     - Ancho completo (no `.ce-max-w-content`, a diferencia del
       encabezado de la sección): los widgets de Trustindex suelen
       ser carruseles/grids de varias reseñas que necesitan más
       espacio horizontal que un párrafo de texto centrado.
     - `overflow-x: auto` como defensa ante un embed que imponga un
       ancho mínimo mayor al viewport en móvil (ej. un <iframe> de
       ancho fijo) — evita que desborde el layout general de la
       página en vez de solo scrollear su propio contenido.
   ============================================================= */
.ce-google-reviews-embed {
  width: 100%;
  overflow-x: auto;
}

/* =============================================================
   32. SPRINT UX-7, ENTREGABLE UX-7.8 — VIDEO OPCIONAL EN
   TESTIMONIOS (PÁGINA COMPLETA). Ver DECISIONS.md D-077.

   Alcance de esta sección:
     a) Poster + botón Play dentro de `.ce-testimonial-card`, nuevos
        en UX-7.8. Solo pueden aparecer cuando
        content-testimonio-card.php recibe `$args['video_enabled']`
        en true (hoy, únicamente testimonials-full.php) Y el
        testimonio tiene un video válido — el resto de usos de la
        card (Home, slider, sidebars) nunca imprime este markup, así
        que estas reglas no tienen ningún efecto visual ahí.
     b) Extensión de `.ce-lightbox` (sección "Lightbox" más arriba,
        sin tocar ninguna de sus reglas existentes) para los dos
        nuevos tipos de medio (`<video>`/embed). `.ce-lightbox__img`
        no se modifica.
   ============================================================= */

/* -- a) Poster/Play en la card ------------------------------- */
.ce-testimonial-card__video {
  margin-bottom: var(--ce-space-4);
}
.ce-testimonial-video-trigger {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  max-width: 100%;
  border: 0;
  padding: 0;
  border-radius: var(--ce-radius-md);
  overflow: hidden; /* evita overflow del poster/iframe — punto 11 del alcance */
  cursor: pointer;
  background: var(--ce-color-neutral-800);
}
.ce-testimonial-video-trigger__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sin poster disponible (ni imagen destacada ni miniatura del
   proveedor oEmbed, ver docblock de content-testimonio-card.php):
   fondo degradado neutro coherente con la paleta del tema en vez de
   una dependencia externa de generación de thumbnails (punto 7 del
   alcance de UX-7.8). El botón Play sigue siendo visible y funcional. */
.ce-testimonial-video-trigger--no-poster {
  background: linear-gradient(135deg, var(--ce-color-primary), var(--ce-color-neutral-800));
}
.ce-testimonial-video-trigger__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ce-color-white);
  font-size: 1.4rem;
  background: rgba(15, 42, 67, 0.25);
  transition: background var(--ce-transition-fast);
}
.ce-testimonial-video-trigger__icon i {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ce-color-primary);
  font-size: 1.1rem;
}
.ce-testimonial-video-trigger:hover .ce-testimonial-video-trigger__icon,
.ce-testimonial-video-trigger:focus-visible .ce-testimonial-video-trigger__icon {
  background: rgba(15, 42, 67, 0.4);
}
.ce-testimonial-video-trigger:focus-visible {
  outline: 3px solid var(--ce-color-secondary);
  outline-offset: 2px;
}

/* -- b) Lightbox: video local / embed externo ----------------- */
.ce-lightbox__video {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--ce-radius-md);
  box-shadow: var(--ce-shadow-lg);
  background: #000;
}
.ce-lightbox__embed {
  max-width: 90vw;
  max-height: 85vh;
  width: min(90vw, 900px);
  aspect-ratio: 16/9;
  border-radius: var(--ce-radius-md);
  overflow: hidden;
  box-shadow: var(--ce-shadow-lg);
}
/* El embed que entrega wp_oembed_get() (ver content-testimonio-card.php)
   trae su propio <iframe> con width/height fijos del proveedor; se
   fuerza a ocupar el contenedor para que el video quede completo y
   sin overflow en cualquier tamaño de pantalla (punto 11). */
.ce-lightbox__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 480px) {
  .ce-testimonial-video-trigger__icon i {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }
}

/* =============================================================
   33. SPRINT UX-7, ENTREGABLE UX-7.10 — POPUP DE OFERTA.
   Ver DECISIONS.md D-079 (base), D-080 (refuerzo visual: icono/
   imagen, colores más "de oferta", efectos, responsive explícito)
   y D-081 (efecto de movimiento vía JS: rebote de entrada + nudge
   acotado del icono, disparados por ModuleOfferPopup.show() en
   assets/js/main.js — reemplazan el brillo infinito del icono de
   D-080 para no acumular un 3er bucle continuo junto al pulso del
   botón).

   Reutiliza `.ce-modal-overlay`/`.ce-modal`/`.ce-modal__close` tal
   cual (misma sección "Lightbox/Modales" de arriba, sin tocar
   ninguna de sus reglas) — este bloque solo añade el modificador
   `.ce-modal--offer` + los elementos nuevos del markup (icono y
   badge, ver template-parts/offer-popup.php) + las clases que
   dispara JS (`.is-nudging`, `.ce-offer-popup--bounce-in`).
   ============================================================= */
.ce-modal--offer {
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  padding-top: calc(var(--ce-space-6) + 6px);
  position: relative;
  overflow-x: hidden;
}
/* Franja superior de acento — mismo espíritu de "oferta" que ya usa
   `.ce-hero-quote-card` (border-top de UX-7.2), aquí como degradado
   para reforzar el tratamiento visual pedido. */
.ce-modal--offer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--ce-color-secondary), var(--ce-color-secondary-dark));
}
.ce-modal--offer .ce-modal__text {
  margin-bottom: var(--ce-space-4);
}

/* -- Icono circular con degradado (campo `ce_offer_popup_icon`) -- */
.ce-offer-popup__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--ce-space-3);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ce-color-secondary), var(--ce-color-secondary-dark));
  color: var(--ce-color-white);
  font-size: 1.9rem;
  box-shadow: 0 8px 20px rgba(217, 142, 41, 0.35);
  animation: ce-offer-pop 0.45s ease both;
}
.ce-offer-popup__icon.is-nudging {
  /* Meneo acotado (2 veces, disparado por JS — ver ModuleOfferPopup.show()
     en assets/js/main.js), no un bucle infinito: refuerza la llamada de
     atención justo cuando aparece, sin sumar un tercer movimiento
     continuo al del botón CTA. */
  animation: ce-offer-icon-nudge 0.6s ease-in-out;
}

/* -- Insignia corta encima del título (campo `ce_offer_popup_badge_text`),
   mismo lenguaje visual que `.ce-hero-quote-card__badge` (UX-7.2). -- */
.ce-offer-popup__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(217, 142, 41, 0.12);
  color: var(--ce-color-secondary-text);
  font-family: var(--ce-font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: var(--ce-radius-pill);
  margin-bottom: var(--ce-space-2);
}

/* -- CTA con leve pulso para llamar la atención, sin ser intrusivo:
   se pausa al pasar el mouse/foco para no distraer mientras se lee
   el botón, y respeta prefers-reduced-motion más abajo. -- */
.ce-offer-popup__cta {
  animation: ce-offer-cta-pulse 2.2s ease-in-out 1s infinite;
}
.ce-offer-popup__cta:hover,
.ce-offer-popup__cta:focus-visible {
  animation-play-state: paused;
}

@keyframes ce-offer-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
/* Meneo acotado del icono (2 veces, vía JS) — ver
   `.ce-offer-popup__icon.is-nudging` arriba. */
@keyframes ce-offer-icon-nudge {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20%      { transform: rotate(-8deg) scale(1.06); }
  40%      { transform: rotate(8deg) scale(1.06); }
  60%      { transform: rotate(-5deg) scale(1.02); }
  80%      { transform: rotate(5deg) scale(1.02); }
}
/* Entrada con rebote del modal completo, disparada una sola vez por
   `ModuleOfferPopup.show()` (assets/js/main.js) al añadir la clase
   `.ce-offer-popup--bounce-in` al overlay — reemplaza, mientras dura,
   la transición simple ya existente de `.ce-modal-overlay.is-open
   .ce-modal` (que sigue ahí como base/fallback). No es un bucle: la
   clase se retira sola a los ~700ms. */
@keyframes ce-offer-modal-bounce-in {
  0%   { transform: scale(0.7) translateY(24px); opacity: 0; }
  55%  { transform: scale(1.04) translateY(-4px); opacity: 1; }
  75%  { transform: scale(0.98) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}
.ce-offer-popup--bounce-in .ce-modal {
  animation: ce-offer-modal-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ce-offer-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 142, 41, 0.45); }
  50%      { box-shadow: 0 0 0 9px rgba(217, 142, 41, 0); }
}

/* Accesibilidad: sin animación para quien la tenga desactivada a
   nivel de sistema operativo/navegador — el popup sigue siendo
   perfectamente usable sin ella. `ModuleOfferPopup` (JS) también
   comprueba `prefers-reduced-motion` antes de disparar el rebote de
   entrada y los nudges del icono, así que con esta preferencia
   activada no se añaden siquiera esas clases. */
@media (prefers-reduced-motion: reduce) {
  .ce-offer-popup__icon,
  .ce-offer-popup__icon.is-nudging,
  .ce-offer-popup--bounce-in .ce-modal,
  .ce-offer-popup__cta {
    animation: none;
  }
}

/* -- Responsive: tablet/móvil (mismo criterio ya usado en el resto
   del tema — ver `.ce-hero-quote-card` en 575.98px, y los triggers
   de video de UX-7.8 en 480px). El overlay/`.ce-modal` base ya son
   fluidos (`width:100%` + `padding` del overlay); esto solo ajusta
   proporciones para que el icono/insignia no dominen pantallas
   pequeñas. -- */
@media (max-width: 575.98px) {
  .ce-modal--offer {
    padding: var(--ce-space-5) var(--ce-space-4);
    padding-top: calc(var(--ce-space-5) + 6px);
  }
}
@media (max-width: 480px) {
  .ce-offer-popup__icon {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    margin-bottom: var(--ce-space-2);
  }
  .ce-offer-popup__badge {
    font-size: 0.66rem;
    padding: 4px 10px;
  }
}