/* ==========================================================================
   ACON 10.01 — capa de marca
   Variables, tipografía base, botones, cabecera, buscador y pie.
   Las secciones viven en bloques.css.

   Paleta sacada de lo que ya usaba acon1001.com (azul marino de la barra,
   petróleo de la tarjeta «¿Quiénes somos?», verde lima del botón y verde
   bosque de «VISIÓN») y ajustada para pasar contraste AA:
     · el petróleo original #0096B4 da 3.5:1 sobre blanco → como TEXTO va
       #00718A (5.6:1); el original se queda para fondos y decoración.
     · el lima #78C81E no sirve como texto sobre blanco (2.0:1) → solo fondo
       de botón con texto marino encima (8.9:1).
   SIN COLOR INCRUSTADO fuera de este bloque: todo sale de variables.
   ========================================================================== */

:root {
  --marino: #0b1f3f;
  --marino-2: #12305c;
  --petroleo: #0096b4;
  --petroleo-tx: #00718a;
  --lima: #7cc522;
  --lima-2: #9ad94a;
  --bosque: #2f7d32;
  --hoja: #5db031;
  --hoja-2: #3f9126;

  --fondo: #f5f6f1;
  --fondo-2: #eceee6;
  --superficie: #ffffff;
  --tinta: #0b1f3f;
  --tinta-2: #44546b;
  --tinta-3: #6b7a8f;
  --linea: rgba(11, 31, 63, .12);
  --linea-2: rgba(11, 31, 63, .2);
  --acento: var(--petroleo-tx);
  --acento-2: var(--bosque);
  --sombra: 0 1px 2px rgba(11, 31, 63, .06), 0 12px 32px -12px rgba(11, 31, 63, .18);
  --sombra-2: 0 2px 4px rgba(11, 31, 63, .06), 0 28px 60px -20px rgba(11, 31, 63, .28);
  --vidrio: rgba(255, 255, 255, .72);
  --error: #c0392b;

  --f-sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;

  --r-1: 10px;
  --r-2: 18px;
  --r-3: 28px;
  --ancho: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --cab-alto: 76px;

  --ease-salida: cubic-bezier(.16, 1, .3, 1);
  --ease-dentro: cubic-bezier(.7, 0, .84, 0);
  --dur-1: .18s;
  --dur-2: .32s;
  --dur-3: .6s;

  color-scheme: light;
}

/* Oscuro: por preferencia del sistema si no hay elección guardada, o por la
   elección guardada. Dos bloques con el MISMO contenido; si se cambia uno se
   cambia el otro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #06111f;
    --fondo-2: #0a1828;
    --superficie: #0e1f33;
    --tinta: #e9eff5;
    --tinta-2: #a9b7c8;
    --tinta-3: #7f8fa3;
    --linea: rgba(233, 239, 245, .1);
    --linea-2: rgba(233, 239, 245, .18);
    --acento: #3cc6df;
    --acento-2: #8fd65a;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, .3), 0 28px 60px -20px rgba(0, 0, 0, .7);
    --vidrio: rgba(10, 24, 40, .72);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #06111f;
  --fondo-2: #0a1828;
  --superficie: #0e1f33;
  --tinta: #e9eff5;
  --tinta-2: #a9b7c8;
  --tinta-3: #7f8fa3;
  --linea: rgba(233, 239, 245, .1);
  --linea-2: rgba(233, 239, 245, .18);
  --acento: #3cc6df;
  --acento-2: #8fd65a;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --sombra-2: 0 2px 4px rgba(0, 0, 0, .3), 0 28px 60px -20px rgba(0, 0, 0, .7);
  --vidrio: rgba(10, 24, 40, .72);
  color-scheme: dark;
}

/* GeneratePress pinta con siete variables en un :root EN LÍNEA que llega
   después de nuestras hojas: se ganan con :root:root. */
:root:root {
  --contrast: var(--tinta);
  --contrast-2: var(--tinta-2);
  --contrast-3: var(--tinta-3);
  --base: var(--fondo-2);
  --base-2: var(--fondo);
  --base-3: var(--fondo);
  --accent: var(--acento);
}

/* ---------------------------------------------------------------- Base */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}

h1, h2, h3, h4 {
  font-family: var(--f-sans);
  color: var(--tinta);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--acento); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--lima); color: var(--marino); }

/* Los acentos en serif cursiva dentro de un titular. */
em.ac-serif, .ac-serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

.contenedor { width: min(100% - var(--gutter) * 2, var(--ancho)); margin-inline: auto; }

/* Rótulo: la etiqueta pequeña encima de cada titular. */
.ac-rotulo {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
}
.ac-rotulo::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.ac-saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-1);
  background: var(--marino);
  color: #fff;
  font-weight: 600;
  transition: top var(--dur-1) ease;
}
.ac-saltar:focus { top: 12px; }

/* GeneratePress: su contenedor de página no estorba a las secciones a ancho
   completo. */
.site-content, .inside-article, .entry-content, .site-main { margin: 0 !important; padding: 0 !important; }
.separate-containers .inside-article, .one-container .site-content { background: transparent; }
.entry-content > * { margin-block: 0; }
.site { background: transparent; }

/* ---------------------------------------------------------------- Iconos */

.ac-ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ac-ico--s { width: 14px; height: 14px; stroke-width: 2.2; }

/* ---------------------------------------------------------------- Botones */

.ac-btn {
  --bg: var(--marino);
  --tx: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--bg);
  color: var(--tx);
  font: 700 15px/1 var(--f-sans);
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-1) var(--ease-salida), box-shadow var(--dur-2) var(--ease-salida), background-color var(--dur-2) ease;
}
.ac-btn svg { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-salida); }
/* Imán: bloques.js mueve --mx/--my con el cursor. `translate` es una propiedad
   aparte de `transform`, así que no choca con :active ni con los íconos. El
   texto y el ícono se mueven un poco más que el botón: da profundidad. */
.ac-btn, .ac-carrusel__flecha, .ac-icobtn, .ac-cab__cliente { translate: var(--mx, 0px) var(--my, 0px); }
.ac-btn > svg { translate: calc(var(--mx, 0px) * .35) calc(var(--my, 0px) * .35); }
.ac-btn:hover svg { transform: translateX(4px); }
.ac-btn:active { transform: scale(.97); }
.ac-btn:hover { box-shadow: 0 10px 24px -10px var(--sombra-btn, rgba(11, 31, 63, .5)); }

/* Brillo que cruza el botón al pasar: un solo transform, nada de animar
   gradientes (en bimm-wp tumbó el renderizador sobre vidrio). */
.ac-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .7s var(--ease-salida);
}
.ac-btn:hover::after { transform: translateX(110%); }

.ac-btn--lima { --bg: var(--lima); --tx: var(--marino); --sombra-btn: rgba(124, 197, 34, .7); }
.ac-btn--lima:hover { --bg: var(--lima-2); }
.ac-btn--vidrio {
  --bg: rgba(255, 255, 255, .12);
  --tx: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ac-btn--vidrio:hover { --bg: rgba(255, 255, 255, .2); }
.ac-btn--linea { --bg: transparent; --tx: var(--tinta); border: 1.5px solid var(--linea-2); transition: transform var(--dur-1) var(--ease-salida), box-shadow var(--dur-2) var(--ease-salida), color var(--dur-2) ease, border-color var(--dur-2) ease; }
/* Relleno que sube desde abajo al pasar el cursor (el texto se invierte). */
.ac-btn--linea::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--tinta);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--ease-salida);
}
.ac-btn--linea:hover { border-color: var(--tinta); color: var(--fondo); }
.ac-btn--linea:hover::before { transform: scaleY(1); }

.ac-enlace {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 700;
  color: var(--acento);
}
.ac-enlace svg { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-salida); }
.ac-enlace:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- Cabecera */

.ac-cab {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--cab-alto);
  color: #fff;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease, transform .45s var(--ease-salida);
}
/* Sobre el hero la cabecera es transparente y blanca; al bajar se vuelve
   vidrio con la tinta del tema. `es-solida` la pone bloques.js; que haya hero
   se detecta con :has, sin esperar al JS (si no, salto en cada carga). */
.ac-cab.es-solida, body:not(:has(.ac-hero)) .ac-cab {
  background: var(--vidrio);
  color: var(--tinta);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 1px 0 var(--linea);
}
/* SIEMPRE PEGADA: ya no se esconde al bajar (Isaac, 8/oct). */
body:not(:has(.ac-hero)) { padding-top: var(--cab-alto); }

.ac-cab__in { height: 100%; display: flex; align-items: center; gap: 28px; }

.ac-logo { display: block; color: inherit; flex: none; }
.ac-logo__svg { display: block; height: 30px; width: auto; overflow: visible; }
.ac-logo__hoja { fill: var(--hoja); }
.ac-logo__hoja2 { fill: var(--hoja-2); }
.ac-logo__tallo { stroke: var(--hoja-2); }
.ac-logo__num { font: 600 80px/1 var(--f-sans); fill: currentColor; letter-spacing: -.01em; }

.ac-nav { margin-inline: auto; }
.ac-nav__lista { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.ac-nav__lista > li { position: relative; }
.ac-nav__lista > li > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 999px;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  opacity: .88;
  transition: opacity var(--dur-1) ease, background-color var(--dur-1) ease;
}
.ac-nav__lista > li > a:hover, .ac-nav__lista > li > a[aria-current="page"] { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.ac-nav__movil { display: none; }

/* Menú de servicios: aparece al pasar y al enfocar con teclado. */
.ac-mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 560px;
  padding: 22px;
  border-radius: var(--r-2);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: var(--sombra-2);
  border: 1px solid var(--linea);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px) scale(.98);
  transform-origin: top center;
  transition: opacity var(--dur-2) var(--ease-salida), transform var(--dur-2) var(--ease-salida), visibility 0s linear var(--dur-2);
}
.ac-mega::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.ac-nav__drop:hover .ac-mega, .ac-nav__drop:focus-within .ac-mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}
.ac-nav__drop:hover > a svg, .ac-nav__drop:focus-within > a svg { transform: rotate(180deg); }
.ac-nav__drop > a svg { transition: transform var(--dur-2) var(--ease-salida); }
.ac-mega__rot { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 10px; }
.ac-mega__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ac-mega__lista a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-1);
  color: var(--tinta);
  transition: background-color var(--dur-1) ease;
}
.ac-mega__lista a:hover { background: var(--fondo-2); }
.ac-mega__lista b { font-weight: 700; font-size: 15px; }
.ac-mega__lista span { font-size: 13px; color: var(--tinta-2); line-height: 1.35; }
.ac-mega__todos { display: inline-block; margin-top: 12px; padding: 0 12px; font-weight: 700; font-size: 14px; }

.ac-cab__acc { display: flex; align-items: center; gap: 6px; }
.ac-icobtn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-salida);
}
.ac-icobtn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.ac-icobtn:active { transform: scale(.92); }
.ac-ico--sol { display: none; }
:root[data-tema="oscuro"] .ac-ico--luna { display: none; }
:root[data-tema="oscuro"] .ac-ico--sol { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ac-ico--luna { display: none; }
  :root:not([data-tema="claro"]) .ac-ico--sol { display: block; }
}

/* Animación del cambio de tema (bloques.js). La imagen nueva entra en círculo
   sobre la vieja: sin el fundido que el navegador pone por omisión. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
/* El astro que aparece entra girando. */
.tema-cambia .ac-icobtn[data-tema-btn] svg { animation: ac-astro .55s var(--ease-salida) both; }
@keyframes ac-astro { from { opacity: 0; transform: rotate(-120deg) scale(.4); } }
/* Navegadores sin View Transitions: los colores se funden. */
.tema-funde, .tema-funde *, .tema-funde *::before, .tema-funde *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, stroke .45s ease !important;
}

.ac-cab__cliente {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  color: inherit;
  font-weight: 600;
  font-size: 15px;
  transition: background-color var(--dur-1) ease;
}
.ac-cab__cliente:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.ac-cab__cta { min-height: 42px; padding-inline: 20px; margin-left: 4px; }

.ac-cab__menu { display: none; position: relative; }
.ac-cab__menu span {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-salida);
}
.ac-cab__menu span:first-child { transform: translateY(-4px); }
.ac-cab__menu span:last-child { transform: translateY(4px); }
.menu-abierto .ac-cab__menu span:first-child { transform: rotate(45deg); }
.menu-abierto .ac-cab__menu span:last-child { transform: rotate(-45deg); }

@media (max-width: 1180px) {
  .ac-cab__cliente { display: none; }
}
@media (max-width: 980px) {
  :root { --cab-alto: 64px; }
  .ac-logo__svg { height: 24px; }
  .ac-cab__cta { display: none; }
  .ac-cab__menu { display: grid; margin-right: -9px; }
  /* El menú sale del flujo (es `fixed`), así que ya no hay nada que empuje
     los botones a la derecha: se los empuja aquí. Sin esto quedaban pegados
     al logotipo con un hueco a la derecha. El margen negativo del menú alinea
     su trazo con el filo del contenedor (el botón tiene 9px de aire). */
  .ac-cab__acc { margin-left: auto; gap: 2px; }
  .ac-nav {
    position: fixed;
    inset: var(--cab-alto) 0 0;
    margin: 0;
    padding: 24px var(--gutter) 40px;
    background: var(--fondo);
    color: var(--tinta);
    display: flex;
    flex-direction: column;
    gap: 28px;
    overflow-y: auto;
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .5s var(--ease-salida), visibility 0s linear .5s;
  }
  .menu-abierto .ac-nav { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
  /* 🚨 CON EL MENÚ ABIERTO LA CABECERA NO PUEDE LLEVAR NI `backdrop-filter` NI
     `transform`. Cualquiera de los dos la convierte en el bloque contenedor de
     sus hijos `fixed`: el menú dejaba de medirse contra la pantalla y se
     medía contra los 64px de la cabecera, así que se abría con alto cero.
     Pasaba solo al abrirlo después del hero, que es cuando la cabecera ya es
     de vidrio (Isaac, 8/oct: «abres el menú después del hero y no se ve
     nada»). */
  .menu-abierto .ac-cab {
    background: var(--fondo);
    color: var(--tinta);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    box-shadow: 0 1px 0 var(--linea);
  }
  .ac-nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .ac-nav__lista > li { border-bottom: 1px solid var(--linea); }
  .ac-nav__lista > li > a { width: 100%; justify-content: space-between; padding: 18px 0; font-size: 22px; font-weight: 700; border-radius: 0; opacity: 1; }
  .ac-nav__lista > li > a:hover { background: none; }
  /* Servicios es un DESPLEGABLE en el teléfono (Isaac, 8/oct): cerrado por
     omisión, se abre al tocar «Servicios». Una sola columna (las dos del
     escritorio partían la lista a la mitad). Se anima con filas de grid
     0fr → 1fr, que sí transiciona sin medir alturas en JS. */
  .ac-mega {
    position: static;
    width: auto;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: none;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--ease-salida);
  }
  .ac-nav__drop:hover .ac-mega, .ac-nav__drop:focus-within .ac-mega { transform: none; }
  .ac-mega::before { display: none; }
  .ac-nav__drop.abierto .ac-mega { grid-template-rows: 1fr; }
  .ac-mega__in { min-height: 0; overflow: hidden; }
  .ac-mega__rot { display: none; }
  .ac-mega__lista {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 6px;
    padding-left: 16px;
    border-left: 2px solid var(--acento);
  }
  .ac-mega__lista a { padding: 10px 0; border-radius: 0; }
  .ac-mega__lista a:hover { background: none; }
  .ac-mega__lista b { font-size: 16px; }
  .ac-mega__todos { display: block; margin: 0 0 18px; padding: 8px 0 0 18px; font-size: 15px; color: var(--acento); }
  .ac-nav__drop > a svg { display: block; width: 22px; height: 22px; }
  .ac-nav__drop:hover > a svg, .ac-nav__drop:focus-within > a svg { transform: none; }
  .ac-nav__drop.abierto > a svg { transform: rotate(180deg); }
  .ac-nav__movil { display: grid; gap: 12px; }
  .menu-abierto { overflow: hidden; }
}

/* ---------------------------------------------------------------- Buscador */

.ac-busca { position: fixed; inset: 0; z-index: 150; display: grid; place-items: start center; padding: 14vh var(--gutter) 0; }
.ac-busca[hidden] { display: none; }
.ac-busca__fondo { position: absolute; inset: 0; background: rgba(6, 17, 31, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ac-aparece var(--dur-2) ease both; }
.ac-busca__caja {
  position: relative;
  width: min(100%, 720px);
  padding: 22px;
  border-radius: var(--r-3);
  background: var(--superficie);
  box-shadow: var(--sombra-2);
  animation: ac-sube .45s var(--ease-salida) both;
}
.ac-busca__rot { display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 12px 4px; }
.ac-busca__fila { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; border: 1.5px solid var(--linea-2); color: var(--tinta-2); }
.ac-busca__fila:focus-within { border-color: var(--acento); }
.ac-busca__fila input { flex: 1; min-width: 0; border: 0; background: none; color: var(--tinta); font: 500 17px var(--f-sans); outline: none; padding: 10px 0; }
.ac-busca__nota { margin: 12px 0 0 4px; font-size: 13px; color: var(--tinta-3); }
.ac-busca kbd { font: 600 12px var(--f-sans); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--linea-2); }
@keyframes ac-aparece { from { opacity: 0; } }
@keyframes ac-sube { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* ---------------------------------------------------------------- Pie */

.ac-pie {
  position: relative;
  overflow: hidden;
  background: var(--marino);
  color: rgba(255, 255, 255, .78);
  padding: clamp(64px, 9vw, 110px) 0 32px;
  font-size: 15px;
}
.ac-pie a { color: rgba(255, 255, 255, .78); transition: color var(--dur-1) ease; }
.ac-pie a:hover { color: #fff; }
.ac-pie__rejilla { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1.3fr; gap: 48px; }
.ac-pie__marca .ac-logo__svg { height: 30px; color: #fff; }
.ac-pie__marca p { margin-top: 20px; max-width: 34ch; line-height: 1.6; }
.ac-pie h3 { color: #fff; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
.ac-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ac-pie__contacto a { display: inline-flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.ac-pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}
.ac-pie__base nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ac-pie .ac-pie__bimm b { color: #fff; font-weight: 700; }
.ac-pie__sello {
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 520px;
  aspect-ratio: 1;
  opacity: .05;
  background: #fff;
  -webkit-mask: url("img/monograma.png") center / contain no-repeat;
  mask: url("img/monograma.png") center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 860px) {
  .ac-pie__rejilla { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .ac-pie__marca { grid-column: 1 / -1; }
}
/* En el teléfono Contacto va a lo ancho: en media columna el correo se partía
   a la mitad («acon10.01ambiental / c@gmail.com»). */
@media (max-width: 620px) {
  /* Centrado (Isaac, 8/oct): en el teléfono Contacto va solo en su fila,
     debajo de las dos columnas, y alineado a la izquierda se veía suelto. */
  .ac-pie__contacto { grid-column: 1 / -1; text-align: center; }
  .ac-pie__contacto ul { justify-items: center; }
}

/* ---------------------------------------------------------------- Flotantes
   WhatsApp y volver arriba (la flecha que despega). Ver parts/flotantes.html.
   WhatsApp va ARRIBA de la flecha (Isaac, 8/oct) y siempre a la vista. La
   flecha solo aparece pasados los 500px; mientras no está, WhatsApp baja a
   ocupar su sitio (con `translate`, para no pelear con el `transform` del
   hover) y sube cuando la flecha aparece. Con el menú abierto se esconden. */

.ac-flota {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.ac-flota > * { pointer-events: auto; }
.menu-abierto .ac-flota { display: none; }

.ac-arriba {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vidrio);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--sombra);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(.85);
  pointer-events: none;
  transition: opacity .32s ease, transform .32s cubic-bezier(.34, 1.56, .64, 1);
}
.ac-flota.se-ve .ac-arriba { opacity: 1; transform: none; pointer-events: auto; }
.ac-flota.se-ve .ac-arriba:hover { transform: translateY(-3px) scale(1.06); }
/* Aro con el degradado de Acon: se pinta el degradado y se recorta el centro
   con una máscara (un `border` no admite degradado). */
.ac-arriba::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1.5px;
  background: linear-gradient(0deg, var(--petroleo), var(--lima));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.ac-arriba__flecha {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: url(#ac-grad-arriba);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-2) var(--ease-salida);
}
.ac-arriba:hover .ac-arriba__flecha { transform: translateY(-3px); }

/* EL DESPEGUE. Flecha y estela usan la MISMA duración y la MISMA curva que el
   scroll de bloques.js (1300 ms, cúbica de entrada y salida): la punta y la
   página llegan juntas, y como la estela crece con esa curva, su extremo va
   pegado a la flecha todo el trayecto. `--vuelo` lo calcula el JS: la
   distancia del botón al borde de arriba. */
.ac-arriba.despega .ac-arriba__flecha { animation: ac-despega 1.3s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes ac-despega {
  0% { transform: translateY(0); opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(var(--vuelo, -100vh)); opacity: 0; }
}
.ac-arriba__estela {
  position: absolute;
  left: calc(50% - 1px);
  bottom: 50%;
  width: 2px;
  height: calc(var(--vuelo, -100vh) * -1);
  border-radius: 2px;
  background: linear-gradient(0deg, rgba(0, 150, 180, 0), var(--petroleo) 45%, var(--lima));
  transform: scaleY(0);
  transform-origin: bottom;
  opacity: 0;
  pointer-events: none;
}
.ac-arriba.despega .ac-arriba__estela {
  animation:
    ac-estela 1.3s cubic-bezier(.65, 0, .35, 1) forwards,
    ac-estela-luz 1.3s linear forwards;
}
@keyframes ac-estela { to { transform: scaleY(1); } }
@keyframes ac-estela-luz { 0% { opacity: .9; } 70% { opacity: .7; } 100% { opacity: 0; } }

.ac-wa {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 28px -8px rgba(18, 140, 126, .65), 0 2px 6px rgba(0, 0, 0, .12);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), translate .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow var(--dur-2) ease;
}
/* Alto de la flecha (50) + hueco (12). */
.ac-flota:not(.se-ve) .ac-wa { translate: 0 62px; }
.ac-wa svg { width: 28px; height: 28px; }
.ac-wa:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 34px -10px rgba(18, 140, 126, .75), 0 2px 6px rgba(0, 0, 0, .12); }
.ac-wa:active { transform: scale(.94); }

@media (max-width: 620px) {
  .ac-flota { right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); gap: 10px; }
  .ac-arriba { width: 46px; height: 46px; }
  .ac-wa { width: 52px; height: 52px; }
  .ac-flota:not(.se-ve) .ac-wa { translate: 0 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-arriba.despega .ac-arriba__flecha, .ac-arriba.despega .ac-arriba__estela { animation: none; }
}