/* =========================================================================
   El Escaparate — sistema visual
   Mundo: letrerismo de comercio de barrio. Toldo, persiana y escaparate.
   Azul de azulejo como suelo, bermellón de letrero como única señal de acción,
   turquesa para lo secundario y blanco de baldosa para leer.
   ========================================================================= */

/* --- 1. Fichas ---------------------------------------------------------- */

:root {
  /* Color */
  --azul: #0b2350;
  --azul-hondo: #06152f;
  --azul-alto: #17417f;
  --azul-linea: #234f8f;

  /* El bermellón se enciende al pasar por encima, como un letrero.
     --accion-tinta es su versión para texto y grafismo sobre claro, donde el
     bermellón vivo no llega al contraste mínimo. */
  --accion: #ff5c3a;
  --accion-hondo: #ff7452;
  --accion-tinta: #b83410;

  --azulejo: #3bb3c9;
  --azulejo-claro: #7fd3e0;
  --senal: #ffd23f;
  --cal: #eaeef2;
  --cal-hondo: #d8e0e8;
  --cal-linea: #b9c4d2;
  --tinta: #0d1726;
  --tinta-suave: #4a5a70;
  --azul-suave: #a9bdd9;
  --alarma: #a3122b;

  /* Tipografía */
  --letra-texto: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --letra-titular: "Bricolage Grotesque", "Archivo", ui-sans-serif, system-ui, sans-serif;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.1875rem;
  --t-xl: 1.5rem;
  --t-2xl: 2.125rem;
  --t-3xl: clamp(2.4rem, 4.4vw, 3.4rem);
  --t-4xl: clamp(2.6rem, 6.2vw, 4.6rem);

  /* Ritmo */
  --e1: 0.5rem;
  --e2: 0.875rem;
  --e3: 1.375rem;
  --e4: 2.25rem;
  --e5: 3.5rem;
  --e6: 5.5rem;
  --e7: 8rem;

  --alto-toldo: 24px;
  --ancho: 76rem;
  --ancho-lectura: 38rem;
  --radio: 4px;
  --radio-g: 10px;

  --sombra: 0 2px 4px rgba(6, 21, 47, 0.14), 0 14px 30px -12px rgba(6, 21, 47, 0.34);
  --sombra-alta: 0 4px 8px rgba(6, 21, 47, 0.18), 0 30px 60px -20px rgba(6, 21, 47, 0.46);
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 2. Base ------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* El recorte horizontal va aquí y no en el body: puesto en el body convierte
     su desbordamiento vertical en «auto» y eso deja sin efecto cualquier
     position: sticky de dentro. En la raíz se propaga al viewport y no estorba. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--letra-texto);
  font-size: var(--t-m);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
iframe { display: block; max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--letra-titular);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0;
}

p, ul, ol, dl { margin: 0; }

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* El anillo de foco cambia de tono según el suelo: el bermellón vivo se ve
   sobre azul, y su versión honda sobre baldosa. Ambos por encima de 4,5:1. */
:focus-visible {
  outline: 3px solid var(--accion-tinta);
  outline-offset: 3px;
  border-radius: 2px;
}
.franja--azul :focus-visible,
.franja--hondo :focus-visible,
.cabecera :focus-visible,
.portada :focus-visible,
.visor :focus-visible,
.escaparate-vivo :focus-visible,
.pie :focus-visible { outline-color: var(--accion); }

::selection {
  background: var(--accion);
  color: var(--tinta);
}

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--accion);
  color: var(--tinta);
  padding: var(--e2) var(--e3);
  font-weight: 600;
}
.salta:focus { left: 0; }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- 3. Motivos del mundo ----------------------------------------------- */

/* Toldo: franja a rayas con el borde inferior festoneado. */
.toldo {
  --franja: 34px;
  --festón: 13px;
  height: var(--alto-toldo);
  background: repeating-linear-gradient(
    90deg,
    var(--accion) 0 var(--franja),
    var(--cal) var(--franja) calc(var(--franja) * 2)
  );
  /* «left bottom», no «bottom»: por defecto la máscara se centra (50%) y las
     rayas empiezan en el borde, así que al no ser el ancho múltiplo del paso
     los festones quedaban desfasados y salían lunas partidas a dos colores.
     Anclando los dos patrones a la izquierda, cada luna cae en una sola raya. */
  -webkit-mask:
    radial-gradient(circle var(--festón) at 50% 0, #000 98%, transparent) left bottom / var(--franja) var(--festón) repeat-x,
    linear-gradient(#000 0 0) left top / 100% calc(100% - var(--festón)) no-repeat;
  mask:
    radial-gradient(circle var(--festón) at 50% 0, #000 98%, transparent) left bottom / var(--franja) var(--festón) repeat-x,
    linear-gradient(#000 0 0) left top / 100% calc(100% - var(--festón)) no-repeat;
}

.toldo--azul {
  background: repeating-linear-gradient(
    90deg,
    var(--azulejo) 0 var(--franja),
    var(--cal) var(--franja) calc(var(--franja) * 2)
  );
}

.toldo--fino { --alto-toldo: 16px; --franja: 22px; --festón: 9px; }

/* Persiana: lamas horizontales. */
.persiana-textura {
  background-image: repeating-linear-gradient(
    180deg,
    rgba(6, 21, 47, 0.5) 0 1px,
    rgba(234, 238, 242, 0.06) 1px 3px,
    rgba(6, 21, 47, 0.16) 3px 9px
  );
}

/* Azulejo: retícula de baldosa. */
.azulejo-textura {
  background-image:
    linear-gradient(var(--cal-linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--cal-linea) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* --- 4. Estructura ------------------------------------------------------ */

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 4vw, 2.5rem);
}

.franja { padding-block: clamp(var(--e5), 9vw, var(--e7)); }
.franja--corta { padding-block: clamp(var(--e4), 6vw, var(--e5)); }

.franja--azul {
  background: var(--azul);
  color: var(--cal);
}
.franja--hondo {
  background: var(--azul-hondo);
  color: var(--cal);
}
.franja--accion {
  background: var(--accion);
  color: var(--tinta);
}

.franja--azul a:not(.boton),
.franja--hondo a:not(.boton) { color: var(--accion); }

.lectura { max-width: var(--ancho-lectura); }

/* Encabezado de sección: letrero grande con su línea de apoyo. */
.titular-seccion { margin-bottom: var(--e4); }
.titular-seccion h2 { font-size: var(--t-3xl); }
.titular-seccion p {
  margin-top: var(--e2);
  max-width: 34rem;
  font-size: var(--t-l);
  color: var(--tinta-suave);
}
.franja--azul .titular-seccion p,
.franja--hondo .titular-seccion p { color: var(--azul-suave); }

.pareja {
  display: grid;
  gap: var(--e3) var(--e5);
  align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .pareja { grid-template-columns: minmax(0, 1fr) auto; }
}

/* --- 5. Cabecera -------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--azul);
  color: var(--cal);
}

/* El toldo cuelga por fuera de la cabecera, como en una fachada: no reserva
   sitio, se sale por abajo. Así los festones se recortan contra lo que haya
   detrás —azul arriba del todo, la franja que toque al bajar— y no contra el
   fondo del documento. */
.cabecera .toldo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--alto-toldo) * -1);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: 4.25rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  text-decoration: none;
  font-family: var(--letra-titular);
  font-weight: 800;
  /* «El Escaparate» es largo: en pantallas estrechas cede para no empujar al
     botón de menú. */
  font-size: clamp(1.0625rem, 4.4vw, 1.375rem);
  letter-spacing: -0.045em;
  color: var(--cal);
  white-space: nowrap;
}
.marca svg { width: 30px; height: 30px; flex: none; }
.marca__punto { color: var(--accion); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.8vw, 1.75rem);
}
.nav a {
  text-decoration: none;
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  color: var(--cal);
  transition: border-color 0.16s ease, color 0.16s ease;
}
.nav a:hover { border-bottom-color: var(--accion); }
.nav a[aria-current="page"] {
  border-bottom-color: var(--accion);
  color: var(--accion);
}

.cabecera__acciones { display: flex; align-items: center; gap: var(--e2); }

.abre-nav {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--azul-linea);
  border-radius: var(--radio);
  color: var(--cal);
  padding: 0.5rem 0.75rem;
  font-size: var(--t-s);
  font-weight: 600;
  cursor: pointer;
}
.abre-nav svg { width: 18px; height: 18px; }

@media (max-width: 60rem) {
  .abre-nav { display: inline-flex; }
  .cabecera__nav {
    position: fixed;
    inset: 4.25rem 0 auto 0;
    background: var(--azul-hondo);
    border-top: 1px solid var(--azul-linea);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--e2) clamp(1.125rem, 4vw, 2.5rem) var(--e3);
    display: none;
    box-shadow: var(--sombra-alta);
  }
  .cabecera__nav[data-abierta="si"] { display: flex; }
  .cabecera__nav a {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--azul-linea);
    font-size: var(--t-l);
  }
  .cabecera__nav a[aria-current="page"] { border-bottom-color: var(--accion); }
  .cabecera .boton--pequeno { display: none; }
}

/* --- 6. Botones --------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border: 2px solid var(--accion);
  border-radius: var(--radio);
  background: var(--accion);
  color: var(--tinta);
  font-family: var(--letra-titular);
  font-weight: 700;
  font-size: var(--t-m);
  letter-spacing: -0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--salida), background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.boton:hover {
  background: var(--accion-hondo);
  border-color: var(--accion-hondo);
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}
.boton:active { transform: translateY(0); }

.boton--fantasma {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.boton--fantasma:hover {
  background: rgba(234, 238, 242, 0.1);
  border-color: var(--accion);
  color: var(--accion);
  box-shadow: none;
}
.franja--accion .boton--fantasma:hover,
.sobre-claro .boton--fantasma:hover { background: rgba(13, 23, 38, 0.08); color: var(--tinta); border-color: var(--tinta); }

.boton--pequeno { padding: 0.6rem 1.05rem; font-size: var(--t-s); }

/* Segunda acción con el mismo peso que la principal pero sin competir con ella:
   el azul del suelo en vez del bermellón. */
.boton--azul {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--cal);
}
.boton--azul:hover {
  background: var(--azul-alto);
  border-color: var(--azul-alto);
  color: var(--cal);
}

.boton[disabled],
.boton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
}

/* Enlace con flecha, para lo secundario. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--accion-tinta);
  padding-bottom: 2px;
  transition: gap 0.18s var(--salida);
}
.franja--azul .enlace-flecha,
.franja--hondo .enlace-flecha { border-bottom-color: var(--accion); }
.enlace-flecha:hover { gap: 0.8rem; }
.enlace-flecha svg { width: 16px; height: 16px; }

/* --- 7. Portada --------------------------------------------------------- */

.portada {
  background: var(--azul);
  color: var(--cal);
  position: relative;
  padding-block: clamp(var(--e4), 6vw, var(--e6)) clamp(var(--e5), 8vw, var(--e7));
}

.portada__rejilla {
  display: grid;
  gap: clamp(var(--e4), 5vw, var(--e5));
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62rem) {
  .portada__rejilla { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
}

.portada h1 {
  font-size: var(--t-4xl);
  letter-spacing: -0.045em;
}
.portada h1 em {
  font-style: normal;
  color: var(--accion);
}

.portada__entrada {
  margin-top: var(--e3);
  font-size: var(--t-l);
  color: var(--azul-suave);
  max-width: 32rem;
}

.portada__sello {
  margin-top: var(--e3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: var(--t-s);
  color: var(--azul-suave);
}
.portada__sello span { display: inline-flex; align-items: center; gap: 0.45rem; }
.portada__sello svg { width: 15px; height: 15px; color: var(--accion); }

/* --- 8. Escaparate en vivo (el mecanismo) ------------------------------- */

.escaparate-vivo {
  background: var(--azul-hondo);
  border: 1px solid var(--azul-linea);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}

.escaparate-vivo__toldo { display: block; }

.escaparate-vivo__forma {
  display: flex;
  gap: var(--e1);
  padding: var(--e3) var(--e3) var(--e2);
  flex-wrap: wrap;
}
.escaparate-vivo__forma label {
  flex: 1 1 100%;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-suave);
  margin-bottom: 0.35rem;
}
.escaparate-vivo__forma input {
  flex: 1 1 12rem;
  min-width: 0;
  background: var(--azul);
  border: 1px solid var(--azul-linea);
  border-radius: var(--radio);
  color: var(--cal);
  padding: 0.8rem 0.9rem;
  font-size: var(--t-s);
}
.escaparate-vivo__forma input::placeholder { color: #7f93b5; }
.escaparate-vivo__forma input:focus-visible { border-color: var(--accion); }

.marco {
  position: relative;
  margin: 0 var(--e3) var(--e3);
  border: 1px solid var(--azul-linea);
  border-radius: var(--radio);
  background: var(--azul);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* La persiana cubre el marco hasta que hay algo que enseñar. */
.persiana {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--azul-alto);
  background-image: repeating-linear-gradient(
    180deg,
    rgba(6, 21, 47, 0.55) 0 1px,
    rgba(234, 238, 242, 0.07) 1px 4px,
    rgba(6, 21, 47, 0.2) 4px 10px
  );
  display: grid;
  place-content: center;
  gap: var(--e2);
  text-align: center;
  padding: var(--e3);
  transform-origin: top center;
  transition: transform 0.85s var(--salida), opacity 0.5s ease 0.25s;
}
.escaparate-vivo[data-estado="abierto"] .persiana,
.escaparate-vivo[data-estado="error"] .persiana {
  transform: translateY(-101%);
  opacity: 0;
  pointer-events: none;
}

.cartel {
  display: inline-block;
  justify-self: center;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--letra-titular);
  font-weight: 800;
  font-size: var(--t-s);
  letter-spacing: 0.16em;
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--tinta);
  transform: rotate(-2.5deg);
}
.cartel--abierto {
  background: var(--accion);
  border-color: var(--accion-hondo);
}

.persiana p {
  font-size: var(--t-s);
  color: var(--cal);
  max-width: 22rem;
}

.marco__cargando {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  height: 3px;
  background: var(--azul-linea);
  overflow: hidden;
  display: none;
}
.escaparate-vivo[data-estado="cargando"] .marco__cargando { display: block; }
.marco__cargando::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accion);
  transform: translateX(-100%);
  animation: barrido 1.1s infinite;
}
@keyframes barrido {
  to { transform: translateX(100%); }
}

.marco__aviso {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  place-content: center;
  text-align: center;
  padding: var(--e3);
  background: var(--azul);
  color: var(--cal);
  font-size: var(--t-s);
}
.escaparate-vivo[data-estado="error"] .marco__aviso { display: grid; }
.marco__aviso strong { display: block; font-size: var(--t-l); font-family: var(--letra-titular); margin-bottom: 0.4rem; }

.escaparate-vivo__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: 0 var(--e3) var(--e3);
  font-size: var(--t-xs);
  color: var(--azul-suave);
  flex-wrap: wrap;
}

/* Conmutador escritorio / móvil */
.conmutador {
  display: inline-flex;
  border: 1px solid var(--azul-linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.conmutador button {
  background: none;
  border: 0;
  color: var(--azul-suave);
  padding: 0.4rem 0.75rem;
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
}
.conmutador button[aria-pressed="true"] {
  background: var(--accion);
  color: var(--tinta);
}

/* El marco se estrecha cuando se pide vista de móvil. */
.marco[data-vista="movil"] {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--azul-hondo);
}
.marco[data-vista="movil"] img {
  width: auto;
  height: 100%;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--azul-linea);
  border-radius: 6px;
}

/* --- 9. Oferta: filas de toldo, no tarjetas ----------------------------- */

.oferta { border-top: 1px solid var(--cal-linea); }

.oferta__fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e1) var(--e4);
  padding: var(--e4) 0 var(--e4);
  border-bottom: 1px solid var(--cal-linea);
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease, padding-left 0.25s var(--salida);
}
@media (min-width: 56rem) {
  .oferta__fila {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
    align-items: start;
    padding-inline: var(--e3);
  }
  .oferta__fila:hover { background: rgba(255, 92, 58, 0.12); }
}
.oferta__fila::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: var(--tono, var(--accion));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--salida);
}
.oferta__fila:hover::before,
.oferta__fila:focus-visible::before { transform: scaleX(1); }

.oferta__nombre {
  font-family: var(--letra-titular);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.oferta__que { color: var(--tinta-suave); max-width: 34rem; }
.oferta__que strong { color: var(--tinta); font-weight: 600; }

.oferta__precio {
  font-family: var(--letra-titular);
  font-weight: 700;
  font-size: var(--t-l);
  white-space: nowrap;
  align-self: center;
}
.oferta__precio small {
  display: block;
  font-family: var(--letra-texto);
  font-weight: 500;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- 10. Escaparates (portfolio) ---------------------------------------- */

.calle {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.calle--destacada { grid-template-columns: 1fr; }
@media (min-width: 60rem) {
  .calle--destacada {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .calle--destacada > :first-child { grid-column: 1 / -1; }
}

.escaparate {
  display: flex;
  flex-direction: column;
  background: var(--cal);
  border: 1px solid var(--cal-linea);
  border-radius: var(--radio-g);
  overflow: hidden;
  transition: transform 0.25s var(--salida), box-shadow 0.25s ease;
}
.franja--azul .escaparate,
.franja--hondo .escaparate {
  background: var(--azul-hondo);
  border-color: var(--azul-linea);
  color: var(--cal);
}
.escaparate:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
}

.escaparate__lienzo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  background: var(--azul-alto);
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.calle--destacada > :first-child .escaparate__lienzo { aspect-ratio: 21 / 9; }

.escaparate__lienzo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: transform 0.6s var(--salida), filter 0.4s ease;
  filter: saturate(0.92);
}
.escaparate:hover .escaparate__lienzo img {
  transform: scale(1.035);
  filter: saturate(1.05);
}

/* Reflejo del cristal: una sola diagonal, que barre al pasar el ratón. */
.escaparate__lienzo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, transparent 38%, rgba(234, 238, 242, 0.26) 46%, transparent 56%);
  transform: translateX(-60%);
  transition: transform 0.75s var(--salida);
  pointer-events: none;
}
.escaparate:hover .escaparate__lienzo::after { transform: translateX(60%); }

.escaparate__vacio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: var(--e3);
  color: var(--cal);
  background-color: var(--azul-alto);
  background-image: repeating-linear-gradient(
    180deg,
    rgba(6, 21, 47, 0.5) 0 1px,
    rgba(234, 238, 242, 0.06) 1px 4px,
    rgba(6, 21, 47, 0.18) 4px 10px
  );
  font-size: var(--t-s);
}

.escaparate__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e3);
  border-top: 1px solid var(--cal-linea);
}
.franja--azul .escaparate__pie,
.franja--hondo .escaparate__pie { border-top-color: var(--azul-linea); }

.escaparate__nombre {
  font-family: var(--letra-titular);
  font-weight: 700;
  font-size: var(--t-l);
  letter-spacing: -0.025em;
}
.escaparate__oficio {
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.franja--azul .escaparate__oficio,
.franja--hondo .escaparate__oficio { color: var(--azul-suave); }

.escaparate__nota {
  padding: 0 var(--e3) var(--e3);
  font-size: var(--t-s);
  color: var(--tinta-suave);
}
.franja--azul .escaparate__nota,
.franja--hondo .escaparate__nota { color: var(--azul-suave); }

.etiqueta {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
}

/* Filtros */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  margin-bottom: var(--e4);
}
.filtros button {
  background: none;
  border: 1px solid var(--cal-linea);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: var(--t-s);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.filtros button:hover { border-color: var(--tinta); }
.filtros button[aria-pressed="true"] {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--cal);
}

/* --- 11. Visor --------------------------------------------------------- */

.visor {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 21, 47, 0.86);
  display: none;
  padding: clamp(0.75rem, 3vw, 2rem);
  overscroll-behavior: contain;
}
.visor[data-abierto="si"] {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--e2);
}

.visor__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  flex-wrap: wrap;
  color: var(--cal);
}
.visor__titulo {
  font-family: var(--letra-titular);
  font-weight: 700;
  font-size: var(--t-l);
  letter-spacing: -0.02em;
}
.visor__url {
  font-size: var(--t-xs);
  color: var(--azul-suave);
  word-break: break-all;
}
.visor__mandos { display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; }

.visor__cierra {
  background: none;
  border: 1px solid var(--azul-linea);
  border-radius: var(--radio);
  color: var(--cal);
  padding: 0.45rem 0.8rem;
  font-size: var(--t-s);
  font-weight: 600;
  cursor: pointer;
}
.visor__cierra:hover { background: rgba(234, 238, 242, 0.12); }

.visor__pantalla {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  background: var(--cal);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
  transition: max-width 0.4s var(--salida);
}
.visor__pantalla[data-vista="movil"] { max-width: 26rem; }

.visor__pantalla img,
.visor__pantalla iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.visor__pantalla img { object-fit: cover; object-position: 50% 0; }
.visor__pantalla iframe { background: var(--cal); }

.visor__nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: var(--e2) var(--e3);
  background: var(--azul-hondo);
  color: var(--cal);
  font-size: var(--t-s);
  text-align: center;
}
.visor__nota:empty { display: none; }

/* --- 11 bis. Páginas interiores ----------------------------------------- */

.titulo-pagina {
  font-size: var(--t-3xl);
  max-width: 20ch;
}

.bloque-servicio {
  display: grid;
  gap: var(--e4);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 58rem) {
  .bloque-servicio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e5); }

  /* Cuando una columna es mucho más larga que la otra —el formulario frente a
     lo que pasa después—, la corta se queda pegada al bajar en vez de dejar un
     socavón de aire a su lado. */
  .bloque-servicio--pegado > :last-child {
    position: sticky;
    top: calc(4.25rem + var(--alto-toldo) + var(--e2));
    align-self: start;
  }
}
.bloque-servicio h2 { font-size: var(--t-3xl); }
.bloque-servicio__intro {
  margin-top: var(--e2);
  margin-bottom: var(--e3);
  color: var(--tinta-suave);
  font-size: var(--t-l);
  max-width: 34rem;
}
.franja--azul .bloque-servicio__intro,
.franja--hondo .bloque-servicio__intro { color: var(--azul-suave); }

/* El color del formato vive en el subrayado, no en el texto: así se distingue
   cada formato sin bajar el contraste de lectura. */
.marca-formato {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  border-bottom: 4px solid var(--tono, var(--accion));
  padding-bottom: 3px;
  margin-bottom: var(--e2);
}

.titular-menor {
  font-family: var(--letra-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: var(--e2);
  margin-top: var(--e3);
}
.titular-menor:first-child { margin-top: 0; }
.franja--azul .titular-menor,
.franja--hondo .titular-menor { color: var(--azul-suave); }

.apunte {
  color: var(--tinta-suave);
  font-size: var(--t-s);
  max-width: 34rem;
  margin-bottom: var(--e3);
}
.franja--azul .apunte,
.franja--hondo .apunte { color: var(--azul-suave); }

/* --- 12. Método --------------------------------------------------------- */

.fases {
  display: grid;
  gap: 0;
  counter-reset: fase;
}
.fase {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e3);
  padding-block: var(--e4);
  border-top: 1px solid var(--cal-linea);
}
.fase:last-child { border-bottom: 1px solid var(--cal-linea); }
.franja--azul .fase { border-color: var(--azul-linea); }

/* Con la clase repetida: si no, `.fase p` gana por especificidad y el numeral
   se queda del color del texto secundario. */
.fase .fase__marca {
  font-family: var(--letra-titular);
  font-weight: 800;
  font-size: var(--t-2xl);
  color: var(--accion-tinta);
  line-height: 1;
  min-width: 2.5rem;
}
.franja--azul .fase .fase__marca,
.franja--hondo .fase .fase__marca { color: var(--accion); }
.fase h3 { font-size: var(--t-xl); margin-bottom: var(--e1); }
.fase p { color: var(--tinta-suave); max-width: 42rem; }
.franja--azul .fase p { color: var(--azul-suave); }
.fase__plazo {
  margin-top: var(--e2);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.franja--azul .fase__plazo { color: var(--azul-suave); }

/* --- 13. Listas y detalles ---------------------------------------------- */

.lista-marcada {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e2);
}
.lista-marcada li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
}
.lista-marcada li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 0.55rem;
  background: var(--accion-tinta);
  transform: rotate(45deg);
}
.franja--azul .lista-marcada li::before,
.franja--hondo .lista-marcada li::before { background: var(--accion); }

/* Atajos de contacto: icono a la izquierda, enlace arriba y coletilla debajo.
   El icono ocupa las dos filas para que el bloque quede alineado. */
.atajos {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e3);
}
.atajos li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.1rem;
  align-items: start;
}
.atajos__icono {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--accion-tinta);
}
.franja--azul .atajos__icono,
.franja--hondo .atajos__icono { color: var(--accion); }

.atajos a {
  font-weight: 600;
  text-underline-offset: 3px;
}
.atajos__nota {
  font-size: var(--t-s);
  color: var(--tinta-suave);
}
.franja--azul .atajos__nota,
.franja--hondo .atajos__nota { color: var(--azul-suave); }

.datos {
  display: grid;
  gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  border-top: 1px solid var(--cal-linea);
  padding-top: var(--e3);
}
.franja--azul .datos { border-color: var(--azul-linea); }
.datos dt {
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.3rem;
}
.franja--azul .datos dt { color: var(--azul-suave); }
.datos dd {
  margin: 0;
  font-family: var(--letra-titular);
  font-weight: 700;
  font-size: var(--t-l);
  letter-spacing: -0.02em;
}
.datos dd.apunte {
  font-family: var(--letra-texto);
  font-weight: 400;
  font-size: var(--t-s);
  letter-spacing: 0;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.desplegable {
  border-bottom: 1px solid var(--cal-linea);
}
.desplegable summary {
  cursor: pointer;
  padding-block: var(--e3);
  font-family: var(--letra-titular);
  font-weight: 700;
  font-size: var(--t-l);
  letter-spacing: -0.02em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--e2);
  align-items: center;
}
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::after {
  content: "+";
  font-size: var(--t-xl);
  color: var(--accion-tinta);
  line-height: 1;
}
.franja--azul .desplegable summary::after,
.franja--hondo .desplegable summary::after { color: var(--accion); }
.desplegable[open] summary::after { content: "–"; }
.desplegable p { padding-bottom: var(--e3); color: var(--tinta-suave); max-width: 44rem; }
.franja--azul .desplegable,
.franja--hondo .desplegable { border-bottom-color: var(--azul-linea); }
.franja--azul .desplegable p,
.franja--hondo .desplegable p { color: var(--azul-suave); }

/* --- 14. Formulario ----------------------------------------------------- */

.forma__titulo { margin-bottom: var(--e3); }

/* Las dos salidas del formulario, del mismo tamaño y ocupando su ancho: ninguna
   de las dos es «la otra opción», se elige por dónde seguir hablando. */
.acciones-forma {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e2);
}
.acciones-forma .boton { width: 100%; padding-inline: 0.75rem; }
@media (max-width: 32rem) {
  .acciones-forma { grid-template-columns: 1fr; }
}

.forma {
  display: grid;
  gap: var(--e3);
  max-width: 34rem;
}
.campo { display: grid; gap: 0.4rem; }
.campo > label {
  font-size: var(--t-s);
  font-weight: 600;
}
.campo__ayuda { font-size: var(--t-xs); color: var(--tinta-suave); }
.franja--azul .campo__ayuda { color: var(--azul-suave); }

.campo input,
.campo textarea,
.campo select {
  background: var(--cal);
  border: 1px solid var(--cal-linea);
  border-radius: var(--radio);
  padding: 0.8rem 0.9rem;
  font-size: var(--t-m);
  width: 100%;
}
.franja--azul .campo input,
.franja--azul .campo textarea,
.franja--azul .campo select {
  background: var(--azul-hondo);
  border-color: var(--azul-linea);
  color: var(--cal);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:hover,
.campo textarea:hover { border-color: var(--tinta-suave); }
.campo [aria-invalid="true"] { border-color: var(--alarma); }

.campo__error {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--alarma);
  display: none;
}
.franja--azul .campo__error { color: #ff9d8b; }
.campo[data-error="si"] .campo__error { display: block; }

.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
}
.opciones label {
  border: 1px solid var(--cal-linea);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: var(--t-s);
  cursor: pointer;
}
.franja--azul .opciones label { border-color: var(--azul-linea); }
.opciones input { position: absolute; opacity: 0; width: 0; }
.opciones label:has(input:checked) {
  background: var(--accion);
  border-color: var(--accion);
  color: var(--tinta);
  font-weight: 600;
}
.opciones label:has(input:focus-visible) { outline: 3px solid var(--accion); outline-offset: 3px; }

.aviso-forma {
  display: none;
  padding: var(--e3);
  border: 2px solid var(--accion);
  border-radius: var(--radio);
  background: rgba(255, 92, 58, 0.14);
  font-size: var(--t-s);
}
.aviso-forma[data-visible="si"] { display: block; }

/* --- 15. Cierre y pie --------------------------------------------------- */

.cierre h2 {
  font-size: var(--t-4xl);
  max-width: 18ch;
}

.pie {
  background: var(--azul-hondo);
  color: var(--cal);
  padding-block: var(--e5) var(--e3);
}
.pie__rejilla {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.pie h3 {
  font-size: var(--t-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--azul-suave);
  font-family: var(--letra-texto);
  font-weight: 600;
  margin-bottom: var(--e2);
}
.pie ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.pie a { color: var(--cal); text-decoration: none; }

/* Los atajos de contacto del pie, con el mismo icono que en la página de
   contacto. El de presupuesto se queda como texto: no es un canal, es un sitio
   de la web. */
.pie__con-icono {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.pie__icono {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accion);
}
.pie a:hover { color: var(--accion); text-decoration: underline; text-underline-offset: 3px; }
.pie__legal {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--azul-linea);
  display: flex;
  justify-content: space-between;
  gap: var(--e2);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--azul-suave);
}

/* --- 16. Motivo de entrada (un solo momento) ---------------------------- */

.entra {
  opacity: 0;
  transform: translateY(14px);
}
.entra[data-visto="si"] {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.7s var(--salida);
}
html.sin-js .entra { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .entra { opacity: 1; transform: none; }
}

/* --- 17. La varilla y el cierre de la fachada ---------------------------- */

/* Cuelga del toldo, por fuera de la cabecera. Va dentro de ella a propósito:
   así hereda su contexto de apilado y queda por encima de la persiana.
   Arranca en el borde de la cabecera, o sea por detrás de la lona: el enganche
   queda escondido bajo la parte opaca del toldo y la barra sale por el faldón.
   El orden en el DOM es lo que la manda detrás (ver sitio.js). */
.varilla {
  position: absolute;
  top: 100%;
  right: clamp(3rem, 8vw, 5.5rem);
  width: 32px;
  /* Los primeros 24 px quedan tapados por el toldo: se cuentan aparte. */
  height: calc(76px + var(--alto-toldo));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  justify-items: center;
  align-content: start;
}

/* Dos piezas y nada más: una barra fina y un puño pequeño. El filo tenue es
   solo para que no desaparezca cuando pasa por delante de una franja clara. */
.varilla__cuerda {
  width: 2px;
  height: calc(52px + var(--alto-toldo));
  background: var(--cal);
  box-shadow: 0 0 0 1px rgba(6, 21, 47, 0.25);
  transition: height 0.24s var(--salida);
}

.varilla__tirador {
  width: 9px;
  height: 22px;
  border-radius: 5px;
  background: var(--cal);
  border: 1px solid rgba(6, 21, 47, 0.45);
  transition: transform 0.24s var(--salida);
}

.varilla:hover .varilla__cuerda { height: calc(63px + var(--alto-toldo)); }
.varilla:hover .varilla__tirador { transform: translateY(1px); }
.varilla:active .varilla__cuerda { height: calc(72px + var(--alto-toldo)); }
.varilla[data-tirando="si"] .varilla__cuerda { height: calc(78px + var(--alto-toldo)); }

/* En pantalla estrecha se arrima al canto y se acorta: si no, cuelga encima
   del titular. */
@media (max-width: 34rem) {
  .varilla { right: clamp(1.5rem, 7vw, 2.5rem); width: 28px; height: calc(50px + var(--alto-toldo)); }
  .varilla__cuerda { height: calc(28px + var(--alto-toldo)); }
  .varilla:hover .varilla__cuerda,
  .varilla:active .varilla__cuerda { height: calc(34px + var(--alto-toldo)); }
  .varilla[data-tirando="si"] .varilla__cuerda { height: calc(40px + var(--alto-toldo)); }
}

/* La persiana entra por detrás de la cabecera (z menor), de modo que el letrero
   y el toldo siguen encendidos con el local ya cerrado. */
.cierre-fachada {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  overscroll-behavior: contain;
  pointer-events: none;
}
.cierre-fachada[data-estado="cerrada"] { pointer-events: auto; }

.cierre-fachada__pano {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  transform: translateY(-100%);
  background-color: var(--azul-alto);
  background-image: repeating-linear-gradient(
    180deg,
    rgba(6, 21, 47, 0.62) 0 2px,
    rgba(234, 238, 242, 0.09) 2px 6px,
    rgba(6, 21, 47, 0.24) 6px 14px
  );
  box-shadow: 0 14px 30px rgba(6, 21, 47, 0.5);
  /* Subir: rápido y sin rebote. */
  transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Bajar: cae con peso y asienta. */
.cierre-fachada[data-estado="cerrada"] .cierre-fachada__pano {
  transform: translateY(0);
  transition: transform 0.8s cubic-bezier(0.22, 1.1, 0.34, 1);
}

.cierre-fachada__nucleo {
  display: grid;
  justify-items: center;
  gap: var(--e3);
  padding: var(--e4);
  color: var(--cal);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cierre-fachada[data-estado="cerrada"] .cierre-fachada__nucleo {
  opacity: 1;
  transition-delay: 0.42s;
}
.cierre-fachada .cartel {
  font-size: var(--t-xl);
  letter-spacing: 0.2em;
  padding: 0.5rem 1.3rem;
}
.cierre-fachada p {
  max-width: 26rem;
  color: var(--cal);
  font-size: var(--t-s);
}

/* --- 18. Impresión ------------------------------------------------------ */

@media print {
  .cabecera, .pie, .visor, .escaparate-vivo, .cierre-fachada { display: none; }
  body { background: #fff; color: #000; }
}