/* ============================================================
   ARGIOLA · el taller de la luz
   Hoja de estilos única: portada (es/eu), aviso legal y 404.
   Versión 2 (28-09-2026): sobria y técnica.

   Marca: amanecer #FF7A3D · azul hondo #14213D · arena #FFF7EC
          melocotón #FFD9BF · gris pizarra #5B6472
   Letra: Sora (titulares y logotipo) · Nunito Sans (texto)

   Criterios de esta versión:
   - El azul manda y el naranja solo señala (botón principal, filetes, puntos).
   - Esquinas casi rectas, filetes finos y rejilla a la vista, en vez de tarjetas flotantes.
   - Nada se mueve por adorno.
   ============================================================ */

/* ---------- 1. Variables ---------- */
:root {
  --naranja: #FF7A3D;
  --naranja-vivo: #FF8D57;
  /* El naranja de marca sobre blanco no llega al contraste mínimo para leerse como texto.
     Para cifras y letras sobre fondo claro se usa este, más hondo. */
  --naranja-texto: #C2460C;
  --azul: #14213D;
  --azul-2: #1C2D52;
  --azul-noche: #0C1528;
  --arena: #FFF7EC;
  --melocoton: #FFD9BF;
  --pizarra: #5B6472;
  --blanco: #FFFFFF;

  --tinta: var(--azul);
  --texto-2: var(--pizarra);
  --linea: rgba(20, 33, 61, .14);
  --linea-fuerte: rgba(20, 33, 61, .28);
  --sobre-oscuro-2: #B9C2D3;
  --linea-oscuro: rgba(255, 255, 255, .16);

  --titular: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --cuerpo: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  --radio: 10px;
  --radio-s: 6px;
  --sobre: 40px;
  --cab: 76px;
  --suavizado: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 16px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--titular); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
summary { cursor: pointer; }

:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }

.ancho { width: min(1200px, 100% - 40px); margin-inline: auto; }
.sin-scroll { overflow: hidden; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.salto {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radio-s);
  background: var(--azul); color: var(--blanco); font-weight: 700; text-decoration: none;
}
.salto:focus { top: 12px; }

/* Rótulo de sección: un filete naranja y mayúsculas pequeñas */
.rotulo {
  display: flex; align-items: center; gap: 12px;
  font-size: .78125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2);
}
.rotulo::before { content: ''; flex: none; width: 28px; height: 2px; background: var(--naranja); }

.titulo { font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.625rem); margin-top: 16px; text-wrap: balance; }
.entrada { margin-top: 16px; max-width: 52ch; font-size: 1.0625rem; color: var(--texto-2); }

/* ---------- 3. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 22px; border-radius: var(--radio);
  font-family: var(--cuerpo); font-size: 1rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; white-space: nowrap; border: 1.5px solid transparent;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.btn svg.linea { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--naranja { background: var(--naranja); color: var(--azul); }
.btn--naranja:hover { background: var(--naranja-vivo); }
.btn--azul { background: var(--azul); color: var(--blanco); }
.btn--azul:hover { background: var(--azul-2); }
.btn--linea { border-color: var(--linea-fuerte); color: var(--tinta); background: transparent; }
.btn--linea:hover { border-color: var(--tinta); background: rgba(20, 33, 61, .04); }
.btn--claro { border-color: rgba(255, 255, 255, .34); color: var(--blanco); }
.btn--claro:hover { border-color: var(--blanco); background: rgba(255, 255, 255, .06); }

/* ---------- 4. Logotipo ---------- */
.marca { display: inline-flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: var(--tinta); }
.marca__simbolo { width: 32px; height: 32px; flex: none; overflow: visible; }
.marca__simbolo .trazo { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.marca__simbolo .punto { fill: var(--naranja); }

/* El nombre se escribe con las piezas del símbolo: la A de dos trazos (tejado) y una elipse naranja
   a altura de mayúscula como O, para que se lean dos palabras: Argi + Ola (opción B, Pablo, 29-09-2026).
   La elipse del símbolo tiene la misma proporción que la del nombre. */
.marca__nombre {
  display: inline-flex; align-items: baseline; flex: none;
  font-family: var(--titular); font-weight: 700; font-size: 1.3125rem;
  letter-spacing: -.02em; line-height: 1; white-space: nowrap;
}
.marca__a { display: inline-block; flex: none; width: .69em; height: .76em; margin-right: .02em; overflow: visible; }
.marca__a path { fill: none; stroke: currentColor; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.marca__o {
  display: inline-block; flex: none; width: .66em; height: .76em; margin: 0 .05em 0 .06em;
  border-radius: 50%; background: var(--naranja); position: relative; top: 0;
}
.marca--clara { color: var(--blanco); }

/* ---------- 5. Barra superior y cabecera ---------- */
.sobre { background: var(--azul); color: var(--sobre-oscuro-2); font-size: .875rem; }
.sobre__in { min-height: var(--sobre); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sobre__lugar { display: none; align-items: center; gap: 8px; }
.sobre__der { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; }
.sobre svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--naranja); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sobre__dato { display: inline-flex; align-items: center; gap: 8px; color: var(--blanco); font-weight: 600; text-decoration: none; }
.sobre__dato:hover { text-decoration: underline; text-decoration-color: var(--naranja); text-underline-offset: 4px; }
.sobre__correo { display: none; }

.idioma { display: flex; align-items: center; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; }
.idioma span, .idioma a { padding: 4px 8px; text-decoration: none; }
.idioma span { color: var(--blanco); box-shadow: inset 0 -2px 0 var(--naranja); }
.idioma a { color: var(--sobre-oscuro-2); }
.idioma a:hover { color: var(--blanco); }

.cab {
  position: sticky; top: 0; z-index: 50; height: var(--cab);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--linea);
}
.cab__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.cab__nav { display: none; gap: 28px; }
.cab__nav a { position: relative; padding: 8px 0; font-weight: 600; font-size: .96875rem; text-decoration: none; color: var(--tinta); }
.cab__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--naranja); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--suavizado);
}
.cab__nav a:hover::after, .cab__nav a[aria-current="true"]::after { transform: scaleX(1); }

.cab__der { display: flex; align-items: center; gap: 10px; }
.cab__cta { display: none; min-height: 46px; padding: 10px 18px; font-size: .9375rem; }
.cab__volver { min-height: 44px; padding: 9px 16px; font-size: .9375rem; }

.cab__menu { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radio); border: 1.5px solid var(--linea-fuerte); }
.cab__menu i { position: relative; width: 20px; height: 2px; background: var(--tinta); transition: background-color .2s; }
.cab__menu i::before, .cab__menu i::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--tinta);
  transition: transform .25s var(--suavizado), top .25s var(--suavizado);
}
.cab__menu i::before { top: -6px; }
.cab__menu i::after { top: 6px; }
.cab__menu[aria-expanded="true"] i { background: transparent; }
.cab__menu[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
.cab__menu[aria-expanded="true"] i::after { top: 0; transform: rotate(-45deg); }

/* Menú del móvil: se despliega debajo de la cabecera */
.menu {
  position: fixed; inset: 0; z-index: 40; padding: calc(var(--sobre) + var(--cab) + 12px) 20px 28px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  background: var(--blanco); overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s;
}
.menu--abierto { opacity: 1; visibility: visible; transition: opacity .25s; }
.menu__enlaces a {
  display: flex; align-items: baseline; gap: 14px; padding: 15px 0;
  font-family: var(--titular); font-weight: 600; font-size: 1.375rem; letter-spacing: -.02em;
  text-decoration: none; border-bottom: 1px solid var(--linea);
}
.menu__enlaces small { font-family: var(--cuerpo); font-size: .78125rem; font-weight: 700; letter-spacing: .1em; color: var(--texto-2); min-width: 22px; }
.menu__pie { display: grid; gap: 10px; }

/* ---------- 6. Portada ---------- */
.portada { padding: 44px 0 0; background: var(--blanco); }
.portada__in { display: grid; gap: 40px; align-items: center; }
.portada__h1 { font-size: clamp(2.125rem, 1.4rem + 2.9vw, 3.375rem); letter-spacing: -.03em; line-height: 1.06; margin-top: 18px; text-wrap: balance; }
.portada__texto { margin-top: 22px; max-width: 50ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: var(--texto-2); }
.portada__texto strong { color: var(--tinta); font-weight: 700; }
.portada__botones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

.portada__foto { position: relative; margin: 0 0 10px 10px; }
.portada__foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radio); background: var(--azul); }
/* Un filete naranja en la esquina: el único adorno de la portada */
.portada__foto::after {
  content: ''; position: absolute; left: -10px; bottom: -10px; width: 96px; height: 96px;
  border-left: 3px solid var(--naranja); border-bottom: 3px solid var(--naranja); border-radius: 0 0 0 var(--radio);
  pointer-events: none;
}

/* Las cuatro garantías, en una banda con filetes */
.garantias { margin-top: 52px; display: grid; border-top: 1px solid var(--linea); }
.garantia { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.garantia svg { width: 28px; height: 28px; flex: none; margin-top: 2px; overflow: visible; }
.garantia .trazo { fill: none; stroke: var(--tinta); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.garantia .punto { fill: var(--naranja); }
.garantia h2 { font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.3; }
.garantia p { margin-top: 4px; font-size: .9375rem; color: var(--texto-2); line-height: 1.5; }

/* ---------- 7. Secciones ---------- */
.seccion { padding: clamp(64px, 8vw, 112px) 0; }
.seccion--arena { background: var(--arena); }
.seccion__cab { display: grid; gap: 4px; margin-bottom: clamp(32px, 4.5vw, 56px); }

/* Servicios: una tabla de seis celdas que comparten filetes */
.servicios { display: grid; border-top: 1px solid var(--linea-fuerte); }
.servicio { padding: 30px 0 32px; border-bottom: 1px solid var(--linea); }
.servicio__cab { display: flex; align-items: center; justify-content: space-between; }
.servicio__icono { width: 52px; height: 52px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--arena); display: grid; place-items: center; }
.servicio__icono svg { width: 30px; height: 30px; overflow: visible; }
.servicio__icono .trazo { fill: none; stroke: var(--tinta); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.servicio__icono .punto { fill: var(--naranja); }
.servicio__n { font-family: var(--titular); font-size: .875rem; font-weight: 600; letter-spacing: .06em; color: var(--texto-2); }
.servicio h3 { margin-top: 22px; font-size: 1.25rem; }
.servicio > p { margin-top: 8px; color: var(--texto-2); font-size: 1rem; max-width: 40ch; }
.lista { margin-top: 18px; display: grid; gap: 8px; }
.lista li { position: relative; padding-left: 20px; font-size: .96875rem; font-weight: 600; line-height: 1.45; }
.lista li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--naranja); }

.nota { margin-top: 28px; font-size: .96875rem; color: var(--texto-2); }
.nota a { color: var(--tinta); font-weight: 700; text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Para quién: franja azul con la foto del cuadro muy al fondo */
.sectores { position: relative; isolation: isolate; overflow: hidden; background: var(--azul); color: var(--blanco); }
.sectores__fondo { position: absolute; inset: 0; z-index: -2; }
.sectores__fondo img { width: 100%; height: 100%; object-fit: cover; }
.sectores::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 33, 61, .9), rgba(12, 21, 40, .95)); }
.sectores .rotulo, .sectores .entrada { color: var(--sobre-oscuro-2); }
.sectores__lista { display: grid; border-top: 1px solid rgba(255, 255, 255, .34); }
.sector { padding: 28px 0; border-bottom: 1px solid var(--linea-oscuro); }
.sector h3 { font-size: 1.25rem; display: flex; align-items: center; gap: 12px; }
.sector h3::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--naranja); flex: none; }
.sector p { margin-top: 10px; color: var(--sobre-oscuro-2); font-size: 1rem; max-width: 42ch; }

/* Cómo trabajo */
.pasos { display: grid; border-top: 1px solid var(--linea-fuerte); }
.paso { padding: 26px 0 28px; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: 64px 1fr; column-gap: 8px; }
.paso__n { font-family: var(--titular); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; color: var(--naranja-texto); line-height: 1.2; }
.paso h3 { font-size: 1.1875rem; line-height: 1.3; align-self: center; }
.paso p:not(.paso__n) { grid-column: 2; margin-top: 8px; color: var(--texto-2); font-size: 1rem; }

/* Quién hay detrás */
.detras { display: grid; gap: 36px; align-items: center; }
.detras__foto img { width: 100%; border-radius: var(--radio); aspect-ratio: 1000 / 843; object-fit: cover; }
.detras__texto > p:not(.rotulo) { margin-top: 18px; color: var(--texto-2); max-width: 54ch; }
.detras__texto > p strong { color: var(--tinta); }
.ficha { margin-top: 30px; border-top: 1px solid var(--linea-fuerte); }
.ficha div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linea); font-size: .96875rem; }
.ficha dt { font-size: .78125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); padding-top: 3px; }
.ficha dd { font-weight: 600; }

/* Zona */
.zona { display: grid; gap: 36px; align-items: center; }
.pueblos { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; border-top: 1px solid var(--linea-fuerte); }
.pueblos li { position: relative; padding: 12px 0 12px 20px; border-bottom: 1px solid var(--linea); font-weight: 600; font-size: .96875rem; }
.pueblos li::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--linea-fuerte); }
.pueblos li.base::before { background: var(--naranja); }

.mapa { border-radius: var(--radio); background: var(--azul); overflow: hidden; }
.mapa svg { width: 100%; height: auto; }
.mapa .rayo { stroke: rgba(255, 255, 255, .2); stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; }
.mapa .pueblo { fill: var(--blanco); }
.mapa .halo { fill: none; stroke: var(--naranja); stroke-width: 1.5; opacity: .6; }
.mapa .halo--2 { opacity: .28; }
.mapa .casa { fill: var(--naranja); }
.mapa text { font-family: var(--cuerpo); font-size: 15px; font-weight: 600; fill: #C9D1E0; }
.mapa text.fuerte { font-family: var(--titular); font-size: 19px; font-weight: 700; fill: var(--blanco); letter-spacing: -.01em; }
.mapa .mar { fill: rgba(255, 255, 255, .05); }
.mapa .rotulo-mar { font-size: 12px; letter-spacing: .2em; fill: rgba(255, 255, 255, .45); text-transform: uppercase; }

/* Preguntas frecuentes */
.preguntas { display: grid; gap: 36px; }
.acordeon { border-top: 1px solid var(--linea-fuerte); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; list-style: none;
  font-family: var(--titular); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.35;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: ''; flex: none; width: 11px; height: 11px; margin-right: 6px;
  border-right: 2px solid var(--naranja-texto); border-bottom: 2px solid var(--naranja-texto);
  transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--suavizado);
}
.pregunta[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.pregunta p { padding: 0 36px 22px 0; color: var(--texto-2); max-width: 66ch; }

/* Contacto */
.contacto { background: var(--azul); color: var(--blanco); }
.contacto .rotulo, .contacto .entrada { color: var(--sobre-oscuro-2); }
.contacto__in { display: grid; gap: 40px; align-items: start; }
.contacto__titulo { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem); letter-spacing: -.03em; margin-top: 16px; }
.contacto__botones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.datos { border-top: 1px solid rgba(255, 255, 255, .34); }
.datos div { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--linea-oscuro); }
.datos dt { font-size: .78125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sobre-oscuro-2); }
.datos dd { font-family: var(--titular); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.datos dd.grande { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); color: var(--naranja); }
.datos a { text-decoration: none; }
.datos a:hover { text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- 8. Pie ---------- */
.pie { background: var(--azul-noche); color: var(--sobre-oscuro-2); padding: 56px 0 112px; font-size: .9375rem; }
.pie__in { display: grid; gap: 36px; }
.pie__lema { margin-top: 16px; max-width: 34ch; }
.pie h2 { font-family: var(--cuerpo); font-size: .78125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blanco); }
.pie ul { margin-top: 14px; display: grid; gap: 9px; }
.pie ul a { text-decoration: none; color: var(--sobre-oscuro-2); }
.pie ul a:hover { color: var(--blanco); }
.pie__legal { padding-top: 24px; border-top: 1px solid var(--linea-oscuro); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .875rem; }

/* ---------- 9. Barra fija del móvil ---------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--blanco); border-top: 1px solid var(--linea); box-shadow: 0 -10px 30px -18px rgba(20, 33, 61, .5);
  transform: translateY(110%); transition: transform .35s var(--suavizado);
}
.barra--visible { transform: none; }
.barra .btn { min-height: 48px; padding: 10px 14px; font-size: .9375rem; }

/* ---------- 10. Aparición al hacer scroll ----------
   Discreta: solo un fundido corto. Se oculta únicamente si hay JavaScript. */
.js .aparece { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--suavizado), transform .6s var(--suavizado); }
.js .aparece.visible { opacity: 1; transform: none; }

/* ---------- 11. Páginas sencillas: aviso legal y 404 ---------- */
.pagina { padding: 56px 0 96px; }
.pagina__in { width: min(760px, 100% - 40px); margin-inline: auto; }
.pagina h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); letter-spacing: -.03em; margin-top: 16px; }
.pagina h2 { font-size: 1.3125rem; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--linea); }
.pagina p, .pagina li { margin-top: 14px; color: var(--texto-2); }
.pagina p.rotulo { margin-top: 0; }
.pagina ul li { position: relative; padding-left: 20px; margin-top: 8px; }
.pagina ul li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--naranja); }
.pagina strong { color: var(--tinta); }
.pagina__in a:not(.btn) { color: var(--tinta); font-weight: 700; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pagina .pendiente { padding: 2px 8px; border-radius: 4px; background: var(--melocoton); color: var(--tinta); font-weight: 700; font-size: .9375rem; }
.pagina__fecha { margin-top: 44px; font-size: .9375rem; }

.p404 { min-height: calc(100vh - var(--cab) - var(--sobre)); display: grid; align-items: center; }
.p404 .grande { font-family: var(--titular); font-weight: 700; font-size: clamp(5rem, 22vw, 10rem); line-height: .9; letter-spacing: -.05em; color: var(--azul); margin: 0; }
.p404 .portada__botones { margin-top: 30px; }

/* ---------- 12. Tamaños ---------- */
@media (min-width: 560px) {
  .sobre__correo { display: inline-flex; }
  .sobre__der { width: auto; justify-content: flex-end; margin-left: auto; }
  .sobre__lugar { display: flex; }
  .garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .pueblos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  .ancho { width: min(1200px, 100% - 64px); }
  .marca { gap: 12px; }
  .marca__simbolo { width: 38px; height: 38px; }
  .marca__nombre { font-size: 1.5rem; }

  /* Las celdas comparten filetes: entre columnas, una línea vertical */
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicio { padding: 34px 36px 38px 0; }
  .servicio:nth-child(even) { padding: 34px 0 38px 36px; border-left: 1px solid var(--linea); }

  .sectores__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linea-oscuro); }
  .sector { padding: 34px 32px 38px 0; border-bottom: 0; }
  .sector + .sector { padding-left: 32px; border-left: 1px solid var(--linea-oscuro); }

  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
}

@media (min-width: 1000px) {
  .ancho { width: min(1200px, 100% - 96px); }
  .cab__nav { display: flex; }
  .cab__cta { display: inline-flex; }
  .cab__menu, .menu, .barra { display: none; }

  .portada { padding-top: 72px; }
  .portada__in { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 64px; }
  .garantias { margin-top: 84px; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; border-bottom: 1px solid var(--linea); }
  .garantia { padding: 28px 28px 30px 0; border-bottom: 0; }
  .garantia + .garantia { padding-left: 28px; border-left: 1px solid var(--linea); }

  .seccion__cab { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: end; gap: 64px; }
  .seccion__cab .entrada { margin-top: 0; }

  .servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .servicio, .servicio:nth-child(even) { padding: 36px 36px 40px; border-left: 1px solid var(--linea); }
  .servicio:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .servicio:nth-child(3n) { padding-right: 0; }

  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; border-bottom: 1px solid var(--linea); }
  .paso { display: block; padding: 30px 28px 34px 0; border-bottom: 0; }
  .paso + .paso { padding-left: 28px; border-left: 1px solid var(--linea); }
  .paso__n { font-size: 2rem; }
  .paso h3 { margin-top: 18px; }

  .detras { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 84px; }
  .zona { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 84px; }
  .preguntas { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 84px; align-items: start; }
  .contacto__in { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 84px; align-items: center; }
  .datos dd { font-size: 1.1875rem; }

  .pie { padding-bottom: 56px; }
  .pie__in { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
  .pie__legal { grid-column: 1 / -1; }
}

/* ---------- 13. Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .aparece { opacity: 1; transform: none; }
}

@media print {
  .sobre, .cab, .menu, .barra, .portada__foto, .sectores__fondo { display: none !important; }
  .js .aparece { opacity: 1; transform: none; }
  .sectores, .contacto, .pie { background: #fff !important; color: #000 !important; }
}