/* Estilos base del sitio (v0.1, evolución conservadora). Mobile-first: lo ancho se agrega con min-width. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-tinta);
  background: var(--color-fondo);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; }
a { color: var(--color-acento); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .6rem; color: var(--color-acento); }
h1 { font-size: clamp(1.75rem, 6.5vw, 3.1rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; max-width: 30ch; }
h2 { font-size: clamp(1.4rem, 4.5vw, 2rem); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }

:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 3px; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--color-acento); color: var(--color-sobre-acento); padding: .75rem 1rem; z-index: 20; }
.saltar:focus { left: 0; }
.solo-lectura { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* Aviso de versión de revisión */
.aviso-revision { background: var(--color-tinte); color: var(--color-tinta); font-size: .875rem; line-height: 1.45; padding: .5rem 0; border-bottom: 1px solid var(--color-linea); }

/* Cabecera (versión 2.0, Ruta D provisional): bloque azul con el logotipo blanco original y la navegación.
   Zona de seguridad digital PROVISIONAL: 0.35 x el alto visible del logotipo (descriptor incluido) por cada lado.
   Es una excepción de la aplicación web de la versión 2.0, distinta del manual antiguo; no es una regla global (ver contenido/marca.json y LEEME.md). */
.cabecera { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 76px;
  background: var(--color-acento); color: var(--color-sobre-acento); border-bottom: 1px solid var(--color-linea); --logo-alto: 44px; }
.cabecera__marca { display: flex; align-items: center; padding-left: 1rem; }
.cabecera__marca--simple { background: var(--color-superficie); color: var(--color-acento); padding-right: 1rem; }
.cabecera :focus-visible { outline-color: var(--color-sobre-acento); }
.marca { font-size: 1.6rem; font-weight: 800; letter-spacing: .02em; color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.marca img { display: block; height: auto; width: auto; max-height: 2.75rem; }
/* Logotipo oficial: el PNG original se muestra completo y sin alterar; la caja reserva la zona de seguridad y la imagen se posiciona
   dentro de ella con las medidas de contenido/marca.json. El alto del logotipo es --logo-alto. */
.marca--logo { display: block; min-height: 0; line-height: 0; }
.marca__zona { display: block; position: relative; overflow: hidden; flex: none; width: calc(var(--logo-alto) * var(--zona-rel)); aspect-ratio: var(--zona-ratio); }
.marca__zona img { position: absolute; display: block; max-width: none; max-height: none; width: var(--img-ancho); height: auto; left: var(--img-izq); top: var(--img-sup); }
/* Botón del menú (celular y tableta) */
.menu-boton { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; min-width: 2.75rem; margin-right: 1rem; padding: 0 .85rem; font: inherit;
  font-weight: 700; cursor: pointer; border-radius: var(--radio); border: 2px solid currentColor; background: transparent; color: inherit; }
.ico { position: relative; display: inline-block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; margin: 0 .1rem; }
.menu-boton[aria-expanded="true"] .ico { box-shadow: none; height: 0; }
.menu-boton[aria-expanded="true"] .ico::before, .menu-boton[aria-expanded="true"] .ico::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.menu-boton[aria-expanded="true"] .ico::before { transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .ico::after { transform: rotate(-45deg); }
html:not(.js) .menu-boton { display: none; }
/* Navegación en celular: panel desplegable de una columna, en grupos; el grupo comercial se distingue aparte */
.cabecera .nav { display: flex; flex-direction: column; flex-basis: 100%; background: var(--color-acento-activo); }
.nav__grupo + .nav__grupo { border-top: 1px solid var(--sobre-acento-linea); }
.nav__grupo.nav__grupo--comercial { background: var(--sobre-acento-tenue); border-top: 3px solid var(--color-tinte); }
.nav__titulo { margin: 0; padding: .85rem 1rem .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sobre-acento-texto); }
.cabecera .nav a { display: flex; align-items: center; min-height: 3rem; padding: 0 1rem; color: inherit; text-decoration: none; font-weight: 600; font-size: 1rem; }
.cabecera .nav__grupo a + a { border-top: 1px solid var(--sobre-acento-suave); }
.cabecera .nav a:hover { background: var(--sobre-acento-hover); }
.cabecera .nav a[aria-current="page"] { font-weight: 800; box-shadow: inset 4px 0 0 var(--color-tinte); background: var(--sobre-acento-hover); }
html.js .cabecera .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; border-bottom: 1px solid var(--sobre-acento-linea); }
html.js .cabecera[data-abierto] .nav { display: flex; }
/* Navegación del pie */
.nav--pie { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.nav--pie a { display: flex; align-items: center; justify-content: flex-start; min-height: 2.75rem; padding: .25rem .5rem; line-height: 1.2; border: 1px solid transparent;
  border-radius: var(--radio); background: transparent; color: var(--color-acento); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav--pie a:hover { background: var(--color-fondo); }

/* Bloque principal: fondo tinte, titular grande y esquina inferior cortada a 25.4° */
/* En celular los botones llegan al borde derecho: el relleno inferior incluye el alto del corte para no recortarlos */
.hero { background: var(--color-tinte); padding: 1.75rem 0 calc(1.75rem + var(--corte-y));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte-y)), calc(100% - var(--corte-x)) 100%, 0 100%); }
.hero__texto { font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--color-tinta); max-width: 40rem; }
.hero .boton--secundario { background: var(--color-superficie); }

/* Secciones y ritmo vertical */
.seccion { padding: clamp(2rem, 5vw, 3.25rem) 0; }
.seccion h2::after { content: ""; display: block; width: 3rem; height: 4px; margin-top: .6rem; background: var(--color-acento); }
.seccion--clara { background: var(--color-superficie); border-top: 1px solid var(--color-linea); border-bottom: 1px solid var(--color-linea); }
.seccion--texto { padding-bottom: 1.25rem; }
.seccion--texto + .seccion--lista { padding-top: 0; }
.seccion--cta { background: var(--color-acento); color: var(--color-sobre-acento);
  clip-path: polygon(0 0, calc(100% - var(--corte-x)) 0, 100% var(--corte-y), 100% 100%, 0 100%); padding-top: clamp(2.5rem, 6vw, 3.75rem); }
.seccion--cta h2 { color: var(--color-sobre-acento); }
.seccion--cta h2::after { background: var(--color-sobre-acento); }
.intro, .nota { color: var(--color-tinta-suave); }

/* Tarjetas: número generado por CSS, franja superior y toda la tarjeta es un enlace */
.tarjetas { display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: linea; }
.tarjeta { position: relative; counter-increment: linea; display: flex; flex-direction: column; background: var(--color-superficie);
  border: 1px solid var(--color-linea); border-top: 4px solid var(--color-acento); padding: 1.25rem 1.25rem 1.5rem; }
.tarjeta::before { content: "0" counter(linea); font-size: .875rem; font-weight: 700; letter-spacing: .1em; color: var(--color-tinta-suave); margin-bottom: .35rem; }
.tarjeta h3 { margin-bottom: .5rem; }
.tarjeta p { flex: 1; color: var(--color-tinta-suave); }
.tarjeta:hover { border-color: var(--color-acento); }
.tarjeta__enlace { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; text-decoration: none; }
.tarjeta__enlace::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.tarjeta__enlace::after { content: "\2192"; margin-left: .5rem; }
.tarjeta__enlace:focus-visible { outline: none; }
.tarjeta:has(.tarjeta__enlace:focus-visible) { outline: 3px solid var(--color-acento); outline-offset: 3px; }

/* Pasos, listas y datos */
.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
.paso { counter-increment: paso; background: var(--color-fondo); border: 1px solid var(--color-linea); padding: 1rem 1rem 1rem 3.75rem; position: relative; }
.paso::before { content: counter(paso); position: absolute; left: 1rem; top: 1rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--color-acento); color: var(--color-sobre-acento); font-weight: 700; display: grid; place-items: center; }
.paso p { margin: 0; color: var(--color-tinta-suave); }
.lista, .productos, .marcas { margin: 0 0 1rem; padding-left: 1.25rem; }
.lista li, .productos li, .marcas li { margin-bottom: .4rem; }
.pagina-inicio .lista { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pagina-inicio .lista li { margin: 0; padding: .5rem 1rem; background: var(--color-superficie); border: 1px solid var(--color-linea); border-radius: 999px; font-weight: 600; }
.datos { margin: 0; }
.contacto-grupo + .contacto-grupo, .contacto-grupo + .datos { margin-top: 1.75rem; }
.contacto-grupo h3 { margin: 0; }
.contacto-grupo__funcion { margin: .15rem 0 .5rem; color: var(--color-tinta-suave); }
.datos__fila { display: flex; flex-direction: column; padding: .75rem 0; border-bottom: 1px solid var(--color-linea); }
.datos dt { font-weight: 700; color: var(--color-acento); }
.datos dd { margin: 0; }
.datos dd a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Botones: en celular, la acción principal ocupa todo el ancho y las demás van en dos columnas */
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.acciones > .boton { flex: 1 1 100%; }
.acciones > .boton:not(:first-child) { flex: 1 1 calc(50% - .375rem); }
.cotizador .acciones > .boton { flex: 1 1 100%; }
.boton { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 3rem; padding: .5rem 1.25rem;
  border-radius: var(--radio); border: 2px solid var(--color-acento); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  background: var(--color-acento); color: var(--color-sobre-acento); }
.boton:hover { background: var(--color-acento-activo); border-color: var(--color-acento-activo); }
.boton--secundario { background: var(--color-superficie); color: var(--color-acento); }
.boton--secundario:hover { background: var(--color-fondo); color: var(--color-acento-activo); }
.boton--inactivo { background: var(--color-linea); border: 2px dashed var(--color-tinta-suave); color: var(--color-tinta); cursor: not-allowed; font-size: .9rem; line-height: 1.25; }
.boton[aria-disabled="true"]:not(.boton--inactivo) { opacity: .75; }
.seccion--cta .boton { background: var(--color-superficie); color: var(--color-acento); border-color: var(--color-superficie); }
.seccion--cta .boton--secundario { background: transparent; color: var(--color-sobre-acento); border-color: var(--color-sobre-acento); }
.seccion--cta .boton--inactivo { background: var(--color-linea); color: var(--color-tinta); border-color: var(--color-tinta-suave); }
.seccion--cta :focus-visible { outline-color: var(--color-sobre-acento); }

/* Formulario del cotizador (se arma el mensaje en el navegador; no se envía a ningún servicio) */
.cotizador { display: grid; gap: 1rem; max-width: 40rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-weight: 700; }
.campo select, .campo input, .campo textarea { font: inherit; padding: .65rem .75rem; border: 2px solid var(--color-tinta-suave); border-radius: var(--radio);
  background: var(--color-superficie); color: var(--color-tinta); width: 100%; min-height: 3rem; }
.campo textarea[readonly] { background: var(--color-fondo); }
.estado { min-height: 1.5rem; margin: 0; font-weight: 700; color: var(--color-acento); }

/* Pie */
.pie { background: var(--color-superficie); border-top: 1px solid var(--color-linea); padding: 1.5rem 0; color: var(--color-tinta-suave); font-size: .95rem; }

/* Barra fija de acciones en celular: sticky dentro del flujo; se queda abajo al desplazarse y nunca tapa el final de la página */
.barra-movil { position: sticky; bottom: 0; z-index: 10; display: flex; gap: .5rem; padding: .5rem;
  background: var(--color-superficie); border-top: 1px solid var(--color-linea); }
.barra-movil .boton { flex: 1 1 0; min-height: 3.25rem; padding: .25rem .5rem; font-size: .9rem; }

/* La barra fija ocupa el borde inferior: al enfocar un control o saltar a un ancla, el navegador deja este margen libre para que nada quede detrás */
@media (max-width: 47.99rem) {
  html { scroll-padding-bottom: 5.5rem; }
}

@media (min-width: 48rem) {
  .barra-movil { display: none; }
  .hero { padding: clamp(2rem, 4.5vw, 3rem) 0; }
  .nav--pie { gap: .25rem; }
  .nav--pie a { padding: 0 .75rem; }
  .tarjetas { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .acciones > .boton, .acciones > .boton:not(:first-child) { flex: 0 1 auto; }
  .cotizador .acciones > .boton { flex: 0 1 auto; }
  .datos__fila { flex-direction: row; gap: 1.5rem; }
  .datos dt { flex: 0 0 10rem; }
  .pie .contenedor { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
  .pie p { max-width: 34rem; margin: 0; }
}
/* Computadora: bloque azul de marca con el borde inclinado de la Ruta D (25.4°) y navegación horizontal a la altura de la cabecera */
@media (min-width: 64rem) {
  .cabecera { display: grid; grid-template-columns: auto 1fr; align-items: stretch; min-height: 84px; background: var(--color-superficie); color: var(--color-tinta); --logo-alto: 48px; }
  .cabecera__marca { background: var(--color-acento); color: var(--color-sobre-acento); padding: 0 2.5rem 0 calc(max(0px, (100vw - var(--ancho-max)) / 2) + 1rem);
    clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%); }
  .cabecera__marca--simple { clip-path: none; background: var(--color-superficie); color: var(--color-acento); }
  .menu-boton, html:not(.js) .menu-boton { display: none; }
  .cabecera .nav, html.js .cabecera .nav { display: flex; position: static; flex-direction: row; justify-content: flex-end; align-items: stretch; gap: .15rem; background: transparent; border: 0;
    padding: 0 calc(max(0px, (100vw - var(--ancho-max)) / 2) + 1rem) 0 1.5rem; }
  .nav__grupo, .nav__grupo + .nav__grupo, .nav__grupo.nav__grupo--comercial { display: contents; }
  .nav__titulo { display: none; }
  .cabecera .nav a { justify-content: center; padding: 0 .85rem; min-height: 44px; font-size: .95rem; color: var(--color-tinta); }
  .cabecera .nav__grupo a + a { border-top: 0; }
  .cabecera .nav a:hover { background: var(--color-fondo); }
  .cabecera .nav a[aria-current="page"] { color: var(--color-acento); background: transparent; box-shadow: inset 0 -3px 0 var(--color-acento); }
  .cabecera :focus-visible { outline-color: var(--color-acento); }
  .cabecera__marca :focus-visible { outline-color: var(--color-sobre-acento); }
}
@media (prefers-reduced-motion: no-preference) { .boton, .nav a, .tarjeta { transition: background-color .15s, border-color .15s; } }

/* Ubicación y horarios (página Contacto): dirección y horario del local lado a lado en pantallas anchas */
.ubicacion { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.ubicacion__bloque h3 { margin-bottom: .5rem; }
.ubicacion__direccion { display: block; font-style: normal; line-height: 1.5; margin-bottom: 1rem; }
.ubicacion__linea { display: block; }
.horario { margin: 0; max-width: 24rem; }
.horario__fila { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--color-linea); }
.horario dt { font-weight: 700; color: var(--color-acento); }
.horario dd { margin: 0; text-align: right; }
@media (min-width: 48rem) { .ubicacion { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }