:root{
    --negro: #17181a;
    --negro-2: #232427;
    --rojo: #d62b26;
    --rojo-osc: #a91f1c;
    --crema: #f2ede4;
    --crema-2: #e7e0d2;
    --gris-linea: #4a4b4e;
    --ink-muted: #57595e;
    --display: 'Paytone One', sans-serif;
    --texto: 'Archivo', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --header-height: 86px;
    --sand: #e7e0d2;
    --white: #ffffff;
    --line: rgba(23, 24, 26, 0.16);
    --line-dark: rgba(255, 255, 255, 0.18);
    --shadow-sm: 0 10px 30px rgba(23, 24, 26, 0.08);
    --shadow-lg: 0 24px 70px rgba(23, 24, 26, 0.18);

      --font-display: "Paytone One", sans-serif;
    --font-body: "Archivo", sans-serif;
    --font-mono: "JetBrains Mono", monospace;

    --container: 1180px;
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --header-height: 86px;

    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4.5rem;
    --space-8: 7rem;
  }
  
  *{margin:0;padding:0;box-sizing:border-box;}
  
  html{
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--header-height) + 20px);
  }
  body{
    min-width: 320px;
    background:var(--crema);
    color:var(--negro);
    font-family:var(--texto);
    font-size: 16px;
    line-height:1.65;
    overflow-x:hidden;
    text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
  }
  a{color:inherit;text-decoration:none;}
  :where(img, svg){
    display:block;
    max-width:100%;
  }
  strong {
  color: inherit;
  font-weight: 700;
}
  :where(button, input, textarea, select){
    font:inherit;
  }
  :where(h1, h2, h3, h4, h5, h6){
    text-wrap:balance;
  }
  button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 4px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3.4rem, 8vw, 6.8rem);
}

h2 {
  font-size: clamp(2.25rem, 5vw, 4.1rem);
}

h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

h4 {
  font-size: 1.25rem;
}

/* Todo párrafo nuevo toma tipografía, color y espaciado sin clases extra. */
p {
  margin: 0;
  max-width: 68ch;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.2vw, 1.075rem);
}

p + p {
  margin-top: 1rem;
}

strong {
  color: inherit;
  font-weight: 700;
}

ul,
ol {
  margin: 0;
  padding-left: 1.25rem;
}

li + li {
  margin-top: 0.55rem;
}

address {
  color: var(--ink-muted);
  font-style: normal;
}
  :where(p){
    text-wrap:pretty;
  }
/* ---------- ruta punteada, elemento firma ---------- */
  .ruta{
    position:absolute;
    pointer-events:none;
    z-index:1;
  }
  .ruta path{
    fill:none;
    stroke:var(--negro);
    stroke-width:2.5;
    stroke-dasharray:1 14;
    stroke-linecap:round;
    opacity:0.35;
  }
  .ruta.blanca path{stroke:var(--crema);opacity:0.5;}
  .ruta.roja path{stroke:var(--rojo);opacity:0.55;}

  .punto-destino{
    position:absolute;
    width:14px;height:14px;
    border:2.5px solid var(--negro);
    border-radius:2px;
    transform:rotate(45deg);
    background:var(--crema);
  }
  ::selection {
  background: var(--rojo);
  color: var(--white);
}
  /* ---------- panel nuevo ---------- */
 
/* =====================================================
   HERO EN DOS COLUMNAS
   ===================================================== */

.hero-grid {
  position: relative;
  z-index: 5;

  width: 100%;
  max-width: 1180px;
  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(300px, 0.65fr);

  gap: clamp(45px, 10vw, 90px);
  align-items: center;
}
 .container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}
/*
 * hero-inner antes funcionaba como contenedor general.
 * Ahora es una columna dentro del grid.
 */
.hero-grid .hero-inner {
  width: auto;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =====================================================
   PANEL LATERAL
   ===================================================== */

.hero-panel {
  position: relative;
  z-index: 5;

  padding: clamp(26px, 3vw, 35px);

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 5px solid var(--rojo);
  border-radius: 10px;

  background: rgba(23, 24, 26, 0.82);

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-panel-kicker {
  margin: 0;

  color: var(--crema);
  font-family: var(--display);
  font-size: 23px;
  line-height: 1.35;
  opacity: 1;
}

.check-list {
  display: grid;
  gap: 14px;

  margin: 24px 0 0;
  padding: 0;

  list-style: none;
}

.check-list li {
  position: relative;

  margin: 0;
  padding-left: 28px;

  color: rgba(242, 237, 228, 0.9);
  font-size: 14px;
  font-weight: 600;
}

.check-list li::before {
  content: "";

  position: absolute;
  top: 7px;
  left: 2px;

  width: 9px;
  height: 9px;

  transform: rotate(45deg);

  background: var(--rojo);
}

.hero-panel-note {
  margin: 26px 0 0;
  padding-top: 19px;

  border-top: 1px solid rgba(255, 255, 255, 0.15);

  color: rgba(242, 237, 228, 0.62);
  font-size: 13px;
  line-height: 1.65;
  opacity: 1;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 950px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .hero-panel {
    width: 100%;
    max-width: 620px;
  }
}

@media (max-width: 640px) {
  .eyebrow {
      font-size: 11px;
      line-height: 1.4;
      align-items: flex-start;
    }
    .eyebrow::before {
      margin-top: 6px;
      flex-shrink: 0;
    }
    .hero {
      background-position: 75% center !important; 
    }

.hero-actions {
      display: flex;
      flex-wrap: wrap; 
      align-items: center; 
      gap: 12px;
      width: 100%;
    }
    
    .hero-actions .btn-primario {
      order: 1;
      flex: 1 1 0%; 
      justify-content: center;
      margin: 0;
      /* --- LA SOLUCIÓN AQUÍ --- */
      padding: 14px 12px; /* Reducimos el relleno lateral gigante del escritorio */
      white-space: nowrap; /* Obliga al texto a quedarse en una sola línea sí o sí */
      font-size: 13.5px; /* Lo achicamos un pelo para que el ícono respire mejor */
    }
    
    .hero-actions .redes-hero {
      order: 2;
      flex: 0 0 auto; 
      margin: 0;
    }
    
    .hero-actions .btn-secundario {
      order: 3;
      flex: 0 0 100%; 
      justify-content: center;
      margin: 0;
    }
}
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 3.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-facts div {
  display: grid;
  gap: 0.25rem;
}

.hero-facts dt {
  color: rgba(242, 237, 228, 0.6);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-facts dd {
  margin: 0;
  color: var(--crema);
  font-weight: 700;
}
  /* ---------- fin panel nuevo  ---------- */
  /* ---------- header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;
    z-index:100;
    background:rgb(23,24,26);
    backdrop-filter:blur(6px);
    border-bottom:6px solid var(--rojo);
  }
  .header-inner{
    max-width:1180px;
    min-height:var(--header-height);
    margin:0 auto;
    padding:8px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }
  .brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--crema);
}
.brand img {
  width: 72px;
  height: 58px;
  object-fit: contain;
}

.brand-copy {
  display: grid;
  gap: 0.12rem;
  margin-left: -0.25rem;
}

.brand-copy strong {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.brand-copy small {
  color: rgba(242, 237, 228, 0.68);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.empresa-logo {
  display: grid;
  place-items: center; /* Centra vertical y horizontalmente todo lo que esté dentro */
  position: relative;
  width: fit-content; /* Se adapta al tamaño de los elementos */
}

/* Forzamos a que tanto el texto como el logo ocupen el mismo espacio exacto */
.logo-title, 
.logo {
  grid-area: 1 / 1; 
}

/* Estilos del texto (Adelante) */
.logo-title {
  font-family: var(--display), sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1px;
  margin: 0;
  white-space: nowrap; /* Evita que el texto se parta en dos líneas */
  color: var(--crema, #ffffff) !important; 
  z-index: 2; 
  /* Borde ultra definido para que resalte sobre el logo de atrás */
  -webkit-text-stroke: .5px black !important;

}

/* Estilos del contenedor de la imagen (Atrás) */
.logo {
  z-index: 1; /* Capa inferior, queda por detrás del texto */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1; /* Opcional: por si quieres que el logo sea un poco transparente */
}

/* Control del tamaño de tu imagen de fondo */
.logo img {
  height: 90px; /* Ajusta este tamaño para que enmarque bien a tu texto */
  width:110px;
  display: block;
}
  nav{display:flex;gap:32px;}
  nav a{
    color:var(--crema-2);
    font-size:14px;
    font-weight:600;
    letter-spacing:0.3px;
    text-transform:uppercase;
    transition:color .2s;
  }
  nav a:hover{color:var(--rojo);}
  .header-cta{
    background:var(--rojo);
    color:var(--crema);
    padding:10px 20px;
    font-weight:700;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    border-radius:2px;
    transition:background .2s, transform .2s;
  }
  .header-cta:hover{background:var(--rojo-osc);transform:translateY(-1px);}
  .note {
    padding-left: 1rem;
    border-left: 3px solid var(--rojo);
    font-size: 0.93rem;
  }
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--rojo);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }
  /* ---------- hero ---------- */
  .hero {
    position: relative;

    background:
      linear-gradient(
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0.7)
      ),
      url("../img/recepcion.avif") center center / cover no-repeat;

    background-attachment: scroll;

    color: var(--crema);
    padding: 170px 28px 120px;
    overflow: hidden;
}
  .hero-inner{
    max-width:1180px;margin:0 auto;
    position:relative;z-index:5;
  }

.hero-panel-kicker {
  color: var(--crema);
  font-family: var(--font-display);
  font-size: 1.45rem;
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}
.flow > * + * {
  margin-top: 1.25rem;
}

.flow-lg > * + * {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.section-heading > p {
  justify-self: end;
  padding-bottom: 0.25rem;
}
.check-list {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  margin: 0;
  padding-left: 1.7rem;
  color: rgba(242, 237, 228, 0.9);
  font-weight: 600;
}
/* service */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--negro);
  border-left: 2px solid var(--negro);
}
.service-card {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  background: var(--crema);
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}

.service-card:hover {
  z-index: 1;
  transform: translateY(-4px);
  background: var(--negro);
  color: var(--crema);
  box-shadow: var(--shadow-lg);
}

.service-number {
  margin-bottom: 2.1rem;
  color: var(--rojo);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
}

.service-card p {
  margin-top: 0.85rem;
  color: var(--ink-muted);
  font-size: 0.96rem;
}

.service-card ul {
  display: grid;
  gap: 0.4rem;
  margin-top: 1.4rem;
  padding: 0;
  list-style: none;
}

.service-card li {
  position: relative;
  margin: 0;
  padding-left: 1rem;
  color: var(--ink-muted);
  font-size: 0.87rem;
}

.service-card li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--rojo);
}

.service-card:hover p,
.service-card:hover li {
  color: rgba(242, 237, 228, 0.72);
}

.service-card--accent {
  background: var(--rojo);
  color: var(--white);
}

.service-card--accent .service-number,
.service-card--accent p {
  color: rgba(255, 255, 255, 0.78);
}

.service-card--accent .text-link {
  margin-top: auto;
  padding-top: 2rem;
  color: var(--white);
}
.check-list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.65rem;
  height: 0.65rem;
  transform: rotate(45deg);
  background: var(--rojo);
}

.hero-panel-note {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(242, 237, 228, 0.62);
  font-size: 0.92rem;
}
  .eyebrow{
    font-family:var(--mono);
    color:var(--rojo);
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    display:flex;align-items:center;gap:10px;
    margin-bottom:22px;
  }
  .eyebrow::before{
    content:'';
    width:26px;height:2px;
    background:var(--rojo);
    display:inline-block;
  }
  .hero h1{
    font-family:var(--display);
    font-size: clamp(3.4rem, 8vw, 6.8rem);
    line-height:0.98;
    letter-spacing:-1px;
    max-width:900px;
  }
  .hero h1 .rojo{color:var(--rojo);}
  .hero p.lead{
    margin-top:26px;
    max-width:520px;
    font-size:18px;
    color:var(--crema-2);
    font-weight:400;
  }
  .hero-actions{
    margin-top:40px;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:16px;
    flex-wrap: wrap;
  }

  .btn-primario{
    background:var(--rojo);
    color:var(--crema);
    padding:16px 30px;
    font-weight:700;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    border-radius:2px;
    display:inline-flex;align-items:center;gap:10px;
    transition:background .2s, transform .2s;
  }
  .btn-primario:hover{background:var(--rojo-osc);}
  .btn-secundario{
    border:2px solid var(--crema-2);
    color:var(--crema);
    padding:14px 28px;
    font-weight:700;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    border-radius:2px;
    transition:border-color .2s, background .2s;
  }
  .btn-secundario:hover{border-color:var(--rojo);background:rgba(214,43,38,0.08);}

  .hero-datos{
    margin-top:70px;
    display:flex;gap:48px;
    flex-wrap:wrap;
    border-top:1px solid var(--gris-linea);
    padding-top:28px;
  }
  .dato{font-family:var(--mono);}
  .dato .num{
    font-family:var(--display);
    font-size:30px;
    color:var(--rojo);
    display:block;
  }
  .dato .lbl{
    font-size:12px;
    color:var(--crema-2);
    text-transform:uppercase;
    letter-spacing:1px;
  }

  /* moto marker decorativo */
  .marker-hero{
    position:absolute;
    right:6%;
    top:52%;
    width:220px;height:220px;
    border:2px solid var(--gris-linea);
    border-radius:50%;
    z-index:2;
    opacity:0.5;
  }
  .marker-hero::after{
    content:'';
    position:absolute;
    inset:40px;
    border:2px dashed var(--rojo);
    border-radius:50%;
    opacity:0.6;
  }
  .sello-hero{
    position:absolute;
    right:4%;
    top:8%;
    width:150px;
    opacity:0.9;
    z-index:3;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,0.5));
  }
  @media(max-width:900px){.sello-hero{display:none;}}

  /* ---------- franja de barrio ---------- */
  .franja {
  overflow: hidden;
  background: var(--rojo);
  color: var(--crema);
  padding: 14px 0;
  border-bottom: 3px solid var(--negro);
  white-space: nowrap;
}

.franja-track {
  display: flex;
  width: max-content;
  gap: 40px;

  animation: desplazar 26s linear infinite;
  will-change: transform;
}

.franja-grupo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 40px;

  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@keyframes desplazar {
  from {
    transform: translateX(0);
  }

  to {
    /*
     * -50% mueve la mitad del track.
     * Los 20px compensan la mitad del gap de 40px
     * que existe entre ambos grupos.
     */
    transform: translateX(calc(-50% - 20px));
  }
}

  /* ---------- secciones generales ---------- */
  section{
    position:relative;
    padding:110px 28px;
    scroll-margin-top: 10px;
  }
  .contenedor{max-width:1180px;margin:0 auto;position:relative;z-index:5;}

  .titulo-seccion{
    font-family:var(--mono);
    color:var(--rojo);
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:16px;
    display:flex;align-items:center;gap:10px;
  }
  .titulo-seccion::before{
    content:'';
    width:26px;height:2px;
    background:var(--rojo);
    display:inline-block;
  }
  h2.encabezado{
    font-family:var(--display);
    font-size:clamp(32px, 4.2vw, 52px);
    line-height:1.02;
    max-width:700px;
    letter-spacing:-0.5px;
  }
  /* Títulos y textos automáticos para nuevas secciones sin clases específicas. */
  section > .contenedor > h2:not([class]){
    font-family:var(--display);
    font-size:clamp(32px, 4.2vw, 52px);
    line-height:1.02;
    max-width:700px;
    letter-spacing:-0.5px;
    margin-bottom:20px;
  }
  section > .contenedor > h3:not([class]){
    font-family:var(--display);
    font-size:clamp(22px, 2.5vw, 30px);
    line-height:1.15;
    margin-bottom:12px;
  }
  section > .contenedor > p:not([class]){
    max-width:760px;
    font-size:17px;
    line-height:1.65;
    margin-top:20px;
  }
  section > .contenedor > ul:not([class]),
  section > .contenedor > ol:not([class]){
    max-width:760px;
    margin:20px 0 0 22px;
  }
  section > .contenedor > :where(ul, ol):not([class]) li + li{
    margin-top:8px;
  }
  /* ---------- estilos base de texto ---------- */
  p {
    font-size: 16px;          /* Tamaño de lectura estándar */
    margin-bottom: 20px;      /* Espacio entre un párrafo y el siguiente */
    color: inherit;           /* Hereda el color de cada sección */
    opacity: 0.9;             /* Un sutil gris para que contraste con los títulos negros */
  }
  
  /* Esto evita que el último párrafo sume espacio extra al final de su contenedor */
  p:last-child {
    margin-bottom: 0;
  }
/* ---------- nosotros ---------- */
  .nosotros {
    background: #f9f9f9;
    text-align: center;
    /* El padding (110px 28px) ya lo hereda de la regla general 'section' */
  }
  /* Centramos la rayita roja del título para que coincida con el texto */
  .nosotros .titulo-seccion {
    justify-content: center;
  }
  .nosotros .encabezado {
    max-width: 800px;
    margin: 0 auto 20px auto;
  }
  .bajada-nosotros {
    max-width: 700px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.6;
  }

  
  /* ---------- servicios ---------- */
  .servicios{background:var(--crema);}
  .grid-servicios{
    margin-top:56px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:0;
    border-top:2px solid var(--negro);
    border-left:2px solid var(--negro);
  }
  .tarjeta-servicio{
    border-right:2px solid var(--negro);
    border-bottom:2px solid var(--negro);
    padding:34px 26px;
    background:var(--crema);
    transition:background .25s;
    position:relative;
  }
  .tarjeta-servicio:hover{background:var(--negro);color:var(--crema);}
  .tarjeta-servicio:hover .num-servicio{color:var(--rojo);}
  .num-servicio{
    font-family:var(--mono);
    font-size:13px;
    color:var(--gris-linea);
    display:block;
    margin-bottom:22px;
  }
  .tarjeta-servicio h3{
    font-family:var(--display);
    font-size:21px;
    letter-spacing:-0.3px;
    margin-bottom:10px;
  }
  .tarjeta-servicio p{
    font-size:14.5px;
    opacity:0.75;
  }
  .narrow {
  max-width: 850px;
}

.center {
  margin-inline: auto;
  text-align: center;
}

.center p {
  margin-inline: auto;
}
.lead-copy {
  max-width: 60ch;
  color: inherit;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55;
}

  /* ---------- que necesitas / tramites ---------- */
  .tramites{
    background:var(--negro);
    color:var(--crema);
  }
  .tramites .titulo-seccion{color:var(--rojo);}
  .split{
    margin-top:56px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
  }
  @media(max-width:820px){.split{grid-template-columns:1fr;gap:48px;}}
  .split h4{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--crema-2);
    margin-bottom:22px;
    padding-bottom:14px;
    border-bottom:1px solid var(--gris-linea);
  }
  .lista-tramites{list-style:none;}
  .lista-tramites li{
    padding:16px 0;
    border-bottom:1px solid var(--gris-linea);
    font-size:17px;
    display:flex;align-items:center;gap:14px;
  }
  .lista-tramites li:last-child{border-bottom:none;}
  .lista-tramites .marca{
    width:8px;height:8px;
    background:var(--rojo);
    border-radius:1px;
    transform:rotate(45deg);
    flex-shrink:0;
  }

  /* ---------- zona / mapa esquemático ---------- */
.zona{background:var(--crema-2);}
  .zona-grid{
    margin-top:56px;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
  }
  @media(max-width:900px){.zona-grid{grid-template-columns:1fr;}}
  .zona-texto p{font-size:16px;opacity:0.8;max-width:460px;margin-bottom:28px;}
  .zona-lista{display:flex;flex-wrap:wrap;gap:10px;}
  .chip{
    border:1.5px solid var(--negro);
    padding:8px 16px;
    font-family:var(--mono);
    font-size:13px;
    border-radius:2px;
    background:var(--crema);
  }
  .mapa-real{
    position:relative;
    background: var(--negro);
    border-radius:4px;
    overflow:hidden;
    aspect-ratio:1/1;
  }
/* cobertura */
.coverage-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}

.map-card {
  overflow: hidden;
  border: 2px solid var(--negro);
  border-radius: var(--radius-md);
  background: var(--crema);
  box-shadow: var(--shadow-sm);
}

.map-card-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem;
  border-bottom: 2px solid var(--negro);
}

.map-card-header .eyebrow {
  font-size: 0.66rem;
}

.map-card-header h3 {
  margin-top: 0.45rem;
  font-size: 1.35rem;
}

.map-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--negro);
}

.map-frame iframe {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  border: 0;

}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.tag-list span {
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(23, 24, 26, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
}
/* cobertura */

/* CTA */
.contact-cta {
  background: var(--rojo);
  color: var(--white);
}

.contact-cta .eyebrow,
.contact-cta p {
  color: rgba(255, 255, 255, 0.82);
}

.contact-cta .eyebrow::before {
  background: var(--white);
}

.contact-cta-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}

.contact-cta-inner h2 {
  max-width: 13ch;
}

  /* ---------- contacto / cta final ---------- */
  .cta-final{
    background:var(--rojo);
    color:var(--crema);
    text-align:center;
    padding:120px 28px;
  }
  .cta-final h2{
    font-family:var(--display);
    font-size:clamp(30px,5vw,58px);
    line-height:1.05;
    max-width:780px;
    margin:0 auto 30px;
  }
  .cta-final .btn-primario{
    background:var(--negro);
    display:inline-flex;margin-top:10px;
  }
  .cta-final .btn-primario:hover{background:#000;}

  .franja-contacto{
    background:var(--crema);
    border-top:3px solid var(--negro);
    padding:70px 28px 0;
  }
  .grid-contacto {
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 60px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.bloque-contacto {
  padding: 0 28px;
  border-right: 1px solid rgba(23, 24, 26, 0.18);
}

.bloque-contacto:first-child {
  padding-left: 0;
}

.bloque-contacto:last-child {
  padding-right: 0;
  border-right: none;
}
.bloque-contacto h2 {
  margin-bottom: 0.9rem;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .grid-contacto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }

  .bloque-contacto {
    padding: 0 24px;
  }

  .bloque-contacto:nth-child(odd) {
    padding-left: 0;
    border-right: 1px solid rgba(23, 24, 26, 0.18);
  }

  .bloque-contacto:nth-child(even) {
    padding-right: 0;
    border-right: none;
  }
}

@media (max-width: 600px) {
  .grid-contacto {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .bloque-contacto,
  .bloque-contacto:nth-child(odd),
  .bloque-contacto:nth-child(even) {
    padding: 22px 0;
    border-right: none;
    border-bottom: 1px solid rgba(23, 24, 26, 0.18);
  }

  .bloque-contacto:first-child {
    padding-top: 0;
  }

  .bloque-contacto:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}
  footer{
    background:var(--negro);
    color:var(--crema-2);
    padding:26px 28px;
    text-align:center;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.5px;
  }
  footer .rojo{color:var(--rojo);}

  /*Flotantes index_2 */
/* ---------- Redes integradas en el Hero ---------- */

 .header-cta.wsp-cta {
    background: var(--rojo-osc);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .header-cta.wsp-cta:hover {
    background: #20BA5A;
  }
  .header-cta.wsp-cta svg {
    width: 16px;
    height: 16px;
  }
  .redes-hero {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .icono-red {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: transform 0.2s, filter 0.2s;
  }
  .icono-red:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
  }
  .icono-red svg {
    width: 26px;
    height: 26px;
  }
  /* Colores oficiales */
  .icono-red.wsp {
    background: #25D366; 
  }
  .icono-red.ig {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }

  /*Flotantes index_2 */
.flotantes{
    position:fixed;
    right:22px;
    top:80%; 
    transform:translateY(-50%); 
    z-index:200;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .flotante{
    width:56px;height:56px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.35);
    transition:transform .2s, filter .2s;
    color:var(--crema);
  }
  .flotante:hover{
    transform:scale(1.1);
    filter: brightness(1.1);
  }
  .flotante svg{width:26px;height:26px;}
  .flotante.wsp{
    background: #25D366; 
  }
  .flotante.ig{
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }



@media(max-width:900px){
  .video-cuadro{display:none;}
}
  @media(max-width:640px){
    nav{display:none;}
    .header-inner{padding:14px 20px;}
    .hero{padding:140px 20px 90px;}
    section{padding:80px 20px;}
    .marker-hero{display:none;}
    .hero-datos{gap:30px;}
  }

  @media (prefers-reduced-motion: reduce){
    .franja-track{animation:none;}
    html{scroll-behavior:auto;}
  }

.intro{
  position:fixed; inset:0; z-index:9999;
  background: var(--negro);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
 
.speed-lines{ position:absolute; inset:0; pointer-events:none; }
.speed-line{
  position:absolute; height:2px; width:46%;
  background: linear-gradient(90deg, transparent, var(--rojo) 60%, transparent);
  left:-50%;
  transform: skewX(-20deg);
  opacity:0;
}
.speed-line.l1{ top:32%; animation: sweep 900ms cubic-bezier(.7,0,.2,1) 80ms forwards; }
.speed-line.l2{ top:52%; width:64%; animation: sweep 900ms cubic-bezier(.7,0,.2,1) 200ms forwards; }
.speed-line.l3{ top:68%; width:34%; animation: sweep 900ms cubic-bezier(.7,0,.2,1) 340ms forwards; }
 
@keyframes sweep{
  0%{ transform: translateX(0) skewX(-20deg); opacity:0; }
  12%{ opacity:1; }
  75%{ opacity:.6; }
  100%{ transform: translateX(260%) skewX(-20deg); opacity:0; }
}
 
.intro-core{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
 
.radar{
  position:relative; width:190px; height:190px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 28px;
}
.radar-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--rojo);
  opacity:0; transform:scale(.5);
  animation: ring 1.9s cubic-bezier(.2,.7,.3,1) infinite;
}
.radar-ring.r2{ animation-delay:.65s; }
@keyframes ring{
  0%{ opacity:.55; transform:scale(.45); }
  80%{ opacity:0; transform:scale(1.55); }
  100%{ opacity:0; transform:scale(1.6); }
}
 
.intro .logo-wrap{
  width:112px; height:112px;
  opacity:0;
  transform: scale(.55) rotate(-38deg);
  animation:
    logoIn 700ms cubic-bezier(.2,.8,.2,1) 260ms forwards,
    logoSeek 900ms ease-in-out 960ms 1;
}
.intro .logo-wrap img{
  width:100%; height:100%; display:block; padding:0; border-radius:0;
  filter: drop-shadow(0 0 18px rgba(214,43,38,.35));
}
@keyframes logoIn{
  0%{ opacity:0; transform: scale(.55) rotate(-38deg); }
  100%{ opacity:1; transform: scale(1) rotate(0deg); }
}
@keyframes logoSeek{
  0%{ transform: rotate(0deg); }
  22%{ transform: rotate(9deg); }
  48%{ transform: rotate(-7deg); }
  72%{ transform: rotate(4deg); }
  100%{ transform: rotate(0deg); }
}
 
.intro .wordmark{
  font-family: var(--display); font-weight:400;
  font-size: clamp(30px,5.5vw,44px);
  letter-spacing:.05em;
  color: var(--crema);
  margin:0 0 10px;
  opacity:0;
  transform: translateY(10px);
  animation: fadeUp 560ms ease 900ms forwards;
}
.intro .tagline{
  font-family: var(--mono); font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color: var(--rojo);
  opacity:0; transform: translateY(8px);
  animation: fadeUp 560ms ease 1040ms forwards;
  margin:0 0 30px;
}
@keyframes fadeUp{
  to{ opacity:1; transform:none; }
}
 
.intro .loader{
  width:300px;
  opacity:0;
  animation: fadeUp 500ms ease 1180ms forwards;
}
.intro .loader-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color: var(--crema-2); margin-bottom:8px; text-transform:uppercase;
}
#status-text{ color: var(--crema-2); }
#pct{ font-family: var(--mono); color: var(--rojo); font-weight:600; }
.intro .track{
  height:2px; width:100%; background: var(--negro-2);
  border-radius:2px; overflow:hidden; position:relative;
}
.intro .fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--rojo-osc), var(--rojo));
}
 
.intro-skip{
  position:fixed; right:22px; bottom:22px; z-index:10001;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color: var(--crema-2); background:transparent; border:1px solid var(--gris-linea);
  padding:9px 14px; border-radius:2px; cursor:pointer;
  opacity:.75; transition: opacity .2s, border-color .2s;
}
.intro-skip:hover{ opacity:1; border-color: var(--rojo); color:var(--crema); }
 
/* franja que "cruza" y revela el sitio */
.wipe{
  position:fixed; inset:0; z-index:10000;
  pointer-events:none;
}
.wipe-panel{
  position:absolute; top:-10%; height:120%; width:60%;
  background: var(--rojo);
  left:-65%;
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0% 100%);
}
.wipe-panel.edge{
  background: var(--crema);
  width:6%;
}
 
.intro.leaving .intro-core,
.intro.leaving .speed-lines{
  animation: coreOut 420ms ease forwards;
}
@keyframes coreOut{
  to{ opacity:0; transform: scale(.92); }
}
 
.wipe.run .wipe-panel{
  animation: wipeMove 620ms cubic-bezier(.6,0,.15,1) forwards;
}
.wipe.run .wipe-panel.edge{
  animation: wipeMoveEdge 620ms cubic-bezier(.6,0,.15,1) forwards;
}
@keyframes wipeMove{
  0%{ left:-65%; }
  100%{ left:105%; }
}
@keyframes wipeMoveEdge{
  0%{ left:-71%; }
  100%{ left:99%; }
}
 

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.9rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--small {
  min-height: 42px;
  padding: 0.7rem 1rem;
  font-size: 0.76rem;
}

.button--primary {
  background: var(--rojo);
  color: var(--white);
}

.button--primary:hover {
  background: var(--rojo-osc);
}

.button--outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
}

.button--outline:hover {
  border-color: var(--rojo);
  background: rgba(214, 43, 38, 0.12);
}

.button--ghost {
  border-color: var(--line-dark);
  color: var(--crema);
}

.button--ghost:hover {
  border-color: var(--crema);
}

.button--dark {
  background: var(--negro);
  color: var(--crema);
}

.button--dark:hover {
  background: #000;
}

.button--outline-light {
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--white);
}

.button--outline-light:hover {
  background: var(--white);
  color: var(--rojo);
}
.intro.hidden{ display:none; }
 
@media (prefers-reduced-motion: reduce){
  .speed-line, .radar-ring, .intro .logo-wrap, .intro .wordmark, .intro .tagline, .intro .loader{
    animation: none !important; opacity:1 !important; transform:none !important;
  }
}
 
@media (max-width:520px){
  .radar{ width:140px; height:140px; }
  .intro .logo-wrap{ width:82px; height:82px; }
  .intro .loader{ width:230px; }
}

.mapa-real-bloque{
  display:flex;
  flex-direction:column;
  gap:16px;
  height:100%;
}
.mapa-real-bloque h4{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gris-linea);
}
.mapa-real-bloque .mapa-real{
  flex:1;
}
.mapa-real iframe{
  position:absolute;
  top:-10%; left:-10%;
  width:120%; height:120%;
  border:0;
  filter: invert(94%) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.7);
}
 
 .site-footer {
  padding: 24px 28px;
  background: var(--negro);
  color: var(--crema-2);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-inner p {
  margin: 0;
  color: rgba(242, 237, 228, 0.68);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.4px;
  opacity: 1;
}

.footer-inner strong {
  color: var(--crema);
  font-weight: 700;
}

@media (max-width: 700px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
@media(max-width:820px){
  .mapa-real{ aspect-ratio:4/3; }
}@media (max-width: 1020px) {
.hero-grid,
  .business-grid,
  .coverage-grid {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    max-width: 620px;
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-grid > div:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  :root {
    --header-height: 74px;
  }

  .container {
    width: min(calc(100% - 32px), var(--container));
  }

  .brand img {
    width: 58px;
    height: 48px;
  }

  .brand-copy small {
    display: none;
  }
  /* Achicamos un poco el botón para que entre bien en el celular */
  .header-cta {
    padding: 8px 14px;
    font-size: 11px;
  }

  .hero {
    min-height: auto;
  }

  .hero h1 {
    max-width: 11ch;
  }

  .hero-facts {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .section-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .section-heading > p {
    justify-self: start;
  }
  .service-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    min-height: auto;
  }
  .contact-cta-inner,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .map-card-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .button,
  .button-group {
    width: 100%;
  }
  .button-group {
    align-items: stretch;
  }
  .floating-actions {
    right: 14px;
    bottom: 14px;
  }

  .floating-button {
    width: 48px;
    height: 48px;
  }

  .radar {
    width: 140px;
    height: 140px;
  }

  .intro .logo-wrap {
    width: 82px;
    height: 82px;
  }

  .intro .loader {
    width: 230px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ticker-track {
    animation: none;
  }

  .speed-line,
  .radar-ring,
  .intro .logo-wrap,
  .intro .wordmark,
  .intro .tagline,
  .intro .loader {
    opacity: 1 !important;
    transform: none !important;
  }
}