/* ===========================================================================
   OFITODO — Sistema de diseño propio
   HTML semántico + CSS moderno. Sin Elementor, sin jQuery, sin dependencias.
   =========================================================================== */

:root {
  /* Marca */
  --azul: #16325c;
  --azul-900: #0f2444;
  --azul-600: #1e4b8f;
  --acento: #1e73be;
  --acento-claro: #3b93e0;

  /* Neutros */
  --tinta: #16233a;
  --texto: #454e5e;
  --suave: #6b7688;
  --tenue: #98a2b3;
  --linea: #e6eaf1;
  /* --borde se usa en 20 reglas de paginas.css (tarjetas de producto, paneles,
     migas, tablas) y nunca se definió: todas quedaban sin borde. */
  --borde: #dfe4ec;
  --fondo: #f6f8fb;
  --fondo-2: #eef2f8;
  --blanco: #fff;

  /* Tipografía fluida */
  --t-hero: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem);
  --t-h2: clamp(1.85rem, 1.2rem + 2vw, 2.75rem);
  --t-base: clamp(1rem, 0.97rem + 0.12vw, 1.075rem);
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;

  /* Ritmo vertical y contenedor */
  --seccion: clamp(4rem, 2.5rem + 5vw, 7rem);
  --ancho: 1200px;
  --gutter: clamp(1.15rem, 0.6rem + 2vw, 2.5rem);

  /* Formas */
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-full: 999px;
  --s-1: 0 1px 2px rgb(22 50 92 / .06), 0 2px 6px rgb(22 50 92 / .05);
  --s-2: 0 4px 10px rgb(22 50 92 / .07), 0 14px 34px rgb(22 50 92 / .09);
  --s-3: 0 10px 24px rgb(22 50 92 / .12), 0 28px 60px rgb(22 50 92 / .16);
  --ease: .32s cubic-bezier(.4, 0, .2, 1);
}

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--tinta); line-height: 1.15; letter-spacing: -.022em; font-weight: 800; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px; }

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

/* --- Encabezado de sección --- */
.cab-seccion { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.cab-seccion.izq { margin-inline: 0; text-align: left; }
.etiqueta {
  display: inline-block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acento); margin-bottom: .85rem;
}
.cab-seccion h2 { font-size: var(--t-h2); }
.cab-seccion p { margin-top: 1rem; color: var(--suave); font-size: 1.0625rem; }

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.9rem; border: 0; border-radius: var(--r-full);
  font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer;
  transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease), color var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primario { background: var(--azul); color: var(--blanco); box-shadow: 0 6px 16px rgb(22 50 92 / .26); }
.btn--primario:hover { background: var(--azul-900); transform: translateY(-2px); box-shadow: 0 12px 26px rgb(22 50 92 / .32); }
.btn--claro { background: var(--blanco); color: var(--azul); box-shadow: var(--s-2); }
.btn--claro:hover { transform: translateY(-2px); box-shadow: var(--s-3); }
.btn--borde { background: transparent; color: var(--blanco); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45); }
.btn--borde:hover { background: rgb(255 255 255 / .12); transform: translateY(-2px); }
.btn--wa { background: #25d366; color: #fff; box-shadow: 0 6px 16px rgb(37 211 102 / .34); }
.btn--wa:hover { background: #1eb855; transform: translateY(-2px); }

/* --- Hero --- */
.hero { position: relative; isolation: isolate; color: var(--blanco); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgb(11 26 51 / .93) 0%, rgb(15 36 68 / .85) 42%, rgb(22 50 92 / .55) 100%);
}
.hero__inner { padding-block: clamp(4.5rem, 3rem + 10vw, 9rem); max-width: 660px; }
.hero .etiqueta { color: var(--acento-claro); }
.hero h1 { font-size: var(--t-hero); color: var(--blanco); margin-bottom: 1.25rem; }
.hero p { font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem); color: rgb(255 255 255 / .88); max-width: 56ch; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }
.hero__datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid rgb(255 255 255 / .18); }
.hero__dato strong { display: block; font-size: clamp(1.25rem, .9rem + .9vw, 1.7rem); font-weight: 800; color: var(--blanco); line-height: 1.15; }
.hero__dato span { font-size: var(--t-xs); color: rgb(255 255 255 / .7); letter-spacing: .04em; text-transform: uppercase; }

/* --- Cuadrículas --- */
.rejilla { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
.rejilla--4 { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.rejilla--sectores {
  /* 7 sectores repartidos sin huérfanos: 3 arriba (grandes) + 4 abajo.
     12 columnas → 3x4 y 4x3. Debajo de 1080px pasa a 2 por fila, y a 1 en móvil. */
  grid-template-columns: repeat(12, 1fr);
}
.rejilla--sectores > * { grid-column: span 3; }
.rejilla--sectores > :nth-child(-n+3) { grid-column: span 4; }
.rejilla--sectores > :nth-child(-n+3) .sector__nombre { font-size: 1.15rem; }
@media (max-width: 1080px) {
  .rejilla--sectores { grid-template-columns: repeat(6, 1fr); }
  .rejilla--sectores > *, .rejilla--sectores > :nth-child(-n+3) { grid-column: span 3; }
  /* 7 impar: el último ocupa la fila completa para no quedar suelto */
  .rejilla--sectores > :last-child { grid-column: span 6; }
  .rejilla--sectores > :last-child.sector { aspect-ratio: 16 / 7; }
}
@media (max-width: 560px) {
  .rejilla--sectores { grid-template-columns: 1fr; }
  .rejilla--sectores > *, .rejilla--sectores > :nth-child(-n+3), .rejilla--sectores > :last-child { grid-column: 1 / -1; }
  .rejilla--sectores > .sector { aspect-ratio: 4 / 3; }
}

.tarjeta {
  display: flex; flex-direction: column; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--s-1); transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--s-2); border-color: transparent; }
.tarjeta__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fondo-2); }
.tarjeta__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.tarjeta:hover .tarjeta__img img { transform: scale(1.06); }
.tarjeta__cuerpo { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.tarjeta__cuerpo h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.tarjeta__meta { font-size: var(--t-xs); color: var(--tenue); }
.tarjeta__ir { margin-top: auto; padding-top: .8rem; font-size: var(--t-sm); font-weight: 700; color: var(--acento); display: inline-flex; align-items: center; gap: .35rem; }
.tarjeta__ir svg { width: 15px; height: 15px; transition: transform var(--ease); }
.tarjeta:hover .tarjeta__ir svg { transform: translateX(4px); }

/* --- Sectores --- */
.sector { position: relative; display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--s-1); }
.rejilla--sectores > :nth-child(-n+3).sector { aspect-ratio: 5 / 4; }
.sector img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.sector::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(11 26 51 / .88) 8%, rgb(11 26 51 / .25) 55%, transparent 80%); }
.sector:hover img { transform: scale(1.07); }
.sector span {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: 1.15rem 1.2rem;
  color: var(--blanco); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.sector span svg { width: 16px; height: 16px; opacity: 0; transform: translateX(-6px); transition: opacity var(--ease), transform var(--ease); }
.sector:hover span svg { opacity: 1; transform: none; }

/* --- Bloque a dos columnas --- */
.dos { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.dos__media img { border-radius: var(--r-lg); box-shadow: var(--s-2); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.lista-check { display: grid; gap: .85rem; margin: 1.75rem 0 2.25rem; }
.lista-check li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.0125rem; }
.lista-check svg { flex: none; width: 22px; height: 22px; color: var(--acento); margin-top: 1px; }

/* --- Proceso --- */
/* Proceso de compra: línea de tiempo que se dibuja sola al hacer scroll.
   Todo es CSS (una transformación y una opacidad por tarjeta), sin JS. */
/* --- Proceso de compra: línea de tiempo vertical (rediseño 2026-09-03) ------
   Antes eran los siete pasos en `.pasos`, una rejilla de cuatro columnas. Una
   rejilla que envuelve parte una secuencia en 4+3, deja un hueco al final y
   obliga a cortar el hilo «en el último de cada fila» — que fue exactamente el
   bug del 1 de septiembre, y que volvía a aparecer en cada breakpoint nuevo.
   En vertical no hay filas, así que la condición que lo causaba deja de
   existir. `.pasos` se retiró; `.paso` NO se toca: lo usan Nosotros y las ocho
   páginas de sector (12 en total) como tarjeta con número, y ahí sí es una
   rejilla de cosas en paralelo, no una secuencia.                           */
.flujo {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.flujo__cab { position: sticky; top: 6.5rem; }
.flujo__cab h2 { font-size: var(--t-h2); }
.flujo__cab p { margin-top: 1rem; max-width: 34ch; color: var(--suave); font-size: 1.0625rem; }

.flujo__lista { list-style: none; margin: 0; padding: 0; }
.flujo__paso {
  position: relative; display: grid;
  grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(1.4rem, 2.2vw, 2rem);
}
.flujo__paso:last-child { padding-bottom: 0; }
/* Tramo de línea hacia el paso siguiente. Nace dibujado: si el JS no llega a
   correr, la línea de tiempo se ve entera igual. */
.flujo__paso::before {
  content: ""; position: absolute; left: 27px; top: 58px; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--acento-claro), var(--linea));
}
.flujo__paso:last-child::before { display: none; }
.flujo__marca {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanco); box-shadow: inset 0 0 0 2px var(--linea);
  color: var(--azul); font-weight: 800; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.flujo__paso:hover .flujo__marca { background: var(--acento); color: #fff; box-shadow: 0 0 0 5px var(--acento-claro); }
.flujo__txt { padding-top: .5rem; }
.flujo__txt h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.125rem; }
.flujo__ico { display: inline-flex; flex: none; color: var(--acento); }
.flujo__ico svg { width: 20px; height: 20px; }
.flujo__txt p { margin-top: .4rem; color: var(--suave); font-size: var(--t-sm); line-height: 1.55; }

@media (max-width: 900px) {
  .flujo { grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.5rem); }
  .flujo__cab { position: static; }
  .flujo__cab p { max-width: 60ch; }
}
@media (max-width: 480px) {
  .flujo__marca { width: 46px; height: 46px; font-size: .95rem; }
  .flujo__paso::before { left: 22px; top: 48px; }
  .flujo__txt { padding-top: .25rem; }
}

.paso {
  position: relative; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 1.75rem 1.5rem 1.6rem;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.paso::before {
  /* hilo que conecta un paso con el siguiente */
  content: ""; position: absolute; top: 2.35rem; left: 100%; width: clamp(1rem, 1.8vw, 1.5rem);
  height: 2px; background: linear-gradient(90deg, var(--acento-claro), transparent);
}
/* El hilo conecta con el paso siguiente, asi que no debe dibujarse en el
   ultimo de cada fila: antes el 04 lanzaba una linea hacia la nada. */
.paso:nth-child(4n)::before, .paso:last-child::before { display: none; }
.paso:hover { transform: translateY(-5px); box-shadow: var(--s-2); border-color: #d3dbe6; }
.paso__n {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--fondo-2); color: var(--acento);
  font-weight: 800; font-size: .95rem; margin-bottom: 1rem;
  box-shadow: 0 0 0 0 var(--acento-claro);
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.paso__n svg { width: 23px; height: 23px; }
/* El numero sigue siendo la linea de tiempo: se queda, pero cede el peso
   visual al icono y pasa a insignia. */
.paso__n b {
  position: absolute; top: -5px; right: -7px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--acento); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  border: 2px solid var(--blanco);
}
.paso:hover .paso__n { background: var(--acento); color: #fff; box-shadow: 0 0 0 6px var(--acento-claro); }
.paso h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.paso p { font-size: var(--t-sm); color: var(--suave); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .paso { animation: paso-entra linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
    .paso::before { animation: hilo-crece linear both; animation-timeline: view(); animation-range: entry 15% entry 70%; }
  }
}
@keyframes paso-entra { from { transform: translateY(26px) scale(.985); } to { transform: none; } }
@keyframes hilo-crece { from { transform: scaleX(0); } to { transform: none; } }
.paso::before { transform-origin: left center; }
@media (max-width: 560px) { .paso::before { display: none; } }

/* --- Clientes --- */
.clientes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.75rem, 4vw, 3.25rem); }

/* --- Cierre --- */
.cierre { background: linear-gradient(135deg, var(--azul-900) 0%, var(--azul) 48%, #24558f 100%); color: var(--blanco); text-align: center; }
.cierre h2 { color: var(--blanco); font-size: var(--t-h2); max-width: 18ch; margin-inline: auto; }
.cierre p { color: rgb(255 255 255 / .84); max-width: 58ch; margin: 1.15rem auto 2.25rem; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* --- Responsive --- */
@media (max-width: 880px) {
  .dos { grid-template-columns: 1fr; }
  .dos__media { order: -1; }
  .hero__inner { padding-block: clamp(3.5rem, 12vw, 5.5rem); }
  .hero__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.5rem; }
  .hero__dato strong { font-size: 1.5rem; }
}
@media (max-width: 560px) {
  .rejilla--4, .rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
  .rejilla--sectores { grid-template-columns: repeat(2, 1fr); }
  .hero__acciones .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --- Aparición al hacer scroll -------------------------------------------
   Animación CSS ligada al avance del scroll (animation-timeline: view()).
   Sin JavaScript: si el navegador no la soporta, el contenido se ve tal cual.
   Y anima SOLO el desplazamiento, nunca la opacidad: aunque la animación se
   quedara a medias, el texto siempre es legible. Una sección no puede
   quedarse en blanco por un fallo de script ni por un navegador antiguo.   */
@keyframes aparecer {
  from { transform: translateY(22px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .revelar {
      animation: aparecer linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/* ===========================================================================
   ENCABEZADO Y PIE PROPIOS (sin Elementor)
   =========================================================================== */
.saltar { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar:focus { position: fixed; left: .5rem; top: .5rem; width: auto; height: auto; clip-path: none; z-index: 300; background: var(--azul); color: #fff; padding: .8rem 1.2rem; border-radius: var(--r-sm); box-shadow: var(--suave); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* El cristal esmerilado NO puede ir en .cab. backdrop-filter convierte al
   elemento en el bloque contenedor de sus descendientes position:fixed, y el
   cajon del menu movil (.movil, inset:0) vive dentro de la cabecera: se
   recortaba a los 76 px de la cabecera y al abrirlo solo se veia su cabecerita
   con el logo y la X, sin los enlaces. Se pinta en una capa propia detras del
   contenido: mismo aspecto, y .movil vuelve a medirse contra la ventana.
   (Un pseudoelemento no es ancestro de nadie, asi que no crea ese bloque.) */
.cab { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: box-shadow var(--ease), border-color var(--ease); }
.cab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(255 255 255 / .92); backdrop-filter: saturate(1.6) blur(10px); }
.cab--fija { border-bottom-color: var(--linea); box-shadow: 0 2px 14px rgb(22 50 92 / .07); }
.cab__inner { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); min-height: 76px; }
.cab__logo { flex: none; display: flex; align-items: center; }
.cab__logo img { width: 170px; height: auto; max-width: none; object-fit: contain; }

.cab__nav { flex: 1; }
.menu { display: flex; align-items: center; gap: clamp(.35rem, 1.1vw, 1.15rem); }
.menu > li { position: relative; }
.menu > li > a { display: inline-flex; align-items: center; gap: .28rem; padding: .55rem .35rem; font-size: .9375rem; font-weight: 600; color: var(--tinta); border-radius: var(--r-sm); transition: color var(--ease); white-space: nowrap; }
.menu > li > a:hover, .menu > li > a[aria-current="page"] { color: var(--acento); }
.menu .caret { width: 14px; height: 14px; opacity: .55; transition: transform var(--ease); }
.menu > li.tiene-sub:hover .caret { transform: rotate(180deg); }
.submenu {
  position: absolute; top: calc(100% + 8px); left: -.75rem; min-width: 262px; padding: .5rem;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--s-3);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.menu > li.tiene-sub:hover .submenu, .menu > li.tiene-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { display: block; padding: .6rem .8rem; border-radius: var(--r-sm); font-size: .9rem; color: var(--texto); transition: background var(--ease), color var(--ease); }
.submenu a:hover { background: var(--fondo); color: var(--acento); }

.cab__acciones { display: flex; align-items: center; gap: .7rem; flex: none; }
.buscador { position: relative; display: flex; align-items: center; }
.buscador input { width: 190px; padding: .58rem 2.4rem .58rem .9rem; border: 1.5px solid var(--linea); border-radius: var(--r-full); background: var(--fondo); font: inherit; font-size: .875rem; transition: border-color var(--ease), box-shadow var(--ease), width var(--ease); }
.buscador input:focus { outline: 0; width: 230px; border-color: var(--acento); background: #fff; box-shadow: 0 0 0 4px rgb(30 115 190 / .12); }
.buscador button { position: absolute; right: .3rem; width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: var(--suave); cursor: pointer; border-radius: 50%; }
.buscador button svg { width: 17px; height: 17px; }
.cab__cta { padding: .7rem 1.4rem; font-size: .875rem; }
.cab__hamburguesa { display: none; width: 44px; height: 44px; border: 1px solid var(--linea); background: #fff; border-radius: var(--r-sm); color: var(--azul); cursor: pointer; place-items: center; }
.cab__hamburguesa svg { width: 22px; height: 22px; }

/* Menú móvil */
.movil { position: fixed; inset: 0; z-index: 150; background: #fff; padding: 1.15rem var(--gutter) 2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.25rem; }
.movil[hidden] { display: none; }
.movil__cab { display: flex; align-items: center; justify-content: space-between; }
.movil__cerrar { width: 44px; height: 44px; border: 1px solid var(--linea); background: #fff; border-radius: var(--r-sm); color: var(--tinta); display: grid; place-items: center; cursor: pointer; }
.movil__cerrar svg { width: 22px; height: 22px; }
.movil__menu { display: grid; gap: .15rem; }
.movil__menu > li > a, .movil summary { display: flex; align-items: center; justify-content: space-between; padding: .95rem .25rem; font-size: 1.0625rem; font-weight: 600; color: var(--tinta); border-bottom: 1px solid var(--linea); cursor: pointer; list-style: none; }
.movil summary::-webkit-details-marker { display: none; }
/* El tamano del chevron solo estaba definido para `.menu .caret` (la barra de
   escritorio). En el cajon movil el SVG salia sin medida y se estiraba a todo
   el ancho de la fila. */
.movil .caret { width: 16px; height: 16px; flex: none; opacity: .5; transition: transform var(--ease); }
.movil details[open] summary .caret { transform: rotate(180deg); }
.movil details ul { padding: .35rem 0 .8rem .9rem; display: grid; gap: .1rem; }
.movil details ul a { display: block; padding: .6rem .25rem; font-size: .95rem; color: var(--texto); }

/* Pie */
.pie { background: var(--azul-900); color: rgb(255 255 255 / .78); padding-block: clamp(3rem, 5vw, 4.5rem) 0; }
.pie__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(1.75rem, 4vw, 3.5rem); }
.pie h3 { color: #fff; font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 700; }
.pie__marca p { font-size: var(--t-sm); margin-top: 1.1rem; max-width: 34ch; line-height: 1.7; }
.pie__lista { display: grid; gap: .6rem; font-size: var(--t-sm); }
.pie__lista a { transition: color var(--ease); }
.pie__lista a:hover { color: #fff; }
.pie__redes { display: flex; gap: .6rem; margin-top: 1.4rem; }
.pie__redes a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff; font-weight: 700; font-size: .875rem; transition: background var(--ease), transform var(--ease); }
.pie__redes a:hover { background: var(--acento); transform: translateY(-2px); }
.pie__legal { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-block: 1.5rem; border-top: 1px solid rgb(255 255 255 / .12); text-align: center; font-size: var(--t-xs); }
.pie__legal p { margin: 0; }

/* WhatsApp flotante */
.wa-flotante { position: fixed; right: clamp(1rem, 2vw, 1.75rem); bottom: clamp(1rem, 2vw, 1.75rem); z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgb(37 211 102 / .45); transition: transform var(--ease), box-shadow var(--ease); }
.wa-flotante svg { width: 30px; height: 30px; }
.wa-flotante:hover { transform: scale(1.07); box-shadow: 0 10px 28px rgb(37 211 102 / .55); }

@media (max-width: 1080px) {
  .cab__nav, .cab__cta, .buscador { display: none; }
  .cab__hamburguesa { display: grid; }
  .cab__inner { justify-content: space-between; }
  .pie__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .pie__grid { grid-template-columns: 1fr; } }

/* --- Vídeo de fondo del hero --------------------------------------------
   La imagen pinta al instante y el vídeo aparece encima cuando puede
   reproducirse. Si el visitante prefiere menos movimiento, no se muestra.  */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s ease;
}
.hero__video.listo { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }


/* --- Fabricación propia (portada) — rediseño 2026-09-03 -------------------
   Antes: cuatro tarjetas iguales de foto pequeña + icono + título + texto,
   sobre blanco, con la de Tapicería vacía en medio. El icono repetía lo que
   ya decía la foto, la foto —que es el argumento entero de la sección— salía
   de miniatura, y el hueco de Tapicería se leía como un fallo.

   Ahora la sección es una BANDA OSCURA y las cuatro naves son tiras
   verticales de planta con el rótulo sobre la propia imagen. El azul es el
   de marca (--azul-900, el mismo de la banda de proyectos): la fotografía
   industrial —chispa de soldadura, lámina, pintura roja— pide fondo oscuro,
   y de paso la portada gana un cambio de ritmo donde antes había seis
   secciones claras seguidas.                                               */
.planta { background: var(--azul-900); color: var(--blanco); }
.planta h2 { color: var(--blanco); font-size: var(--t-h2); }
.planta .etiqueta { color: var(--acento-claro); }

/* Encabezado a dos columnas: el argumento a la izquierda, las dos pruebas y
   la llamada a la derecha. Alineado a la izquierda —y no centrado como el
   resto— porque una afirmación de identidad se sostiene mejor plantada que
   equilibrada. */
.planta__cab {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin-bottom: clamp(2rem, 3.5vw, 3.25rem);
}
.planta__lead {
  margin-top: 1rem; max-width: 54ch;
  color: rgb(255 255 255 / .8); font-size: 1.0625rem;
}
/* La garantía es el dato comercial más fuerte de la sección después de
   «fabricamos», y estaba en la misma letra pequeña que todo lo demás, con una
   palomita delante. Ahora la cifra lleva el peso.
   Las dos palomitas desaparecen: eran el mismo signo para dos cosas distintas
   —una capacidad de planta y una garantía comercial— y no aportaban nada que
   la frase no dijera ya. */
.planta__claves { display: grid; gap: 1.1rem; justify-items: start; }
.planta__garantia { display: block; max-width: 22ch; }
.planta__garantia strong {
  display: block; font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.3rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--blanco);
  font-variant-numeric: tabular-nums;
}
.planta__garantia span {
  display: block; margin-top: .45rem;
  color: rgb(255 255 255 / .8); font-size: 1.0625rem; line-height: 1.45;
}
.planta__claves .btn { margin-top: .35rem; }

/* Aquí vivía `.planta__pie` («Las cuatro, bajo el mismo techo.»). Retirada de
   la portada el 2026-09-03 a petición del cliente: la frase ya estaba dicha en
   el texto del hero y las cuatro tiras la enseñan. */

/* Las cuatro tiras. Verticales porque las fotos de planta lo son (825×1100),
   y escalonadas en alterna para que la fila se lea como una composición y no
   como una rejilla. El escalón es de maquetación pura: no cambia el orden de
   lectura ni el del DOM. */
.talleres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.taller {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: var(--r);
  display: flex; align-items: flex-end;
  background: #16233a;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* El escalón va por margen y NO por transform: transform es el canal que usa
   la capa de movimiento para la entrada y el que usa el hover para elevar.
   Metiendo aquí un tercer uso, los tres se pisan. Con margen, los tres
   conviven. */
.taller:nth-child(even) { margin-top: clamp(1rem, 2.2vw, 2.25rem); }
.taller:hover { transform: translateY(-6px); box-shadow: var(--s-3); }

.taller__foto, .taller__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.taller:hover .taller__foto, .taller:hover .taller__video { transform: scale(1.05); }
/* El vídeo se monta sobre la foto y solo cuando ya puede reproducirse: si el
   códec falla o el dato es caro, se queda la foto. Nunca un hueco negro. */
.taller__video { z-index: -1; opacity: 0; }
.taller__video.listo { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .taller__video { display: none; } }

/* Velo para que el rótulo se lea sobre CUALQUIER foto, incluidas las claras
   (el suelo de la nave y la melamina blanca son casi blancos). Las paradas no
   son de ojo: la caja de texto ocupa el 30 % inferior de la tira, así que el
   velo se mantiene al 90 % hasta ahí y solo entonces empieza a abrirse.
   Medido en el peor caso —foto blanca detrás— el texto secundario pasa de
   4.37:1 (por debajo del mínimo) a 9.19:1. Por encima del 58 % la imagen se
   ve limpia: la chispa de soldadura y la lámina no se tocan. */
.taller::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(9 20 40 / .94) 0%, rgb(9 20 40 / .9) 30%, rgb(9 20 40 / .45) 58%, transparent 88%);
}
.taller__pie {
  position: relative; z-index: 1; display: block;
  padding: clamp(1rem, 1.6vw, 1.4rem);
}
.taller__pie strong {
  display: block; color: var(--blanco); font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem);
  font-weight: 800; letter-spacing: -.015em; line-height: 1.15;
}
.taller__pie > span {
  display: block; margin-top: .3rem;
  color: rgb(255 255 255 / .78); font-size: var(--t-sm); line-height: 1.4;
}

/* Tapicería no tiene fotografía y no se le inventa una. Su tira es
   tipográfica a propósito: azul de marca, su icono en grande y su texto. Se
   lee como una decisión de diseño, no como una imagen que falta — y el día
   que llegue la foto, esta clase deja de aplicarse sola. */
.taller--tipo { background: linear-gradient(160deg, var(--azul-600) 0%, var(--azul) 62%, var(--azul-900) 100%); }
.taller--tipo::after { background: none; }
.taller__ico {
  position: absolute; top: clamp(1rem, 1.6vw, 1.4rem); left: clamp(1rem, 1.6vw, 1.4rem);
  z-index: 1; color: rgb(255 255 255 / .9);
}
.taller__ico svg { width: 40px; height: 40px; }

@media (max-width: 900px) {
  .planta__cab { grid-template-columns: 1fr; align-items: start; }
  .talleres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(1rem, 3vw, 1.75rem); }
}
@media (max-width: 560px) {
  .talleres { grid-template-columns: 1fr; }
  .taller { aspect-ratio: 16 / 10; }
  /* Sin escalonado en una sola columna: ahí solo abre un hueco raro. */
  .taller:nth-child(even) { margin-top: 0; }
}

/* Responsive del proceso de compra. Al final del archivo a proposito: si va
   antes que .pasos/.paso, las definiciones lo anulan por orden de cascada.
   El hilo se corta en el ultimo de cada fila, y el corte cambia con el numero
   de columnas: 4n en escritorio, 2n en tablet, ninguno en movil. */
/* Estas dos siguen vivas para `.paso` dentro de `.rejilla--cuatro` (Nosotros y
   las ocho páginas de sector). Se les quitó solo la parte de `.pasos`, que ya
   no existe desde que la portada usa `.flujo`. */
@media (max-width: 1040px) {
  .paso:nth-child(4n)::before { display: block; }
  .paso:nth-child(2n)::before, .paso:last-child::before { display: none; }
}
@media (max-width: 620px) {
  .paso::before { display: none; }
}

/* Logotipos de cliente: mas grandes que antes y, los que tienen caso publicado,
   enlazados. Antes los 7 eran <img> inertes: ni un solo enlace en la seccion. */
.cliente { display: inline-flex; align-items: center; justify-content: center; }
.cliente img {
  /* height fijo y no max-height: los SVG (Farmacias, SCHUTZ) no traen tamano
     intrinseco y con max-height colapsaban a 0. 48px no fuerza escalado: los
     logos rasterizados del cliente miden 100-122px de ancho como maximo. */
  height: 48px; width: auto; max-width: 170px; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter .28s var(--ease), opacity .28s var(--ease), transform .28s var(--ease);
}
.cliente--link { text-decoration: none; }
.cliente--link:hover img, .cliente--link:focus-visible img {
  filter: grayscale(0); opacity: 1; transform: translateY(-2px);
}
.cliente--link:focus-visible { outline: 2px solid var(--acento); outline-offset: 6px; border-radius: 6px; }
.clientes__cta { margin: 2.2rem 0 0; text-align: center; }
@media (max-width: 620px) { .cliente img { max-height: 46px; max-width: 140px; } }

/* --- Franja de confianza, pegada al hero ----------------------------------
   Referencia: lineaitalia.com.mx. Rótulo a la izquierda, logotipos a la
   derecha, una sola línea. Antes esta sección vivía al final de la portada,
   donde casi nadie llegaba; una prueba social trabaja justo después del
   titular, no a doce mil píxeles de scroll.

   La banda tiene que ser CALLADA: está a cien píxeles de los botones del hero
   y no puede competir con ellos. Por eso no lleva botón propio. Los tres
   logotipos con caso publicado siguen siendo la puerta a su proyecto, y el
   enlace «Ver todos los proyectos» sigue existiendo más abajo, en la banda
   oscura de proyectos.                                                      */
.confianza {
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
  padding-block: clamp(1.1rem, 1.6vw, 1.75rem);
}
.confianza__fila {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.25rem, 3vw, 3rem); flex-wrap: wrap;
}
.confianza__titulo {
  flex: none; margin: 0;
  /* Sigue siendo un h2 real: se ve como rótulo, pero no se le quita a Google
     un encabezado que ya tenía. */
  font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texto);                    /* 7.9:1 sobre --fondo */
  line-height: 1.4;
}
.confianza .clientes { flex: 1 1 auto; gap: clamp(1.4rem, 3vw, 2.75rem); }
.confianza .cliente img { height: 38px; opacity: .72; }
.confianza .cliente--link:hover img,
.confianza .cliente--link:focus-visible img { opacity: 1; }
@media (max-width: 720px) {
  .confianza__fila { flex-direction: column; gap: .85rem; }
  .confianza .cliente img { height: 30px; }
}

/* --- Titular de la portada -------------------------------------------------
   Creció al incluir la ciudad y el remate de fabricación, así que baja el tope
   de tamaño y ensancha la columna: al tope anterior de 4.25rem ocupaba media
   pantalla de alto en un portátil. El remate lleva el peso, como en la
   referencia: mismo blanco —no se le quita contraste a la palabra clave— y una
   parada más de grosor.                                                     */
.ofitodo-home .hero__inner { max-width: 800px; }
.ofitodo-home .hero h1 { font-size: clamp(2.05rem, 1.15rem + 3vw, 3.45rem); font-weight: 700; }
.hero__remate { display: block; font-weight: 800; }

/* --- Carrito -------------------------------------------------------------
 * El enlace nace con [hidden] y carroPintarConteo() lo revela; asi la cabecera
 * queda igual que siempre para quien no ha agregado nada.                   */
.cab__carro{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:50%;color:var(--tinta);flex:0 0 auto}
.cab__carro:hover{background:var(--gris-suave,#f1f2f4)}
.cab__carro svg{width:1.35rem;height:1.35rem}
.cab__carro-n{position:absolute;top:-.1rem;right:-.1rem;min-width:1.15rem;height:1.15rem;
  padding:0 .28rem;border-radius:999px;background:var(--acento);color:#fff;
  font-size:.68rem;font-weight:700;line-height:1.15rem;text-align:center;
  font-variant-numeric:tabular-nums}