/* ============================================================
   PubliUnion — hoja de estilos
   Villavicencio, Meta · Agencia de publicidad
   ============================================================ */

:root {
  /* ---------- Paleta CMYK ----------
     Las cuatro tintas con las que se imprime. Contrastes verificados
     contra WCAG AA (4,5:1 en texto, 3:1 en elementos grandes).

     Cian y amarillo de proceso no alcanzan para texto sobre blanco
     (2,5:1 y 1,2:1). Aquí van de relleno y siempre con tinta encima;
     para cuando hace falta escribir con ellos están las variantes
     oscurecidas. */
  --magenta: #D4007E;         /* marca. Magenta de proceso oscurecido
                                 lo justo para leerse en blanco (5,1:1) */
  --magenta-pleno: #EC008C;   /* el magenta tal cual sale de la tinta */
  --magenta-osc: #A3005C;     /* hover y enlaces visitados */
  --magenta-pale: #FFE3F1;
  --cian: #00AEEF;            /* cian de proceso: relleno, nunca texto */
  --cian-txt: #0079A8;        /* el mismo cian, ya legible (4,9:1) */
  --cian-pale: #E1F5FE;
  --amarillo: #FFD400;        /* amarillo de relleno, con texto negro */
  --amarillo-pleno: #FFF200;  /* el amarillo tal cual sale de la tinta */
  --amarillo-pale: #FFF7CC;
  --tinta: #16181D;           /* la K: negro de impresión, no negro puro */
  --papel: #FFFFFF;           /* el pliego */
  --papel-2: #F1F3F6;         /* fondo de página, para que el papel resalte */
  --wa: #25D366;
  --gris: #5A6068;
  --gris-2: #6B7280;
  --gris-3: #9AA0A8;
  --linea: #E3E6EB;
  --verde: #2E7D4F;

  /* ---------- Tipografía ----------
     Outfit para lo estructural (titulares y etiquetas) e Inter para
     leer. Fuera el monoespaciado: daba aire de terminal, y esto es una
     agencia de publicidad. */
  --display: Outfit, system-ui, sans-serif;
  --texto: Inter, system-ui, -apple-system, sans-serif;
  /* Las etiquetas y rótulos llevan fuente propia: Space Grotesk tiene
     carácter donde Outfit se vuelve anodina, que es justo en los
     tamaños pequeños. Sus letras raras —la a, la g, la k— se notan a
     11 px y hacen que un pie de foto parezca diseñado y no un texto
     por defecto del navegador. */
  --detalle: 'Space Grotesk', Outfit, system-ui, sans-serif;

  /* ---------- Formas ----------
     Se acabó el recuadro negro de 2 px con sombra dura. Ahora el borde
     apenas se insinúa y lo que separa una tarjeta del fondo es la
     esquina redondeada y una sombra suave. */
  --borde: 1px solid var(--linea);
  --sombra: 0 1px 2px rgba(22,24,29,.05), 0 6px 20px rgba(22,24,29,.07);
  --sombra-alta: 0 2px 4px rgba(22,24,29,.06), 0 16px 40px rgba(22,24,29,.12);
  --radio: 16px;
  --radio-sm: 10px;
  --pad-x: clamp(16px, 5vw, 60px);
  --pad-y: clamp(38px, 6vw, 76px);
}

* { box-sizing: border-box; }

/* El atributo `hidden` debe ganar siempre. Sin esto, cualquier regla que
   fije `display` sobre el elemento lo vuelve a mostrar: le pasó al mapa
   de respaldo, que quedaba visible debajo del interactivo porque
   `.mapa-cobertura img` declaraba `display: block`. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--magenta); text-decoration: none; }
a:hover { color: var(--magenta-osc); }

input, textarea, select, button { font-family: inherit; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--cian);
  outline-offset: -3px;
}
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--cian);
  outline-offset: 2px;
}
::placeholder { color: #9aa1a8; }

h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; margin: 0; }

.contenedor { max-width: 1240px; margin: 0 auto; }
.seccion { padding: var(--pad-y) var(--pad-x); }
.oculto { display: none !important; }

/* Accesibilidad: salto al contenido */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinta); color: #fff; padding: 12px 18px; font-weight: 700;
}
.saltar:focus { left: 8px; top: 8px; color: #fff; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: var(--borde); border-radius: 2px; cursor: pointer;
  font-weight: 700; font-size: 16px; padding: 14px 20px;
  min-height: 48px; background: #fff; color: var(--tinta);
  text-align: center; transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { color: var(--tinta); }
.btn-rojo { background: var(--magenta); color: #fff; font-family: var(--display); box-shadow: var(--sombra); }
.btn-rojo:hover { color: #fff; }
.btn-rojo:active { transform: translate(3px, 3px); box-shadow: var(--sombra); }
.btn-tinta { background: var(--tinta); color: #fff; }
.btn-tinta:hover { color: #fff; }
.btn-amarillo { background: var(--amarillo); color: var(--tinta); }
.btn-sm { font-size: 14px; padding: 10px 14px; min-height: 42px; }
.btn-lg { font-size: 17px; padding: 16px 24px; min-height: 56px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.punto-wa { width: 10px; height: 10px; border-radius: 50%; background: var(--wa); flex: none; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px var(--pad-x);
  background: var(--papel); border-bottom: var(--borde);
}
/* El logo es un lockup completo: ya trae el nombre y el descriptor, así
   que no se le pone texto al lado. Se dimensiona por altura. */
.marca { display: flex; align-items: center; }
.marca img { height: clamp(44px, 7vw, 58px); width: auto; display: block; }
.nav { display: flex; gap: 20px; margin-left: 18px; font-size: 15px; font-weight: 600; }
.nav a { color: #3a444d; }
.nav a:hover { color: var(--magenta); }
.cabecera-acciones { display: flex; gap: 8px; margin-left: auto; align-items: center; }

@media (max-width: 860px) {
  .nav { display: none; }
  .marca-sub { display: none; }
}

/* ---------- Entrada (hero) ---------- */
.hero {
  padding: clamp(34px, 7vw, 74px) var(--pad-x) clamp(30px, 6vw, 60px);
  background-image: radial-gradient(#dfd8cc 1.4px, transparent 1.4px);
  background-size: 14px 14px;
}
.hero-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1.2fr));
  gap: clamp(24px, 4vw, 52px); align-items: center;
}
.etiqueta {
  display: inline-block; font-family: var(--detalle); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--tinta); color: var(--papel); padding: 6px 10px; margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(34px, 6.4vw, 62px); line-height: .98;
  letter-spacing: -.03em; margin-bottom: 20px; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--magenta); }
.hero p.entrada {
  font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5;
  color: #3a444d; margin: 0 0 26px; max-width: 30em;
}
.hero-botones { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-notas {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px;
  font-family: var(--detalle); font-size: 12.5px; color: var(--gris);
}

/* ---------- Marcos de foto (placeholder) ---------- */
.foto {
  border: var(--borde); position: relative; overflow: hidden;
  background: repeating-linear-gradient(135deg, #EDF0F4 0 12px, var(--papel) 12px 24px);
  display: flex; align-items: flex-end; padding: 12px;
}
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Una ilustración se recorta mal: se muestra entera sobre la trama. */
.foto img.ilustracion { object-fit: contain; }
/* Pie de foto de la galería. Antes era un rectángulo negro con texto
   fino: se leía como una marca de agua puesta encima, no como parte
   del diseño. Ahora va en negrita, con la esquina redondeada de las
   tarjetas y algo más de aire.

   No se pasa a mayúsculas a propósito: son nombres de negocios y
   varios ya ocupan dos renglones; en versalitas ocuparían tres. */
.foto-nota {
  position: relative; font-family: var(--detalle);
  font-size: 11.5px; font-weight: 700; letter-spacing: .005em;
  background: var(--tinta); color: var(--papel);
  padding: 7px 11px; border-radius: var(--radio-sm);
}
/* Marco horizontal, no vertical: aquí va la foto real del taller, y una
   fachada se fotografía a lo ancho. Con el 4/5 anterior había que
   recortarle el 40 % del ancho, y por un lado u otro se perdía el logo o
   el teléfono del aviso. El 4/3 es casi la proporción de la foto, así
   que se ve entera. La rejilla del héroe centra las columnas, de modo
   que la de al lado no se descuadra. */
.hero-foto { aspect-ratio: 4/3; align-items: flex-start; box-shadow: var(--sombra-alta); }
.hero-sello {
  position: absolute; bottom: -16px; left: -14px; background: var(--magenta); color: #fff;
  border: var(--borde); padding: 9px 13px; font-family: var(--display);
  font-size: 14px; transform: rotate(-3deg);
}
.hero-marco { position: relative; }

/* ---------- Cinta ---------- */
.cinta {
  display: flex; overflow: hidden; background: var(--tinta);
  border-top: var(--borde); border-bottom: var(--borde);
  white-space: nowrap; font-family: var(--display); font-size: 15px;
  letter-spacing: .06em; color: var(--papel); padding: 11px 0;
}
.cinta-pista { display: flex; gap: 26px; padding-left: 20px; flex: none; animation: cinta 26s linear infinite; }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cinta-pista { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Encabezados de sección ---------- */
.sec-cab { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.sec-cab h2 { font-size: clamp(28px, 5vw, 48px); line-height: 1; }
.sec-cab p { font-size: 16px; color: var(--gris); margin: 0 0 5px; }

/* ---------- Servicios ---------- */
.rejilla-servicios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px;
}
.tarjeta { border: var(--borde); background: #fff; display: flex; flex-direction: column; }
.tarjeta .foto { aspect-ratio: 5/4; border: 0; border-bottom: var(--borde); }
.tarjeta-cuerpo { padding: 15px 16px 18px; }
.tarjeta h3 { font-size: 19px; margin-bottom: 6px; }
.tarjeta p { font-size: 15px; line-height: 1.45; color: var(--gris); margin: 0 0 12px; }
.tarjeta-desde { font-family: var(--detalle); font-size: 12px; color: var(--magenta); font-weight: 600; }
.tarjeta-abierta {
  border: 2px dashed var(--tinta); background: var(--amarillo); padding: 22px;
  display: flex; flex-direction: column; justify-content: center;
}
.tarjeta-abierta h3 { font-size: 22px; margin-bottom: 8px; line-height: 1.05; }
.tarjeta-abierta p { font-size: 15px; line-height: 1.45; color: #0A3A4A; margin: 0 0 16px; }

/* ---------- Calculadora ---------- */
.calc-seccion {
  background: var(--tinta); padding: clamp(38px, 6vw, 80px) var(--pad-x);
  background-image: radial-gradient(#242c33 1.6px, transparent 1.6px);
  background-size: 16px 16px;
}
.calc-intro { text-align: center; margin-bottom: 26px; }
.calc-intro .etiqueta { background: var(--magenta); color: #fff; margin-bottom: 14px; }
.calc-intro h2 { font-size: clamp(28px, 5.6vw, 52px); line-height: 1; color: var(--papel); margin-bottom: 10px; }
.calc-intro p { font-size: 16px; color: #98A2AA; margin: 0; }

.calc-caja { max-width: 960px; margin: 0 auto; border: 2px solid var(--papel); background: var(--papel); box-shadow: var(--sombra-alta); }
.calc-pasos { display: flex; border-bottom: var(--borde); }
.calc-paso {
  flex: 1; padding: 11px 8px; text-align: center; font-family: var(--detalle);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  border-right: 1px solid var(--linea); color: var(--gris-3); position: relative; overflow: hidden;
}
.calc-paso:last-child { border-right: 0; }
.calc-paso.activo { background: var(--tinta); color: var(--papel); }
.calc-cuerpo { padding: clamp(20px, 4vw, 38px); }
.calc-cuerpo h3 { font-size: clamp(22px, 4vw, 32px); margin-bottom: 4px; }
.calc-cuerpo .ayuda { font-size: 15px; color: var(--gris-2); margin: 0 0 20px; }

.rejilla-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.opcion {
  position: relative; border: var(--borde); background: #fff; padding: 0;
  cursor: pointer; text-align: left; display: flex; flex-direction: column;
}
.opcion .muestra {
  display: block; aspect-ratio: 4/3; width: 100%;
  background: repeating-linear-gradient(135deg, #EDF0F4 0 9px, #fff 9px 18px);
  border-bottom: var(--borde);
}
.opcion-txt { display: block; padding: 11px 12px 13px; }
.opcion-nombre { display: block; font-family: var(--display); font-size: 16px; }
.opcion-unidad { display: block; font-family: var(--detalle); font-size: 11.5px; color: var(--gris-2); margin-top: 3px; }
.opcion[aria-pressed="true"]::after {
  content: ''; position: absolute; inset: -4px; border: 4px solid var(--magenta); pointer-events: none;
}

.campo-rango { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; align-items: start; }
.etq {
  display: block; font-family: var(--detalle); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 7px;
}
input[type="range"] { width: 100%; accent-color: var(--magenta); height: 26px; }
.medidas-rapidas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chip {
  border: var(--borde); background: #fff; font-family: var(--detalle);
  font-size: 12px; padding: 9px 12px; cursor: pointer; min-height: 40px;
}
.chip:hover { background: var(--papel-2); }
.previsualizacion {
  border: var(--borde); background: #fff; padding: 16px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; min-height: 220px;
}
.previsualizacion .pieza {
  border: var(--borde);
  background: repeating-linear-gradient(135deg, #EDF0F4 0 8px, #fff 8px 16px);
}
.previsualizacion .medida { font-family: var(--detalle); font-size: 12px; color: var(--gris-2); margin-top: 14px; }

.contador { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.contador button {
  width: 62px; height: 62px; border: var(--borde); background: #fff;
  font-family: var(--display); font-size: 28px; cursor: pointer; line-height: 1;
}
.contador .mas { background: var(--magenta); color: #fff; }
.contador .valor { min-width: 110px; text-align: center; font-family: var(--display); font-size: 52px; line-height: 1; }

.rejilla-si-no { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 22px; }
.opcion-ancha { position: relative; border: var(--borde); background: #fff; padding: 18px; cursor: pointer; text-align: left; }
.opcion-ancha strong { display: block; font-family: var(--display); font-size: 18px; font-weight: normal; }
.opcion-ancha span { display: block; font-size: 14px; color: var(--gris-2); margin-top: 4px; }
.opcion-ancha[aria-pressed="true"]::after {
  content: ''; position: absolute; inset: -4px; border: 4px solid var(--magenta); pointer-events: none;
}

.aviso {
  margin-top: 14px; border: 2px solid var(--cian); background: var(--cian-pale);
  padding: 13px 15px; font-size: 14.5px; color: #0A3A4A; max-width: 560px;
}

.rango-precio { font-family: var(--display); font-size: clamp(28px, 6.4vw, 54px); line-height: 1.02; color: var(--magenta); letter-spacing: -.02em; }
.rango-nota { font-size: 15px; color: var(--gris-2); margin: 10px 0 20px; max-width: 36em; }
.resumen {
  border-top: var(--borde); border-bottom: var(--borde); padding: 14px 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; font-family: var(--detalle); font-size: 13px;
}
.resumen span { display: block; color: var(--gris-3); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

.calc-pie {
  display: flex; gap: 10px; align-items: center; border-top: var(--borde);
  padding: 14px clamp(20px, 4vw, 38px); background: var(--papel-2); flex-wrap: wrap;
}
.calc-pie .nota { font-family: var(--detalle); font-size: 12.5px; color: var(--gris-2); margin-left: 4px; }

/* ---------- Galería ---------- */
.rejilla-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
/* Un solo formato para todos los azulejos. Con la proporción de cada
   foto, una vertical estiraba su fila y las horizontales de al lado
   quedaban flotando arriba con un hueco debajo. La foto se recorta
   para llenar el hueco (`object-fit: cover`, ya heredado de .foto). */
.rejilla-galeria .foto { aspect-ratio: 4/3; align-items: flex-end; }
/* Tira de categorías. Antes iban pegadas a la derecha del título y al
   crecer se partían en varias filas, empujando la galería hacia abajo.
   Ahora van a la izquierda, en una sola línea que se desplaza: da igual
   cuántas categorías agregue el dueño, la altura no cambia. */
.tira-filtros { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.filtros-galeria {
  display: flex; gap: 7px; flex-wrap: nowrap;
  overflow-x: auto; scroll-behavior: smooth;
  /* La barra de desplazamiento nativa se ve como un error de maquetado
     en una fila de botones; para moverse están las flechas y, en el
     móvil, el dedo. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.filtros-galeria::-webkit-scrollbar { display: none; }
.filtros-galeria .chip { flex: none; white-space: nowrap; }
.filtros-galeria .chip[aria-pressed="true"] { background: var(--tinta); color: #fff; }

/* Solo aparecen cuando de verdad hay algo más que ver hacia ese lado. */
.tira-flecha {
  flex: none; width: 38px; height: 38px; border: var(--borde);
  background: #fff; border-radius: 50%; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
}
.tira-flecha:hover { background: var(--papel-2); }

/* ---------- Pasos del pedido ---------- */
.rejilla-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.paso-tarjeta { border: var(--borde); background: #fff; padding: 22px; }
.paso-num { font-family: var(--display); font-size: 56px; line-height: .8; color: var(--magenta); margin-bottom: 14px; }
.paso-tarjeta h3 { font-size: 21px; margin-bottom: 7px; }
.paso-tarjeta p { font-size: 15.5px; line-height: 1.45; color: var(--gris); margin: 0; }

/* ---------- Instalación ---------- */
.instalacion { background: var(--amarillo); border-top: var(--borde); border-bottom: var(--borde); padding: var(--pad-y) var(--pad-x); }
.instalacion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(22px, 4vw, 46px); align-items: center; }
.instalacion h2 { font-size: clamp(26px, 4.4vw, 44px); line-height: 1.02; margin-bottom: 16px; }
.instalacion p.intro { font-size: 17px; line-height: 1.5; color: #0A3A4A; margin: 0 0 20px; max-width: 32em; }
.cobertura { display: grid; gap: 10px; max-width: 520px; }
.cobertura div { border: var(--borde); padding: 14px 16px; }
.cobertura .dentro { background: #fff; }
.cobertura .fuera { background: var(--papel); }
.cobertura strong { display: block; font-family: var(--display); font-size: 16px; font-weight: normal; }
.cobertura span { display: block; font-size: 14.5px; color: var(--gris); margin-top: 3px; }
.mapa-cobertura {
  margin: 0; border: var(--borde); background: var(--papel);
  overflow: hidden; display: flex; flex-direction: column;
}
.mapa-cobertura img { display: block; width: 100%; height: auto; }
/* El mapa interactivo ocupa el mismo hueco que el SVG de respaldo.

   `position: relative` + `z-index: 0` no son decoración: encierran a
   Leaflet en su propia caja de apilamiento. Leaflet reparte z-index de
   200 a 1000 entre sus capas y controles, y sin encerrarlos compiten
   con el resto de la página: al bajar, el mapa se pintaba por encima de
   la cabecera fija y le tapaba el botón de cotización.

   Encerrarlo es mejor que subirle el z-index a la cabecera: así el
   mapa no puede pasar por encima de nada, ni de lo que se añada
   después. */
#mapa-interactivo {
  width: 100%; aspect-ratio: 4/3; min-height: 340px;
  background: var(--papel-2);
  position: relative; z-index: 0;
}
/* Los rótulos permanentes de Leaflet, en la tipografía de la marca. */
.rotulo-mapa {
  background: var(--tinta); color: var(--papel); border: 0; border-radius: 2px;
  font-family: var(--detalle); font-size: 11.5px; font-weight: 600;
  padding: 3px 7px; box-shadow: none; white-space: nowrap;
}
.rotulo-mapa::before { display: none; }
.leaflet-container { font-family: var(--texto); background: var(--papel-2); }
.leaflet-popup-content { font-size: 14px; line-height: 1.45; }
.leaflet-popup-content strong { font-family: var(--display); font-weight: normal; font-size: 15px; }
.leaflet-control-attribution { font-size: 10.5px; }
.mapa-cobertura figcaption {
  border-top: var(--borde); background: var(--papel-2);
  padding: 11px 14px; font-family: var(--detalle); font-size: 12.5px;
  color: var(--gris-2); line-height: 1.45;
}

/* ---------- Testimonios ---------- */
.testimonios { background: var(--tinta); padding: var(--pad-y) var(--pad-x); }
.testimonios h2 { font-size: clamp(28px, 5vw, 46px); line-height: 1; color: var(--papel); margin-bottom: 26px; }
.rejilla-testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.testimonio { border: 2px solid var(--papel); background: var(--papel); padding: 22px; }
.testimonio .comilla { font-family: var(--display); font-size: 34px; color: var(--magenta); line-height: .6; margin-bottom: 12px; }
.testimonio p { font-size: 16.5px; line-height: 1.5; margin: 0 0 16px; }
.testimonio cite { font-family: var(--detalle); font-size: 12.5px; color: var(--gris-2); font-style: normal; border-top: 1px solid var(--linea); padding-top: 11px; display: block; }

/* ---------- FAQ ---------- */
.faq { max-width: 900px; }
.faq h2 { font-size: clamp(28px, 5vw, 46px); line-height: 1; margin-bottom: 24px; }
.faq-lista { border-top: var(--borde); }
.faq-item { border-bottom: var(--borde); }
.faq-item button {
  width: 100%; display: flex; align-items: center; gap: 14px; background: transparent;
  border: 0; padding: 18px 2px; cursor: pointer; text-align: left;
}
.faq-item .preg { font-family: var(--display); font-size: clamp(16px, 2.4vw, 19px); flex: 1; }
.faq-item .signo { font-family: var(--display); font-size: 22px; color: var(--magenta); line-height: 1; }
.faq-item .resp { font-size: 16px; line-height: 1.55; color: var(--gris); margin: 0; padding: 0 40px 20px 2px; }

/* ---------- Solicitud ---------- */
.solicitud { background: var(--magenta); border-top: var(--borde); padding: var(--pad-y) var(--pad-x); }
.solicitud-grid {
  max-width: 1080px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 40px); align-items: start;
}
.solicitud h2 { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.02; color: #fff; margin-bottom: 14px; }
.solicitud .intro { font-size: 17px; line-height: 1.5; color: var(--magenta-pale); margin: 0 0 22px; max-width: 26em; }
.datos-contacto { margin-top: 26px; font-family: var(--detalle); font-size: 13px; color: var(--magenta-pale); line-height: 1.8; container-type: inline-size; }
.datos-contacto a { color: #fff; text-decoration: underline; }
/* Teléfono y correo casi del tamaño del título; se escalan con la columna para que el correo quepa en una línea */
.datos-contacto a.contacto-grande {
  display: block; width: fit-content; max-width: 100%;
  font-family: var(--display); font-style: normal; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  font-size: 20px; font-size: clamp(17px, 7cqi, 34px);
  text-decoration-thickness: 2px; text-underline-offset: .14em; overflow-wrap: anywhere;
}
.datos-contacto a.contacto-grande + a.contacto-grande { margin-top: 6px; }
.datos-contacto .direccion { display: block; margin-bottom: 10px; }

/* Mapa del local. El iframe de Google trae medidas fijas (600×450) que
   desbordan en móvil; se encaja en un contenedor con proporción propia. */
.mapa-local {
  position: relative; margin-top: 20px; aspect-ratio: 16/10;
  border: var(--borde); background: var(--papel); overflow: hidden;
}
.mapa-local iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.mapa-espera, .mapa-aviso {
  position: absolute; inset: 0; margin: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 18px;
  font-family: var(--detalle); font-size: 13px; color: var(--gris-2);
  background: repeating-linear-gradient(135deg, #EDF0F4 0 12px, var(--papel) 12px 24px);
}
.mapa-enlace {
  display: inline-block; margin-top: 10px; font-family: var(--detalle);
  font-size: 13px; color: #fff; text-decoration: underline;
}
.mapa-enlace:hover { color: var(--magenta-pale); }

.formulario { border: var(--borde); background: var(--papel); padding: clamp(18px, 3vw, 28px); box-shadow: var(--sombra); }
.campo { margin-bottom: 14px; }
.campo label { display: block; font-family: var(--detalle); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.campo label .opt { text-transform: none; letter-spacing: 0; color: var(--gris-2); font-size: 11px; }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="date"], .campo textarea, .campo select {
  width: 100%; border: var(--borde); background: #fff; padding: 13px; font-size: 16px; border-radius: 0;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo .error { color: var(--magenta); font-size: 13px; margin-top: 5px; font-weight: 600; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--magenta); }
.si-no { display: flex; gap: 10px; }
.si-no button { flex: 1; border: var(--borde); background: #fff; padding: 12px; cursor: pointer; font-weight: 700; min-height: 46px; }
.si-no button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.archivo { border: 2px dashed var(--tinta); background: #fff; padding: 16px; text-align: center; cursor: pointer; display: block; }
.archivo small { display: block; color: var(--gris-2); margin-top: 4px; font-family: var(--detalle); font-size: 11.5px; }
.pie-form { font-family: var(--detalle); font-size: 12px; color: var(--gris-2); text-align: center; margin-top: 10px; }

.exito { text-align: center; padding: 28px 10px; }
.exito .marca-ok {
  width: 74px; height: 74px; border-radius: 50%; background: var(--amarillo); border: 3px solid var(--tinta);
  margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 34px;
}
.exito h3 { font-size: 26px; margin-bottom: 10px; line-height: 1.05; }
.exito p { font-size: 16px; line-height: 1.5; color: var(--gris); margin: 0 0 20px; }
.exito .radicado { border: var(--borde); background: #fff; padding: 14px; font-family: var(--detalle); font-size: 13px; text-align: left; line-height: 1.7; }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); padding: 34px var(--pad-x) 30px; }
.pie-grid { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.pie-marca { font-family: var(--display); font-size: 20px; color: var(--papel); }
.pie-nota { font-family: var(--detalle); font-size: 12.5px; color: #7d878f; }
/* Entrada del dueño. Va en el pie a propósito: el cliente no tiene por
   qué verla como una función del sitio. Pero tiene que ser encontrable
   cuando se la busca, así que cumple el contraste mínimo (7,1:1) en vez
   de quedar como un gris fantasma. */
.pie a.enlace-panel {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--detalle); font-size: 12.5px; color: #98A2AA;
  border: 1px solid #3c454d; padding: 8px 13px; border-radius: 2px;
}
.pie a.enlace-panel:hover { color: #fff; border-color: var(--papel); background: #1a2026; }
.pie a.enlace-panel .candado {
  width: 9px; height: 8px; border: 2px solid currentColor; border-radius: 1px;
  position: relative; flex: none; margin-top: 3px;
}
.pie a.enlace-panel .candado::before {
  content: ''; position: absolute; left: 1px; top: -6px;
  width: 5px; height: 5px; border: 2px solid currentColor;
  border-bottom: 0; border-radius: 3px 3px 0 0;
}

@media (max-width: 560px) { .pie a.enlace-panel { margin-left: 0; } }

/* ============================================================
   Panel privado
   ============================================================ */
.panel-cab { position: sticky; top: 0; z-index: 60; background: var(--tinta); padding: 14px clamp(14px, 4vw, 32px); border-bottom: var(--borde); }
.panel-cab-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-marca { font-family: var(--display); font-size: 18px; color: var(--papel); }
.panel-chip { font-family: var(--detalle); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); border: 1px solid var(--magenta); padding: 3px 7px; }
.panel-saludo { margin-left: auto; font-family: var(--detalle); font-size: 12.5px; color: #98A2AA; }
.sesion {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--detalle); font-size: 12px; color: #98A2AA;
  border-left: 1px solid #3c454d; padding-left: 12px;
}
.sesion button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--detalle); font-size: 12px;
  color: #C9A24A; text-decoration: underline;
}
.sesion button:hover { color: #fff; }

/* Estado de la conexión con la base de datos. Responde a la única
   pregunta que importa después de guardar: ¿esto ya lo ven los
   clientes? Por eso «publicado» es lo único que se pinta en verde y
   «no se pudo publicar» lo único en rojo; el resto es gris y no
   compite por la atención. */
.estado-nube {
  font-family: var(--detalle); font-size: 11.5px; letter-spacing: .04em;
  color: #98A2AA; border: 1px solid #3c454d; padding: 4px 9px;
  border-radius: 2px; white-space: nowrap;
}
.estado-nube[data-estado="publicado"] { color: #8FD9A8; border-color: #2E7D4F; }
.estado-nube[data-estado="error"]     { color: #F0B0A8; border-color: var(--magenta); }
.estado-nube[data-estado="local"]     { color: #FFD400; border-color: #6b5a2a; }

/* ---------- Pantalla de acceso ----------
   Ocupa la página entera: si el dueño no ha entrado, no hay nada más
   que ver. Los campos son grandes porque esto se abre casi siempre
   desde el celular, en el taller. */
.acceso {
  max-width: 420px; margin: clamp(40px, 12vh, 110px) auto;
  padding: clamp(24px, 5vw, 36px);
  background: #fff; border: var(--borde); box-shadow: var(--sombra);
}
.acceso h1 { font-family: var(--display); font-size: 26px; margin-bottom: 8px; }
.acceso > p { font-size: 15px; color: var(--gris); margin-bottom: 24px; line-height: 1.55; }
.acceso label {
  display: block; font-family: var(--detalle); font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 6px; color: var(--tinta);
}
.acceso input {
  width: 100%; border: var(--borde); padding: 13px 14px;
  font-size: 16px;            /* 16px o menos hace que iOS amplíe al enfocar */
  margin-bottom: 18px; background: var(--papel); font-family: var(--texto);
}
.acceso input:focus { outline: 3px solid var(--amarillo); outline-offset: 1px; }
.acceso .btn { width: 100%; justify-content: center; }
.acceso .error {
  border-left: 4px solid var(--magenta); background: var(--magenta-pale);
  padding: 11px 14px; font-size: 14px; color: #5a1114;
  margin: 0 0 16px; line-height: 1.5;
}
.acceso p.acceso-ayuda {
  font-size: 13px; color: var(--gris-3); margin: 20px 0 0;
  line-height: 1.55; border-top: 1px solid var(--linea); padding-top: 16px;
}

/* Subida de fotos en curso. Sin esto la página se queda quieta varios
   segundos y el dueño vuelve a tocar el botón. */
.subiendo {
  font-family: var(--detalle); font-size: 13.5px; color: var(--cian);
  border: 2px dashed var(--cian); background: var(--cian-pale);
  padding: 12px 15px; margin: 0 0 16px; text-align: center;
}
/* Las pestañas van con borde tenue: cinco recuadros blancos gruesos
   sobre negro compiten entre sí y ninguna se lee como la activa. */
.panel-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.panel-tabs button {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid #3c454d; background: transparent; color: #b6bfc6;
  font-weight: 600; font-size: 14.5px; padding: 10px 15px;
  cursor: pointer; min-height: 44px; border-radius: 2px;
  transition: background .12s ease, color .12s ease;
}
.panel-tabs button:hover { background: #1a2026; color: #fff; }
.panel-tabs button[aria-selected="true"] {
  background: var(--magenta); border-color: var(--magenta); color: #fff; font-weight: 700;
}
/* En el panel el pie va siempre al fondo de la ventana, aunque haya
   poco contenido: si no, queda flotando a media pantalla. */
body.pagina-panel { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.pagina-panel > * { width: 100%; }
body.pagina-panel > .pie { margin-top: auto; }
.panel-cuerpo { padding: clamp(20px, 3.5vw, 34px) clamp(14px, 4vw, 32px); max-width: 1240px; margin: 0 auto; }
.panel-cuerpo > section > h2 { margin-bottom: 6px; }
.panel-cuerpo h2 { font-size: clamp(24px, 4.4vw, 34px); margin-bottom: 6px; }
.panel-cuerpo > section > p.intro { font-size: 16px; color: var(--gris); margin: 0 0 20px; }

.tarjetas-resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
/* Ojo con el `>`: sin él, el borde y el relleno caen también sobre la
   etiqueta y la cifra, y cada tarjeta sale como una caja dentro de otra. */
.tarjetas-resumen > div {
  border: var(--borde); background: #fff; padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.tarjetas-resumen .etq-r {
  font-family: var(--detalle); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gris-2);
}
.tarjetas-resumen .val {
  font-family: var(--display); font-size: 36px; line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rejilla-solicitudes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.sol { border: var(--borde); background: #fff; }
.sol .barra { height: 8px; border-bottom: var(--borde); }
.sol-cuerpo { padding: 16px 17px 18px; }
.sol-cab { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.sol-cliente { font-family: var(--display); font-size: 19px; line-height: 1.15; }
.sol-meta { font-family: var(--detalle); font-size: 12px; color: var(--gris-3); margin-top: 3px; }
.sol-estado { font-family: var(--detalle); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border: var(--borde); padding: 4px 8px; white-space: nowrap; }
.sol-prod { border: var(--borde); background: var(--papel); padding: 11px 12px; margin-bottom: 12px; }
.sol-prod strong { display: block; font-family: var(--display); font-size: 16px; font-weight: normal; }
.sol-prod span { font-family: var(--detalle); font-size: 12.5px; color: var(--gris); margin-top: 4px; display: block; }
.sol-inst { border-left: 4px solid var(--cian); padding-left: 11px; margin-bottom: 12px; }
.sol-inst.fuera { border-left-color: var(--magenta); }
.sol-inst .etq-r { font-family: var(--detalle); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-3); }
.sol-mensaje { font-size: 15px; line-height: 1.45; color: var(--gris); margin: 0 0 14px; font-style: italic; }
.sol-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.fila-precio {
  border: var(--borde); background: #fff; padding: 14px 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: center;
}
.fila-precio .nom { font-family: var(--display); font-size: 18px; }
.fila-precio .uni { font-family: var(--detalle); font-size: 12px; color: var(--gris-3); margin-top: 2px; }
.fila-precio .entrada-precio { display: flex; align-items: center; gap: 8px; }
.fila-precio .entrada-precio span { font-family: var(--display); font-size: 20px; }
.fila-precio input {
  width: 100%; max-width: 190px; border: var(--borde); background: var(--papel);
  padding: 13px; font-size: 19px; font-family: var(--detalle); min-height: 50px;
}
.fila-precio input:placeholder-shown { background: #fff8f8; }
.ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ajuste { border: var(--borde); background: #fff; padding: 14px 16px; }
.ajuste label { display: block; font-family: var(--detalle); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 7px; }
.ajuste input { width: 100%; border: var(--borde); background: var(--papel); padding: 12px; font-size: 17px; font-family: var(--detalle); }
.ajuste small { display: block; color: var(--gris-2); font-size: 12px; margin-top: 6px; line-height: 1.4; }

.guardado { font-family: var(--detalle); font-size: 14px; color: var(--verde); border: 1px solid var(--verde); background: #E6F7EE; padding: 11px 14px; }
.acciones-guardar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }

.rejilla-galeria-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.galeria-admin-item { border: var(--borde); background: #fff; }
.galeria-admin-item .marco { aspect-ratio: 4/3; border-bottom: var(--borde); position: relative; background: repeating-linear-gradient(135deg, #EDF0F4 0 10px, #fff 10px 20px); }
.galeria-admin-item .marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.galeria-admin-item .orden { position: absolute; top: 8px; right: 8px; font-family: var(--detalle); font-size: 11px; background: var(--tinta); color: #fff; padding: 3px 6px; }
.galeria-admin-item .pie-item { padding: 10px 11px; display: flex; align-items: center; gap: 8px; }
.galeria-admin-item .pie-item span { font-family: var(--detalle); font-size: 12px; color: var(--gris); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bloque-texto { border: var(--borde); background: #fff; padding: 15px 16px; }
.bloque-texto label { display: block; font-family: var(--detalle); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-3); margin-bottom: 7px; }
.bloque-texto textarea { width: 100%; border: var(--borde); background: var(--papel); padding: 12px; font-size: 16px; line-height: 1.45; resize: vertical; }

/* ---------- Órdenes de trabajo ---------- */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.contador-tab {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 5px;
  background: #fff; color: var(--magenta); border-radius: 10px;
  font-family: var(--detalle); font-size: 11px; font-weight: 700;
}

.barra-ordenes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.buscador { flex: 1; min-width: 200px; }
.buscador input {
  width: 100%; border: var(--borde); background: #fff;
  padding: 12px 14px; font-size: 15px; min-height: 46px; border-radius: 0;
}
.grupo-vista { display: flex; }
.grupo-vista button {
  border: var(--borde); background: #fff; padding: 12px 16px;
  font-weight: 700; font-size: 14px; cursor: pointer; min-height: 46px;
}
.grupo-vista button + button { border-left: 0; }
.grupo-vista button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.vacio { font-size: 16px; color: var(--gris); line-height: 1.5; }

/* Tablero: una columna por estado, con desplazamiento lateral en móvil */
.tablero {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr);
  gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start;
}
/* La columna va en tono apagado y las tarjetas en blanco: así cada
   trabajo se despega del fondo en vez de fundirse con la columna. */
.columna { border: var(--borde); background: var(--papel-2); display: flex; flex-direction: column; min-height: 120px; }
.columna-cab {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px;
  border-bottom: var(--borde); font-family: var(--detalle); font-size: 12px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.columna-cab .cuenta {
  margin-left: auto; background: rgba(0,0,0,.16); padding: 1px 7px;
  border-radius: 10px; font-weight: 700;
}
.columna-cuerpo { display: grid; gap: 8px; padding: 10px; }
.columna-vacia { font-family: var(--detalle); font-size: 12px; color: var(--gris-3); padding: 6px 2px; }

.orden {
  border: var(--borde); background: #fff; padding: 12px 13px;
  cursor: pointer; text-align: left; display: grid; gap: 7px; width: 100%;
  font: inherit; border-radius: 0;
  transition: transform .1s ease, box-shadow .1s ease;
}
.orden:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-alta); }
.orden:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }
.orden-cliente { font-family: var(--display); font-size: 15.5px; line-height: 1.2; }
.orden-desc {
  font-size: 13.5px; color: var(--gris); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.orden-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--detalle); font-size: 11.5px; }
.orden-num { color: var(--gris-3); }
.orden-valor { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.marca-fecha { padding: 2px 6px; border: 1px solid var(--linea); border-radius: 6px; }
.marca-fecha.atrasada { background: var(--magenta); color: #fff; border-color: var(--magenta); }
.marca-fecha.urgente { background: #FFD400; color: #4A3B00; border-color: #c79a00; }
.marca-inst { width: 8px; height: 8px; border-radius: 50%; background: var(--cian); flex: none; }

/* Lista */
.tabla-envoltura { overflow-x: auto; border: var(--borde); background: #fff; }
table.ordenes { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.ordenes th, table.ordenes td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--linea); }
table.ordenes th {
  font-family: var(--detalle); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gris-3); background: var(--papel);
  border-bottom: var(--borde); position: sticky; top: 0;
}
table.ordenes tr:last-child td { border-bottom: 0; }
table.ordenes tbody tr { cursor: pointer; }
table.ordenes tbody tr:hover { background: var(--papel); }
table.ordenes .num { font-family: var(--detalle); font-size: 12.5px; color: var(--gris-3); white-space: nowrap; }
table.ordenes .dinero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pastilla {
  display: inline-block; padding: 3px 9px; border: 1px solid var(--linea);
  font-family: var(--detalle); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap;
}

/* Ficha de la orden */
dialog.ficha {
  --ficha-pad: clamp(22px, 3vw, 30px);
  width: min(760px, 94vw); max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  border: var(--borde); background: var(--papel);
  padding: var(--ficha-pad); box-shadow: var(--sombra);
  color: var(--tinta);
}
dialog.ficha::backdrop { background: rgba(16, 20, 24, .66); }
.ficha-cerrar { position: absolute; top: 14px; right: 14px; margin: 0; z-index: 3; }
.ficha-cerrar button { min-height: 38px; padding: 8px 12px; }
.ficha h2 { font-size: clamp(21px, 3.4vw, 27px); margin: 0 0 5px; padding-right: 52px; line-height: 1.15; }
.ficha-meta {
  font-family: var(--detalle); font-size: 12px; color: var(--gris-2);
  margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--linea);
}
.ficha-campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px 18px;
}
.campo-panel.ancho { grid-column: 1 / -1; }
.campo-panel label {
  display: block; font-family: var(--detalle); font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px;
}
.campo-panel input, .campo-panel textarea, .campo-panel select {
  width: 100%; border: var(--borde); background: #fff;
  padding: 12px; font-size: 16px; border-radius: 0;
}
.campo-panel textarea { resize: vertical; }
/* Selector y fecha con la misma altura que las demás casillas */
.campo-panel input, .campo-panel select { min-height: 48px; }
.campo-panel input[type="date"] { height: 48px; padding-block: 0; }
.campo-panel .mini {
  margin-top: 6px; border: var(--borde); background: var(--papel-2);
  font-family: var(--detalle); font-size: 11.5px; padding: 6px 10px; cursor: pointer;
}
.saldo-caja {
  border: var(--borde); background: var(--papel-2); padding: 14px 16px;
  font-family: var(--detalle); font-size: 13.5px; color: var(--gris-2);
  display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline;
}
.saldo-caja strong {
  font-family: var(--display); font-size: 21px; font-weight: normal;
  display: block; margin-bottom: 2px;
}
.saldo-caja .pendiente { color: var(--magenta); margin-left: auto; text-align: right; }
.saldo-caja .pagado { color: var(--verde); margin-left: auto; text-align: right; }

.ficha-acciones {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linea);
}
/* Si la ficha no cabe en la pantalla, los botones quedan pegados abajo
   y el formulario se desplaza por detrás, en vez de cortarse a medias. */
dialog.ficha .ficha-acciones, dialog.ficha .ff-acciones {
  position: sticky; bottom: calc(-1 * var(--ficha-pad)); z-index: 2;
  margin: 24px calc(-1 * var(--ficha-pad)) calc(-1 * var(--ficha-pad));
  padding: 16px var(--ficha-pad) var(--ficha-pad);
  background: var(--papel); border-top: 1px solid var(--linea);
  box-shadow: 0 -10px 18px -12px rgba(16, 20, 24, .28);
}
/* Cuatro botones en una fila: los grandes se compactan para que quepan */
dialog.ficha .ficha-acciones > .btn-lg { font-size: 16px; padding-inline: 18px; }
dialog.ficha .ficha-acciones > .btn { padding-inline: 16px; }
@media (max-width: 560px) {
  dialog.ficha .ficha-acciones { gap: 8px; padding-top: 12px; }
  dialog.ficha .ficha-acciones > .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; padding: 8px 12px; font-size: 14px; }
  /* Siguiente paso a lo ancho; debajo Guardar y Eliminar; al final WhatsApp */
  dialog.ficha .ficha-acciones > #btn-avanzar-orden { flex-basis: 100%; }
  dialog.ficha .ficha-acciones > #btn-wa-orden { order: 1; flex-basis: 100%; }
}

.acceso { max-width: 420px; margin: 12vh auto; border: var(--borde); background: #fff; padding: 28px; box-shadow: var(--sombra); }
.acceso h1 { font-size: 26px; margin-bottom: 8px; }
.acceso p { font-size: 15px; color: var(--gris); margin: 0 0 20px; }

/* Aviso informativo. Va con una franja lateral en vez de un marco
   completo: enmarcado a todo lo ancho compite con el contenido real. */
.nota-almacenamiento {
  border: 0; border-left: 4px solid var(--cian);
  background: var(--cian-pale); padding: 13px 16px;
  font-size: 14px; color: #0A3A4A; margin-bottom: 22px; line-height: 1.55;
  border-radius: 0 2px 2px 0;
}

@media print {
  .cabecera, .calc-seccion, .panel-tabs { display: none; }
}


/* ============================================================
   Esquinas redondeadas
   ------------------------------------------------------------
   Antes cada tarjeta era un recuadro negro de 2 px con una sombra
   dura desplazada. Ahora el borde apenas se insinúa y lo que separa
   una tarjeta del fondo es la esquina redondeada más una sombra
   suave — que es como se ve hoy la publicidad, y no como se veía un
   cartel serigrafiado.

   Va al final del archivo a propósito: por el camino hay varios
   `border-radius: 0` sueltos, puestos para anular los redondeos que
   traen los navegadores por su cuenta en campos y botones. Al llegar
   después, esto los reemplaza sin tener que ir a cazarlos uno a uno.

   Lo que NO se redondea: las bandas que van de lado a lado de la
   pantalla —cabecera, cinta, secciones de color—. Una banda a sangre
   con las esquinas redondeadas deja cuatro muescas del color de
   abajo y se ve como un error.
   ============================================================ */

/* Contenedores */
.tarjeta, .tarjeta-abierta, .foto, .calc-caja, .formulario, .mapa-cobertura,
.mapa-local, .testimonio, .paso-tarjeta, .faq-lista, .cobertura div,
.exito .radicado, .previsualizacion, .resumen, .acceso, dialog.ficha,
.tabla-envoltura, .columna, .orden, .sol, .sol-prod, .galeria-admin-item,
.ajuste, .bloque-texto, .opcion-ancha, .saldo-caja, .tarjetas-resumen > div,
.fila-precio, .nota-almacenamiento, .subiendo, .acceso .error {
  border-radius: var(--radio);
}

/* Controles y piezas pequeñas */
.btn, .chip, .opcion, .etiqueta, .hero-sello, .panel-chip, .sol-estado,
.rotulo-mapa, .si-no button, .contador button, .grupo-vista button,
.panel-tabs button, .estado-nube, .marca-orden, .guardado,
.campo input[type="text"], .campo input[type="tel"], .campo input[type="date"],
.campo textarea, .campo select, .acceso input, .ajuste input,
.bloque-texto textarea, .fila-precio input, .buscador input,
.campo-panel input, .campo-panel textarea, .campo-panel select {
  border-radius: var(--radio-sm);
}

/* Un contenedor redondeado no recorta a sus hijos por su cuenta: sin
   esto, la foto de una tarjeta asoma en pico por las esquinas de
   arriba y delata el truco. */
.tarjeta, .sol, .galeria-admin-item, .columna, .mapa-cobertura, .orden,
.tabla-envoltura, .previsualizacion {
  overflow: hidden;
}
/* La ficha se desplaza: con overflow:auto ya recorta las esquinas. */
dialog.ficha { overflow: hidden auto; }

/* La foto ya está recortada por la tarjeta; redondearla otra vez por
   dentro deja una línea de fondo entre las dos curvas. */
.tarjeta .foto, .galeria-admin-item .marco { border-radius: 0; }

/* Las bandas a sangre se quedan rectas */
.cabecera, .panel-cab, .cinta, .instalacion, .solicitud, .calc-seccion,
.testimonios, .pie { border-radius: 0; }


/* ============================================================
   Peso de los titulares
   ------------------------------------------------------------
   Archivo Black tenía un solo peso: era negra y punto. Por eso por
   todo el archivo hay `font-weight: normal` puesto para QUITARLE la
   negrita del navegador a un <strong> o un <h3> — con aquella fuente
   no hacía falta pedir peso, ya venía.

   Outfit sí tiene pesos, así que esos `normal` pasarían a significar
   lo que dicen y los titulares saldrían finos. Aquí se les devuelve
   el peso, a todos los que usan la fuente de titulares.
   ============================================================ */
h1, h2, h3,
.btn-rojo,
.hero-sello,
.cinta,
.opcion-nombre,
.contador button,
.contador .valor,
.opcion-ancha strong,
.rango-precio,
.paso-num,
.cobertura strong,
.leaflet-popup-content strong,
.testimonio .comilla,
.faq-item .preg,
.faq-item .signo,
.exito .marca-ok,
.pie-marca,
.panel-marca,
.acceso h1,
.tarjetas-resumen .val,
.sol-cliente,
.sol-prod strong,
.fila-precio .nom,
.fila-precio .entrada-precio span,
.orden-cliente,
.saldo-caja strong {
  font-weight: 800;
}

/* Los números de la calculadora y los precios, con cifras de ancho
   fijo: si no, al cambiar de valor bailan de izquierda a derecha. */
.rango-precio, .contador .valor, .tarjetas-resumen .val,
.fila-precio input, .ajuste input, .saldo-caja strong {
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   Autorización de datos y página legal
   ------------------------------------------------------------
   La casilla de autorización no es un campo decorativo: sin ella no
   se pueden tratar los datos del cliente (Ley 1581 de 2012). Por eso
   se ve como una frase legible y no como una etiqueta diminuta en
   mayúsculas como el resto de campos del formulario.
   ============================================================ */

.campo-permiso { margin: 18px 0 16px; }
/* `.campo label` va con más peso que `.permiso` a secas, así que el
   selector tiene que nombrar a los dos: si no, el texto de la casilla
   sale en mayúsculas y espaciado como los rótulos de los campos, y una
   frase legal en versalitas no hay quien la lea. */
.campo label.permiso {
  display: flex; align-items: flex-start; gap: 11px;
  text-transform: none; letter-spacing: 0;
  font-family: var(--texto); font-size: 14.5px; line-height: 1.5;
  color: var(--gris); cursor: pointer; margin: 0;
}
.permiso input[type="checkbox"] {
  flex: none; width: 22px; height: 22px; margin: 0;
  accent-color: var(--magenta); cursor: pointer;
}
.permiso a { color: var(--magenta); text-decoration: underline; }
.permiso a:hover { color: var(--magenta-osc); }
.campo-permiso .error { margin-top: 7px; }

.pie a.pie-legal {
  font-family: var(--detalle); font-size: 12.5px;
  color: #B9C1C8; text-decoration: underline; text-underline-offset: 3px;
}
.pie a.pie-legal:hover { color: #fff; }

/* ---------- Página de política de privacidad ---------- */
.legal {
  max-width: 760px; margin: 0 auto;
  padding: clamp(30px, 6vw, 60px) var(--pad-x) clamp(40px, 7vw, 76px);
}
.legal h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.08; margin-bottom: 8px; }
.legal-fecha {
  font-family: var(--detalle); font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gris-3); margin: 0 0 28px;
}
.legal-resumen {
  border-left: 4px solid var(--cian); background: var(--cian-pale);
  border-radius: var(--radio); padding: 16px 19px; margin-bottom: 34px;
  font-size: 16px; line-height: 1.6; color: #0A3A4A;
}
.legal h2 {
  font-size: clamp(19px, 2.6vw, 23px); margin: 34px 0 10px;
  padding-top: 20px; border-top: var(--borde);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p { font-size: 16px; line-height: 1.65; color: var(--gris); margin: 0 0 13px; }
.legal ul { margin: 0 0 15px; padding-left: 22px; }
.legal li { font-size: 16px; line-height: 1.6; color: var(--gris); margin-bottom: 7px; }
.legal strong { color: var(--tinta); }
.legal a { color: var(--magenta); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--magenta-osc); }
.legal-cierre {
  margin-top: 34px; padding-top: 20px; border-top: var(--borde);
  font-size: 14.5px; color: var(--gris-2);
}

.sol-permiso {
  font-family: var(--detalle); font-size: 12px; color: var(--verde);
  margin: 10px 0 2px;
}
.sol-permiso.sin-permiso { color: var(--gris-3); }

/* ---------- Diálogo de la fotografía ---------- */
/* La vista previa sirve para reconocer cuál foto se está describiendo,
   no para admirarla. Antes ocupaba una caja 3/2 fija —medio metro de
   pantalla con una foto vertical dentro— y empujaba la categoría y los
   botones fuera de la ventana. Ahora se le pone techo en altura y se
   encoge sola. */
.ff-vista {
  border: var(--borde); border-radius: var(--radio); overflow: hidden;
  background: var(--papel-2); margin-bottom: 18px;
  height: min(210px, 26vh);
  display: flex; align-items: center; justify-content: center;
}
.ff-vista img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Categorías como botones: se ven todas de un vistazo y se elige con un
   toque, sin desplegar nada. */
.ff-tipos { display: flex; flex-wrap: wrap; gap: 7px; }
.ff-tipos .chip[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.ff-tipos .chip-nueva { border-style: dashed; color: var(--magenta); }

/* Los botones se quedan pegados abajo: aunque la lista de categorías
   crezca y el diálogo tenga que desplazarse, «Guardar» siempre está a
   la vista. Que la acción principal quede fuera de pantalla fue
   justamente lo que falló antes. */
.ff-acciones {
  position: sticky; bottom: calc(clamp(22px, 3vw, 30px) * -1);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 22px -4px -4px; padding: 16px 4px calc(clamp(22px, 3vw, 30px));
  background: var(--papel); border-top: 1px solid var(--linea);
}
.ff-pista {
  display: block; margin-top: 6px; font-size: 13px;
  color: var(--gris-2); line-height: 1.4;
}
#ff-tipo-nuevo { margin-top: 8px; }
.galeria-admin-item .pie-item { flex-wrap: wrap; }
.galeria-admin-item .pie-item select {
  flex: 1 1 100%; border: var(--borde); border-radius: var(--radio-sm);
  padding: 7px 9px; font-size: 12.5px; font-family: var(--detalle);
  background: #fff; min-width: 0;
}