/* ============================================================
   PRICO IMPORT EXPORT — Hoja de estilos principal
   ------------------------------------------------------------
   Orden del archivo:
     01. Variables y base
     02. Utilidades
     03. Botones
     04. Header y navegación
     05. Hero
     06. Franja de indicadores
     07. Secciones genéricas
     08. Nosotros
     09. Marcas
     10. Contacto y formulario
     11. Modal de acceso
     12. Footer
     13. Animaciones de aparición
     14. Media queries (480 / 768 / 1024 / 1440)
   ------------------------------------------------------------
   Escrito mobile-first: los estilos base son para celular y las
   media queries van AGREGANDO complejidad hacia arriba.
   ============================================================ */


/* ============================================================
   01. VARIABLES Y BASE
   ============================================================ */
:root{
  /* Paleta extraída del logo PRICO */
  --marron:#2E2724;        /* fondo oscuro institucional */
  --marron-claro:#3B322E;  /* superficies sobre el marrón */
  --verde:#00A651;         /* institucional — apoyo */
  --naranja:#EE7203;       /* acento — SOLO para acción */
  --azul:#1D9BD7;          /* apoyo */
  --blanco:#FFFFFF;
  --claro:#F5F3F1;

  --texto-oscuro:#2E2724;
  --texto-suave:#6B615C;
  --texto-claro:#D8D2CE;
  --linea:#E3DEDA;

  --header-h:84px;
  --radio:14px;
  --radio-lg:22px;
  --ancho:1240px;
  --fuente:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --sombra:0 10px 30px rgba(46,39,36,.08);
  --sombra-fuerte:0 18px 44px rgba(46,39,36,.16);
  --transicion:.28s cubic-bezier(.25,.8,.35,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--fuente);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  color:var(--texto-oscuro);
  background:var(--blanco);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Bloquea el scroll del fondo cuando hay modal o menú abierto */
body.sin-scroll{overflow:hidden}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
p{margin:0 0 18px}
h1,h2,h3,h4{margin:0 0 16px;font-weight:800;line-height:1.15;letter-spacing:-.015em}

button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* Foco visible y consistente en toda la página (accesibilidad) */
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:4px}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px}


/* ============================================================
   02. UTILIDADES
   ============================================================ */

/* Enlace de salto al contenido — sólo visible al tabular */
.saltar{
  position:absolute;left:12px;top:-100px;z-index:1000;
  background:var(--naranja);color:#fff;padding:12px 20px;border-radius:0 0 10px 10px;
  font-weight:600;transition:top .2s ease;
}
.saltar:focus{top:0}

/* Respaldo cuando falta el archivo de un logo: main.js lo sustituye
   por el nombre de la marca en texto (ver sección 08 de main.js). */
.logo-texto{font-weight:800;letter-spacing:.02em;font-size:1.25rem;white-space:nowrap}
.marca__logo .logo-texto{color:var(--marron);font-size:1.5rem}

/* Texto sólo para lectores de pantalla */
.visualmente-oculto{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Etiqueta pequeña arriba de los títulos */
.etiqueta{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde);margin:0 0 16px;
}
.etiqueta::before{content:"";width:22px;height:2px;background:var(--verde);border-radius:2px}
.etiqueta--oscura{color:var(--verde)}

.titulo{font-size:clamp(1.75rem,4.4vw,2.75rem);font-weight:800;margin:0 0 18px}
.titulo--claro{color:var(--blanco)}
.mini-titulo{font-size:1rem;font-weight:700;margin:0 0 8px}
.verde{color:var(--verde)}

/* Motivo de cuadrícula 3×3 — elemento gráfico madre de la identidad.
   Se genera con degradados repetidos: no necesita imagen. */
.patron-cuadricula{
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.055) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 92px);
  background-position:center;
}


/* ============================================================
   03. BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:600;font-size:.95rem;line-height:1;
  padding:15px 26px;border:0;border-radius:999px;cursor:pointer;
  transition:background var(--transicion),color var(--transicion),
             transform var(--transicion),box-shadow var(--transicion);
  text-align:center;
}

/* CTA primario: naranja — reservado para la acción principal */
.btn--primario{background:var(--naranja);color:#fff}
.btn--primario:hover{background:#d66502;transform:translateY(-2px);box-shadow:0 10px 22px rgba(238,114,3,.32)}

/* CTA secundario en texto */
.btn--texto{background:transparent;color:var(--blanco);padding:15px 8px;position:relative}
.btn--texto::after{
  content:"";position:absolute;left:8px;right:8px;bottom:10px;height:2px;
  background:var(--verde);transform:scaleX(0);transform-origin:left;transition:transform var(--transicion);
}
.btn--texto:hover::after{transform:scaleX(1)}

/* Botón pill del header con círculo de flecha */
.btn--pill{background:var(--naranja);color:#fff;padding:9px 9px 9px 22px;gap:14px;font-size:.9rem}
.btn--pill:hover{background:#d66502}
.btn--pill:hover .btn__circulo{transform:translateX(3px)}
.btn__circulo{
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform var(--transicion);flex:0 0 auto;
}

/* Botón de las tarjetas de marca */
.btn--marca{
  background:transparent;color:var(--texto-oscuro);
  border:1.5px solid var(--linea);padding:13px 22px;font-size:.9rem;width:100%;
}

.btn--ancho{width:100%}


/* ============================================================
   04. HEADER Y NAVEGACIÓN
   ============================================================ */
.cabecera{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--header-h);
  display:flex;align-items:center;background:transparent;
  transition:height var(--transicion),background var(--transicion),box-shadow var(--transicion);
}
.cabecera__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px;
}
/* Logo y botones por encima del panel de navegación móvil */
.cabecera__logo{position:relative;z-index:2}
.cabecera__logo img{height:34px;width:auto}
.cabecera__acciones{position:relative;z-index:2;display:flex;align-items:center;gap:12px}

/* Estado compacto al hacer scroll (lo aplica main.js) */
.cabecera--compacta{
  height:66px;background:rgba(46,39,36,.97);
  box-shadow:0 2px 18px rgba(0,0,0,.22);
  backdrop-filter:saturate(140%) blur(8px);
}

/* --- Navegación: en móvil es un panel a pantalla completa --- */
.nav{
  position:fixed;inset:0;background:var(--marron);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity var(--transicion),transform var(--transicion),visibility var(--transicion);
  z-index:-1;
}
.nav--abierto{opacity:1;visibility:visible;transform:none;z-index:1}
.nav__lista{display:flex;flex-direction:column;align-items:center;gap:6px}
.nav__enlace{
  display:block;padding:14px 20px;color:var(--blanco);
  font-size:1.5rem;font-weight:700;position:relative;
}
.nav__enlace::after{
  content:"";position:absolute;left:20px;right:20px;bottom:8px;height:2px;
  background:var(--verde);transform:scaleX(0);transform-origin:center;
  transition:transform var(--transicion);
}
.nav__enlace:hover::after,
.nav__enlace.activo::after{transform:scaleX(1)}
.nav__enlace.activo{color:var(--verde)}

/* Botón hamburguesa */
.hamburguesa{
  width:44px;height:44px;background:rgba(255,255,255,.1);border:0;border-radius:12px;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;position:relative;z-index:2;
}
.hamburguesa span{
  display:block;width:19px;height:2px;background:#fff;border-radius:2px;
  transition:transform var(--transicion),opacity var(--transicion);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


/* ============================================================
   05. HERO
   ============================================================ */
/* Sin overflow:hidden: la tarjeta de indicadores debe poder
   desbordar hacia la sección siguiente. */
.hero{
  position:relative;background:var(--marron);color:var(--blanco);
  padding:calc(var(--header-h) + 34px) 0 0;
}

/* Cuadrícula 3×3 de fondo, muy sutil */
.hero__patron{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 96px);
  /* Se desvanece hacia abajo para no competir con el contenido */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%);
}

.hero__grid{position:relative;display:grid;gap:44px;align-items:center}
/* min-width:0 evita que un texto largo estire la columna del grid */
.hero__texto{min-width:0}

.hero__titulo{
  font-size:clamp(2rem,7.5vw,3.75rem);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;margin:0 0 20px;
}

/* Palabra clave en naranja con subrayado dibujado a mano */
.resaltado{position:relative;color:var(--naranja);white-space:nowrap}
.resaltado__linea{
  position:absolute;left:-2%;bottom:-.16em;width:104%;height:.24em;
  color:var(--naranja);opacity:.85;
}

.hero__bajada{color:var(--texto-claro);font-size:1.02rem;max-width:56ch;margin:0 0 30px}

.hero__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:38px}

/* --- Prueba social --- */
.prueba-social{display:flex;align-items:center;gap:14px}
.avatares{display:flex}
.avatares li:not(:first-child){margin-left:-12px}
.avatar,
.avatares img{
  display:block;width:40px;height:40px;border-radius:50%;
  border:2px solid var(--marron);object-fit:cover;
}
.avatar--verde{background:linear-gradient(145deg,#00A651,#007f3e)}
.avatar--naranja{background:linear-gradient(145deg,#EE7203,#c25c02)}
.avatar--azul{background:linear-gradient(145deg,#1D9BD7,#1476a3)}
.avatar--claro{background:linear-gradient(145deg,#F5F3F1,#cfc7c1)}
.prueba-social__texto{margin:0;font-size:.88rem;color:var(--texto-claro);line-height:1.45}
.prueba-social__texto strong{color:var(--blanco);font-weight:700}

/* --- Mosaico de imágenes con retícula verde ---
   El "marco" verde es el propio fondo del contenedor asomando por
   el gap y el padding: menos código y siempre alineado. */
.hero__mosaico{
  display:grid;gap:3px;padding:3px;background:var(--verde);
  border-radius:6px;overflow:hidden;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "a a"
    "b c"
    "d e";
  aspect-ratio:1/1.05;
}
.mosaico__item{margin:0;overflow:hidden;background:var(--marron-claro);position:relative}
.mosaico__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mosaico__item:hover img{transform:scale(1.05)}
.mosaico__item--a{grid-area:a}
.mosaico__item--b{grid-area:b}
.mosaico__item--c{grid-area:c}
.mosaico__item--d{grid-area:d}
.mosaico__item--e{grid-area:e}


/* ============================================================
   06. FRANJA DE INDICADORES
   Tarjeta ancha sobre el mismo fondo oscuro del hero
   ============================================================ */
.indicadores{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  background:var(--marron-claro);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radio-lg);padding:8px;
  margin:44px 0 -56px;z-index:2;
}
.indicador{padding:22px 18px;text-align:center;position:relative}

/* Separadores verticales finos en verde */
.indicador:not(:last-child)::after{
  content:"";position:absolute;right:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(180deg,transparent,var(--verde),transparent);opacity:.55;
}
.indicador:nth-child(2)::after{display:none}       /* corta la línea al final de fila en 2 columnas */
.indicador:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}

.indicador__numero{
  margin:0 0 4px;font-size:clamp(1.9rem,6vw,2.6rem);font-weight:800;
  color:var(--blanco);line-height:1;letter-spacing:-.02em;
}
.indicador__numero--texto{font-size:clamp(1.15rem,4vw,1.5rem)}
.indicador__signo{color:var(--verde)}
.indicador__etiqueta{
  margin:0;font-size:.78rem;color:var(--texto-claro);opacity:.85;
  letter-spacing:.03em;line-height:1.4;
}


/* ============================================================
   07. SECCIONES GENÉRICAS
   ============================================================ */
.seccion{padding:96px 0;position:relative}
.seccion--clara{background:var(--claro)}
.seccion--oscura{background:var(--marron);color:var(--blanco)}

.seccion__encabezado{max-width:640px;margin:0 auto 48px;text-align:center}
.seccion__encabezado--izq{margin-left:0;text-align:left}
.seccion__encabezado .etiqueta{justify-content:center}
.seccion__encabezado--izq .etiqueta{justify-content:flex-start}
.seccion__bajada{color:var(--texto-claro);margin:0}
.seccion__bajada--oscura{color:var(--texto-suave)}

/* Separador decorativo: la cuadrícula 3×3 del logo, centrada sobre el
   borde superior de la sección. Los nueve cuadros se dibujan con nueve
   degradados planos posicionados, para no ensuciar el HTML. */
.separador-cuadricula{
  --cuadro-v:linear-gradient(var(--verde),var(--verde));
  --cuadro-n:linear-gradient(var(--naranja),var(--naranja));
  --cuadro-a:linear-gradient(var(--azul),var(--azul));
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:12px;background-color:var(--marron);
  background-image:
    var(--cuadro-v),var(--cuadro-n),var(--cuadro-a),
    var(--cuadro-v),var(--cuadro-n),var(--cuadro-n),
    var(--cuadro-v),var(--cuadro-v),var(--cuadro-v);
  background-size:12px 12px;
  background-repeat:no-repeat;
  background-position:
    12px 12px, 27px 12px, 42px 12px,
    12px 27px, 27px 27px, 42px 27px,
    12px 42px, 27px 42px, 42px 42px;
}


/* ============================================================
   08. NOSOTROS
   ============================================================ */
/* Padding extra arriba: la tarjeta de indicadores del hero invade
   esta sección 56px y no debe pisar el texto. */
#nosotros{padding-top:120px}

.nosotros__grid{display:grid;gap:48px;align-items:start}

.mision-vision{
  display:grid;gap:26px;margin-top:34px;padding-top:30px;
  border-top:1px solid var(--linea);
}
.mision-vision p{margin:0;color:var(--texto-suave);font-size:.95rem}

.pilares{display:grid;gap:16px}
.pilar{
  background:var(--blanco);border-radius:var(--radio);
  padding:26px 26px 22px;box-shadow:var(--sombra);
  border-left:3px solid var(--linea);
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.pilar:hover{transform:translateY(-3px);box-shadow:var(--sombra-fuerte)}
.pilar--verde{border-left-color:var(--verde)}
.pilar--naranja{border-left-color:var(--naranja)}
.pilar--azul{border-left-color:var(--azul)}

.pilar__icono{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;margin-bottom:14px;
}
.pilar--verde   .pilar__icono{background:rgba(0,166,81,.1);color:var(--verde)}
.pilar--naranja .pilar__icono{background:rgba(238,114,3,.1);color:var(--naranja)}
.pilar--azul    .pilar__icono{background:rgba(29,155,215,.1);color:var(--azul)}

.pilar__titulo{font-size:1.12rem;margin:0 0 8px}
.pilar__texto{margin:0;color:var(--texto-suave);font-size:.93rem;line-height:1.65}


/* ============================================================
   09. MARCAS
   ============================================================ */
.marcas__grid{display:grid;gap:22px}

.marca{
  background:var(--marron-claro);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radio-lg);padding:22px;text-align:center;
  display:flex;flex-direction:column;
  transition:transform var(--transicion),border-color var(--transicion),box-shadow var(--transicion);
}
.marca:hover{
  transform:translateY(-6px);
  border-color:var(--color-marca);
  box-shadow:0 20px 40px rgba(0,0,0,.3);
}

/* El contenedor del logo SIEMPRE va claro: Thymos y Vibratta son
   monocromáticos y no se leen sobre el fondo marrón. */
.marca__logo{
  background:var(--blanco);border-radius:var(--radio);
  height:150px;display:flex;align-items:center;justify-content:center;
  padding:30px;margin-bottom:22px;
}
/* Los logos nunca se recortan, deforman ni se tiñen */
.marca__logo img{max-height:100%;width:auto;object-fit:contain}

.marca__nombre{font-size:1.3rem;color:var(--blanco);margin:0 0 8px}
.marca__texto{color:var(--texto-claro);font-size:.92rem;margin:0 0 22px;flex:1 1 auto}

/* El botón de la tarjeta pasa a naranja sólido al hacer hover en la tarjeta */
.marca .btn--marca{background:var(--blanco);color:var(--marron);border-color:transparent}
.marca:hover .btn--marca,
.marca .btn--marca:hover,
.marca .btn--marca:focus-visible{background:var(--naranja);color:#fff}


/* ============================================================
   10. CONTACTO Y FORMULARIO
   ============================================================ */
.contacto__grid{display:grid;gap:48px;align-items:start}

.datos{display:grid;gap:22px;margin-bottom:32px}
.dato{display:flex;gap:16px;align-items:flex-start}
.dato__icono{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  background:var(--blanco);color:var(--verde);border:1px solid var(--linea);
  display:inline-flex;align-items:center;justify-content:center;
}
.dato__titulo{font-size:.82rem;font-weight:700;text-transform:uppercase;
              letter-spacing:.08em;color:var(--texto-suave);margin:0 0 4px}
.dato__valor{margin:0;font-weight:500;line-height:1.55}
.dato__valor a:hover{color:var(--naranja)}

.redes{display:flex;gap:10px;margin-bottom:32px}
.redes a{
  width:42px;height:42px;border-radius:12px;background:var(--blanco);
  border:1px solid var(--linea);color:var(--marron);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--transicion),color var(--transicion),transform var(--transicion);
}
.redes a:hover{background:var(--verde);color:#fff;transform:translateY(-2px);border-color:var(--verde)}

.mapa{
  border-radius:var(--radio);overflow:hidden;
  border:1px solid var(--linea);box-shadow:var(--sombra);line-height:0;
}

/* --- Formulario --- */
.formulario{
  background:var(--blanco);border-radius:var(--radio-lg);
  padding:28px 24px;box-shadow:var(--sombra);border:1px solid var(--linea);
}
.campo{margin-bottom:18px}
.campo-fila{display:grid;gap:0}
.campo label{display:block;font-size:.86rem;font-weight:600;margin-bottom:7px}
.campo label span{color:var(--naranja)}

.campo input,
.campo select,
.campo textarea{
  width:100%;padding:13px 15px;background:var(--claro);
  border:1.5px solid var(--linea);border-radius:11px;
  transition:border-color var(--transicion),background var(--transicion);
}
.campo textarea{resize:vertical;min-height:120px}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{background:var(--blanco);border-color:var(--verde);outline:none}
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible{outline:3px solid rgba(0,166,81,.28);outline-offset:1px}

/* Campo con error */
.campo--error input,
.campo--error select,
.campo--error textarea{border-color:#D93025;background:#fdf4f3}

.error{
  margin:6px 0 0;font-size:.8rem;color:#D93025;font-weight:500;
  min-height:0;line-height:1.4;
}

.formulario__estado{margin:14px 0 0;font-size:.88rem;font-weight:600;min-height:0}
.formulario__estado--ok{color:var(--verde)}
.formulario__estado--error{color:#D93025}
.formulario__nota{margin:14px 0 0;font-size:.78rem;color:var(--texto-suave)}


/* ============================================================
   11. MODAL "ACCESO VENDEDORES"
   ============================================================ */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal__overlay{
  position:absolute;inset:0;background:rgba(23,19,17,.7);
  backdrop-filter:blur(5px);animation:aparecer .25s ease;
}
.modal__caja{
  position:relative;width:100%;max-width:420px;max-height:92vh;overflow-y:auto;
  background:var(--blanco);border-radius:var(--radio-lg);
  padding:34px 28px 26px;text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  animation:subir .3s cubic-bezier(.2,.8,.3,1);
}
.modal__cerrar{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--claro);color:var(--marron);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--transicion),color var(--transicion);
}
.modal__cerrar:hover{background:var(--naranja);color:#fff}
.modal__logo{height:32px;width:auto;margin:0 auto 18px}
.modal__titulo{font-size:1.5rem;margin:0 0 6px}
.modal__bajada{color:var(--texto-suave);font-size:.9rem;margin:0 0 22px}

.formulario--modal{
  box-shadow:none;border:0;padding:0;text-align:left;background:transparent;
}
.modal__olvido{
  display:block;text-align:center;margin-top:16px;
  font-size:.85rem;color:var(--texto-suave);text-decoration:underline;
}
.modal__olvido:hover{color:var(--naranja)}
.modal__pie{
  margin:20px 0 0;padding-top:16px;border-top:1px solid var(--linea);
  font-size:.75rem;color:var(--texto-suave);line-height:1.5;
}

@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes subir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}


/* ============================================================
   12. FOOTER
   ============================================================ */
.pie{position:relative;background:var(--marron);color:var(--texto-claro);
     padding:64px 0 24px;overflow:hidden}
.pie__patron{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 88px);
}
.pie .contenedor{position:relative}

.pie__grid{display:grid;gap:36px;margin-bottom:44px}
.pie__col{min-width:0}
.pie__logo{height:34px;width:auto;margin-bottom:18px}
.pie__texto{font-size:.88rem;line-height:1.7;max-width:34ch;margin:0}
.pie__titulo{font-size:.8rem;font-weight:700;text-transform:uppercase;
             letter-spacing:.12em;color:var(--blanco);margin:0 0 16px}
.pie__lista{display:grid;gap:10px;font-size:.9rem}
.pie__lista a{transition:color var(--transicion)}
.pie__lista a:hover{color:var(--verde)}

.pie__legal{
  display:flex;flex-direction:column;gap:16px;align-items:center;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.8rem;text-align:center;
}
.pie__legal p{margin:0}

/* Cuadrícula 3×3 decorativa del pie */
.cuadricula-mini{
  display:grid;grid-template-columns:repeat(3,7px);gap:3px;
}
.cuadricula-mini i{display:block;width:7px;height:7px;border-radius:1px;background:rgba(255,255,255,.16)}
.cuadricula-mini i:nth-child(1){background:var(--verde)}
.cuadricula-mini i:nth-child(2){background:var(--naranja)}
.cuadricula-mini i:nth-child(3){background:var(--azul)}
.cuadricula-mini i:nth-child(4){background:var(--verde)}
.cuadricula-mini i:nth-child(5){background:var(--naranja)}
.cuadricula-mini i:nth-child(6){background:var(--naranja)}
.cuadricula-mini i:nth-child(7){background:var(--verde)}
.cuadricula-mini i:nth-child(8){background:var(--verde)}
.cuadricula-mini i:nth-child(9){background:var(--verde)}


/* ============================================================
   13. ANIMACIONES DE APARICIÓN
   main.js agrega .visible cuando el bloque entra en pantalla.
   Si el JS no corre, el contenido se ve igual (ver :root sin .cargando).
   ============================================================ */
.cargando .revelar{opacity:0;transform:translateY(22px)}
.revelar{transition:opacity .6s ease,transform .6s cubic-bezier(.25,.8,.35,1)}
.revelar.visible{opacity:1;transform:none}

/* Respeta la preferencia del sistema de reducir movimiento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .cargando .revelar{opacity:1;transform:none}
}


/* ============================================================
   14. MEDIA QUERIES
   ============================================================ */

/* ---------- ≥ 480px : celulares grandes ---------- */
@media (min-width:480px){
  .contenedor{padding:0 24px}
  .cabecera__inner{padding:0 24px}
  .formulario{padding:32px 28px}
  .pie__legal{flex-direction:row;justify-content:space-between;text-align:left}
}

/* ---------- < 480px : ocultar el texto del botón de acceso ----------
   Queda el círculo de flecha; el texto sigue disponible para lectores
   de pantalla (no se usa display:none). */
@media (max-width:479px){
  .btn--pill{padding:9px;gap:0}
  .btn--pill > span:not(.btn__circulo){
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
}

/* ---------- ≥ 768px : tablets ---------- */
@media (min-width:768px){
  :root{--header-h:88px}
  body{font-size:16.5px}

  .seccion{padding:110px 0}
  #nosotros{padding-top:150px}
  .cabecera__logo img{height:38px}

  .hero{padding-top:calc(var(--header-h) + 48px)}
  .hero__bajada{font-size:1.08rem}

  /* Mosaico: se reparte en tres filas manteniendo la asimetría */
  .hero__mosaico{
    grid-template-columns:1.15fr .85fr 1fr;
    grid-template-areas:
      "a a b"
      "a a c"
      "d e c";
    aspect-ratio:1/.92;
  }

  .indicadores{grid-template-columns:repeat(4,1fr);padding:10px}
  .indicador:nth-child(2)::after{display:block}
  .indicador:nth-child(-n+2){border-bottom:0}
  .indicador{padding:26px 20px}

  .campo-fila{grid-template-columns:1fr 1fr;gap:0 16px}
  .mision-vision{grid-template-columns:1fr 1fr;gap:32px}
  .marcas__grid{grid-template-columns:repeat(3,1fr)}
  .pie__grid{grid-template-columns:repeat(2,1fr);gap:40px}
  .formulario{padding:34px 32px}
}

/* ---------- ≥ 1024px : desktop ---------- */
@media (min-width:1024px){
  /* La navegación deja de ser panel y vuelve a la barra */
  .nav{
    position:static;inset:auto;background:transparent;
    opacity:1;visibility:visible;transform:none;z-index:auto;
  }
  .nav__lista{flex-direction:row;gap:4px}
  .nav__enlace{font-size:.95rem;font-weight:500;padding:10px 16px}
  .nav__enlace::after{left:16px;right:16px;bottom:4px}
  .hamburguesa{display:none}

  .hero__grid{grid-template-columns:1.05fr .95fr;gap:56px}
  .indicadores{margin-top:64px}

  .nosotros__grid{grid-template-columns:1.1fr .9fr;gap:64px}
  .contacto__grid{grid-template-columns:1fr 1fr;gap:56px}
  .pie__grid{grid-template-columns:1.4fr 1fr 1fr 1.1fr}
  .marcas__grid{gap:26px}
}

/* ---------- ≥ 1440px : pantallas amplias ---------- */
@media (min-width:1440px){
  :root{--ancho:1320px}
  body{font-size:17px}
  .seccion{padding:128px 0}
  .hero__grid{gap:72px}
  .marca__logo{height:170px}
}