/* =====================================================================
   CSS AVG.css
   inicio:  13 de agosto del 2026

   Revisar:

   · .trampa
      Antispam del formulario de contacto.
      Ver el comentario de su bloque antes de tocarlo.

   · Reset mínimo

   Clases del HTML: .bloque, .cabecera, .menu, .campo, .boton, .aviso, .rejilla, .pie
   ===================================================================== */

/* --- Tipografía --------------------------------------------------------
   Un bloque @font-face POR PESO, todos con el mismo font-family. Lo que
   los distingue es font-weight, y con eso el navegador elige el archivo
   correcto al pedir font-weight: 600.

   Si falta el bloque de un peso, el navegador lo fabrica engordando el
   más cercano: negrita falsa, de trazo sucio. Declara los pesos que vayas
   a usar y no más.

   Declarar varios NO descarga varios archivos: sólo se piden los pesos
   que la página llega a pintar. Los demás quedan como declaración inerte.

   font-display: swap pinta el texto con la fuente del sistema mientras la
   propia carga, en lugar de dejar un hueco en blanco. Con `block` —el
   valor por defecto de facto en algunos navegadores— el texto tarda en
   aparecer y la página parece rota en una conexión lenta.

   OJO CON LAS MAYÚSCULAS del nombre de archivo. En macOS da igual; el
   servidor Linux distingue, y la fuente no cargaría — un fallo que sólo
   aparece al publicar. El nombre aquí y el del archivo tienen que
   coincidir carácter por carácter.

   Y si la fuente es de licencia libre (OFL), su archivo de licencia se
   sube junto a ella. Es una condición de uso, no un adorno.

   ---------------------------------------------------------------------- */

/*
   root
*/
:root {
   /* color */
   --primario:          #f7901e;
   --primario-claro:    #fbc112;
   --primario-medio:    #e05f10;
   --primario-oscuro:   #552713;
   --secundario-a:      #13aa4b;
   --secundario-b:      #72c9c0;
   --acento-a:          #4154a4;
   --acento-b:          #5093f8;
   --fondo-muyclaro:    #fbfbfb;
   --fondo-claro:       #f4f6f6;
   --fondo-medio:       #c7d2d1;
   --fondo-oscuro:      #667265;
   --tinta:             #1e293b;

   /* medidas */
}

/* ---
fuentes
---  */
@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* --- Reset mínimo ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Rubik', system-ui, sans-serif;
    font-style: normal;
    font-weight: 400;
}
h1, h2 {
   font-family: 'Barlow', system-ui, sans-serif;
   font-weight: 700;
}
h3, h4, h5, h6 {
   font-family: 'Barlow', system-ui, sans-serif;
   font-weight: 800;
}
p {
   font-size: 1.17rem;
   line-height: 1.382;
}
img { max-width: 100%; height: auto; }

/* --- EL CAMPO TRAMPA — NO ES DECORACIÓN --------------------------------
   Oculta el campo señuelo del formulario de contacto. 

   Por qué así y no de otra forma:

   · No se usa display:none a secas ni visibility:hidden. Los bots que se
     molestan en mirar el CSS reconocen esos dos y saltan el campo. Sacarlo
     del lienzo con position absolute es menos evidente.

   · No se pone style="..." en el HTML. La CSP admite estilos en línea hoy,
     pero ese permiso está marcado como temporal en Response; el día que se
     retire, la trampa se volvería visible en la página y seguiría
     descartando envíos legítimos de quien la rellenara por confusión.

   · Si borras esta regla, el campo aparece en pantalla y TODOS los envíos
     de quien lo rellene se descartan sin decir por qué. Es el fallo más
     desconcertante que puede tener este machote.
   ---------------------------------------------------------------------- */

.formulario-a {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.pt-1618 {
   padding-top: 1.618rem;
}

/* =====================================================================
   A PARTIR DE AQUÍ, TODO TUYO.
   Las clases están vacías con el elemento que visten anotado al lado.
   ===================================================================== */

/* Encabezado del sitio: marca + menú. Sale en todas las páginas. */
.cabecera {
   position: sticky;
   top: 0;
   padding: 1.382rem 1.618rem .854rem;
   display: flex;
   align-items: center;
   background: var(--fondo-muyclaro);
   border-bottom: solid 1px var(--fondo-medio);
   z-index: 5;
}
.cabecera__marca {}
.cabecera__marca svg {
   width: auto;
   height: 1.82rem;
   fill: var(--primario);
   transition: .65s ease;
}
.cabecera__marca:hover svg { fill: var(--primario-medio);
}

/* Navegación principal. --activo marca la página en la que se está;
   el layout le pone además aria-current="page". */
.menu { width: 80%; max-width: 1080px; display:flex; padding-right:2.618rem; }
.menu__lista { display:flex; flex-direction: row; gap: 2.618rem; margin-left: auto; text-transform: uppercase; list-style:none; }

.menu__enlace {
   position: relative;
   display: inline-block;
   padding: .25rem 0;
   text-decoration: none;
   font-family: 'Barlow', sans-serif;
   font-weight: 700;
   font-size: 1.04rem;
   color: var(--secundario-a);
   transition: color .25s ease;
}
/* :focus-visible junto a :hover. El ::after ya lo tenia; el color no, asi
   que quien navega con teclado recibia el subrayado pero no el cambio de
   color. Los dos estados deben ir siempre en la misma regla. */
.menu__enlace:hover,
.menu__enlace:focus-visible { color: var(--primario); }

/* LAS DOS ANCLAS DEL ESTADO "PAGINA ACTUAL"
   -----------------------------------------
   Son dos elementos distintos y por eso son dos reglas: una viste el texto
   del <a> y la otra su ::after. Lo que se unifica no es el elemento, es la
   CONDICION: las dos preguntan lo mismo, [aria-current="page"], y no una
   por el atributo y otra por la clase --activo.

   Se elige el atributo y no la clase porque el atributo es ademas lo que
   anuncia el lector de pantalla. Atado a el, el estado que se ve y el que
   se oye salen de la misma fuente y no pueden separarse.

   El layout sigue escribiendo la clase --activo en el mismo sitio
   (principal.php:110): queda disponible por si algun dia la pagina actual
   necesita ademas otro tratamiento, pero ya no decide nada de esto.

   El orden importa: esta regla va DESPUES de :hover y las dos tienen la
   misma especificidad (0,2,0), asi que al pasar el raton por encima de la
   pagina en la que ya estas, el color no cambia. Es lo que se quiere. */
.menu__enlace[aria-current="page"] { color: var(--primario-medio); }

/* 
   ----------------------
   La linea existe siempre; lo que cambia es su escala horizontal.
   Se anima transform y NO width.
*/
.menu__enlace::after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 2px;
   background-color: var(--secundario-b);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform .25s ease;
}

/* :focus-visible: no puede quedar una pagina subrayada */
.menu__enlace:hover::after,
.menu__enlace:focus-visible::after {
   transform: scaleX(1);
   transform-origin: left;
}
/* La segunda ancla: mismo selector, otro elemento. */
.menu__enlace[aria-current="page"]::after {
   transform: scaleX(1);
   transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
   .menu__enlace::after { transition: none; }
   /* La cortinilla sigue apareciendo; lo que se quita es el deslizamiento. */
   .fondo-claro div a::before,
   .fondo-claro div a p { transition: none; }
   .menu__boton-icono,
   .menu__boton-icono::before,
   .menu__boton-icono::after { transition: none; }
}

/* boton hamburguesa */
.menu__boton { display: none; }

/* EL ICONO DEL BOTON — tres barras que se cruzan en X.
   ---------------------------------------------------
   Un <button> trae del navegador fondo gris, borde y padding propios. Sin
   quitarlos, el icono aparece dentro de un recuadro de sistema y parece que
   el CSS no se aplico. */
.menu__boton {
   width: 52px;
   height: 52px;
   border-radius: 26px;
   background: var(--secundario-a);
   border: 0;
   cursor: pointer;
   color: var(--fondo-muyclaro);
   align-items: center;
   justify-content: center;
   z-index: 3;
}

.menu__boton-icono {
   position: relative;   /* ancla de los dos pseudo-elementos */
   display: block;
   width: 26px;
   height: 3px;
   background-color: currentColor;
   transition: background-color .25s ease;
}

.menu__boton-icono::before,
.menu__boton-icono::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: currentColor;
   /* Se anima transform y no top, por lo mismo que el subrayado del menu:
      transform lo resuelve el compositor, top recalcula la maquetacion. */
   transition: transform .25s ease;
}

/* Cerrado: las dos barras separadas 8px arriba y abajo de la del medio. */
.menu__boton-icono::before { transform: translateY(-8px); }
.menu__boton-icono::after  { transform: translateY(8px); }

/* Abierto: la del medio se desvanece y las otras dos vuelven al centro
   girando 45 grados en sentidos opuestos. El navegador interpola entre
   translateY y rotate como matrices, y de ahi sale el gesto de recogerse y
   cruzarse a la vez.

   El gancho es [aria-expanded="true"], el MISMO atributo que anuncia el
   estado al lector de pantalla: lo que se ve y lo que se oye salen de una
   sola fuente. */
.menu__boton[aria-expanded="true"] .menu__boton-icono {
   background-color: transparent;
}
.menu__boton[aria-expanded="true"] .menu__boton-icono::before { transform: rotate(45deg); }
.menu__boton[aria-expanded="true"] .menu__boton-icono::after  { transform: rotate(-45deg); }

@media (max-width: 800px) {

   /* APILAMIENTO DENTRO DE LA CABECERA
      ---------------------------------
      El <nav> del panel es CHILD de <header>
      Dentro de ese contexto mandan los z-index de los child.

      Nota: un item flex admite z-index SIN position
   */
   /* El logotipo, al mismo nivel que el boton: sin esto se queda detras del
      panel, que es justo lo que hay que evitar si se quiere verlo arriba
      mientras el menu esta abierto. */

   .con-js .menu__boton {
      display: flex;
      /* 44x44 area tactil minima recomendada */
      min-width: 44px;
      min-height: 44px;
      margin-left: auto;
   }

   .cabecera__marca { transition: transform .65s ease; z-index: 3; }
   .panel-abierto .cabecera__marca { transform:translateY(4.382rem); text-align:center; }
   .panel-abierto .cabecera__marca::after {
      content: "";
      display: block;
      margin: 15px auto 0;
      width: 13rem;
      height: 2px;
      background: var(--fondo-muyclaro);
   }
   .con-js .menu { display: none; }
   .menu { width:100% }

   .con-js .menu--abierto {
      position: fixed;
      inset: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--primario-medio);
   }

   .menu__lista {
      font-size: 1.382rem;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
      margin: 0;
      padding: 0;
   }

   /* colores dentro del panel */
   /* EL PANEL SE APROPIA DE LA CABECERA.
      NO se duplican el logotipo ni el boton dentro del panel: los de la
      cabecera ya estan por encima gracias a sus z-index 3. Un segundo juego
      significaria dos <a> al inicio del documento, dos botones que alternan
      lo mismo, y un lector de pantalla anunciando el nombre del sitio dos
      veces. Lo unico que cambia es el ASPECTO de la cabecera mientras esta
      sobre el panel. */
   .panel-abierto .cabecera {
      background: transparent;
      border-bottom-color: transparent;
      /* Con el boton fuera del flujo (regla siguiente), el logotipo queda
         como UNICO item flex de la cabecera, asi que justify-content lo
         centra de verdad. Centrarlo con margenes auto no funcionaria: el
         margin-left:auto del boton y los del logotipo se repartirian el
         hueco a partes iguales y quedaria descentrado. */
      justify-content: center;
   }

   /* El boton se anda al angulo. Sacarlo del flujo es lo que permite centrar
      el logotipo sin compensar su ancho a mano: si manana el icono cambia de
      tamano, el centrado no se mueve. */
   .panel-abierto .menu__boton {
      position: absolute;
      top: 1.382rem;    /* mismo padding que .cabecera */
      right: 1.618rem;
      margin-left: 0;
      background: none;
   }

   /* El logotipo crece y se recolorea dentro del panel. */
   .panel-abierto .cabecera__marca svg {
      height: 2.382rem;
      fill: var(--fondo-muyclaro);   /* 5.9 : 1 sobre --primario-medio */
   }

   /* Esta regla NO es adorno. .cabecera__marca:hover svg tiene especificidad
      (0,2,1), la misma que la de arriba: sin declararla, al pasar el raton
      por el logotipo dentro del panel volveria a --primario-oscuro, que
      sobre naranja quemado da 1.5 : 1. */
   .panel-abierto .cabecera__marca:hover svg {
      fill: var(--primario-claro);   /* 3.6 : 1 */
   }

   /* El boton pasa a ser "cerrar". El gancho es [aria-expanded="true"], el
      MISMO atributo que anuncia el estado al lector de pantalla — por lo
      mismo que [aria-current="page"]: lo que se ve y lo que se oye salen de
      una sola fuente y no pueden desincronizarse.

      El color va aqui para que el icono, dibujado con currentColor, se lea
      sobre el fondo oscuro del panel. La forma de la X la pones tu dentro. */
   .con-js .menu__boton[aria-expanded="true"] {
      color: var(--fondo-muyclaro);
   }

   /* El panel recibe el foco al abrirse (tabindex="-1" en el layout). Aqui
      SI se quita el anillo, y es la excepcion que confirma la regla: este
      contenedor no es alcanzable con el tabulador, asi que nadie navega
      hasta el; el anillo solo seria un recuadro alrededor de toda la
      pantalla. En un elemento interactivo no se quita nunca. */
   .con-js .menu--abierto:focus { outline: none; }

   /* OJO: estos ratios son contra --primario-medio #e05f10, que es el fondo
      actual del panel. Cambiaron al cambiar ese fondo y ya NO pasan.
      Con --primario-oscuro eran 12.0, 8.0 y 5.3. Ver PALETA.md. */
   .menu--abierto .menu__enlace                      { color: var(--fondo-muyclaro); }  /* 3.5 : 1  X texto */
   .menu--abierto .menu__enlace:hover,
   .menu--abierto .menu__enlace:focus-visible        { color: var(--fondo-claro); }     /* 3.3 : 1  X texto */
   .menu--abierto .menu__enlace[aria-current="page"] { color: var(--primario); }        /* 1.5 : 1  X       */
   .menu--abierto .menu__enlace::after               { background-color: currentColor; }
}
/* // boton hamburguesa */

/* Se le pone al <body> mientras el panel esta abierto. Sin esto la pagina de
   detras sigue desplazandose bajo el panel: se arrastra con el dedo y el
   contenido se mueve donde no se ve.

   OJO al nombre: .panel-abierto va en el <body>; .menu--abierto va en el
   <nav>. Se parecen y no son lo mismo. */
.panel-abierto { overflow: hidden; }

/* Sección de contenido. Cada página son varias. */
.hero-contenedera {
   display: flex;
   width: 100vw;
   height: 93vh;
   padding: 1.382rem 1.382rem 2.618rem;
   background: #000 url(../images/hero-fondo.webp) center / cover no-repeat;
}
.hero-contenedera .hero {
   display: flex;
   flex-direction: column;
   color: var(--fondo-muyclaro);
   justify-content: flex-end;
   text-align: center;
   flex-grow: 2;
}
.hero-contenedera .hero h1 {
   padding: 0;
   margin: 0;
   font-size: 2.73rem;
   animation: anima-h1avg 2.6s 1;
}
@keyframes anima-h1avg {
   from {
      transform: scale(1.3);
      color: #000;
   }
   to {
      transform: scale(1);
      color: var(--fondo-claro);
   }
}
.hero-contenedera .hero p {
   font-family: 'Rubik', system-ui, sans-serif;
   font-size: 1.618rem;
   line-height: 1.618;
   max-width: 20ch;
   align-self: center;
   animation: anima-p-avg 1.3s 1;
}
@keyframes anima-p-avg {
   from {
      transform: scale(1.618);
      color: #000;
   }
   to {
      transform: scale(1);
      color: var(--fondo-claro);
   }
}
.hero a.boton {
   display: block;
   margin: 0 auto 0;
   font-size: 1.17rem;
   line-height: 0.9;
   padding: 14px;
   width: 23ch;
   height: 2.73rem;
   color: var(--fondo-muyclaro);
   background: var(--secundario-a);
   text-decoration: none;
   border-radius: 26px;
   transition: .65s ease;
}
.hero a.boton:hover {
   background: var(--primario-medio);
}
/* -- desktop hero -- */
@media (min-width: 769px) {
   .hero-contenedera {
      height: 85.40vh;
      padding: 1.382rem 1.382rem 2.618rem;
      background: #000 url(../images/hero-fondo-d.webp) right / 52% no-repeat;
   }
   .hero-contenedera  .hero { max-width: 50%; justify-content: center; }
   .hero-contenedera  .hero h1 { font-size: 3.382rem; }
   .hero-contenedera  .hero p { font-size: 1.95rem; max-width: 23ch; }
}
@media (min-width: 1440px) {
   .hero-contenedera { background: #000 url(../images/hero-fondo-d.webp) right / 46% no-repeat;
   }
}
/* -- // desktop hero -- */
.contenedora {
   width: 100%;
   padding: 2.60rem 0 2.99rem;
}
/* colores de secciones */
.fondo-claro {
   color: var(--tinta);
   background: var(--fondo-claro);
}
.fondo-primario {
   color: var(--fondo-muyclaro);
   background: var(--primario);
}
.fondo-primario-medio {
   color: var(--fondo-muyclaro);
   background: var(--primario-medio);
}
.fondo-primario-claro {
   color: var(--tinta);
   background: var(--primario-claro);
}
.fondo-secundario {
   color: var(--fondo-muyclaro);
   background: var(--secundario-a);
}
.fondo-oscuro {
   color: var(--fondo-muyclaro);
   background: var(--tinta);
}
.fondo-treinta {
   background-image: url(../images/fondo-treinta.jpg);
   background-size: cover;
}
/* // colores de secciones */

/* bloque treinta */
.bloque-treinta {
   max-width: 1180px;
   margin: 0 auto 0;
   padding: 2.618rem 1.618rem 5.2rem;
   display: grid;
   gap: 1.618rem;
   align-items: center;
   justify-items: center;
   grid-template-columns: 1fr;
   grid-template-areas:
      "titulo"
      "imagen"
      "texto";
   align-content: start;
}
.bloque-treinta h2 {
   margin-bottom: 0;
   padding: 1.618rem 0 0;
   line-height: 1.17;
   font-size: 2.34rem;
   text-transform: uppercase;
   text-align: center;
   grid-area: titulo;
}
.bloque-treinta h2 span {
   font-weight: 800;
}
.bloque-treinta div {
   grid-area: texto;
}
.bloque-treinta h3 {
   margin-bottom: 0;
   line-height: 1.17;
   font-size: 1.618rem;
   text-transform: uppercase;
   text-align: center;
}
.bloque-treinta .texto {
   text-align: center;
   font-size: 1.17rem;
   line-height: 1.618rem;
   grid-area: texto;
}
.bloque-treinta .texto p span {
   font-weight: 600;
}
.bloque-treinta .texto p:first-of-type {
   padding-top: 1.618rem;
}
.treinta {
   padding: 0;
   margin: 0;
   width: 85.40%;
   height: 85.40%;
   grid-area: imagen;
}

/* -- bloque-treinta hero -- */
@media (min-width: 769px) {
   .bloque-treinta {
      max-width: 1180px;
      justify-items: center;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas:
         "imagen titulo"
         "imagen texto";
   }
   .bloque-treinta h2 {
      grid-column: 2 / span 2;
   }
   .bloque-treinta h2::after {
         content: "";
         margin: 1.382rem auto 0;
         display: block;
         width: 13ch;
         height: 2px;
         background: var(--fondo-claro);
   }
   .bloque-treinta h3 {
      margin-top: 0;
   }
   .bloque-treinta .texto {
      max-width: 85.40%;
      line-height: 1.854rem;
      grid-column: 2 / span 2;
   }
   .treinta {
      width: 100%;
      height: auto;
   }
}
/* -- // bloque hero -- */
.bloque {
   max-width: 1180px;
   margin: 0 auto 0;
   padding: 1.618rem 1.618rem 2.618rem;
}

/* reticulas */
.reticula-2 {
   display: grid;
   gap: 0.618rem;
   grid-template-columns: 1fr 1fr;
   align-items: center;
}
.reticula-3_1_2 {
   display: grid;
   gap: 0.618rem;
   grid-template-columns: 1fr;
   padding-bottom: 5.618rem;
}
.reticula-3 {
   display: grid;
   gap: 0.618rem;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   align-items: center;
}
.reticula-3 a.boton-a {
   display: none;
}
.trabajo {}

/* industria */
.dotted {
   background-image:  url(../images/fondo-dotted-i.png), url(../images/fondo-dotted-d.png);
   background-position: left center, right center;
   background-repeat: no-repeat, no-repeat;
}
@media (max-width: 780px) {
   .dotted { background-image:none; }
}
.fondo-claro .principal h2 {
   color: var(--acento-b);
   font-size: 1.3rem;
   text-transform: uppercase;
}
.fondo-claro .principal h2::after {
   content: "";
   width: 7ch;
   height: 2px;
   margin-top: .382rem;
   display: block;
   background-color: var(--fondo-oscuro);
}
.reticula-3 h2 {
   grid-column: 1 / -1;
}
.reticula-3 h3 {
   grid-column-start: 1;
   grid-column-end: 5;
}
.reticula-3 p {
   grid-column: 1 / -1;
   line-height: 1.618rem;
}
.fondo-claro .principal h3 {
   margin: 0.618rem 0 0.854rem;
   font-size: 2.73rem;
   font-weight: 600;
   color: var(--primario-medio);
}
.fondo-claro div a.industria {
   position: relative;
   /* IMPRESCINDIBLE para la cortinilla. El border-radius recorta el fondo del
      propio elemento pero NO a sus hijos mientras overflow sea visible: sin
      esta linea la cortinilla asoma con esquinas cuadradas sobre los 13px de
      radio. Es el fallo clasico de este efecto. */
   overflow: hidden;
   width: 91%;
   height: 13rem;
   margin: 1rem auto 1.382rem;
   border-radius: 13px;
}

/* LA FOTO DE FONDO.
   Cada tarjeta aporta la suya en la variable --foto; aqui vive todo lo
   comun. Por que con variable y no repitiendo background-image en cada
   modificador: background-image es UNA propiedad, no una lista acumulable.
   Quien la redeclara la reemplaza entera, asi que cualquier capa que se
   anada aqui —un degradado, por ejemplo— habria que repetirla en las cuatro.

   var(--foto, none) lleva reserva a proposito: sin ella, una tarjeta a la
   que le faltara la variable invalidaria la propiedad completa. */
.fondo-claro a.industria {
   background-image: var(--foto, none);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: bottom;
}

/* UNA CLASE POR TARJETA, y no :nth-child.
   Que foto le toca a cada una es una relacion de SIGNIFICADO, no de posicion:
   asi reordenar el HTML o meter un parrafo antes no descuadra nada.

   Y los nombres de archivo, por lo que muestran y no numerados: dentro de
   seis meses "industria-hule" se encuentra buscando; "industria-02" hay que
   abrirlo para saber cual es. */
.industria--pinturas   { --foto: url(../images/index-aplicacion-01.webp); }  /* REEMPLAZAR: industria-pinturas.webp */
.industria--hule       { --foto: url(../images/index-aplicacion-02.webp); }  /* REEMPLAZAR: industria-hule.webp */
.industria--plastico   { --foto: url(../images/index-aplicacion-03.webp); }  /* REEMPLAZAR: industria-plastico.webp */
.industria--cosmeticos { --foto: url(../images/index-aplicacion-04.webp); }  /* REEMPLAZAR: industria-cosmeticos.webp */

/* LA CORTINILLA.
   Existe siempre, plegada contra el borde inferior. Lo que se anima es su
   ESCALA (scaleY), no su altura ni su posicion: transform lo resuelve el
   compositor, height obligaria a rehacer la maquetacion en cada fotograma.

   OJO: scaleY, no translateY. translateY la desplaza entera y la saca por
   abajo; scaleY la despliega desde el borde. Y una longitud siempre lleva
   unidad: translateY(1) es invalido y el navegador descarta la declaracion
   entera sin decir nada — solo 0 puede ir sin unidad.

   transform-origin decide de donde sale. Con `top` cae desde arriba; para
   una cortinilla horizontal, scaleX(0) con origen `left`. Es el mismo
   mecanismo del subrayado del menu, en el otro eje. */
.fondo-claro div a.industria::before {
   content: "";
   position: absolute;
   inset: -2px;
   background: var(--secundario-a);
   transform: scaleX(.44);
   transform-origin: left;
   /* opacity TIENE que estar en esta lista. transition solo interpola las
      propiedades que se nombran: sin ella, el .91 del :hover salta de golpe
      en el primer fotograma mientras la escala tarda medio segundo, y se ve
      como un parpadeo al entrar. */
   transition: transform .52s ease, opacity .52s ease;
}

.fondo-claro div a:hover::before,
.fondo-claro div a:focus-visible::before {
   transform: scaleX(1.01);
   opacity: .91;
}

/* El texto, por encima de la cortinilla.
   Funcionaria sin z-index —el ::before es el primer hijo generado y el <p>
   viene despues, asi que se pintan en orden de arbol— pero declararlo evita
   que el orden se vuelva accidental el dia que se anada otro elemento
   absoluto dentro del enlace. */
.fondo-claro div a.industria p {
   position: absolute;
   left: 1.382rem;
   max-width: 40%;
   top: 0.618rem;
   font-weight: 600;
   color: var(--fondo-muyclaro);
   transition: .52s ease;
   z-index: 1;
}
/* display NO es interpolable por si solo: no existe "medio bloque", asi que
   una transition a secas sobre el no hace nada y el texto aparecia de golpe.

   allow-discrete cambia eso: el navegador mantiene el display: block durante
   toda la transicion de SALIDA en vez de cortarlo en el primer fotograma, y
   asi da tiempo a que la opacidad se desvanezca antes de desaparecer.

   @starting-style declara desde donde arranca un elemento que acaba de
   pasar a estar visible. Sin el, no habria estado inicial que interpolar en
   la ENTRADA y el texto seguiria apareciendo de golpe. Hacen falta los dos. */
.fondo-claro div a p span {
   display: none;
   opacity: 0;
   transition: opacity .52s ease, display .52s allow-discrete;
}

/* TARJETAS PARES: LA CORTINILLA ENTRA POR LA DERECHA
   --------------------------------------------------
   OJO CON :nth-child(even) A SECAS. Cuenta TODOS los hermanos, y antes de
   las tarjetas hay un h2, un h3 y un p: las tarjetas son los hijos 4, 5, 6
   y 7, asi que "par" seria el 4 y el 6 — Pinturas y Plastico. Justo las que
   no son.

   nth-of-type SI sirve aqui porque cuenta solo elementos del mismo TAG, y
   los unicos <a> de este bloque son las cuatro tarjetas: par = la 2a y la
   4a, Hule y Cosmeticos.

   Lo estricto seria filtrar con `of .industria`, que cuenta solo lo que
   lleva esa clase y aguantaria un <a> ajeno dentro del bloque. Descartado:
   Chrome 151 carga esa regla pero no la aplica —Firefox y Safari si—, y no
   compensa depender de ello. AVISO: si algun dia se anade otro <a> a este
   bloque (un "ver todos", por ejemplo) esta regla se descuadra y hay que
   volver aqui.

   Aqui un selector posicional es la herramienta adecuada, al contrario que
   con las fotos: alternar el lado es una regla sobre la POSICION, no sobre
   el significado de cada tarjeta. */
.fondo-claro a.industria:nth-of-type(even)::before {
   transform-origin: right;
   /* --primario-medio en las pares, --secundario-a en las impares: la
      alternancia de lado se refuerza con la de color. El rotulo en
      --fondo-muyclaro da 3.5:1 sobre este naranja, frente a 2.95:1 sobre el
      verde — las pares se leen algo mejor. */
   background: var(--acento-a);
}

.fondo-claro a.industria:nth-of-type(even) p {
   /* left: auto anula el left de la regla base. Sin el, con left Y right
      declarados y un ancho que no es auto, gana left y el rotulo no se
      mueve: el navegador ignora el right por sobrerrestriccion. */
   left: auto;
   right: 1.618rem;
   text-align: right;
}

/* En hover el rotulo crece a 1.56rem (25px). A partir de 18.66px en negrita
   WCAG lo considera texto grande y el umbral baja de 4.5:1 a 3:1. */
.fondo-claro div a.industria:hover p,
.fondo-claro div a.industria:focus-visible p {
   max-width: 61.80%;
   font-size: 1.56rem;
   transition: .52s ease;
}
.fondo-claro div a.industria:hover p span,
.fondo-claro div a.industria:focus-visible p span {
   display: block;
   opacity: 1;
   @starting-style { opacity: 0; }
   
}

/* ======================================================================
   TACTIL: EL CONTENIDO NO PUEDE DEPENDER DEL :HOVER
   ======================================================================
   (hover: none) detecta si el dispositivo puede APUNTAR y mantener el
   puntero encima. No es lo mismo que un ancho de pantalla: un portatil con
   pantalla tactil y raton sigue teniendo hover, y una tablet de 1024px no.
   ---------------------------------------------------------------------- */
@media (hover: none) {

   /* --- CONTENIDO. Esto no es opcional. ---------------------------------
      El texto del <span> solo existia en :hover, asi que en un telefono no
      se leia NUNCA. Eso es informacion, no decoracion: se muestra siempre y
      deja de depender de ningun efecto.

      El max-width sube al mismo valor del hover porque con el <span> dentro
      el rotulo necesita el ancho. El font-size NO se toca: 1.56rem en una
      pantalla estrecha se come la tarjeta. */
   .fondo-claro div a.industria p {
      max-width: 61.80%;
   }

   .fondo-claro div a p span {
      display: block;
      opacity: 1;
   }
}
/* industria tablet */
@media (min-width: 585px) and (max-width: 780px) {
   .fondo-claro div a.industria::before {
      transform: scaleX(.54);
   }
   .fondo-claro div a.industria:hover::before {
      transform: scaleX(1.01);
   }
   .fondo-claro div a.industria:hover p, .fondo-claro div a:focus-visible p {
      font-size: 1.17rem;
   }
   .reticula-3_1_2 {
      grid-template-columns: repeat(2, 1fr);
   }
   .reticula-3_1_2 h2 {
      grid-column: 1 / -1;
   }
   .reticula-3_1_2 .reticula-3 {
      grid-column-start: 1;
      grid-column-end: 3;
   }
   .reticula-3_1_2 .reticula-3 p {
      grid-column-start: 1;
      grid-column-end: 5;
   }
   .reticula-3_1_2 .grid-industria {
      grid-column-start: 4;
      grid-column-end: 4;
   }
}
@media (min-width: 781px) {
   .fondo-claro div a.industria {
      margin: .618rem auto .618rem;
   }
   .fondo-claro div a.industria p, .fondo-claro div a.industria p {
      font-size: 1.17rem;
   }
   .fondo-claro div a.industria:hover p, .fondo-claro div a.industria:focus-visible p {
      font-size: 1.56rem;
   }
   .reticula-3_1_2 a.industria {
      height: 20vw;
   }
   .reticula-3_1_2 {
      grid-template-columns: repeat(5, 1fr);
      grid-template-areas:
      "usos usos usos usos usos"
      "tres tres foto1 foto1 foto1"
      "tres tres foto2 foto2 foto2"
      "tres tres foto3 foto3 foto3"
      "tres tres foto4 foto4 foto4"
   }
   .reticula-3_1_2 h2 {
      grid-area: usos;
   }
   .reticula-3 {
      padding-top: 2.618rem;
      grid-template-columns: 1fr;
      align-content: start;
      grid-area: tres;
      grid-template-areas: 
      "icono"
      "mercado"
      "lorem"
      "btn-aplicaciones";
   }
   .reticula-3 h3 {
      grid-area: mercado;
      padding-top: 1.618rem;
   }
   .reticula-3 h3::after {
      content: "";
      margin: .618rem 0 0;
      width: 7ch;
      height: 3px;
      display: block;
      background: var(--acento-b);
   }
   .reticula-3 p {
      font-size: 1.17rem;
      line-height: 1.854rem;
      grid-area: lorem;
   }
   .reticula-3 img {
      grid-column: 1 / 3;
      max-width: 156px;
      height: auto;
      grid-area: icono;
   }
   .reticula-3 a.boton-a {
      display: block;
      grid-area: btn-aplicaciones;
   }
   .reticula-3_1_2 a.boton-b {
      display: none;
   }
   .reticula-3_1_2 a.industria {
      grid-column-start: 3;
      grid-column-end: 6;
   }
   .reticula-3_1_2 .industria--pinturas {
      grid-area: foto1;
   }
   .reticula-3_1_2 .industria--hule {
      grid-area: foto2;
   }
   .reticula-3_1_2 .industria--plastico {
      grid-area: foto3;
   }
   .reticula-3_1_2 .industria--cosmeticos {
      grid-area: foto4;
   }
}

/* // industria */
.productos {
   padding-top: 2.618rem;
   padding-bottom: 15.6rem;
   padding-left: 1.382rem;
   padding-right: 1.382rem;
   background-image:  url(../images/fondo-productos-m.webp);
   background-position: center bottom;
   background-repeat: no-repeat;
   background-size: 100%;
}
.productos h2 {
   grid-column: 1 / -1;
   font-size: 1.3rem;
   color: var(--fondo-muyclaro);
}
.productos h2::after {
   content: "";
   width: 7ch;
   height: 2px;
   margin-top: .382rem;
   display: block;
   background-color: var(--fondo-muyclaro);
}
.productos h3 {
   margin: 0.618rem 0 0.854rem;
   font-size: 2.73rem;
   font-weight: 600;
   line-height: 1.17;
   color: var(--fondo-muyclaro);
   grid-column: 1 / -1;
}
.productos p {
   line-height: 1.618rem;
    grid-column: 1 / -1;
}
.boton {
   color: var(--fondo-muyclaro);
   text-transform: uppercase;
   text-decoration: none;
   max-width: 20ch;
   margin-top: 1.618rem;
   padding: .92rem .92rem .88rem;
   font-weight: 600;
   text-align: center;
   background-color: var(--primario-medio);
   border-radius: 30px;
   transform: translateY(0);
   transition: .3s;
}
.boton:hover {
   transform: translateY(-4px);
   background-color: var(--secundario-a);
}
@media (min-width: 521px) and (max-width: 650px) {
   .productos {
      padding-top: 2.618rem;
      padding-bottom: 364px;
      background-image:  url(../images/fondo-productos-m.webp);
      background-position: center bottom;
   }
}
@media (min-width: 651px) and (max-width: 1079px) {
   .productos {
      padding-top: 2.618rem;
      padding-bottom: 5.618rem;
      background-image:  url(../images/fondo-productos-t.webp);
      background-position: right center;
      background-size: 61.8%;
   }
   .productos h2 {
      grid-column: 1 / 2;
      font-size: 1.3rem;
      color: var(--fondo-muyclaro);
   }
   .productos h2::after {
      content: "";
      width: 7ch;
      height: 2px;
      margin-top: .382rem;
      display: block;
      background-color: var(--fondo-muyclaro);
   }
   .productos h3 {
      margin: 0.618rem 0 0.854rem;
      font-size: 2.73rem;
      font-weight: 600;
      color: var(--fondo-muyclaro);
      grid-column: 1 / 2;
   }
   .productos p {
       grid-column: 1 / 2;
   }
   .boton {
      grid-column: 1 / 2;
   }
}
@media (min-width: 1080px) {
   .productos .reticula-2 {
      gap: 2.618rem;
   }
   .productos {
      padding-top: 2.618rem;
      padding-bottom: 5.618rem;
      background-image:  url(../images/fondo-productos.webp);
      background-position: right center;
      background-size: 54%;
   }
   .productos h2 {
      grid-column: 1 / 2;
   }
   .productos h3 {
      grid-column: 1 / 2;
      font-size: 2.99rem;
   }
   .productos p {
       grid-column: 1 / 2;
       font-size: 1.17rem;
       line-height: 1.618;
   }
   .boton {
      grid-column: 1 / 2;
   }
}

/* ----
   seccion aplicaciones
---- */
/* =====================================================================
   HERO CON CARRUSEL — pagina de aplicaciones
   =====================================================================
   Sin JavaScript. El deslizamiento, el arrastre tactil y el teclado los
   hace scroll-snap de forma nativa.
   ---------------------------------------------------------------------- */
.hero-aplicaciones {
   position: relative;
   /* Nada de width:100vw. Esta seccion es hija directa de <main>, que no
      tiene ancho maximo, asi que ya ocupa el 100%. 100vw ademas incluye el
      ancho de la barra de desplazamiento y saca scroll horizontal. */
}

.carrusel {
   display: flex;
   overflow-x: auto;
   /* mandatory y no proximity: con proximity el navegador decide si vale la
      pena encajar, y en arrastres cortos deja la lamina a medias. */
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   /* La barra se oculta porque los puntos de abajo son la senal de que hay
      mas. Sin los puntos, ocultarla dejaria el carrusel sin ninguna pista
      de que se puede deslizar. */
   scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }

.carrusel__lamina {
   /* flex: 0 0 100% -> cada lamina ocupa el ancho entero y NO se encoge.
      Sin el 0 de shrink, cuatro laminas se reparten el ancho y se ven las
      cuatro a la vez, comprimidas. Es el fallo mas comun de este patron. */
   flex: 0 0 100%;
   scroll-snap-align: start;
   /* EVITA EL SALTO VERTICAL AL PULSAR UN PUNTO.
      Un enlace #ap-2 hace que el navegador desplace TODOS los contenedores
      hasta dejar el destino a la vista: el carrusel en horizontal —que es
      lo que se quiere— y tambien el documento en vertical, sacando la
      cabecera de pantalla.

      scroll-margin-top le dice cuanto espacio dejar por encima del destino
      al hacer ese calculo. Como el hero es lo primero de la pagina, con un
      valor mayor que su distancia al inicio del documento la posicion
      calculada sale negativa, y el navegador la recorta a 0: no se mueve
      nada en vertical. El desplazamiento horizontal si ocurre. */
   scroll-margin-top: 100vh;
   width: 100%;
   height: 88vh;
   min-height: 380px;
   display: block;
}

/* La lamina es ahora un <picture>, que es solo un contenedor: quien pinta
   es el <img> de dentro, y hay que decirle que llene a su padre.
   object-fit: cover recorta en vez de deformar; con width y height en el
   HTML el navegador reserva el hueco antes de descargar. */
.carrusel__lamina img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* VERTICAL — la lamina ocupa la pantalla entera.
   orientation: portrait significa alto > ancho. En un telefono en vertical
   siempre; en escritorio casi nunca, salvo ventana muy estrecha y alta.

   Dos declaraciones de height a proposito: dvh es la unidad buena —se ajusta
   cuando la barra de direcciones del movil aparece y desaparece— y vh queda
   de reserva para navegadores que no la entiendan. El orden importa: la
   segunda gana donde se soporta. */
@media (orientation: portrait) {
   .carrusel__lamina {
      height: 91vh;
      height: 91dvh;
   }
   .hero-aplicaciones__texto { inset: 30% 0 0 0; }
}

/* El texto va encima, con un velo que garantiza el contraste: sobre una
   fotografia que cambia de clara a oscura por zonas no hay forma de
   asegurarlo de otro modo. */
.hero-aplicaciones__texto {
   position: absolute;
   inset: 39% 0 0 0;
   padding: 6rem 1.618rem 3.382rem;
   background: linear-gradient(transparent, rgba(30, 41, 59, .82));
   color: var(--fondo-muyclaro);
   pointer-events: none;   /* que no robe el arrastre del carrusel */
}
.hero-aplicaciones__texto a { pointer-events: auto; }   /* menos el boton */

.hero-aplicaciones__texto h1 { margin: 0 0 1.618rem 1.618rem; font-size: 2.73rem; text-transform:uppercase; text-shadow: -2px 2px 9px var(--tinta); }
.hero-aplicaciones__texto h1::after { content:""; display:block; width:7ch; height:3px; margin: .854rem 0 0; background-color:var(--fondo-muyclaro); }
.hero-aplicaciones__texto p  { margin: 0 0 2.618rem 1.618rem; font-size: 1.17rem; max-width: 44ch; }
.hero-aplicaciones__texto p:first-of-type  { line-height: 1.43; text-shadow: -2px 2px 9px var(--tinta); }
.hero-aplicaciones__texto p .boton { padding: .78rem 1.854rem .618rem }

/* Los puntos. Enlaces de ancla: el desplazamiento lo hace el navegador. */
.carrusel__puntos {
   position: absolute;
   /* left y right a 0 en vez de solo right: asi la caja ocupa todo el ancho
      y justify-content puede centrar dentro. Anclada solo a la derecha, la
      caja mide lo que miden los puntos y no hay espacio que repartir. */
   left: 0;
   right: 0;
   bottom: 1.382rem;
   display: flex;
   justify-content: center;
   gap: .618rem;
   /* La barra ocupa todo el ancho pero solo deben ser pulsables los puntos:
      sin esto tapa el arrastre del carrusel en esa franja. */
   pointer-events: none;
}
.carrusel__puntos a { pointer-events: auto; }
.carrusel__puntos a {
   /* 44x44 de area tactil aunque el punto se vea de 12px: el circulo es el
      ::after, y el enlace es el area que lo rodea. */
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
}
.carrusel__puntos a::after {
   content: "";
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--fondo-muyclaro);
   opacity: .55;
   transition: opacity .25s ease, transform .25s ease;
}
.carrusel__puntos a:hover::after,
.carrusel__puntos a:focus-visible::after {
   opacity: 1;
   transform: scale(1.2);
}

/* El punto de la lamina que se esta viendo. Lo marca avg.js con
   aria-current, el MISMO atributo que anuncia el estado al lector de
   pantalla — igual que [aria-current="page"] en los dos menus. Sin JS este
   selector no encuentra nada y los puntos se quedan todos iguales: se
   pierde la senal, no la navegacion. */
.carrusel__puntos a[aria-current]::after {
   opacity: 1;
   transform: scale(1.35);
}

/* Texto que existe para el lector de pantalla y no se ve.
   NO reutilizar .trampa para esto: esa clase es el senuelo antispam del
   formulario y su comentario advierte de lo que pasa si se toca. */
.visualmente-oculto {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
}
@media (max-width: 520px) {
   .hero-aplicaciones__texto p  { display: none; }
}

@media (prefers-reduced-motion: reduce) {
   .carrusel { scroll-behavior: auto; }
   .carrusel__puntos a::after { transition: none; }
}
/* == // hero con carrusel == */
/* aplicaciones */
.aplicaciones h2 {
   font-size: 1.56rem;
   text-align: center;
   text-transform: uppercase;
}
.aplicaciones h2::before {
   content: "";
   display: inline-block;
   width: 1ch;
   height: 4px;
   margin-right: 2ch;
   margin-bottom: 6px;
   background: var(--fondo-muyclaro);
}
.aplicaciones h2::after {
   content: "";
   display: inline-block;
   width: 1ch;
   height: 4px;
   margin-left: 2ch;
   margin-bottom: 6px;
   background: var(--fondo-muyclaro);
}
.aplicaciones ul {
   padding: 1.618rem 0 0;
   display: grid;
   gap: 2.618rem;
   grid-template-columns: repeat(2, 1fr);
   list-style: none;
}
.aplicaciones ul li {
   font-size: 1.17rem;
   font-weight: 600;
   text-transform: uppercase;
   text-align: center;
   align-content: end;
   padding-bottom: 1.618rem;
}
.aplicaciones ul li a {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .382rem;
   width: 110px;
   height: 110px;
   color: var(--fondo-muyclaro);
   text-decoration: none;
   opacity: .8;
   transition-property: transform, color, opacity;
   transition-duration: .4s;
}
.aplicaciones ul li a:hover,
.aplicaciones ul li a:focus-visible {
   opacity: 1;
   transform: translateY(-5px);
}
.aplicaciones ul li img {
   width: 150px;
   height: auto;
}
#a-pintura, #a-plastico, #a-hule, #a-cosmeticos {
   scroll-margin-top: 91px;
}
@media (min-width: 650px) and (max-width: 900px) {
   .aplicaciones h2 {
      font-size: 2.08rem;
   }
   .aplicaciones ul {
      gap: 1.618rem;
      grid-template-columns: repeat(4, 1fr);
   }
}
@media (min-width: 900.01px) {
   .aplicaciones h2 {
      font-size: 2.73rem;
   }
   .aplicaciones h2::before {
      width: 4ch;
      margin-right: 2ch;
      margin-bottom: 12px;
   }
   .aplicaciones h2::after {
      width: 4ch;
      margin-left: 2ch;
      margin-bottom: 12px;
   }
   .aplicaciones ul {
      gap: 2.618rem;
      grid-template-columns: repeat(4, 1fr);
   }
   .aplicaciones ul li a img {
      max-width: 156px;
      height: auto;
   }
}
.pintura {
   display: grid;
   gap: 2.618rem;
   grid-template-columns: 1fr;
}
.pintura .titulo {
   align-self: center;
}
.pintura .titulo h3.corto {
   margin-top: 0.618rem;
   margin-bottom: 0;
   font-size: 2.99rem;
   letter-spacing: -.04rem;
   font-weight: 700;
   line-height: 1.382;
   color: var(--secundario-a);
}
.pintura .titulo h3 {
   margin-top: 0.618rem;
   margin-bottom: 0;
   font-size: 3.90rem;
   letter-spacing: -.04rem;
   font-weight: 700;
   line-height: 1.382;
   color: var(--secundario-a);
}
.pintura h4 {
   padding: 1.618rem 0 0;
   margin: 0;
   font-size: 2.08rem;
   font-weight: 700;
}
.pintura h4::after {
   content: "";
   display: block;
   width: 7ch;
   height: 2px;
   margin-top: 1rem;
   background: var(--fondo-muyclaro);
}
.pintura h5 {
   padding: 0;
   font-size: 1.17rem;
}
.texto-plastico img {
   margin-top: 1.618rem;
   border-radius: 8px;
}
.carbonatos, .caolines {
   margin: 1.618rem 0 3.618rem;
   padding: .618rem 1.618rem 2.618rem;
   background-color: var(--primario-medio);
   border-radius: 10px;
}
.regresar img {
   padding-bottom: 0;
}
.regresar svg {
   margin-top: 1.618rem;
   width: 52px;
   height: 52px;
}
.regresar svg path {
   fill: var(--fondo-medio);
   transition: .4s ease;
}
.regresar:hover svg path {
   fill: var(--primario-claro);
}

.hule {
   display: grid;
   gap: 2.618rem;
   grid-template-columns: 1fr;
}
.texto-hule {
   grid-row-start: 2;
}
.hule .titulo {
   align-self: center;
}
.hule .titulo h3 {
   margin-top: 0.618rem;
   margin-bottom: 0;
   font-size: 3.9rem;
   letter-spacing: -.04rem;
   font-weight: 700;
   line-height: 1.382;
   color: var(--primario);
   grid-row-start: 0;

}
.hule .texto-hule h4 {
   padding: 1.618rem 0 0;
   margin: 0.382rem 0 1.618rem;
   font-size: 2.08rem;
   font-weight: 700;
   color: var(--primario);
}
.hule .texto-hule h4::after {
   content: "";
   display: block;
   width: 7ch;
   height: 2px;
   margin-top: 1rem;
   background: var(--secundario-b);
 }
.texto-hule img {
   margin-bottom: 1.618rem;
   border-radius: 8px;
}
ul.nav-aplicaciones {
   margin-left: 0;
   padding-left: 0;
   list-style: none;
   display: flex;
   gap: 1.382rem;
}
ul.nav-aplicaciones li a {
   display: inline-block;
   transition-property: transform;
   transition-duration: .4s;
   transform: translateY(5px);
}
ul.nav-aplicaciones li a:hover,
ul.nav-aplicaciones li a:focus-visible {
    transform: translateY(0);
}
ul.nav-aplicaciones li a img {
   max-width: 56px;
   height: auto;
}
@media (min-width: 850px) {
   .pintura {
      grid-template-columns: 1fr 1fr;
   }
   .hule {
      grid-template-columns: 1fr 1fr;
   }
   .texto-hule {
      grid-row-start: 1;
      grid-column-start: 1 / 2;
   }
   .hule .titulo h3 {
      font-size: 3.9rem;
      letter-spacing: -.04rem;
      grid-column-start: 2 / 3;
      grid-row-start: 2;

   }
}
/*
   // aplicaciones
*/

/*
   productos
*/
.hero-productos {
   display: flex;
   width: 100vw;
   height: 93vh;
   padding: 1.382rem 1.382rem 2.618rem;
   background-image: linear-gradient(
                    rgba(251, 193, 18, 0.0) 65%,
                    rgba(251, 193, 18, 0.65) 80%,
                    rgba(251, 193, 18, 1) 100%),
   url(../images/hero-productos.webp);
   background-repeat: no-repeat, no repeat;
   background-size: cover, cover;
   background-position: center, center;
}
.hero-productos .hero {
   display: flex;
   flex-direction: column;
   color: var(--fondo-muyclaro);
   justify-content: flex-end;
   text-align: center;
   flex-grow: 2;
}
.hero-productos .hero h1 {
   padding: .854rem 0 .618rem;
   margin: 0;
   align-self: center;
   min-width: 11ch;
   font-size: 2.73rem;
   text-transform: uppercase;
   animation: productos-h1avg 2.6s 1;
   background: var(--primario-medio);
   border-radius: 12px;
}
.hero-productos .hero p {
   padding-top: 1.618rem;
   padding-bottom: 0.618rem;
   font-size: 2.34rem;
   font-weight: 600;
   color: var(--tinta);
   text-shadow: 0px 4px 7px #fcd765;
   animation: productos-pavg 2.6s 1;
}
.foto-productos {
   max-width: 61.8%;
   height: auto;
   margin: 0 auto 0;
   display: block;
}
@media (min-width: 586px) and (max-width: 779px) {
   .foto-productos { max-width: 38.2%; }
}
@media (min-width: 780px) and (max-width: 909px) {
   .foto-productos { margin: 0; max-width: 38.2%; }
}
@media (min-width: 910px) {
   .foto-productos { margin: 0; max-width: 61.8%; }
}
@keyframes productos-h1avg {
   from {
      transform: scale(1.3);
      color: var(--primario-claro);
   }
   to {
      transform: scale(1);
      color: var(--fondo-muyclaro);
   }
}
@keyframes productos-pavg {
   from {
      transform: scale(1.3);
      color: var(--primario-claro);
   }
   to {
      transform: scale(1);
      color: var(--tinta);
   }
}

@media (min-width: 769px) {
   .hero-productos {
      height: 85.40vh;
      padding: 1.382rem 1.382rem 2.618rem;
      background-image: linear-gradient(
                    rgba(251, 193, 18, 0.0) 65%,
                    rgba(251, 193, 18, 0.65) 80%,
                    rgba(251, 193, 18, 1) 100%),
   url(../images/hero-productos-d.webp);
   background-repeat: no-repeat, no repeat;
   background-size: cover, cover;
   background-position: center, center;
   }
   .hero-productos .hero { justify-content: end; }
   .hero-productos .hero h1 { font-size: 3.382rem; }
   .hero-productos .hero p { font-size: 1.95rem; max-width: 27ch; align-self:center; }
}
.reticula-1_3 {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1.618rem;
}
.seccion-productos h2 {
   max-width: 85.4%;
   margin: 0 auto 1.618rem;
   font-size: 1.69rem;
   line-height: 1.382;
   color: var(--primario-oscuro);
   text-align: center;
}
.seccion-productos h2::after {
   content: "";
   width: 38.2%;
   height: 3px;
   margin: 1.618rem auto 0;
   display: block;
   background-color: var(--fondo-muyclaro);
}
.seccion-productos h3 {
   padding-top: 0;
   margin-top: 1.382rem;
   font-size: 3.9rem;
}
.seccion-productos h3::after {
   content: "";
   width: 4ch;
   height: 3px;
   margin: .618rem 0 0;
   display: block;
   background-color: var(--fondo-muyclaro);
}
.seccion-productos h3.talco {
   color: var(--fondo-oscuro);
}
.seccion-productos h3.talco::after {
   content: "";
   width: 4ch;
   height: 3px;
   margin: .618rem 0 0;
   display: block;
   background-color: var(--fondo-medio);
}
.seccion-productos h4 {
   max-width: 15ch;
   padding: 0.382rem 1.618rem .382rem;
   margin-top: 1.618rem 0 .382rem;
   background-color: var(--primario-oscuro);
   font-family: 'Rubik';
   font-weight: 600;
   font-size: 1.56rem;
   text-align: center;
   line-height: 1.618;
   text-transform: uppercase;
   border-radius: 30px;
}
.talco_h {
   color: var(--fondo-muyclaro);
   background-color: var(--acento-a) !important;
}
.seccion-productos h5 {
   padding-top: 0;
   margin-top: 1.618rem 0 .382rem;
   font-family: 'Rubik';
   font-weight: 600;
   font-size: 1.56rem;
}
.seccion-productos h5::before {
   content: "";
   display: inline-block;
   width: 2ch;
   height: 2px;
   margin: 0 1ch 7px 0;
   background-color: var(--fondo-muyclaro);
}
.seccion-productos li {
   font-size: 1.17rem;
   line-height: 1.618;
}
.seccion-productos p.intro {
   padding: 0.618rem 2.618rem 0;
   font-size: 1.17rem;
   text-align: center;
}
.separador-img {
   margin: -3.618rem auto 2.618rem;
   display: block;
}
@media (min-width: 780.01px) {
   .reticula-1_3 {
      grid-template-columns: 1fr 1fr;
   }
   .seccion-productos h2 {
      max-width: 61.8%;
   }
   .seccion-productos p.intro {
      max-width: 61.8%;
      margin: 0 auto 0;
   }
   .separador-img {
      max-width: 52%;
      height: auto;
   }
}
/*
   // productos
*/
/* Mensajes de un solo uso (Session::flash). Los tipos que usa el código
   son exito y error; el layout compone la clase como .aviso--exito. */
/* =====================================================================
   CONTACTO — avisos y formulario
   Sustituye el bloque de clases vacias de avg.css.
   ===================================================================== */
.contacto {
   display: grid;
   gap: 1.618rem;
   grid-template-columns: 1fr;
}
.contacto h1 {
   grid-column: 1 / -1;
   padding: 0;
   margin: 0;
   color: var(--primario-medio);
   font-size: 2.73rem;
   text-transform: uppercase;
}
.contacto h1::after {
   content: "";
   display: block;
   width: 8ch;
   height: 2px;
   margin: .618rem 0 .618rem;
   background-color: var(--secundario-a);
}
.contacto p {
   grid-column: 1 / -1;
   line-height: 1.382;
   padding: 0 .618rem 0;
}
.contacto-imagen img {
   border: solid 1px var(--fondo-medio);
   border-radius: 12px;
}
.contacto-grid {
   display: grid;
   grid-column: 1 / -1;
   grid-template-columns: repeat(5, 1fr);
   margin: .382rem 0 1.618rem;
   padding: .854rem 1.382rem 1.382rem;
   background-color: var(--fondo-muyclaro);
   border-radius: 12px;
   box-shadow: 1px 2px 5px var(--fondo-oscuro);
}
.contacto-grid h2 {
   grid-column: 1 / 5;
   color: var(--secundario-a);
}
.contacto-grid h2::after {
   content: "";
   display: block;
   width: 8ch;
   height: 2px;
   margin: .618rem 0 .618rem;
   background-color: var(--fondo-medio);
}
.contacto-grid img {
   grid-column: 5 / 6;
   justify-self: end;
}
.contacto-grid p {
  grid-column: 1 / 6;
}
.contacto div a {
   color: var(--secundario-a);
   font-size: 1.17rem;
   text-decoration: none;
   transition: color .4s ease;
   cursor: pointer;
}
.contacto div a:hover,
.contacto div a:focus-visible {
   color: var(--acento-a);
}

@media (min-width: 585px) {
   .contacto {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   }
   .contacto-grid {
      display: grid;
      grid-column: span 3;
   }
   .contacto-texto {
      grid-column: span 4;
   }
   .contacto-imagen {
      grid-column: span 2;
      padding-bottom: 2.382rem;
   }
}

.formulario-tarjeta {
   display: grid;
   grid-template-columns: 1fr;
   margin: .382rem auto 3.618rem;
   gap: 1.618rem;
   padding: 1.854rem 2.618rem 4.382rem;
   max-width: 92vw;
   background-color: var(--fondo-muyclaro);
   border-radius: 12px;
   box-shadow: 1px 2px 5px var(--fondo-oscuro);
}
@media (min-width: 750px) and (max-width: 1179px) {
   .formulario-tarjeta {
      max-width: 94vw;
   }
}
@media (min-width: 1180px) {
   .formulario-tarjeta {
      max-width: 1130px;
   }
}
.formulario-tarjeta h2 {
  color: var(--secundario-a);
}
.formulario-tarjeta h2::after {
   content: "";
   display: block;
   width: 8ch;
   height: 2px;
   margin: .618rem 0 .618rem;
   background-color: var(--fondo-medio);
}
.formulario-tarjeta div, .formulario-tarjeta div:first-of-type { display:grid; }
.formulario-tarjeta div.fotografia-piedra {
   max-width: 61.8%;
   height: auto;
   margin: 0 auto 0;
   align-self: center;
}
@media (min-width: 850px) {
   .formulario-tarjeta {
      grid-template-columns: 1fr 1fr 1fr;
   }
   .formulario-tarjeta div:first-of-type {
      grid-column: 1 / 3;
   }
   .formulario-tarjeta div.fotografia-piedra {
      grid-column-start: 4 / 4;
      max-width: 92%;
      height: auto;
      margin-right: 0;
   }
}
/* --- Formulario --------------------------------------------------------
   42rem de ancho maximo y no los 1180px de .bloque. Un campo de texto de
   1180px obliga a barrer la pantalla con la vista de un extremo a otro para
   leer lo que se escribe; entre 45 y 75 caracteres es donde el ojo trabaja
   comodo. La legibilidad manda sobre el ancho disponible.

   Grid y no flex porque en pantalla ancha los campos cortos se emparejan de
   dos en dos, y con grid eso es una linea. */
.formulario {
   display: grid;
   gap: 1.382rem;
   max-width: 42rem;
}

/* .trampa es position:absolute y el campo del token es un input oculto:
   ninguno de los dos ocupa celda. Si algun dia se anade otro hijo directo
   al <form>, ojo — la rejilla le dara la suya. */

@media (min-width: 40rem) {
   .formulario { grid-template-columns: 1fr 1fr; }

   /* El mensaje ocupa la fila entera. :has(textarea) y NO :nth-of-type(4):
      nth-of-type cuenta por ETIQUETA, y el primer <div> del formulario es
      .trampa, asi que el cuarto div es el telefono y no el mensaje. Probado:
      con nth-of-type se descuadraba la rejilla entera. :has dice lo que de
      verdad importa —"el campo que contiene un textarea"— y sigue valiendo
      si se reordenan los campos.

      1 / -1 y no 1 / 3: -1 es "hasta la ultima linea", asi que sigue
      valiendo si algun dia son tres columnas. */
   .formulario > .campo:has(textarea),
   .formulario > .campo-producto,
   .formulario .boton { grid-column: 1 / -1; }
}

.campo {
   display: grid;
   gap: .382rem;
}
.campo label {
   font-family: 'Barlow', system-ui, sans-serif;
   font-weight: 700;
   font-size: .92rem;
   text-transform: uppercase;
   letter-spacing: .02em;
   color: var(--tinta);
}

/* --- Grupo de casillas de producto -------------------------------------
   <fieldset> trae de fábrica borde, margen, relleno y —lo que rompe las
   rejillas— min-inline-size: min-content. Ese mínimo hace que la caja no
   pueda encoger por debajo del contenido más ancho, así que en móvil se
   desborda. Los cuatro se anulan aquí; el min-width: 0 es el que importa. */
.campo-producto {
   min-width: 0;
   margin: 0;
   border: 1px solid var(--fondo-oscuro);   /* 5.05 : 1 */
   border-radius: 4px;
   padding: .854rem 1.117rem 1.117rem;
   display: grid;
   gap: .618rem 1.382rem;
   grid-template-columns: repeat(1, 1fr);
}

.campo-producto legend {
   padding: 0 .382rem;
   font-family: 'Barlow', system-ui, sans-serif;
   font-weight: 700;
   font-size: .92rem;
   text-transform: uppercase;
   letter-spacing: .02em;
   color: var(--tinta);
}

/* La fila: casilla y texto en la misma línea de base óptica.
   align-items: center y no baseline — con baseline, una etiqueta que se
   parta en dos líneas arrastra la casilla al centro del bloque de texto. */
.campo-producto__opcion {
   display: grid;
   grid-template-columns: repeat(14, 1fr);
   grid-column: 1 / -1;
   gap: .618rem;
}

.campo-producto__opcion input {
   grid-column: 1 / 2;
}
.campo-producto__opcion label {
   grid-column: 2 / 14;
}

.campo-producto__opcion input[type="checkbox"] {
   margin: 0;
   width: 1.1rem;
   height: 1.1rem;
   accent-color: var(--secundario-a);   /* el color de la marca, sin reconstruir el control */
   cursor: pointer;
}

/* El <label> asociado por for/id ya hace que al pulsar el texto se marque
   la casilla. El cursor lo anuncia. */
.campo-producto__opcion label {
   cursor: pointer;
   line-height: 1.3;
}

.campo-producto__opcion input[type="checkbox"]:focus-visible {
   outline: 2px solid var(--acento-a);
   outline-offset: 2px;
}

.campo label span { color: var(--primario-medio); }

.campo input,
.campo textarea {
   color: var(--tinta);
   width: 100%;
   padding: .618rem .854rem;
   background: var(--fondo-muyclaro);
   border: 1px solid var(--fondo-oscuro);   /* 5.05 : 1, muy por encima del 3 : 1 que pide un borde */
   border-radius: 4px;
   transition: border-color .2s ease, box-shadow .2s ease;
}

.campo textarea {
   resize: vertical;    /* solo vertical: horizontal rompe la rejilla */
   min-height: 8rem;
}

/* :focus-visible y no :focus. Con :focus el anillo tambien sale al hacer
   clic con el raton, que es ruido; :focus-visible lo reserva para el
   teclado, que es quien lo necesita para saber donde esta.

   outline y no border: cambiar el borde mueve la caja 1px y el campo da un
   tironcito. El outline se pinta fuera y no ocupa espacio. */
.campo input:focus-visible,
.campo textarea:focus-visible {
   outline: 2px solid var(--acento-a);      /* 6.93 : 1 */
   outline-offset: 2px;
}

/* El estado de error se lee de aria-invalid, el MISMO atributo que anuncia
   el fallo al lector de pantalla. Una sola fuente para lo que se ve y lo
   que se oye: sin clase paralela que pueda quedar desincronizada. */
.campo [aria-invalid="true"] {
   border-color: var(--primario-medio);
   border-width: 2px;
   /* El borde no puede ser la unica senal: quien no distinga el naranja del
      gris no veria nada. El mensaje de .campo__error es la senal de verdad. */
}

.campo__error {
   margin: 0;
   font-size: .92rem;
   font-weight: 500;
   color: var(--primario-oscuro);   /* 12.46 : 1 — el naranja medio se queda en 3.61 y no pasa como texto */
}

.campo__error::before {
   content: "! ";
   font-weight: 700;
}

/* --- El boton de envio -------------------------------------------------
   .boton ya existe y esta escrito pensando en un <a>. Un <button> necesita
   tres cosas mas: quitarle el borde y el fondo del sistema, heredar la
   tipografia (tampoco la hereda) y el cursor de mano.

   justify-self: start para que no se estire a lo ancho de su celda: un
   boton de 42rem de ancho no parece un boton. */
button.boton {
   font: inherit;
   font-weight: 600;
   border: 0;
   cursor: pointer;
   justify-self: start;
}

@media (prefers-reduced-motion: reduce) {
   .boton { transition: none; }
   .boton:hover { transform: none; }
   .campo input,
   .campo textarea { transition: none; }
}

/* Acción principal. Se usa en <a> y en <button>, así que conviene que la
   regla sirva para los dos. */

/* --- Boton de copiar el correo -----------------------------------------
   Oculto mientras avg.js no haya puesto .con-js en el <body>: sin JS el
   boton no hace nada, y un boton muerto es peor que ninguno. El enlace
   mailto de al lado sigue funcionando siempre, con JS y sin el.
   Mismo criterio que la hamburguesa. */
.copiar { display: none; }

.con-js .copiar {
   display: inline-block;
   margin-top: .618rem;
   margin-left: .618rem;
   padding: .236rem .618rem;
   font: inherit;
   font-size: .78rem;
   text-transform: uppercase;
   letter-spacing: .02em;
   color: var(--fondo-muyclaro);
   background: var(--fondo-oscuro);   /* 5.05 : 1 con el texto claro encima */
   border: 0;
   border-radius: 6px;
   cursor: pointer;
   transition: background-color .25s ease;
}

.con-js .copiar:hover { background: var(--primario-oscuro); }

.copiar:focus-visible {
   outline: 2px solid var(--acento-a);
   outline-offset: 2px;
}

/* Confirmacion visual. El aviso de al lado dice lo mismo en texto: el color
   no puede ser la unica senal (WCAG 1.4.1). */
.copiar--hecho { background: var(--secundario-a); }

.copiar__aviso {
   margin-left: .618rem;
   font-size: .85rem;
   color: var(--tinta);
}

@media (prefers-reduced-motion: reduce) {
   .con-js .copiar { transition: none; }
}


/* --- Avisos de un solo uso (Session::flash) ----------------------------
   El color NO lleva el mensaje solo. WCAG 1.4.1 prohibe usar el color como
   unico medio para transmitir informacion: quien no distingue verde de
   naranja veria dos cajas identicas. Por eso cada aviso lleva ademas un
   simbolo en el ::before y el texto lo dice.

   El texto va en --tinta sobre fondo claro (14.6 : 1) y el color semantico
   se queda en la barra lateral, que es decoracion con significado y solo
   necesita 3 : 1. Al reves —texto verde sobre blanco— --secundario-a da
   3.05 y no pasa. Es la unica forma de usar el verde y el naranja aqui. */
.avisos {
   /* Los mismos 1180px y el mismo padding lateral que .bloque, para que el
      borde izquierdo del aviso caiga en la misma vertical que el <h1> y que
      los campos. Centrarlo a 42rem lo dejaba flotando fuera de la retícula
      del resto de la página. El aviso lo pinta el layout, asi que sale en
      cualquier pagina y tiene que alinearse con todas. */
   max-width: 1180px;
   margin: 0 auto;
   padding: 1.618rem 1.618rem 0;
}

.aviso {
   display: flex;
   gap: .854rem;
   margin: 0 0 .854rem;
   padding: .854rem 1.117rem;
   border-left: 4px solid var(--fondo-oscuro);
   border-radius: 4px;
   color: var(--tinta);
   background: var(--fondo-claro);
}

.aviso::before {
   flex: 0 0 auto;
   font-weight: 700;
   /* aria-hidden no hace falta: el contenido generado por CSS no siempre
      lo anuncian los lectores, y aqui el texto del aviso ya lo dice todo. */
}

.aviso--exito        { border-left-color: var(--secundario-a); }   /* 3.05 : 1 como linea, OK */
.aviso--exito::before { content: "✓"; color: var(--primario-oscuro); }

.aviso--error        { border-left-color: var(--primario-medio); } /* 3.61 : 1 como linea, OK */
.aviso--error::before { content: "!"; color: var(--primario-oscuro); }


/* Pie. */
footer {
   margin: 0;
   display: grid;
   gap: 1.618rem;
}
.fondo-pie {
   background-image: url(../images/fondo-pie.webp);
   background-size: 85.40%;
   background-repeat: no-repeat;
   background-position: right 91%;
}
.pie-bloque {
   margin: 0 auto 0;
   padding: 3.382rem 1.618rem .618rem;
}
.pie-info {
   width: 100%;
   display: grid;
   gap: 1.618rem;
   grid-template-columns: 1fr 1fr 1fr;
}
.pie-avg {
   grid-column: 1 / -1;
   padding-bottom: 2.618rem;
}
.pie-avg svg {
   width: 66%;
   height: auto;
   margin: 0 auto 0;
   display: block;
}
/* fill en <path> */
.pie-avg svg path {
   fill: var(--fondo-muyclaro);
}
.pie-menu {
   padding: 0;
   margin: 0;
}
.pie-menu ul {
   padding: 0;
}
.pie-menu ul li {
   margin: 0;
   padding: 0 0 .618rem;
   list-style: none;
}
.pie-menu ul li a {
   color: var(--fondo-muyclaro);
   font-weight: 600;
   text-decoration: none;
   transition: .2s ease;
}
.pie-menu ul li a:hover {
   color: var(--tinta);
}
.pie-menu ul li a[aria-current="page"] {
   color: var(--primario-oscuro);
}
.pie-menu ul li a[aria-current="page"]:hover {
   cursor: default;
}
.pie-contacto {
   grid-column: 1 / -1;
}
.pie-info h4 {
   margin: 0 0 1.618rem 0;
   padding: 0;
   font-size: 1.3rem;
   text-transform: uppercase;   
}
.pie-info h4::after {
   content: "";
   display: block;
   width: 8ch;
   height: 2px;
   margin: .618rem 0 .618rem;
   background-color: var(--fondo-muyclaro);
}
.pie-contacto ul {
   padding: 0;
   margin: 0;
}
.pie-contacto ul li {
   display: flex;
   align-items: center;
   gap: 1ch;
   padding: 0 0 .618rem;
   list-style: none;
}
.pie-contacto ul li img {
   flex-shrink: 0;
}
.pie-contacto ul li a {
   color: var(--fondo-muyclaro);
   text-decoration: none;
   transition: .4s ease;
}
.pie-contacto ul li a:hover {
   color: var(--tinta);
}
footer .cr {
   text-align: center;
}
footer span.pP {
   font-size: .8rem;
}
footer span.pP a {
   color: var(--fondo-muyclaro);
   font-weight: 600;
   text-decoration: none;
   transition: .2s ease;
}
footer span.pP a:hover {
   color: var(--tinta);
}
.pipeline {
   padding: 0 .618rem 0;
}
@media (min-width: 780px) and (max-width: 949px) {
   .fondo-pie {
      background-size: 61.8%;
      background-position: right 90%;
   }
   .pie-info {
      padding: 0 2rem 0;
      gap: 1.618rem;
      grid-template-columns: 1fr 1fr 1fr 1fr;
   }
   .pie-avg {
      grid-column: 1 / 3;
      width: 138.2%;
   }
   .pie-avg svg {
      margin: 0;
   }
   .pie-menu {
      padding-left: 4.618rem;
      padding-right: 1.382rem;
      grid-column: 3 / 5;
      grid-row-start: 1;
   }
   .pie-contacto {
      grid-column: 1 / 3;
   }
}
@media (min-width: 950px) and (max-width: 1399px) {
    .fondo-pie {
      background-size: 27.30%;
      background-position: right 75%;
   }
   .pie-info {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   }
   .pie-avg {
      grid-column: 1 / 3;
      width: 117%;
      margin: 0;
   }
   .pie-avg svg {
      margin: 0;
   }
   .pie-menu {
      padding-left: 0.618rem;
      grid-column: 3 / 4;
      grid-row-start: 1;
   }
   .pie-menu ul li {
   }
   .pie-contacto {
      grid-column: 4 / 6;
   }
}
@media (min-width: 1400px) {
   .fondo-pie {
      background-size: 27.30%;
      background-position: right 57.5%;
   }
   .pie-info {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   }
   .pie-avg {
      grid-column: 1 / 4;
      width: 100%;
      margin-left: 0;
   }
   .pie-menu {
      padding-left: 0.618rem;
      grid-column: 4 / 5;
      grid-row-start: 1;
   }
   .pie-menu ul li {
      padding-right: 9.1rem;
   }
   .pie-contacto {
      grid-column: 5 / 7;
   }
}
/* -----------
   css errores
----------- */
.errores { text-align: center; }
.errores h1 { margin: .618rem 0 .382rem; padding: 0; font-size: 2.34rem; color:var(--primario-oscuro); }
.errores h1.numero { margin: .618rem 0 .382rem; padding: 0; font-size: 10.4rem; color:var(--primario-oscuro); }
.errores img {
   max-width: 91%;
   height: auto;
   margin: 0 auto 0;
   display: block;
}
.errores h2 { font-size: 2.6rem; color:var(--primario-oscuro); }
.errores h2::after{
   content: "";
      display: block;
      margin: 15px auto 0;
      width: 13rem;
      height: 4px;
      background: var(--primario-medio);
}
.errores p { padding: 0 3vw 0;  font-size: 1.3rem; color:var(--primario-oscuro); }
.errores p a {
   text-decoration:none;
   font-weight: 600;
   color:var(--acento-a);
   transition: color .4s ease;
}
.errores p a:hover { color: var(--acento-b); }
.errores p span { margin: 0 1ch 0; font-weight:600; color: var(--fondo-muyclaro); }

@media (min-width: 800px) {
   .errores h1 { font-size:2.6rem; }
   .errores h1.numero { font-size:13rem; }
   .errores img { max-width:61.8%; height:auto; }
   .errores h2 { font-size:3rem; }
   .errores p { padding: 0 11vw 0; font-size:1.56rem; }
}