/* Carrocerías Larrosa — la hoja única del sitio público.
   Mobile-first: todo lo de acá vale desde 320 px; los @media sólo AGREGAN a partir
   de 600 y 960. Nada depende de JavaScript. */

/* Tipografías propias, sólo el subconjunto latino: cubre todo el texto del sitio,
   también el que se carga desde el CMS. Son las cuatro caras que usa esta hoja y
   ninguna más; una regla que pidiera otro peso de Barlow lo recibiría sintetizado.
   La licencia (SIL OFL) viaja dentro de cada archivo. */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("../fonts/anton-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); }

/* Respaldo con las medidas de cada fuente. Mientras no llegan los woff2 el texto se
   dibuja con una fuente del sistema; si ésta ocupa otro ancho, el encabezado y los
   títulos cortan en otras líneas y, al llegar la fuente real, todo lo de abajo salta.
   Cada cara de abajo achica una fuente del sistema (size-adjust) hasta que ocupa el
   mismo ancho que la real sobre el texto de este sitio, y le da su mismo alto
   (ascent/descent-override). Arial y Liberation Sans tienen el mismo ancho, así que
   una cara cubre Windows, macOS, iOS y Linux; Android no tiene Arial y usa la gemela
   sobre Roboto, que es más angosta.

   - La Condensed tiene un respaldo «MAY» para las reglas en mayúsculas: ahí la letra
     condensada ahorra mucho más que en minúsculas, y con un solo ajuste los títulos
     cortaban en otra línea. Toda regla con text-transform: uppercase y la Condensed
     usa --letra-cond-may.
   - Los dígitos tienen su propia cara (unicode-range, declarada después para que
     gane): el teléfono del encabezado pesaba tanto en el promedio que dejaba anchas
     a las palabras.
   - Los anchos máximos del texto van en em, nunca en ch: ch es el ancho del «0» de
     la fuente EN USO, así que durante el respaldo la caja misma sería otra. Cada uno
     es su medida anterior en ch de la fuente real (el «0» mide 0,565 em en Barlow y
     0,453 em en la Condensed 700): 62ch = 35,03em, 68ch = 38,42em, 54ch = 30,51em,
     16ch = 7,248em.

   Los valores se midieron sobre el texto del sitio, no se estimaron: si cambia una
   fuente, se vuelven a medir. */
@font-face { font-family: "Anton respaldo"; font-weight: 400; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
             size-adjust: 70.91%; ascent-override: 165.89%; descent-override: 46.41%; }
@font-face { font-family: "Anton respaldo Android"; font-weight: 400; src: local("Roboto Bold"), local("Roboto-Bold");
             size-adjust: 77.49%; ascent-override: 151.79%; descent-override: 42.47%; }
@font-face { font-family: "Anton respaldo"; font-weight: 400; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); unicode-range: U+30-39;
             size-adjust: 88.85%; ascent-override: 132.38%; descent-override: 37.04%; }
@font-face { font-family: "Anton respaldo Android"; font-weight: 400; src: local("Roboto Bold"), local("Roboto-Bold"); unicode-range: U+30-39;
             size-adjust: 86.12%; ascent-override: 136.58%; descent-override: 38.21%; }
@font-face { font-family: "Barlow respaldo"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
             size-adjust: 95.57%; ascent-override: 104.63%; descent-override: 20.93%; }
@font-face { font-family: "Barlow respaldo Android"; font-weight: 400; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular");
             size-adjust: 96.92%; ascent-override: 103.18%; descent-override: 20.64%; }
@font-face { font-family: "Barlow respaldo"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); unicode-range: U+30-39;
             size-adjust: 91.27%; ascent-override: 109.57%; descent-override: 21.91%; }
@font-face { font-family: "Barlow respaldo Android"; font-weight: 400; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); unicode-range: U+30-39;
             size-adjust: 89.89%; ascent-override: 111.25%; descent-override: 22.25%; }
@font-face { font-family: "Barlow Condensed respaldo"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
             size-adjust: 73.54%; ascent-override: 135.98%; descent-override: 27.20%; }
@font-face { font-family: "Barlow Condensed respaldo Android"; font-weight: 600; src: local("Roboto Bold"), local("Roboto-Bold");
             size-adjust: 78.91%; ascent-override: 126.72%; descent-override: 25.34%; }
@font-face { font-family: "Barlow Condensed respaldo"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
             size-adjust: 75.65%; ascent-override: 132.19%; descent-override: 26.44%; }
@font-face { font-family: "Barlow Condensed respaldo Android"; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold");
             size-adjust: 80.56%; ascent-override: 124.12%; descent-override: 24.82%; }
@font-face { font-family: "Barlow Condensed respaldo"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); unicode-range: U+30-39;
             size-adjust: 77.64%; ascent-override: 128.80%; descent-override: 25.76%; }
@font-face { font-family: "Barlow Condensed respaldo Android"; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold"); unicode-range: U+30-39;
             size-adjust: 75.27%; ascent-override: 132.86%; descent-override: 26.57%; }
@font-face { font-family: "Barlow Condensed respaldo MAY"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
             size-adjust: 66.59%; ascent-override: 150.16%; descent-override: 30.03%; }
@font-face { font-family: "Barlow Condensed respaldo MAY Android"; font-weight: 600; src: local("Roboto Bold"), local("Roboto-Bold");
             size-adjust: 71.25%; ascent-override: 140.35%; descent-override: 28.07%; }
@font-face { font-family: "Barlow Condensed respaldo MAY"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); unicode-range: U+30-39;
             size-adjust: 73.58%; ascent-override: 135.90%; descent-override: 27.18%; }
@font-face { font-family: "Barlow Condensed respaldo MAY Android"; font-weight: 600; src: local("Roboto Bold"), local("Roboto-Bold"); unicode-range: U+30-39;
             size-adjust: 71.01%; ascent-override: 140.83%; descent-override: 28.17%; }
@font-face { font-family: "Barlow Condensed respaldo MAY"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
             size-adjust: 66.47%; ascent-override: 150.45%; descent-override: 30.09%; }
@font-face { font-family: "Barlow Condensed respaldo MAY Android"; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold");
             size-adjust: 72.85%; ascent-override: 137.26%; descent-override: 27.45%; }
@font-face { font-family: "Barlow Condensed respaldo MAY"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); unicode-range: U+30-39;
             size-adjust: 75.62%; ascent-override: 132.23%; descent-override: 26.45%; }
@font-face { font-family: "Barlow Condensed respaldo MAY Android"; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold"); unicode-range: U+30-39;
             size-adjust: 73.30%; ascent-override: 136.42%; descent-override: 27.28%; }

:root {
	--letra:       Barlow, "Barlow respaldo", "Barlow respaldo Android", "Helvetica Neue", Arial, sans-serif;
	--letra-cond:  "Barlow Condensed", "Barlow Condensed respaldo", "Barlow Condensed respaldo Android", "Arial Narrow", Arial, sans-serif;
	--letra-cond-may: "Barlow Condensed", "Barlow Condensed respaldo MAY", "Barlow Condensed respaldo MAY Android", "Arial Narrow", Arial, sans-serif;
	--letra-marca: Anton, "Anton respaldo", "Anton respaldo Android", "Arial Narrow", Impact, sans-serif;
}

/* Las fuentes del sistema detrás de los respaldos son la red: si un respaldo no
   carga, se ve Arial sin ajustar (como antes de tener respaldos), nunca el sans-serif
   genérico, que en Linux es Noto Sans y es mucho más ancho.
   .precarga (en el <body>) pide cada respaldo como fuente principal: Firefox no
   carga una @font-face que sólo figura como respaldo mientras espera la real, y
   pintaba con lo siguiente que hubiera. */
.precarga { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden;
            clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.pc-marca { font: 400 16px "Anton respaldo", "Anton respaldo Android"; }
.pc-letra { font: 400 16px "Barlow respaldo", "Barlow respaldo Android"; }
.pc-cond6 { font: 600 16px "Barlow Condensed respaldo", "Barlow Condensed respaldo Android"; }
.pc-cond7 { font: 700 16px "Barlow Condensed respaldo", "Barlow Condensed respaldo Android"; }
.pc-may6  { font: 600 16px "Barlow Condensed respaldo MAY", "Barlow Condensed respaldo MAY Android"; }
.pc-may7  { font: 700 16px "Barlow Condensed respaldo MAY", "Barlow Condensed respaldo MAY Android"; }

:root {
	/* --- superficie y texto ------------------------------------------------ */
	--tinta:      #0f1114;  /* fondo de página */
	--tinta-2:    #15181c;  /* fondo del pie y del desplegable */
	--hueso:      #f2f0ec;  /* texto principal */
	--gris:       #b9bfc7;  /* texto secundario */
	--gris-2:     #9aa0a8;  /* etiquetas */
	--copy:       #6f757c;  /* la línea de copyright */
	--linea:      #24282e;  /* filete fino */
	--borde:      #3a3f47;  /* borde de controles */
	--campo:      #1a1d22;  /* fondo de los campos del formulario */
	--foto-fondo: #1b1e23;  /* caja vacía mientras carga una foto */
	--panel-hover:#1d2126;
	--ok:         #4cc77a;  /* el mensaje de envío correcto: 8,79:1 sobre --tinta */

	/* --- rojo --------------------------------------------------------------- */
	--rojo:       #e01415;  /* relleno de botones y filetes; encima va blanco */
	--rojo-texto: #ff4d3d;  /* el mismo rojo NO se lee sobre negro (3,85:1). Éste da 5,75:1 */
	--rojo-hover: #f52a1c;
	--enlace-hov: #ff8078;

	/* --- encabezado --------------------------------------------------------- */
	--cab-texto:  #ffffff;
	--cab-borde:  rgba(255,255,255,.7);
	--cab-borde-2:#ffffff;
	--cab-raya:   rgba(255,255,255,.45);
	--cab-inverso:var(--ch-m-f);  /* color del icono cuando se invierte al pasar el cursor */
	--cab-filete: transparent;    /* filete bajo el encabezado: sólo hace falta si el encabezado es claro */
	--brillo:     rgba(255,255,255,.11);  /* el barrido de luz sobre la chapa */

	/* --- lo que va ENCIMA de una foto: fijo, no sigue al fondo de página ----- */
	--velo:        15,17,20;  /* triple RGB de los degradados sobre foto */
	--sobre-foto:  #ffffff;
	--sobre-foto-2:#c9ced4;
	--texto-chapa: #c8ced6;   /* sobre la banda: 7,68:1 en su peor punto */
	--banda-2:     #adb4bc;   /* secundario sobre la banda. NO sirve --gris-2: da 2,71:1 sobre
	                             la luz de la nervadura — el mismo contraste intermitente
	                             que hubo que corregir en el encabezado */

	/* --- el patrón: sólo se lee desde :root ---------------------------------
	   Comprobado: un tema puesto en una clase envolvente NO recolorea el patrón,
	   porque el <pattern> vive en otro subárbol y resuelve contra SUS ancestros.
	   Por eso un color del patrón se cambia acá, en :root: en una clase no hace nada. */
	--ch-m-f: #a50f0c; --ch-m-c: #c2120e; --ch-m-s: #5e0705; --ch-m-l: #cf4640;  /* chapa de marca */
	--ch-b-f: #1b1e23; --ch-b-c: #282c33; --ch-b-s: #0a0c0f; --ch-b-l: #383e45;  /* chapa de banda.
	   No subir la luz: con #525863 el «47» en rojo daba 2,17:1 y las migas 2,71:1 */
}

* { box-sizing: border-box; }

/* Sin esto, cualquier display: en una clase le gana al atributo hidden y el
   panel del menú se sirve abierto. */
[hidden] { display: none !important; }

body {
	margin: 0;
	background: var(--tinta);
	color: var(--hueso);
	font-family: var(--letra);
	font-size: 16px;          /* piso de 16 px: por debajo el móvil hace zoom solo en los formularios */
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

a { color: var(--rojo-texto); text-decoration: none; }
a:hover, a:focus-visible { color: var(--enlace-hov); }
img { max-width: 100%; }

.display { font-family: var(--letra-marca); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; }
.titular { font-family: var(--letra-cond); font-weight: 700; }
.rotulo  { font-family: var(--letra-cond-may); font-weight: 700;
           text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }

/* padding-INLINE a propósito: si fuera el atajo `padding: 0 18px`, cualquier
   componente que además use `padding: 30px 0` lo borraría y el bloque saldría
   pegado al borde de la pantalla. Los componentes usan padding-block. */
.env { max-width: 1220px; margin: 0 auto; padding-inline: 18px; }
.placa { position: absolute; inset: 0; width: 100%; height: 100%; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Encabezado: la chapa roja, oscurecida --------------------------------
   El rojo de marca (#e01415) con brillos claros dejaba el blanco en 2,09:1 justo
   donde pasaba una nervadura. Con esta paleta el PEOR punto del patrón queda en
   4,56:1, así que el contraste ya no depende de dónde caiga cada letra. */
.cabecera { position: relative; overflow: hidden; border-bottom: 4px solid var(--cab-filete); }
.cabecera-int { position: relative; padding-block: 18px 16px; }
.cabecera-fila { display: flex; align-items: flex-start; gap: 14px; }
.marca { display: block; color: var(--cab-texto); flex: 1 1 auto; }
.marca:hover, .marca:focus-visible { color: var(--cab-texto); }
.marca-sup { display: block; font-family: var(--letra-marca); font-size: 15px; line-height: 1; letter-spacing: .18em; color: var(--cab-texto); }
.marca-nom { display: block; font-size: 46px; line-height: .94; color: var(--cab-texto); text-shadow: 0 2px 0 rgba(0,0,0,.28); }

.boton-menu { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
              border: 2px solid var(--cab-borde-2); background: none; color: var(--cab-texto); flex: 0 0 auto; cursor: pointer; }

.cabecera-pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 12px; }
.direccion, .telefono { font-family: var(--letra-cond-may); font-weight: 600; font-size: 16px;
             letter-spacing: .05em; text-transform: uppercase; color: var(--cab-texto); }
/* El teléfono va como TEXTO, no como control: se lee, se dicta y se guarda, y no
   agrega otro cuadrado al lado del hamburguesa. Tocar para llamar sigue andando
   porque es un enlace tel:, pero no se dibuja como botón. */
.telefono { color: var(--cab-texto); text-decoration: none; border-bottom: 1px solid var(--cab-raya); }
.telefono:hover, .telefono:focus-visible { color: var(--cab-texto); border-bottom-color: var(--cab-borde-2); }
.sociales { display: none; gap: 8px; }   /* en el encabezado móvil no: competían con el hamburguesa */
.pie .sociales { display: flex; }
.social { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
          border: 1.5px solid var(--cab-borde); color: var(--cab-texto); }
.social:hover, .social:focus-visible { background: var(--cab-texto); color: var(--cab-inverso); }
.social svg { width: 21px; height: 21px; fill: currentColor; }

.nav-esc { display: none; }

.panel { display: flex; flex-direction: column; background: var(--tinta-2); border-bottom: 3px solid var(--rojo); }
.panel a { padding: 15px 18px; border-top: 1px solid var(--linea); color: var(--hueso);
           font-family: var(--letra-cond-may); font-weight: 600; font-size: 20px;
           text-transform: uppercase; letter-spacing: .05em; }
.panel a:first-child { border-top: 0; }
.panel a:hover, .panel a:focus-visible { background: var(--panel-hover); color: var(--hueso); }
@media (min-width: 960px) { .panel { display: none !important; } }

/* --- Portada -------------------------------------------------------------- */
.portada { position: relative; background: var(--tinta); }
.portada-foto { display: block; width: 100%; height: 340px; object-fit: cover; }
.portada-velo { position: absolute; inset: 0;
                background: linear-gradient(180deg, rgba(var(--velo),.10) 0%, rgba(var(--velo),.55) 45%, rgba(var(--velo),.97) 97%); }
.portada-txt { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 20px; }
.chapita { display: inline-block; padding: 6px 10px; background: var(--rojo); color: #fff;
           font-family: var(--letra-cond-may); font-weight: 700; font-size: 13px;
           text-transform: uppercase; letter-spacing: .1em; }
h1 { margin: 12px 0 10px; font-size: 36px; line-height: 1.04; text-wrap: balance; }
.portada-txt h1 { color: var(--sobre-foto); }
.bajada { margin: 0; font-size: 17px; line-height: 1.45; color: var(--sobre-foto-2); }

.acciones { display: flex; flex-direction: column; gap: 10px; padding: 20px 0 28px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px;
       font-family: var(--letra-cond-may); font-weight: 700; font-size: 18px;
       text-transform: uppercase; letter-spacing: .07em; }
.btn-rojo { background: var(--rojo); color: #fff; }
.btn-rojo:hover, .btn-rojo:focus-visible { background: var(--rojo-hover); color: #fff; }
.btn-linea { border: 1px solid var(--borde); color: var(--hueso); }
.btn-linea:hover, .btn-linea:focus-visible { border-color: var(--hueso); color: var(--hueso); }
.btn svg { width: 20px; height: 20px; fill: currentColor; }

/* --- Categorías ----------------------------------------------------------- */
.seccion { padding-bottom: 8px; }
.rotulo-rojo { margin: 0 0 4px; color: var(--rojo-texto); }
.entradilla { margin: 0 0 16px; font-size: 16px; color: var(--gris-2); }

.rejilla { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10px; }
.tarjeta { position: relative; display: block; height: 128px; overflow: hidden; color: inherit; }
.tarjeta:hover, .tarjeta:focus-visible { color: inherit; }
.tarjeta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
               object-position: 72% center; transition: transform .5s ease; }
.tarjeta:hover img { transform: scale(1.05); }
.tarjeta-velo { position: absolute; inset: 0;
                background: linear-gradient(90deg, rgba(var(--velo),.92) 26%, rgba(var(--velo),.18) 100%); }
.tarjeta-filete { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rojo); }
/* La tarjeta lleva su texto ENCIMA de la foto: usa los tokens de «encima de una
   foto» (--sobre-foto, --velo), no los del texto de página. */
.tarjeta-txt { position: relative; display: flex; flex-direction: column; justify-content: center;
               height: 100%; padding-left: 18px; color: var(--sobre-foto); }
.tarjeta-nom { font-family: var(--letra-cond); font-weight: 700; font-size: 27px; line-height: 1.08; }
.tarjeta-num { font-family: var(--letra-cond-may); font-weight: 600; font-size: 13px;
               text-transform: uppercase; letter-spacing: .1em; color: var(--sobre-foto-2); margin-top: 3px; }

/* --- Franja de los años: acá la chapa es material, no adorno --------------- */
.franja { position: relative; margin-top: 28px; overflow: hidden; }
.franja-int { position: relative; padding-block: 30px 32px; }
.anos { display: flex; align-items: baseline; gap: 12px; }
.anos-num { font-size: 62px; line-height: .9; color: var(--rojo-texto); }
.anos-txt { font-family: var(--letra-cond-may); font-weight: 600; font-size: 15px;
            text-transform: uppercase; letter-spacing: .12em; color: var(--texto-chapa); }
.franja p { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--texto-chapa); max-width: 35.03em; }
.enlace-sub { display: inline-block; margin-top: 18px; padding-bottom: 3px; border-bottom: 2px solid var(--rojo);
              font-family: var(--letra-cond-may); font-weight: 700; font-size: 15px;
              text-transform: uppercase; letter-spacing: .1em; color: var(--hueso); }
.enlace-sub:hover, .enlace-sub:focus-visible { color: var(--rojo-texto); }

/* El brillo que recorre la chapa, en el ángulo de la nervadura. Se apaga solo
   si el sistema pide menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
	.brillo::after { content: ""; position: absolute; inset: -40% -60%; pointer-events: none;
		background: linear-gradient(107deg, transparent 43%, var(--brillo) 50%, transparent 57%);
		animation: barrido 7s linear infinite; }
}
@keyframes barrido { from { transform: translateX(-55%); } to { transform: translateX(55%); } }

/* --- Último trabajo -------------------------------------------------------- */
.ultimo { padding-block: 30px 34px; }
.ultimo img { display: block; width: 100%; height: 200px; object-fit: cover; }
.ultimo .rotulo-rojo { margin-top: 16px; }
.ultimo h3 { margin: 8px 0 6px; font-family: var(--letra-cond); font-weight: 700;
             font-size: 24px; line-height: 1.15; }
.ultimo p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--gris-2); }

/* --- Pie ------------------------------------------------------------------- */
.pie { padding-block: 26px 104px; border-top: 3px solid var(--rojo); background: var(--tinta-2); }
.pie-rot { margin: 0 0 8px; color: var(--gris-2); }
.pie p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--texto-chapa); }
.pie .sociales { margin-top: 20px; }
.pie .social { border-color: var(--borde); color: var(--hueso); }
.pie .social:hover, .pie .social:focus-visible { background: var(--hueso); color: var(--tinta); }
.copy { margin-top: 20px; font-size: 14px; color: var(--copy); }

/* ===== 600 px ============================================================== */
@media (min-width: 600px) {
	.rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tarjeta { height: 168px; }
	.acciones { flex-direction: row; }
	.btn { flex: 1 1 0; }
	.portada-foto { height: 420px; }
	h1 { font-size: 46px; }
	.marca-nom { font-size: 58px; }
	.ultimo img { height: 300px; }
}

/* ===== 960 px ============================================================== */
@media (min-width: 960px) {
	.env { padding-inline: 32px; }
	.cabecera-int { padding-block: 20px 18px; }
	.cabecera-pie { margin-top: 16px; }
	.boton-menu { display: none; }
	.cabecera .sociales { display: flex; }
	.cabecera-pie { justify-content: space-between; align-items: center; }
	.pie { padding-block: 26px 40px; }
	.nav-esc { display: flex; gap: 26px; align-items: center; }
	.nav-esc a { font-family: var(--letra-cond-may); font-weight: 600; font-size: 18px;
	             text-transform: uppercase; letter-spacing: .06em; color: var(--cab-texto); padding: 6px 0;
	             border-bottom: 2px solid transparent; }
	.nav-esc a:hover, .nav-esc a:focus-visible { color: var(--cab-texto); border-bottom-color: var(--cab-borde-2); }
	.portada-foto { height: 560px; }
	.portada-txt { padding-bottom: 44px; }
	h1 { font-size: 60px; max-width: 7.248em; }
	.bajada { font-size: 20px; max-width: 30.51em; }
	.acciones { max-width: 520px; }  /* alineada a la izquierda con el resto, no centrada */
	.rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
	.tarjeta { height: 300px; }
	.tarjeta-velo { background: linear-gradient(0deg, rgba(var(--velo),.94) 14%, rgba(var(--velo),.10) 72%); }
	.tarjeta-filete { right: 0; bottom: auto; width: auto; height: 4px; }
	.tarjeta-txt { justify-content: flex-end; padding: 0 16px 16px; }
	.tarjeta img { object-position: center; }
	.franja-int { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 40px; align-items: start; padding-block: 56px 60px; }
	.anos { flex-direction: column; gap: 0; }
	.anos-num { font-size: 108px; }
	.franja p { margin-top: 0; font-size: 19px; }
	.ultimo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: center; padding-block: 56px 64px; }
	.ultimo img { height: 380px; }
	.ultimo .rotulo-rojo { margin-top: 0; }
	.ultimo h3 { margin-top: 8px; font-size: 34px; }
	.ultimo p { font-size: 18px; }
	.pie-int { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
	.pie .sociales { margin-top: 0; }
}

/* --- Botón flotante de WhatsApp -------------------------------------------
   SVG en línea: no depende de ninguna imagen que pueda fallar. El pie reserva
   espacio abajo (su padding-block) para que el botón nunca tape la última línea. */
.flotante { position: fixed; right: 16px; bottom: 16px; z-index: 60;
	display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
	border-radius: 50%; background: #25d366; color: #fff;
	box-shadow: 0 6px 18px rgba(0,0,0,.38); transition: transform .2s ease; }
.flotante:hover, .flotante:focus-visible { color: #fff; transform: scale(1.07); }
.flotante svg { width: 32px; height: 32px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .flotante { transition: none; } }
@media (min-width: 960px) { .flotante { right: 26px; bottom: 26px; } }

/* Facebook va en el desplegable: es un enlace de frecuencia baja y va con la
   navegación, no compitiendo con el control del menú. */
.panel-social { display: flex; align-items: center; gap: 10px; }
.panel-social svg { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }

/* ===== Páginas interiores ================================================== */

/* La cabecera de página es el patrón SVG de la chapa (los <defs> del encabezado),
   no una imagen. */
.cabecera-pag { position: relative; overflow: hidden; }
.cabecera-pag-int { position: relative; padding-block: 20px 26px; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px;
         font-family: var(--letra-cond-may); font-weight: 600; font-size: 14px;
         text-transform: uppercase; letter-spacing: .08em; color: var(--banda-2); }
.migas a { color: var(--banda-2); }
.migas a:hover, .migas a:focus-visible { color: var(--hueso); }
.migas span[aria-current] { color: var(--hueso); }
.migas svg { width: 7px; height: 11px; stroke: var(--rojo-texto); fill: none; stroke-width: 2; }
.cabecera-pag h1 { margin: 0; font-family: var(--letra-cond); font-weight: 700;
                   font-size: 34px; line-height: 1.06; }
.cabecera-pag .entradilla { margin: 8px 0 0; max-width: 35.03em; color: var(--banda-2); }

/* --- Grilla de trabajos ---------------------------------------------------- */
.grilla-prod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
               padding-block: 22px 34px; }
.prod { display: block; color: inherit; }
.prod:hover, .prod:focus-visible { color: inherit; }
.prod-foto { display: block; position: relative; overflow: hidden; background: var(--foto-fondo); aspect-ratio: 4 / 3; }
.prod-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.prod:hover .prod-foto img { transform: scale(1.06); }
.prod-foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
                    background: var(--rojo); transform: scaleX(0); transform-origin: left;
                    transition: transform .3s ease; }
.prod:hover .prod-foto::after, .prod:focus-visible .prod-foto::after { transform: scaleX(1); }
.prod-nom { display: block; margin: 9px 0 0; font-family: var(--letra-cond); font-weight: 700;
            font-size: 18px; line-height: 1.2; }
.prod-txt { display: block; margin: 3px 0 0; font-size: 14px; line-height: 1.4; color: var(--gris-2); }
@media (prefers-reduced-motion: reduce) {
	.prod-foto img, .prod-foto::after, .tarjeta img { transition: none; }
}

/* --- Ficha del trabajo ----------------------------------------------------- */
.ficha { padding-block: 24px 36px; }
.ficha-txt { margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: var(--gris); max-width: 38.42em; white-space: pre-line; }
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.galeria a { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--foto-fondo); }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.compartir { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.compartir a { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px;
               border: 1px solid var(--borde); color: var(--hueso);
               font-family: var(--letra-cond-may); font-weight: 600; font-size: 15px;
               text-transform: uppercase; letter-spacing: .06em; }
.compartir a:hover, .compartir a:focus-visible { border-color: var(--hueso); color: var(--hueso); }
.compartir svg { width: 17px; height: 17px; fill: currentColor; }
.paso { display: flex; justify-content: space-between; gap: 14px; margin-top: 32px;
        border-top: 1px solid var(--linea); padding-top: 18px; }
.paso a { display: flex; align-items: center; gap: 8px; max-width: 46%; color: var(--hueso);
          font-family: var(--letra-cond); font-weight: 600; font-size: 16px; }
.paso a:hover, .paso a:focus-visible { color: var(--rojo-texto); }
.paso svg { width: 8px; height: 13px; stroke: var(--rojo-texto); fill: none; stroke-width: 2; flex: 0 0 auto; }
.paso .der { margin-left: auto; text-align: right; }

/* --- Contacto -------------------------------------------------------------- */
.contacto { padding-block: 24px 36px; }
.contacto button.btn { width: 100%; border: 0; cursor: pointer; }
.campo { margin-bottom: 16px; }
.campo label { display: block; margin-bottom: 6px;
               font-family: var(--letra-cond-may); font-weight: 600; font-size: 15px;
               text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.campo input, .campo textarea { width: 100%; min-height: 50px; padding: 12px 14px;
	background: var(--campo); border: 1px solid var(--borde); color: var(--hueso);
	font-family: inherit; font-size: 16px; }  /* 16 px: por debajo, iOS hace zoom al enfocar */
.campo textarea { min-height: 170px; resize: vertical; }
/* Campo que una persona no ve y un robot completa. Fuera de la vista y no con
   display:none, que algunos robots saben saltear; el aria-hidden y el tabindex del
   HTML lo sacan también del lector de pantalla y del tabulador. */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--rojo-texto); outline-offset: 1px; border-color: transparent; }
/* El mensaje del envío: lo escribe contacto.js, con una de estas tres clases. */
.msg-txt, .msg-ok, .msg-err { display: block; margin-top: 14px; font-size: 16px; line-height: 1.4; }
.msg-txt { color: var(--gris); }
.msg-ok  { color: var(--ok); }
.msg-err { color: var(--rojo-texto); }
.datos { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--linea); }
.datos dl { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; margin: 0; }
.datos dt { font-family: var(--letra-cond-may); font-weight: 600; font-size: 14px;
            text-transform: uppercase; letter-spacing: .1em; color: var(--gris-2); margin-bottom: 3px; }
.datos dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--texto-chapa); }

@media (min-width: 600px) {
	.grilla-prod { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cabecera-pag h1 { font-size: 44px; }
	.datos dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.contacto form { max-width: 640px; }
	.contacto button.btn { width: auto; min-width: 220px; }
}
@media (min-width: 960px) {
	.grilla-prod { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-block: 32px 56px; }
	.galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
	.cabecera-pag-int { padding-block: 26px 34px; }
	.cabecera-pag h1 { font-size: 56px; }
	.prod-nom { font-size: 20px; }
	.ficha { padding-block: 34px 56px; }
	.ficha-txt { font-size: 19px; }
}