/* Growken — sitio público. Mobile-first (pensado desde 375 px).
   Orden: 1 tokens · 2 base · 3 layout · 4 componentes · 5 secciones · 6 páginas · 7 pie · 8 escritorio.
   Selectores de una sola clase (BEM simple) para que nada se pise. */

/* ---------- 1. TOKENS ---------- */
:root {
  --azul: #00008c;          /* marca: titulares, header, bloques */
  --tinta: #1a1d3d;         /* texto */
  --tinta-suave: #4a4f73;   /* texto secundario */
  --fondo: #ffffff;
  --superficie: #eef1f6;    /* secciones alternas y fondo de fotos de producto */
  --linea: #c9d0de;         /* filetes y bordes */
  --accion: #0661fc;        /* links, foco, estados activos */
  --consulta: #fc7b56;      /* SOLO la acción de consultar */
  --consulta-osc: #f0663d;
  --error: #9c1c16;

  --f-texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-cond: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;

  --t-0: .9375rem;                                  /* texto chico */
  --t-1: 1.0625rem;                                 /* cuerpo */
  --t-2: 1.25rem;                                   /* h3 */
  --t-3: clamp(1.65rem, 1.3rem + 1.5vw, 2.4rem);    /* h2 */
  --t-4: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);      /* h1 */
  --t-prod: clamp(1.4rem, 1.3rem + .4vw, 1.6rem);   /* nombre de producto */

  --e1: .5rem; --e2: 1rem; --e3: 1.5rem; --e4: 2.5rem; --e5: 4rem; --e6: 6rem;
  --ancho: 72.5rem;
  --lectura: 66ch;
  --radio: 2px; --radio-btn: 3px;
  --alto-btn: 3rem;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Pantallas grandes: todo (tipografía, contenedor, botones) escala con el tamaño base */
@media (min-width: 1600px) { html { font-size: 112.5%; } }
@media (min-width: 1920px) { html { font-size: 125%; } }
@media (min-width: 2560px) { html { font-size: 150%; } }
body { margin: 0; font: 400 var(--t-1)/1.6 var(--f-texto); color: var(--tinta); background: var(--fondo); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0 0 var(--e2); color: var(--azul); font-family: var(--f-texto); }
h1 { font-size: var(--t-4); font-weight: 700; line-height: 1.05; }
h2 { font-size: var(--t-3); font-weight: 600; line-height: 1.15; }
h3 { font-size: var(--t-2); font-weight: 600; line-height: 1.2; }
p { margin: 0 0 var(--e2); }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--accion); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--accion); outline-offset: 2px; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--azul); color: #fff; padding: var(--e1) var(--e2); z-index: 100; }
.saltar:focus { left: 0; }
.texto-suave { color: var(--tinta-suave); }
.texto-lectura { max-width: var(--lectura); }
.texto-rico ul, .texto-rico ol { padding-left: 1.3rem; list-style: revert; }
.texto-rico { overflow-wrap: anywhere; }

/* ---------- 3. LAYOUT ---------- */
.contenedor { width: min(var(--ancho), 100% - 2rem); margin-inline: auto; }
.seccion { padding: var(--e4) 0; }
.seccion--superficie { background: var(--superficie); }
.seccion--superficie a:not(.btn) { color: var(--azul); }
.dos-col { display: grid; gap: var(--e3); }
.titulo-chico { font: 600 var(--t-1)/1.2 var(--f-cond); color: var(--tinta-suave); margin-bottom: var(--e2); }
.subtitulo { display: block; margin-top: .25rem; font: 400 var(--t-1)/1.4 var(--f-texto); color: var(--tinta-suave); }

/* ---------- 4. COMPONENTES ---------- */
/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--alto-btn); padding: 0 1.5rem; border: 2px solid var(--azul); border-radius: var(--radio-btn); background: var(--azul); color: #fff; font: 600 1rem/1 var(--f-texto); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s, color .15s; }
.btn:hover { background: #0000b4; border-color: #0000b4; }
.btn--borde { background: transparent; color: var(--azul); }
.btn--borde:hover { background: var(--azul); color: #fff; }
.btn--claro { background: #fff; border-color: #fff; color: var(--azul); }
.btn--claro:hover { background: var(--superficie); border-color: var(--superficie); }
.btn--consulta { background: var(--consulta); border-color: var(--consulta); color: var(--tinta); }
.btn--consulta:hover { background: var(--consulta-osc); border-color: var(--consulta-osc); }
.btn--chico { min-height: 44px; padding: 0 1.1rem; }
.botones { display: flex; flex-wrap: wrap; gap: .75rem; margin: var(--e3) 0 0; }
.enlace { font-weight: 600; color: var(--azul); }
.enlace:hover { color: var(--accion); }

/* Avisos y formularios */
.aviso { padding: .75rem 1rem; border-left: 4px solid var(--azul); background: var(--superficie); margin: 0 0 var(--e2); }
.aviso--ok { border-color: #1c7a3d; background: #e7f4ec; }
.aviso--error { border-color: var(--error); background: #fbe9e8; color: var(--error); }
.error { display: block; color: var(--error); font-size: var(--t-0); margin-top: .25rem; }
.error[hidden] { display: none; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.campo { display: block; margin-top: var(--e2); font-weight: 600; }
.campo input, .campo textarea { display: block; width: 100%; margin-top: .3rem; padding: .7rem .8rem; font: 400 var(--t-1)/1.4 var(--f-texto); color: var(--tinta); border: 1.5px solid #8a93ab; border-radius: var(--radio); background: #fff; }
.campo input:focus, .campo textarea:focus { border-color: var(--accion); outline: 3px solid rgba(6, 97, 252, .25); outline-offset: 0; }
.contacto__form .btn { margin-top: var(--e3); align-self: flex-start; }

/* Etiqueta de producto: celular = fila compacta, desde 700 px = etiqueta vertical */
.etiquetas { display: grid; gap: var(--e2); grid-template-columns: 1fr; }
.etiqueta { display: grid; grid-template-columns: 104px 1fr; grid-template-areas: "foto datos" "foto acciones"; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.etiqueta__foto { grid-area: foto; background: var(--superficie); display: grid; place-items: center; padding: .5rem; }
.etiqueta__foto img { width: 100%; height: 100%; max-height: 140px; object-fit: contain; }
.etiqueta__datos { grid-area: datos; padding: .75rem .9rem .25rem; min-width: 0; }
.etiqueta__linea { margin: 0 0 .15rem; font-family: var(--f-cond); line-height: 1.2; }
.etiqueta__linea--marca { font-weight: 600; font-size: 1.05rem; color: var(--azul); }
.etiqueta__linea--cat { font-weight: 500; font-size: var(--t-0); color: var(--tinta-suave); }
.etiqueta__linea a { color: inherit; text-decoration: none; }
.etiqueta__logo { display: inline-block; max-height: 24px; width: auto; }
.etiqueta__nombre { margin: 0 0 .25rem; font: 700 var(--t-prod)/1.1 var(--f-cond); overflow-wrap: anywhere; }
.etiqueta__nombre a { color: var(--azul); text-decoration: none; }
.etiqueta__nombre a:hover { text-decoration: underline; }
.etiqueta__uso { margin: 0; font-size: var(--t-0); line-height: 1.4; color: var(--tinta-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.etiqueta__acciones { grid-area: acciones; display: flex; align-items: center; gap: var(--e2); padding: .5rem .9rem .75rem; }

/* Variante en filas anchas (listado de productos): catálogo de lectura rápida, sin cajas */
.etiquetas--filas { gap: 0; border-top: 1px solid var(--linea); }
.etiquetas--filas .etiqueta { border-width: 0 0 1px; border-radius: 0; }

/* Datos tipo ficha (lista de pares con filete) */
.datos { margin: 0; border-top: 1px solid var(--linea); }
.datos > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--e2); padding: .65rem 0; border-bottom: 1px solid var(--linea); }
.datos dt { font: 500 var(--t-1)/1.3 var(--f-cond); color: var(--tinta-suave); }
.datos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* Filas con filete (servicios de la home, etc.) */
.filas { margin: 0 0 var(--e3); border-top: 1px solid var(--linea); }
.filas li { padding: .9rem 0; border-bottom: 1px solid var(--linea); font: 600 var(--t-2)/1.25 var(--f-texto); }

/* Migas de pan */
.migas { font-size: var(--t-0); color: var(--tinta-suave); margin-bottom: var(--e1); }
.migas a { color: var(--tinta-suave); }

/* Cabecera de página interna */
.encabezado { padding: var(--e4) 0 var(--e3); border-bottom: 1px solid var(--linea); }
.encabezado h1 { margin-bottom: .25rem; }
.encabezado p { margin: 0; }
.encabezado--chico { padding: var(--e2) 0; }

.vacio { padding: var(--e4) var(--e2); background: var(--superficie); }

/* ---------- Cabecera y menú ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; }
.marca img { width: 7.5rem; height: auto; }
.burger { display: grid; gap: 5px; padding: .85rem .7rem; background: none; border: 0; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: var(--azul); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--linea); max-height: calc(100vh - 4rem); overflow: auto; }
.menu.abierto { display: block; }
.menu a { display: flex; align-items: center; min-height: 48px; padding: 0 1.25rem; color: var(--tinta); text-decoration: none; font: 500 1.1rem/1 var(--f-texto); }
.menu a:hover { color: var(--accion); }
.menu a[aria-current] { color: var(--azul); font-weight: 700; box-shadow: inset 4px 0 0 var(--azul); }
.tiene-sub { position: relative; }
.sub-boton { position: absolute; right: 0; top: 0; height: 48px; width: 56px; background: none; border: 0; cursor: pointer; }
.sub-boton::after { content: ""; display: block; margin: auto; width: 8px; height: 8px; border: solid var(--azul); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sub-boton[aria-expanded="true"]::after { transform: rotate(-135deg); }
.submenu { display: none; background: var(--superficie); }
.submenu.abierto { display: block; }
.submenu a { padding-left: 2.25rem; font-weight: 400; font-size: 1rem; }
.ig { color: var(--azul) !important; }

/* ---------- 5. SECCIONES DE LA HOME ---------- */
/* Hero: foto limpia + panel azul sólido (una sola animación de entrada) */
.hero { position: relative; }
.hero__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% center; }
.hero__capa { position: relative; }
.hero__panel { background: var(--azul); color: #fff; padding: var(--e3) var(--e3) var(--e4); margin-inline: calc(var(--e2) * -1); }
.hero__panel h1 { color: #fff; font-size: clamp(2rem, 1.3rem + 3.5vw, 3rem); margin-bottom: var(--e2); }
.hero__panel p { margin-bottom: 0; max-width: 34rem; }
.hero__panel .botones { margin-top: var(--e3); }
@media (prefers-reduced-motion: no-preference) {
  .hero__panel { animation: entra-hero .45s ease-out both; }
  @keyframes entra-hero { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* Franja de marcas */
.seccion--marcas { padding: var(--e4) 0 var(--e3); }
.marcas { border-top: 1px solid var(--linea); }
.marcas__item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); padding: var(--e2) 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--azul); }
.marcas__nombre { font: 700 clamp(1.8rem, 1.4rem + 2vw, 2.6rem)/1.1 var(--f-cond); }
.marcas__logo { max-height: 44px; width: auto; }
.marcas__cant { font: 500 var(--t-0) var(--f-cond); color: var(--tinta-suave); }
.marcas__item:hover .marcas__nombre { text-decoration: underline; }

/* Índice de líneas */
.indice { border-top: 1px solid var(--linea); align-self: start; }
.indice a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); min-height: 56px; padding: .8rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.indice__nombre { font: 600 1.35rem/1.2 var(--f-cond); color: var(--azul); }
.indice a:hover .indice__nombre { text-decoration: underline; }
.indice__cant { font: 500 var(--t-1) var(--f-cond); color: var(--tinta-suave); }

/* Servicios en la home (alineado al contenedor en cualquier ancho) */
.servicios-home__fila { display: grid; gap: var(--e3); align-items: center; }
.servicios-home__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.filas--grandes li { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
/* Banda de contacto: texto y botones juntos, alineados a la izquierda del contenedor (también sin el botón de WhatsApp) */
.banda { background: var(--azul); color: #fff; padding: var(--e4) 0; }
.banda h2 { color: #fff; margin-bottom: .25rem; }
.banda p { margin: 0; }
.banda__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); }
.banda__texto { max-width: 30rem; }
.banda .botones { margin: 0; }
/* ---------- 6. PÁGINAS ---------- */
/* Listado */
.lineas { margin-bottom: var(--e3); }
.lineas__titulo { display: none; }
.lineas ul { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; }
.lineas__item { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; white-space: nowrap; border: 1px solid var(--linea); border-radius: var(--radio-btn); background: #fff; color: var(--tinta); text-decoration: none; font: 500 var(--t-1) var(--f-cond); }
.lineas__item:hover { border-color: var(--accion); }
.lineas__item.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.lineas__cant { color: var(--tinta-suave); font-size: var(--t-0); }
.lineas__item.activo .lineas__cant { color: #fff; opacity: .85; }
.grupo + .grupo { margin-top: var(--e4); }
.grupo__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); padding-bottom: .5rem; margin-bottom: var(--e2); border-bottom: 1px solid var(--linea); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.grupo__titulo a { color: var(--azul); text-decoration: none; }
.grupo__titulo a:hover { text-decoration: underline; }
.grupo__cant { font: 500 var(--t-1) var(--f-cond); color: var(--tinta-suave); }

/* Ficha */
.seccion--ficha { padding-top: var(--e3); }
.ficha { display: grid; gap: var(--e3); }
.ficha__marco { background: var(--superficie); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--e2); }
.ficha__marco img { width: 100%; height: 100%; object-fit: contain; }
.ficha__mini { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.ficha__mini a { display: block; width: 72px; border: 2px solid var(--linea); background: var(--superficie); }
.ficha__mini a:hover { border-color: var(--accion); }
.ficha__mini img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.ficha__info .etiqueta__linea { font-size: 1.15rem; }
.ficha__nombre { font: 700 clamp(2.2rem, 1.6rem + 3vw, 3.4rem)/1.05 var(--f-cond); margin-bottom: var(--e2); overflow-wrap: anywhere; }
.ficha__uso { font-size: var(--t-2); color: var(--tinta-suave); max-width: 40ch; }
.ficha__acciones { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; margin: var(--e3) 0 var(--e4); }
.ficha__acciones .enlace { align-self: flex-start; padding: .5rem 0; }
.ficha__subtitulo { font: 600 var(--t-2)/1.2 var(--f-cond); color: var(--azul); margin-bottom: var(--e1); }
.ficha__descripcion { margin-top: var(--e4); }
.relacionados { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.relacionados a { display: flex; align-items: center; gap: var(--e2); padding: .6rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--azul); font: 600 1.2rem/1.2 var(--f-cond); }
.relacionados a:hover span { text-decoration: underline; }
.relacionados img { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--linea); }

/* Servicios */
.servicio-lista { display: grid; gap: var(--e4); }
.servicio img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.servicio h2 { margin: var(--e2) 0 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); max-width: 22ch; }

/* Novedades */
.novedades { border-top: 1px solid var(--linea); }
.novedad-fila { display: grid; gap: var(--e2); padding: var(--e3) 0; border-bottom: 1px solid var(--linea); }
.novedad-fila__foto { background: var(--superficie); }
.novedad-fila__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.novedad-fila__fecha { margin: 0 0 .25rem; font: 600 var(--t-1) var(--f-cond); color: var(--tinta-suave); }
.novedad-fila h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.novedad-fila h2 a { color: var(--azul); text-decoration: none; }
.novedad-fila h2 a:hover { text-decoration: underline; }
.nota { max-width: 760px; }
.nota__img { width: 100%; margin: var(--e2) 0 var(--e3); }

/* Contacto: encabezado en dos columnas (panel azul + foto), como el hero de la home */
.contacto-cab__panel { background: var(--azul); color: #fff; padding: var(--e4) 1rem; }
.contacto-cab__texto { width: min(var(--ancho), 100%); margin-inline: auto; }
.contacto-cab h1 { color: #fff; margin-bottom: var(--e1); }
.contacto-cab__frase { margin: 0 0 var(--e1); font: 500 clamp(1.4rem, 1.1rem + 1.4vw, 2rem)/1.2 var(--f-texto); }
.contacto-cab__sub { margin: 0; color: #dfe3f2; max-width: 34rem; }
.contacto-cab__foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; order: -1; }

/* Contacto: formulario y datos balanceados en altura */
.contacto { display: grid; gap: var(--e4); align-items: stretch; }
.contacto__form { display: flex; flex-direction: column; border: 1px solid var(--linea); padding: var(--e3); }
.contacto__form form { display: flex; flex-direction: column; flex: 1; }
.contacto__form .campo--mensaje { flex: 1; display: flex; flex-direction: column; }
.contacto__form .campo--mensaje textarea { flex: 1; min-height: 8rem; resize: vertical; }
.contacto__datos { position: relative; isolation: isolate; display: flex; flex-direction: column; background: var(--superficie); }
.contacto__datos::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url('/assets/img/topografico.png') 0 0 / 26rem; opacity: .05; pointer-events: none; } /* textura topográfica del sitio viejo, muy sutil */
.contacto__foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; }
.contacto__cuerpo { padding: var(--e3); flex: 1; }
.contacto__datos h2 { margin-bottom: var(--e2); }
.dato-lista { display: grid; gap: var(--e3); margin-bottom: var(--e4); }
.dato { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--e2); align-items: start; }
.icono { width: 1em; height: 1em; flex: none; fill: currentColor; }
.icono--dato { width: 1.6rem; height: 1.6rem; color: var(--azul); margin-top: .15rem; }
.icono--chico { width: 1.1rem; height: 1.1rem; margin-right: .5rem; vertical-align: -.1em; }
.dato__titulo { margin: 0 0 .15rem; font: 600 var(--t-1)/1.3 var(--f-cond); color: var(--tinta-suave); }
.dato__valor { margin: 0 0 .15rem; font: 600 var(--t-2)/1.3 var(--f-texto); color: var(--tinta); }
.dato p { margin-bottom: .25rem; }
.dato a:not(.btn) { color: var(--azul); }
.correos { margin-bottom: var(--e3); }
.correos__titulo { font: 600 var(--t-2)/1.2 var(--f-cond); color: var(--azul); }
.correos .datos > div { grid-template-columns: 1fr; gap: .15rem; }
.correos .datos a { color: var(--azul); overflow-wrap: anywhere; }
.persona { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: .5rem; }
.correos__persona { color: var(--tinta-suave); font-family: var(--f-cond); font-weight: 500; }
.contacto__datos .aviso { background: #fff; margin-bottom: 0; }
/* Mapa */
.mapa { margin-top: var(--e4); }
.mapa iframe { display: block; width: 100%; height: 340px; border: 0; background: var(--superficie); }

/* ---------- 7. PIE ---------- */
.pie { background: var(--tinta); color: #dfe3f2; }
.pie a { color: #fff; }
.pie__grilla { display: grid; gap: var(--e3); padding: var(--e4) 0 var(--e3); }
.pie p { max-width: 46ch; }
.pie__logo { width: 8.75rem; margin-left: -.9rem; height: auto; margin-bottom: var(--e2); filter: brightness(0) invert(1); } /* logo en blanco sobre el fondo oscuro */
.pie__titulo { margin: 0 0 .25rem; font: 600 var(--t-1)/1.3 var(--f-cond); color: #fff; }
.pie__titulo--aparte { margin-top: var(--e3); }
.pie__fila { display: grid; grid-template-columns: 1.25rem 1fr; gap: .6rem; align-items: start; margin-bottom: var(--e2); }
.icono--pie { width: 1.1rem; height: 1.1rem; margin-top: .3rem; color: #fff; opacity: .85; }
.pie__red { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 1.1rem 0 .9rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radio-btn); text-decoration: none; font-weight: 600; }
.pie__red:hover { background: rgba(255, 255, 255, .12); }
.icono--red { width: 1.5rem; height: 1.5rem; }
.pie__nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.pie__credito { border-top: 1px solid rgba(255, 255, 255, .18); padding: var(--e2) 0; font-size: var(--t-0); }
.pie__credito-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem var(--e3); }
.pie__credito p { margin: 0; max-width: none; }
.pie__hecho { color: #b9c0dc; }
.pie__hecho a { color: #dfe3f2; }
.wa-flotante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); } /* excepción al naranja: es el logo de WhatsApp */
.wa-flotante:hover { background: #1fb457; }
.wa-flotante:focus-visible { outline: 3px solid var(--accion); outline-offset: 3px; }
.icono--wa { width: 2rem; height: 2rem; }
.icono--ig { width: 1.4rem; height: 1.4rem; }

/* ---------- 8. TABLET Y ESCRITORIO ---------- */
@media (min-width: 700px) {
  .seccion { padding: var(--e5) 0; }
  .persona { grid-template-columns: 6.3rem 1fr; gap: var(--e1); margin-bottom: 0; }
  .etiquetas { grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
  .etiqueta { grid-template-columns: 1fr; grid-template-areas: "foto" "datos" "acciones"; }
  .etiqueta__foto { padding: var(--e2); }
  .etiqueta__foto img { aspect-ratio: 4 / 3; max-height: none; height: auto; }
  .etiqueta__datos { padding: var(--e2) var(--e2) .5rem; }
  .etiqueta__acciones { margin-top: auto; padding: .75rem var(--e2) var(--e2); border-top: 1px solid var(--linea); }
  .etiqueta { grid-template-rows: auto 1fr auto; }
  .etiquetas--filas { grid-template-columns: 1fr; gap: 0; }
  .etiquetas--filas .etiqueta { grid-template-columns: 10.5rem 1fr auto; grid-template-areas: "foto datos acciones"; grid-template-rows: auto; align-items: stretch; }
  .etiquetas--filas .etiqueta__foto { padding: .75rem; }
  .etiquetas--filas .etiqueta__foto img { aspect-ratio: 4 / 3; }
  .etiquetas--filas .etiqueta__datos { padding: var(--e2) var(--e3); align-self: center; }
  .etiquetas--filas .etiqueta__acciones { flex-direction: column; align-items: stretch; justify-content: center; margin-top: 0; padding: var(--e2) var(--e3); border-top: 0; min-width: 150px; text-align: center; }
  .marcas { display: grid; grid-template-columns: repeat(2, 1fr); }
  .novedad-fila { grid-template-columns: 240px 1fr; align-items: start; gap: var(--e3); }
  .pie__grilla { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--e4); }
}
@media (min-width: 960px) {
  .marca img { width: 8.75rem; }
  .burger { display: none; }
  .menu { display: block !important; position: static; border: 0; max-height: none; overflow: visible; }
  .menu > ul { display: flex; align-items: center; gap: .25rem; }
  .menu a { min-height: 4rem; padding: 0 .9rem; }
  .menu a[aria-current] { box-shadow: inset 0 -4px 0 var(--azul); }
  .sub-boton { display: none; }
  .submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; border: 1px solid var(--linea); border-top: 0; padding: .25rem 0; }
  .tiene-sub:hover .submenu, .tiene-sub:focus-within .submenu { display: block; }
  .submenu a { min-height: 44px; padding: 0 1.2rem; }

  .hero__foto { aspect-ratio: auto; height: min(70vh, 40rem); object-position: center; }
  .hero__capa { position: absolute; inset: 0; display: flex; align-items: flex-end; }
  .hero__capa .contenedor { width: min(var(--ancho), 100% - 2rem); }
  .hero__panel { width: 35rem; margin-inline: 0; padding: var(--e4); }

  .dos-col { grid-template-columns: 1fr 1.3fr; gap: var(--e5); }
  .dos-col--texto { grid-template-columns: 1fr 1.6fr; }
  .marcas { grid-template-columns: repeat(4, 1fr); border-top: 0; }
  .marcas__item { flex-direction: column; align-items: flex-start; gap: .25rem; height: 100%; padding: var(--e3) var(--e3) var(--e3) 0; border-bottom: 0; border-top: 1px solid var(--linea); }
  .marcas li + li .marcas__item { padding-left: var(--e3); border-left: 1px solid var(--linea); }
  .servicios-home__fila { grid-template-columns: 1.1fr 1fr; gap: var(--e5); }
  .servicios-home__foto { aspect-ratio: 4 / 3; }

  .etiquetas { grid-template-columns: repeat(3, 1fr); }
  .etiquetas--filas { grid-template-columns: 1fr; }
  .catalogo { display: grid; grid-template-columns: 13.75rem 1fr; gap: var(--e5); align-items: start; }
  .lineas { position: sticky; top: 5.5rem; margin-bottom: 0; }
  .lineas__titulo { display: block; font: 600 var(--t-2)/1.2 var(--f-cond); margin-bottom: var(--e1); }
  .lineas ul { flex-direction: column; gap: 0; overflow: visible; border-top: 1px solid var(--linea); padding: 0; }
  .lineas__item { justify-content: space-between; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; background: transparent; padding: 0 .25rem; }
  .lineas__item.activo { background: var(--azul); padding: 0 .75rem; }

  .ficha { grid-template-columns: 1.15fr 1fr; gap: var(--e5); align-items: start; }
  .ficha__acciones { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ficha__acciones .enlace { align-self: center; }
  .relacionados { grid-template-columns: repeat(2, 1fr); column-gap: var(--e4); }

  .servicio-lista { gap: var(--e5); }
  .servicio { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--e4); align-items: center; }
  .servicio--inversa { grid-template-columns: 1fr 1.2fr; }
  .servicio--inversa img { order: 2; }
  .servicio h2 { margin: 0; }
  .contacto-cab { display: grid; grid-template-columns: 1fr 1fr; min-height: 20rem; }
  .contacto-cab__panel { display: flex; align-items: center; padding: var(--e4) var(--e4) var(--e4) 0; padding-left: max(1rem, calc((100vw - var(--ancho)) / 2)); }
  .contacto-cab__texto { width: 100%; }
  .contacto-cab__foto { order: 0; aspect-ratio: auto; height: 100%; }
  .contacto { grid-template-columns: 1fr 1.15fr; gap: var(--e5); }
  .contacto__form, .contacto__cuerpo { padding: var(--e4); }
  .mapa iframe { height: 26rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

@media (min-width: 1200px) {
  .contacto__datos { flex-direction: row; }
  .contacto__foto { width: 9rem; aspect-ratio: auto; height: auto; object-position: 30% 40%; flex: none; }
}