/* ==========================================================================
   IVOMARK S.A.S. — Hoja de estilos
   --------------------------------------------------------------------------
     1. Variables          <- empieza aquí para cambiar colores
     2. Base
     3. Piezas reutilizables
     4. Cabecera
     5. Hero
     6. Flujo digital
     7. Equipos Amann Girrbach
     8. exocad
     9. Materiales
    10. Soporte técnico
    11. Galería
    12. Contacto
    13. Pie
    14. Páginas interiores
    15. Animaciones
    16. Responsive
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  /* Neutros — el blanco manda */
  --blanco:  #FFFFFF;
  --claro:   #F6F8F9;   /* fondos secundarios */
  --linea:   #E3E7EA;   /* divisores */
  --gris:    #5A646E;   /* texto secundario */
  --grafito: #14181C;   /* texto principal */
  --oscuro:  #10151A;   /* fondo de la sección de soporte */

  /* Azul tecnológico (Amann Girrbach) */
  --azul:        #0B5CA8;
  --azul-oscuro: #073F75;
  --azul-suave:  #EAF1F8;

  /* Morado exocad — SOLO se usa en la sección de exocad.
     Tono profundo, no vibrante: el brief pide elegancia, no saturación. */
  --morado:        #5B2478;
  --morado-oscuro: #431758;

  /* Tipografía */
  --f-titulos: 'Archivo', system-ui, sans-serif;
  --f-texto:   'Source Sans 3', system-ui, sans-serif;

  /* Medidas */
  --ancho: 1240px;
  --aire:  clamp(4.5rem, 9vw, 8rem);
  --lado:  clamp(1.25rem, 4vw, 2.5rem);
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--grafito);
  background: var(--blanco);
  overflow-x: hidden;          /* cero desplazamiento horizontal */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: var(--azul); text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--f-titulos);
  line-height: 1.1;
  letter-spacing: -0.021em;
  margin: 0;
  font-weight: 600;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--lado);
}

/* Espaciado de secciones. Los modificadores SOLO cambian color. */
.seccion { padding-block: var(--aire); }
.seccion--clara  { background: var(--claro); }
.seccion--oscura { background: var(--oscuro); color: var(--blanco); }
.seccion--exocad { background: var(--morado-oscuro); color: var(--blanco); }

.encabezado { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.titulo { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }

.bajada {
  margin: 1rem 0 0;
  font-size: 1.125rem;
  color: var(--gris);
  max-width: 44rem;
}
.seccion--oscura .bajada,
.seccion--exocad .bajada { color: rgba(255, 255, 255, 0.72); }

/* Accesibilidad */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: absolute; left: -999px;
  background: var(--grafito); color: var(--blanco);
  padding: 0.75rem 1.25rem; z-index: 100;
}
.saltar:focus { left: 0.5rem; top: 0.5rem; }

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


/* ==========================================================================
   3. PIEZAS REUTILIZABLES
   ========================================================================== */

/* --- Botones --- */
.boton {
  display: inline-block;
  font-family: var(--f-titulos);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.9rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.boton--principal { background: var(--azul); color: var(--blanco); }
.boton--principal:hover { background: var(--azul-oscuro); }

.boton--linea { background: transparent; color: var(--grafito); border-color: var(--linea); }
.boton--linea:hover { border-color: var(--grafito); }

.boton--claro { background: var(--blanco); color: var(--grafito); }
.boton--claro:hover { background: #DFE5E9; }

.boton--exocad { background: var(--blanco); color: var(--morado-oscuro); }
.boton--exocad:hover { background: #EDE2F3; }

.boton--linea-clara { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,0.4); }
.boton--linea-clara:hover { border-color: var(--blanco); }

.boton--ancho { width: 100%; }

/* --- Enlace de sección --- */
.enlace {
  display: inline-block;
  margin-top: auto;
  padding-top: 1.4rem;
  font-family: var(--f-titulos);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--azul);
}
.enlace:hover { text-decoration: underline; }

/* --- Datos técnicos --- */
.specs { margin: 1.4rem 0 0; }
.specs__fila {
  display: flex; justify-content: space-between; gap: 1.25rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--linea);
  font-size: 0.92rem;
}
.specs__fila dt { color: var(--gris); margin: 0; flex-shrink: 0; }
.specs__fila dd { margin: 0; text-align: right; font-weight: 600; }
.specs--contacto { margin-top: 2.5rem; }
.specs--contacto dd a { color: var(--grafito); }

/* --- Marcador de fotografía pendiente ---
   Aparece donde todavía no se ha subido una foto real.
   Nunca se usa una imagen inventada en su lugar. */
.marcador {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.6rem;
  min-height: 220px; height: 100%;
  padding: 2rem 1.25rem;
  text-align: center;
  background: var(--claro);
  border: 1px dashed #B9C2C9;
}
.marcador__etiqueta {
  font-family: var(--f-titulos);
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gris);
}
.marcador__ayuda { font-size: 0.78rem; color: #8B959D; }

/* El marcador cambia de color sobre fondos oscuros */
.seccion--oscura .marcador,
.seccion--exocad .marcador {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
}
.seccion--oscura .marcador__etiqueta,
.seccion--exocad .marcador__etiqueta { color: rgba(255,255,255,0.8); }
.seccion--oscura .marcador__ayuda,
.seccion--exocad .marcador__ayuda { color: rgba(255,255,255,0.5); }


/* ==========================================================================
   4. CABECERA
   ========================================================================== */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 84px;
}
.marca__logo, .custom-logo { height: 44px; width: auto; }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav__lista { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav__lista a {
  color: var(--grafito); text-decoration: none; font-size: 0.95rem;
  white-space: nowrap;          /* impide que un enlace se parta en dos líneas */
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.nav__lista a:hover { color: var(--azul); border-bottom-color: var(--azul); }
.nav > .boton { white-space: nowrap; }

.menu-boton {
  display: none; width: 46px; height: 46px;
  background: none; border: 1px solid var(--linea); border-radius: 2px;
  cursor: pointer; position: relative;
}
.menu-boton__barra,
.menu-boton__barra::before,
.menu-boton__barra::after {
  position: absolute; left: 13px;
  width: 18px; height: 1.5px; background: var(--grafito);
  content: '';
}
.menu-boton__barra { top: 22px; }
.menu-boton__barra::before { left: 0; top: -6px; }
.menu-boton__barra::after  { left: 0; top: 6px; }


/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero { padding-block: clamp(3.5rem, 7vw, 6rem); }

.hero__rejilla {
  display: grid; grid-template-columns: 1.08fr 1fr;
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: center;
}

.hero__titular {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 700;
  max-width: 16ch;
}
.hero__entrada {
  margin: 1.5rem 0 0;
  font-size: 1.2rem; color: var(--gris);
  max-width: 44ch;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.4rem; }

.hero__imagen img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero__imagen .marcador { aspect-ratio: 4 / 3; min-height: 0; }


/* ==========================================================================
   6. FLUJO DIGITAL
   Cinco etapas conectadas. Es una secuencia real, por eso va numerada.
   ========================================================================== */
.flujo {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  counter-reset: etapa;
}
.flujo__etapa {
  counter-increment: etapa;
  padding-top: 1.75rem;
  border-top: 2px solid var(--azul);
  position: relative;
}
.flujo__etapa::before {
  content: counter(etapa, decimal-leading-zero);
  position: absolute; top: 0.6rem; left: 0;
  font-family: var(--f-titulos);
  font-size: 0.78rem; font-weight: 600;
  color: var(--azul);
  letter-spacing: 0.06em;
}
.flujo__nombre { font-size: 1.08rem; margin-top: 0.9rem; }
.flujo__texto  { margin: 0.45rem 0 0; font-size: 0.94rem; color: var(--gris); }


/* ==========================================================================
   7. EQUIPOS AMANN GIRRBACH
   Sin tarjetas flotantes ni sombras: separación por líneas.
   ========================================================================== */
.equipos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.equipo {
  display: flex; flex-direction: column;
  background: var(--blanco);
  padding: 1.75rem;
}
.equipo__foto { margin-bottom: 1.5rem; }
.equipo__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.equipo__foto .marcador { aspect-ratio: 4 / 3; min-height: 0; }

.equipo__cuerpo { display: flex; flex-direction: column; flex: 1; }
.equipo__nombre { font-size: 1.28rem; }
.equipo__texto  { margin: 0.7rem 0 0; font-size: 0.97rem; color: var(--gris); flex: 1; }

.barra-accion {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem; padding: 1.75rem;
  background: var(--azul-suave);
}
.barra-accion__texto { margin: 0; max-width: 46ch; color: var(--grafito); }


/* ==========================================================================
   8. EXOCAD
   Único lugar del sitio donde aparece el morado.
   ========================================================================== */
.exocad__rejilla {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.licencias {
  margin-top: 2.25rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.licencias__titulo { font-size: 1.05rem; }
.licencias__texto  { margin: 0.6rem 0 0; color: rgba(255,255,255,0.72); font-size: 0.98rem; }
.exocad__acciones  { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

.exocad__imagen img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.exocad__imagen .marcador { aspect-ratio: 16 / 10; min-height: 0; }


/* ==========================================================================
   9. MATERIALES
   ========================================================================== */
.materiales__rejilla {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.materiales__lista { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.materiales__lista li { padding: 1.1rem 0; border-top: 1px solid var(--linea); }
.materiales__lista h3 { font-size: 1.05rem; }
.materiales__lista p  { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--gris); }
.materiales__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

.materiales__imagen img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.materiales__imagen .marcador { aspect-ratio: 1 / 1; min-height: 0; }


/* ==========================================================================
   10. SOPORTE TÉCNICO
   ========================================================================== */
.soporte__rejilla {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.soporte__imagen img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.soporte__imagen .marcador { aspect-ratio: 4 / 3; min-height: 0; }

.soporte__lista { list-style: none; margin: 2.25rem 0 2.25rem; padding: 0; }
.soporte__lista li {
  padding: 0.7rem 0 0.7rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.97rem; color: rgba(255,255,255,0.86);
  position: relative;
}
.soporte__lista li::before {
  content: ''; position: absolute; left: 0; top: 1.35rem;
  width: 6px; height: 1px; background: var(--blanco); opacity: 0.6;
}


/* ==========================================================================
   11. GALERÍA
   ========================================================================== */
.galeria {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.galeria__celda img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.galeria__celda .marcador { aspect-ratio: 3 / 2; min-height: 0; }


/* ==========================================================================
   12. CONTACTO
   ========================================================================== */
.contacto__rejilla {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.formulario {
  background: var(--blanco);
  border: 1px solid var(--linea);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; font-weight: 600; }
.campo input, .campo textarea {
  width: 100%; font-family: inherit; font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linea); border-radius: 2px;
  background: var(--blanco); color: var(--grafito);
}
.campo input:focus, .campo textarea:focus { border-color: var(--azul); outline: none; }
.campo textarea { resize: vertical; }

/* Botón flotante de WhatsApp */
.wa-flotante {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #1FAF54; color: var(--blanco);
  text-decoration: none;
  transition: background-color 0.18s ease;
}
.wa-flotante:hover { background: #17903F; }


/* ==========================================================================
   13. PIE
   ========================================================================== */
.pie { background: var(--oscuro); color: rgba(255,255,255,0.68); padding-top: 4.5rem; }
.pie__rejilla {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem; padding-bottom: 3rem;
}
.pie__logo { height: 38px; width: auto; }
.pie__nota { margin: 1.1rem 0 0; font-size: 0.93rem; max-width: 30ch; }
.pie__columna h3 { font-size: 0.95rem; color: var(--blanco); margin-bottom: 0.9rem; }
.pie__columna ul { list-style: none; margin: 0; padding: 0; }
.pie__columna li { margin-bottom: 0.5rem; }
.pie__columna a { color: rgba(255,255,255,0.68); text-decoration: none; font-size: 0.94rem; }
.pie__columna a:hover { color: var(--blanco); }
.pie__legal {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}
.pie__legal p { margin: 0; font-size: 0.87rem; }


/* ==========================================================================
   14. PÁGINAS INTERIORES
   ========================================================================== */
.pagina { max-width: 46rem; }
.pagina__contenido { margin-top: 2rem; }
.pagina__contenido h2 { font-size: 1.6rem; margin-top: 2.5rem; }
.pagina__contenido h3 { font-size: 1.2rem; margin-top: 2rem; }
.pagina__contenido p  { margin: 1rem 0; }
.pagina__contenido ul, .pagina__contenido ol { margin: 1rem 0; padding-left: 1.4rem; }
.pagina__contenido img { margin: 2rem 0; }
.pagina__contenido blockquote {
  margin: 2rem 0; padding-left: 1.5rem;
  border-left: 2px solid var(--azul); color: var(--gris);
}
.lista-entradas { margin-top: 2.5rem; }
.entrada { padding: 1.75rem 0; border-top: 1px solid var(--linea); }
.entrada a { text-decoration: none; }
.entrada a:hover { text-decoration: underline; }


/* ==========================================================================
   15. ANIMACIONES
   Aparición muy sutil al hacer scroll. Nada llamativo.
   ========================================================================== */
[data-animar] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-animar].visible > * { opacity: 1; transform: none; }

/* Las etapas del flujo aparecen una tras otra, muy seguidas */
[data-animar].visible > *:nth-child(2) { transition-delay: 0.07s; }
[data-animar].visible > *:nth-child(3) { transition-delay: 0.14s; }
[data-animar].visible > *:nth-child(4) { transition-delay: 0.21s; }
[data-animar].visible > *:nth-child(5) { transition-delay: 0.28s; }
[data-animar].visible > *:nth-child(6) { transition-delay: 0.35s; }

/* Si el JavaScript no carga, todo se ve igual */
.no-js [data-animar] > * { opacity: 1; transform: none; }


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

/* --- Portátil --- */
@media (max-width: 1080px) {
  .flujo { grid-template-columns: repeat(3, 1fr); gap: 1.75rem 1.5rem; }
  .nav__lista { gap: 1.1rem; }
  .nav__lista a { font-size: 0.9rem; }
}

/* --- Tablet --- */
@media (max-width: 900px) {
  .hero__rejilla,
  .exocad__rejilla,
  .materiales__rejilla,
  .soporte__rejilla,
  .contacto__rejilla { grid-template-columns: 1fr; }

  .hero__titular { max-width: 18ch; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }

  /* En tablet la foto de soporte va después del texto */
  .soporte__imagen { order: 2; }
}

/* --- Celular --- */
@media (max-width: 720px) {
  .menu-boton { display: block; }

  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    padding: 1rem var(--lado) 1.5rem;
    max-height: 80vh; overflow-y: auto;
  }
  .nav.esta-abierto { display: flex; }
  .nav__lista { flex-direction: column; gap: 0; }
  .nav__lista a {
    display: block; padding: 0.85rem 0;
    border-bottom: 1px solid var(--linea);
  }
  .nav__lista a:hover { border-bottom-color: var(--linea); }
  .nav .boton { margin-top: 1rem; text-align: center; }

  .flujo   { grid-template-columns: 1fr; gap: 1.5rem; }
  .galeria { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr; }

  .barra-accion { flex-direction: column; align-items: flex-start; }
  .wa-flotante { right: 1rem; bottom: 1rem; }
}

/* --- Respeta a quien pidió menos animación --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-animar] > * { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
}