/* ==========================================================================
   GRUPO INSITU — Hoja de estilos
   Organización:
     1. Configuración / variables de marca
     2. Reset y base
     3. Utilidades y layout
     4. Tipografía
     5. Componentes (botones, tags, cards, formulario, faq)
     6. Header y navegación
     7. Secciones (hero, servicios, cómo trabajamos, por qué elegirnos, contacto, CTA final)
     8. Footer
     9. Animaciones (scroll reveal, microinteracciones)
     10. Responsive (mobile-first, ajustes por breakpoint)
   ========================================================================== */

/* ---------- 1. Configuración / variables de marca ---------- */
:root {
  /* Paleta de marca — editar acá para modificar todo el sitio */
  --color-yellow: #FFD600;
  --color-yellow-dark: #E6C100;
  --color-black: #111111;
  --color-white: #FFFFFF;
  --color-bg-soft: #F7F7F5;
  --color-border: #E6E6E1;
  --color-text: #1A1A1A;
  --color-text-muted: #5B5B57;
  --color-text-on-dark: #F4F4F1;
  --color-text-on-dark-muted: #B7B7AF;

  /* El amarillo de marca tiene muy buen contraste con negro (13.4:1) y con
     texto negro (13.4:1). Nunca usar texto blanco sobre amarillo: el
     contraste es insuficiente (1.4:1). */

  /* Tipografía */
  --font-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Espaciado */
  --container-width: 1200px;
  --container-narrow-width: 820px;
  --space-section: clamp(4rem, 7vw, 7.5rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-base: 420ms;
}

/* ---------- 2. Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

@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;
  }
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- 3. Utilidades y layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.container-narrow { max-width: var(--container-narrow-width); }

.section { padding-block: var(--space-section); }
.section-muted { background: var(--color-bg-soft); }
.section-dark {
  background: var(--color-black);
  color: var(--color-text-on-dark);
}

.section-heading { max-width: 640px; margin-bottom: 3rem; }
.section-heading.center { margin-inline: auto; text-align: center; }
.section-heading h2 { margin-top: 0.5rem; }

.section-grid {
  display: grid;
  gap: 3rem;
}
.section-grid-about { grid-template-columns: 0.9fr 1.1fr; align-items: start; }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}
.eyebrow-light { color: var(--color-yellow); }

.section-intro {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-top: 1rem;
}
.section-intro-light { color: var(--color-text-on-dark-muted); }

/* ---------- 4. Tipografía ---------- */
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.2rem; }

/* Bloque "Nosotros": composición editorial, no un párrafo de ancho completo.
   Ancho limitado por línea (medido en "ch") + interlineado algo más generoso
   + separación clara entre párrafos. */
.about-copy p {
  max-width: 56ch;
  line-height: 1.75;
}
.about-copy p + p {
  margin-top: 1.25rem;
}

/* Justificado selectivo: solo en párrafos y textos descriptivos de cierta
   longitud (nunca en títulos, botones, navegación, etiquetas ni textos
   cortos). text-align-last:left evita que la última línea de cada párrafo
   se estire con espacios exagerados; hyphens ayuda a que el justificado
   quede prolijo en columnas angostas. */
.about-copy p,
.why-us-item p,
.step p,
.faq-answer p,
.contact-copy .section-intro {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Lista de principios: check en vez de píldoras — dos columnas en desktop,
   una en mobile (ver Responsive). */
.check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 2rem;
  margin-top: 2rem;
  max-width: 56ch;
}
.check-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
}
.check-icon {
  flex-shrink: 0;
  color: var(--color-yellow-dark);
}

/* ---------- 5. Componentes ---------- */

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: transform var(--duration-fast) var(--ease),
              background-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-yellow);
  color: var(--color-black);
  border-color: var(--color-yellow);
}
.btn-primary:hover {
  background: var(--color-yellow-dark);
  border-color: var(--color-yellow-dark);
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.12);
}

.btn-outline {
  background: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}
.btn-outline:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.section-dark .btn-outline {
  color: var(--color-white);
  border-color: var(--color-white);
}
.section-dark .btn-outline:hover {
  background: var(--color-white);
  color: var(--color-black);
}

.btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-whatsapp svg { flex-shrink: 0; }

/* Botón sólido negro — se usa sobre fondos amarillos, donde un botón
   amarillo perdería todo contraste. .btn-outline (negro sobre transparente)
   también funciona bien sobre amarillo y se reutiliza tal cual ahí. */
.btn-dark {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.btn-dark:hover {
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.25);
}

/* Accesos (propietarios / administración) — botones visuales, sin login */
.btn-access {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
  padding: 0.65rem 1.1rem;
  font-size: 0.85rem;
}
.btn-access:hover {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}
/* Acceso administración se distingue con relleno negro sólido: refuerza que
   es un acceso privado, distinto del de propietarios. */
.btn-access-admin {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.btn-access-admin:hover {
  background: var(--color-black);
  color: var(--color-yellow);
  border-color: var(--color-black);
}

/* Flecha en botones de acción principal: se desplaza levemente al hover,
   un guiño sutil sin caer en exceso de efectos. */
.btn-arrow { flex-shrink: 0; transition: transform var(--duration-fast) var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* Servicios — composición editorial numerada, no tarjetas: título a la
   izquierda, seis servicios a la derecha separados por líneas finas.
   Sin cajas, sin sombras, sin fondos de color. */
.services-layout {
  display: grid;
  grid-template-columns: 0.85fr 2fr;
  gap: 3rem;
  align-items: start;
}
.services-heading h2 { margin-top: 0.5rem; }
/* Pequeño detalle amarillo al final de "integral." */
.services-heading .accent { position: relative; }
.services-heading .accent::after {
  content: '';
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-left: 0.3em;
  margin-bottom: 0.12em;
  background: var(--color-yellow);
  border-radius: 2px;
  vertical-align: middle;
}

.services-editorial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--color-border);
}
.service-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 2.25rem 1.75rem 2.25rem 0;
  border-top: 1px solid var(--color-border);
  transition: border-color var(--duration-base) var(--ease);
}
.service-row:not(:nth-child(3n+1)) {
  border-left: 1px solid var(--color-border);
  padding-left: 1.75rem;
}
.service-row:hover { border-color: var(--color-yellow-dark); }
.service-num {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-yellow-dark);
  -webkit-text-stroke: 1px var(--color-black);
  transition: font-size var(--duration-base) var(--ease);
}
.service-row:hover .service-num { font-size: 2.1rem; }
.service-copy h3 { margin-bottom: 0.55rem; }
.service-copy p { color: var(--color-text-muted); }
.service-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--color-black);
  position: relative;
}
.service-arrow svg { transition: transform var(--duration-base) var(--ease); }
.service-row:hover .service-arrow svg { transform: translateX(5px); }
/* Detalle amarillo que aparece junto a la flecha al pasar el cursor */
.service-arrow::before {
  content: '';
  position: absolute;
  left: -0.85rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-yellow);
  transform: translateY(-50%) scale(0);
  transition: transform var(--duration-base) var(--ease);
}
.service-row:hover .service-arrow::before { transform: translateY(-50%) scale(1); }

/* Pasos — cómo trabajamos: línea conectora que se dibuja al aparecer cada paso */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-border);
}
.step { position: relative; padding-top: 2rem; }
.step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--color-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 650ms var(--ease) 150ms;
}
.step.is-visible::before { transform: scaleX(1); }
.steps .step:nth-child(1) { transition-delay: 0ms; }
.steps .step:nth-child(2) { transition-delay: 110ms; }
.steps .step:nth-child(3) { transition-delay: 220ms; }
.steps .step:nth-child(4) { transition-delay: 330ms; }
.step-number {
  display: block;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-yellow-dark);
  -webkit-text-stroke: 1.5px var(--color-black);
  margin-bottom: 0.75rem;
}
.step h3 { margin-bottom: 0.4rem; }
.step p { color: var(--color-text-muted); }

/* Mantenimiento — tres tarjetas horizontales, del mismo tamaño, en una sola
   fila. Composición simple y pareja en vez de un collage de tamaños. */
.maintenance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
.maintenance-card { margin: 0; }
.maintenance-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.maintenance-card figcaption {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Carrusel de mantenimiento en mobile: en desktop .maintenance-grid es un
   grid de 3 columnas (arriba); en mobile pasa a scroll horizontal con
   snap (ver Responsive). Los controles quedan ocultos en desktop. */
.maintenance-carousel-controls { display: none; }
.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-black);
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.carousel-btn:active { background: var(--color-bg-soft); }
.carousel-dots { display: flex; align-items: center; gap: 0.5rem; }
.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-border);
  border: none;
  padding: 0;
  transition: background-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.carousel-dot.is-active { background: var(--color-yellow-dark); transform: scale(1.4); }

/* Bloque "Una administración que también está en los detalles" + checklist
   de gestión y cumplimiento — sigue dentro de la sección Mantenimiento, no
   es una sección nueva. */
.maintenance-detail {
  margin-top: var(--space-section);
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.maintenance-detail h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-bottom: 1rem;
}
.maintenance-detail p { color: var(--color-text-muted); }

/* Checklist de gestión y cumplimiento — deliberadamente distinto de las
   tarjetas de "Servicios": recuadros muy sutiles, mucho aire, jerarquía
   clara entre título y descripción, sin sombras ni elevación. */
.compliance-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2.75rem;
}
.compliance-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.5rem 1.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.compliance-check {
  flex-shrink: 0;
  color: var(--color-yellow);
  margin-top: 0.1rem;
}
.compliance-item h4 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.compliance-item p {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
.compliance-note {
  margin-top: 2rem;
  margin-inline: auto;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 680px;
  text-align: center;
}

/* Por qué elegirnos */
.why-us-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}
.why-us-copy h2 { margin-bottom: 2.25rem; }
.why-us-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.75rem;
}
.why-us-item {
  border-top: 1px solid rgba(244, 244, 241, 0.18);
  padding-top: 1.5rem;
}
.why-us-icon {
  display: inline-flex;
  color: var(--color-yellow);
  margin-bottom: 0.9rem;
}
.why-us-icon svg { width: 26px; height: 26px; stroke-width: 1.4; }
.why-us-item h3 { color: var(--color-white); margin-bottom: 0.5rem; }
.why-us-item p { color: var(--color-text-on-dark-muted); }

.why-us-media { border-radius: var(--radius-lg); overflow: hidden; }
.why-us-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* CTA de cambio de administración */
.switch-cta { background: var(--color-yellow); padding-block: var(--space-section); }
.switch-cta-inner { max-width: 720px; margin-inline: auto; text-align: center; }
.switch-cta h2 { color: var(--color-black); }
.switch-cta p {
  color: rgba(17, 17, 17, 0.75);
  font-size: 1.1rem;
  margin-top: 1rem;
  margin-bottom: 2.25rem;
}
.switch-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.placeholder-block {
  background: repeating-linear-gradient(
    135deg,
    var(--color-bg-soft),
    var(--color-bg-soft) 10px,
    #ECECE6 10px,
    #ECECE6 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}
.placeholder-block span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}
/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.25rem 1.5rem;
  background: var(--color-white);
  transition: border-color var(--duration-fast) var(--ease);
}
.faq-item[open] { border-color: var(--color-black); }

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--color-black);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
}
.faq-icon::before { width: 18px; height: 2px; }
.faq-icon::after { width: 2px; height: 18px; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-answer { padding-bottom: 1.5rem; color: var(--color-text-muted); max-width: 640px; }

/* Formulario de contacto */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items: start;
}
.contact-copy .btn { margin-top: 1.75rem; }
.contact-email { margin-top: 1.25rem; color: var(--color-text-muted); }
.contact-email a { font-weight: 700; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }

.contact-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-field { margin-bottom: 1.25rem; display: flex; flex-direction: column; }
.form-field label {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.form-field input,
.form-field textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-black);
  box-shadow: 0 0 0 3px rgba(255, 255, 114, 0.55);
  outline: none;
}
.form-field textarea { resize: vertical; min-height: 110px; }

.form-field.has-error input,
.form-field.has-error textarea {
  border-color: #C4453B;
}
.field-error {
  color: #C4453B;
  font-size: 0.8rem;
  font-weight: 600;
  min-height: 1.1em;
  margin-top: 0.35rem;
}

.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin-top: 1rem;
  font-weight: 700;
  min-height: 1.2em;
}
.form-status.is-success { color: #1F7A3D; }
.form-status.is-error { color: #C4453B; }

/* ---------- 6. Header y navegación ----------
   Sin nav horizontal: el header solo tiene logo + accesos + hamburguesa.
   El menú hamburguesa existe en todos los tamaños de pantalla; el panel
   que abre (.nav-panel) es el mismo en desktop y en mobile. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 1.5rem;
}

.logo { display: flex; align-items: center; }
/* Logo oficial: solo se fija el alto, el ancho queda en auto para no
   deformar sus proporciones originales. */
.logo-img { height: 34px; width: auto; display: block; }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.header-actions .btn-whatsapp { padding: 0.65rem 1.2rem; font-size: 0.88rem; }

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.menu-toggle-bar {
  width: 18px;
  height: 2px;
  background: var(--color-black);
  margin-inline: auto;
  transition: transform var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel de navegación — un único componente para desktop y mobile.
   Se mantiene siempre en el DOM con display:block; la visibilidad real la
   maneja opacity + pointer-events (permite animar la transición, algo que
   "display" no puede hacer). */
.nav-panel {
  display: block;
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: var(--color-white);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
}
.nav-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-panel-inner {
  min-height: 100%;
  padding-block: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.nav-panel nav ul { display: flex; flex-direction: column; }
.nav-panel nav a {
  display: block;
  padding: 1rem 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--duration-fast) var(--ease), padding-left var(--duration-fast) var(--ease);
}
.nav-panel nav a:hover { color: var(--color-yellow-dark); padding-left: 0.5rem; }

.nav-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 320px;
}
.nav-panel-email { font-size: 0.9rem; color: var(--color-text-muted); }
.nav-panel-email a { font-weight: 700; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 7. Hero ----------
   Composición en dos columnas reales (CSS Grid): la copia y la foto viven en
   tracks separados, así que nunca pueden superponerse, sea cual sea el ancho
   de pantalla. El corte diagonal queda solo como un detalle sutil en el borde
   interno de la propia columna de la foto (no invade la columna de texto).
   En pantallas ≤900px pasa a un layout apilado simple (ver Responsive). */
.hero {
  padding-top: 76px;
  min-height: clamp(480px, 60vh, 640px);
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  column-gap: clamp(1rem, 2.5vw, 2rem);
  align-items: stretch;
}
.hero-copy {
  align-self: center;
  max-width: 520px;
  padding-block: 4rem;
  padding-left: clamp(1.5rem, 6vw, 4rem);
  padding-right: 1.5rem;
}
.hero-title {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1.08;
  margin-bottom: 1.5rem;
}
.hero-title .highlight {
  position: relative;
  white-space: nowrap;
}
.hero-title .highlight::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0.06em;
  height: 0.34em;
  background: var(--color-yellow);
  z-index: -1;
  border-radius: 2px;
}
.hero-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 40ch;
  margin-bottom: 2.25rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-media {
  position: relative;
  min-height: 320px;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
  overflow: hidden;
}
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- 9. Animaciones (scroll reveal) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 8. Footer ----------
   Franja negra baja y compacta: logo (variante invertida para fondo oscuro)
   + dos vías de contacto reales. Sin placas ni elementos añadidos, sin
   redes sociales, sin línea de copyright. */
.site-footer {
  background: var(--color-black);
  color: var(--color-white);
  padding-block: 1rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 2rem;
}
.footer-brand { display: flex; align-items: center; }
/* Variante del logo con el texto en blanco (el original está pensado para
   fondos claros). Mismo ícono, mismas proporciones, mismo amarillo de
   marca — solo cambia el color de la tinta oscura. */
.footer-logo-img { height: 26px; width: auto; display: block; }

.footer-contact { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: 0.85rem; }
.footer-contact a { color: var(--color-white); font-weight: 600; }
.footer-contact a:hover { color: var(--color-yellow); }

/* ---------- 10. Responsive ---------- */

/* Checklist de gestión y cumplimiento: 3 columnas cuando hay espacio de sobra */
@media (min-width: 1100px) {
  .compliance-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Panel de navegación en dos columnas a partir de pantallas medianas/grandes */
@media (min-width: 900px) {
  .nav-panel-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: 0;
    max-width: 1000px;
    margin-inline: auto;
  }
  .nav-panel nav a { font-size: 1.6rem; }
  .nav-panel-actions { margin-left: 4rem; }
}

/* Los accesos se ocultan del header en pantallas medianas: siguen disponibles
   dentro del panel de navegación (nav-panel-actions). Evita un header saturado. */
@media (max-width: 1100px) {
  .header-actions .btn-access { display: none; }
}

@media (max-width: 1024px) {
  .services-layout { grid-template-columns: 1fr; gap: 2rem; }
  .services-editorial { grid-template-columns: repeat(2, 1fr); }
  /* En 2 columnas, la línea vertical debe caer entre col.1 y col.2 (ítems
     pares), no donde caía en la grilla de 3 columnas de desktop.
     ":nth-child(n)" selecciona lo mismo que la clase sola pero iguala la
     especificidad de la regla base (evita que la regla de 3 columnas gane
     por especificidad en los ítems impares). */
  .service-row:nth-child(n) { border-left: none; padding-left: 0; }
  .service-row:nth-child(even) { border-left: 1px solid var(--color-border); padding-left: 1.75rem; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.75rem; }
  .steps::before { display: none; }
  .why-us-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .why-us-media { order: -1; max-width: 460px; margin-inline: auto; width: 100%; }
  .section-grid-about { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* Debajo de este ancho las dos columnas del hero no tienen aire suficiente,
   así que se desactiva la grilla y se vuelve a un layout simple apilado:
   copia arriba, foto abajo. */
@media (max-width: 900px) {
  .hero {
    display: block;
    min-height: 0;
    padding-top: calc(76px + 2.5rem);
    padding-bottom: 2.5rem;
  }
  .hero-copy {
    max-width: 100%;
    padding: 0 1.5rem;
  }
  .hero-media {
    min-height: 0;
    clip-path: none;
    margin: 2.5rem 1.5rem 0;
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 860px) {
  .header-actions .btn-whatsapp span { display: none; }
  .header-actions .btn-whatsapp { padding: 0.65rem; border-radius: 999px; }
  .header-actions { gap: 0.5rem; }

  /* Servicios en mobile: lista vertical de una columna — sin líneas
     verticales, solo la línea horizontal entre cada servicio, sin depender
     del hover (no existe en touch). ":nth-child(n)" iguala la especificidad
     de la regla base de 3 columnas para poder anularla en todos los ítems. */
  .services-editorial { grid-template-columns: 1fr; }
  .service-row:nth-child(n) {
    border-left: none;
    padding-left: 0;
    padding-right: 0;
    padding-block: 1.75rem;
  }
  .steps { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 1.5rem; }

  .maintenance-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .switch-cta-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 600px) {
  .why-us-list { grid-template-columns: 1fr; }
  .check-list { grid-template-columns: 1fr; }
  .compliance-list { grid-template-columns: 1fr; }

  /* En columnas angostas el justificado puede dejar espacios incómodos
     entre palabras: se prioriza la legibilidad y se vuelve a alinear
     a la izquierda. */
  .about-copy p,
  .why-us-item p,
  .step p,
  .faq-answer p,
  .contact-copy .section-intro {
    text-align: left;
  }

  /* Mantenimiento en mobile: en vez de apilar las 3 fotos (demasiado
     scroll), se convierten en un carrusel horizontal con snap — una
     imagen visible por vez, deslizable, con flechas y puntos discretos. */
  .maintenance-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }
  .maintenance-grid::-webkit-scrollbar { display: none; }
  .maintenance-card {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
  .maintenance-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin-top: 1.25rem;
  }
}

@media (max-width: 480px) {
  .container { padding-inline: 1.25rem; }
  h2 { font-size: 1.65rem; }
  .hero-title { font-size: 2.35rem; }
  .btn-lg { padding: 0.95rem 1.5rem; }
}