/* ==========================================================================
   VENTURO CONSTRUCTORA · estilos del sitio

   1. Marca: fuentes, colores y medidas   (lo que más se cambia está aquí)
   2. Base
   3. Composición: contenedor, columnas y pilas
   4. Tipografía
   5. Botones y enlaces
   6. Encabezado
   7. Pie de página
   8. Piezas compartidas: fichas, listas de normas, marcadores, franja final
   9. Inicio
  10. Página de servicio
  11. Torre VENTURO
  12. Cotización y formularios
  13. Catálogo de servicios y códigos QR
  14. Pantallas medianas y pequeñas
  15. Impresión
   ========================================================================== */


/* 1. MARCA ---------------------------------------------------------------- */

@font-face { font-family: "TeX Gyre Adventor"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fuentes/texgyreadventor-regular.woff2") format("woff2"), url("../fuentes/texgyreadventor-regular.woff") format("woff"); }
@font-face { font-family: "TeX Gyre Adventor"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fuentes/texgyreadventor-bold.woff2") format("woff2"), url("../fuentes/texgyreadventor-bold.woff") format("woff"); }
@font-face { font-family: "Caladea"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fuentes/caladea-regular.woff2") format("woff2"), url("../fuentes/caladea-regular.woff") format("woff"); }
@font-face { font-family: "Caladea"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fuentes/caladea-bold.woff2") format("woff2"), url("../fuentes/caladea-bold.woff") format("woff"); }
@font-face { font-family: "Caladea"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fuentes/caladea-italic.woff2") format("woff2"), url("../fuentes/caladea-italic.woff") format("woff"); }

:root {
  /* Colores de la marca */
  --cafe: #553A22;
  --cafe-oscuro: #34251A;
  --cafe-claro: #9A7350;
  --tinta: #111111;
  --crema: #F1EEE7;
  --papel: #FAF8F3;
  --arena: #CBB89C;
  --arena-clara: #E7E0D3;
  --gris-calido: #5A4E44;          /* texto secundario */

  /* Tipografías */
  --titulos: 'TeX Gyre Adventor', 'Century Gothic', sans-serif;
  --texto: Caladea, Cambria, Georgia, serif;

  /* Medidas generales */
  --ancho-pagina: 1240px;
  --lateral: clamp(20px, 5vw, 40px);     /* margen a los lados */
  --tramo: clamp(64px, 8vw, 112px);      /* aire arriba y abajo de cada sección */
  --raya: rgba(17, 17, 17, 0.16);        /* líneas finas sobre fondo claro */
}


/* 2. BASE ----------------------------------------------------------------- */

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

html { background: var(--tinta); -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
img { max-width: 100%; }

:where(a) { color: var(--cafe); }
:where(a:hover) { color: var(--cafe-oscuro); }
:focus-visible { outline: 2px solid var(--cafe-claro); outline-offset: 3px; }

[hidden] { display: none !important; }

/* Enlace para saltar al contenido con el teclado */
.saltar { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 12px 16px; background: var(--tinta); color: var(--crema); font-family: var(--titulos); font-size: 15px; line-height: 1; text-decoration: none; border-radius: 2px; }
.saltar:focus { top: 12px; }


/* 3. COMPOSICIÓN ---------------------------------------------------------- */

/* Caja centrada de cada sección. --arriba y --abajo cambian el aire vertical. */
.contenedor {
  --arriba: var(--tramo);
  --abajo: var(--tramo);
  max-width: var(--ancho-pagina);
  margin: 0 auto;
  padding: var(--arriba) var(--lateral) var(--abajo);
}
.sin-arriba { --arriba: 0px; }

/* Bloques uno debajo de otro, con separación grande */
.flujo { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 56px); }
.flujo--medio { gap: clamp(32px, 3.6vw, 48px); }
.flujo--normas { gap: clamp(36px, 4vw, 52px); }

/* Dos columnas que pasan a una sola cuando no caben */
.dos { --columna-minima: 420px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--columna-minima), 100%), 1fr)); gap: 40px 72px; }
.dos--amplia { --columna-minima: 440px; }
.fila-24 { row-gap: 24px; }
.fila-36 { row-gap: 36px; }
.fila-44 { row-gap: 44px; }
.fila-48 { row-gap: 48px; }
.centrado { align-items: center; }
.arriba { align-items: start; }

/* Título de sección a la izquierda y entradilla a la derecha */
.encabezado { row-gap: 20px; align-items: end; }

/* Pilas: elementos apilados con una separación fija en píxeles */
.pila-2, .pila-4, .pila-8, .pila-12, .pila-14, .pila-18, .pila-22, .pila-26, .pila-32 { display: flex; flex-direction: column; }
.pila-2 { gap: 2px; }
.pila-4 { gap: 4px; }
.pila-8 { gap: 8px; }
.pila-12 { gap: 12px; }
.pila-14 { gap: 14px; }
.pila-18 { gap: 18px; }
.pila-22 { gap: 22px; }
.pila-26 { gap: 26px; }
.pila-32 { gap: 32px; }

/* Botón y enlace en una misma línea */
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.acciones--juntas { gap: 16px 28px; }

/* Fondos de sección */
.oscura { background: var(--cafe-oscuro); color: var(--crema); }
.arena { background: var(--arena-clara); }


/* 4. TIPOGRAFÍA ----------------------------------------------------------- */

.titulo-1, .titulo-2, .titulo-3, .titulo-4 { font-family: var(--titulos); }

.titulo-1 { font-weight: 400; font-size: clamp(40px, 4.45vw, 64px); line-height: 1.05; letter-spacing: -0.022em; }
.titulo-1--servicio { font-size: clamp(36px, 3.75vw, 54px); line-height: 1.07; }
.titulo-1--cotizacion { font-size: clamp(38px, 4vw, 58px); }
.titulo-1--torre { font-size: clamp(44px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.025em; }

.titulo-2 { font-weight: 400; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -0.018em; }
.titulo-2--grande { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.02em; }
.titulo-2--menor { font-size: clamp(28px, 2.7vw, 38px); line-height: 1.12; letter-spacing: -0.015em; }

.titulo-3 { font-weight: 700; font-size: 22px; line-height: 1.25; }
.titulo-4 { font-weight: 700; font-size: 21px; line-height: 1.25; }

.equilibrado { text-wrap: balance; }

.entradilla { max-width: 30em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; }
.texto-17 { font-size: 17px; line-height: 1.5; }
.nota { font-size: 15px; line-height: 1.5; color: var(--gris-calido); }
.nota--clara { color: var(--arena); }
.cursiva { font-style: italic; color: var(--gris-calido); }
.suave { color: var(--gris-calido); }
.etiqueta { font-family: var(--titulos); font-weight: 700; font-size: 14px; line-height: 1.95; color: var(--cafe); }
.numero { font-family: var(--titulos); font-size: 40px; line-height: 1; color: var(--cafe); }
.partible { overflow-wrap: anywhere; }

/* Los números de ley (160-21), los reglamentos (R-021) y los teléfonos no se parten en dos renglones.
   No hay que escribir esta clase en las páginas: js/sitio.js reconoce esos números y se la pone.
   "all: unset" hace que el número conserve el aspecto del texto que lo rodea, diga lo que diga otra regla. */
.junto { all: unset !important; display: contents !important; white-space: nowrap !important; }

/* Ancho máximo de un texto, en "emes" (el número es la cantidad de emes) */
.ancho-17 { max-width: 17em; }
.ancho-28 { max-width: 28em; }
.ancho-29 { max-width: 29em; }
.ancho-30 { max-width: 30em; }
.ancho-31 { max-width: 31em; }
.ancho-32 { max-width: 32em; }
.ancho-34 { max-width: 34em; }
.ancho-36 { max-width: 36em; }
.ancho-40 { max-width: 40em; }
.ancho-46 { max-width: 46em; }


/* 5. BOTONES Y ENLACES ---------------------------------------------------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px;
  background: var(--cafe); border: 0; border-radius: 2px;
  color: var(--crema);
  font-family: var(--titulos); font-weight: 700; font-size: 16px; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease;
}
.boton:hover { background: var(--cafe-oscuro); }
.boton--claro { background: var(--crema); color: var(--cafe-oscuro); }
.boton--claro:hover { background: #FFFFFF; }
.boton--mediano { min-height: 54px; padding: 0 28px; }
.boton--envio { padding: 0 32px; }
.boton--suelto { align-self: flex-start; }

.enlace {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--titulos); font-size: 16px; line-height: 1;
  color: var(--tinta);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.enlace:hover { text-decoration-thickness: 2px; }
.enlace--claro { color: var(--crema); }
.enlace--cafe { color: var(--cafe); }
.enlace--suelto { align-self: flex-start; }
.enlace--pie { margin-top: auto; min-height: 54px; padding-top: 10px; font-size: 15px; color: var(--cafe); }
/* Botón que se ve como un enlace (por ejemplo, «Imprimir») */
.enlace--boton { padding: 0; background: none; border: 0; cursor: pointer; }

/* Teléfono, WhatsApp y correo junto a una persona */
.telefono { font-size: 20px; color: var(--tinta); text-decoration: none; }
.canal { font-family: var(--titulos); font-size: 15px; color: var(--cafe); text-underline-offset: 4px; }
.correo { color: var(--tinta); text-underline-offset: 4px; }
.tactil { display: inline-flex; align-items: center; min-height: 44px; }


/* 6. ENCABEZADO ----------------------------------------------------------- */

.cabecera { position: relative; z-index: 20; background: var(--crema); border-bottom: 1px solid rgba(17, 17, 17, 0.14); font-family: var(--titulos); color: var(--tinta); }
/* Franja de contacto sobre el encabezado: WhatsApp e Instagram */
.franja { background: var(--cafe-oscuro); color: var(--arena); font-size: 13px; line-height: 1; }
.franja__interior { max-width: var(--ancho-pagina); min-height: 44px; margin: 0 auto; padding: 0 var(--lateral); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.franja__redes { display: flex; align-items: center; gap: 28px; white-space: nowrap; }
.franja__redes a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--arena); text-decoration: none; }
.franja__redes a:hover { color: var(--crema); }
.franja__nombre { font-weight: 700; color: var(--crema); }

.cabecera__barra { max-width: var(--ancho-pagina); min-height: 76px; margin: 0 auto; padding: 14px var(--lateral); display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.marca { display: flex; align-items: center; min-height: 44px; }
.marca img { display: block; width: 203.9px; height: 40px; }

.menu { flex: 1; display: flex; align-items: center; gap: 24px; }
.menu__enlaces { margin: 0 auto; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); font-size: 15px; line-height: 1; white-space: nowrap; }
.menu__enlaces a { padding: 10px 0 8px; border-bottom: 2px solid transparent; color: var(--tinta); text-decoration: none; }
.menu__enlaces a[aria-current] { border-bottom-color: var(--cafe); }
.boton--menu { min-height: 46px; padding: 0 22px; font-size: 15px; white-space: nowrap; }
.menu__enlaces .menu__red { display: none; }      /* WhatsApp e Instagram dentro del menú: solo en pantallas pequeñas */

/* Botón de tres rayas: solo aparece en pantallas pequeñas */
.menu-boton { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; padding: 0; background: transparent; border: 1px solid rgba(17, 17, 17, 0.35); border-radius: 2px; color: var(--tinta); cursor: pointer; }
.menu-boton svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }

@media (min-width: 1100px) {
  .menu__enlaces a:hover { border-bottom-color: var(--cafe-claro); }
  .menu__enlaces a[aria-current]:hover { border-bottom-color: var(--cafe); }
}


/* 7. PIE DE PÁGINA -------------------------------------------------------- */

.pie { background: var(--tinta); color: var(--crema); font-size: 16px; line-height: 1.55; }
.pie__interior { max-width: var(--ancho-pagina); margin: 0 auto; padding: clamp(56px, 7vw, 88px) var(--lateral) 36px; display: flex; flex-direction: column; gap: 56px; }
.pie__columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 44px 48px; }

.pie__marca { display: flex; flex-direction: column; gap: 22px; }
.pie__logo { align-self: flex-start; display: block; }
.pie__logo img { display: block; width: 172px; height: 121.8px; }
.pie__lema { font-family: var(--titulos); font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.pie__resumen { max-width: 26ch; color: var(--arena); }

.pie__columna { display: flex; flex-direction: column; gap: 14px; }
.pie__columna h2 { font-family: var(--titulos); font-weight: 700; font-size: 15px; line-height: 1.3; }
.pie__columna a { color: var(--arena); text-decoration: none; }
.pie__columna a:hover { color: var(--crema); text-decoration: underline; }
.pie__persona { display: flex; flex-direction: column; }
.pie__persona span { color: var(--arena); }
.pie__persona a { color: var(--crema); }

.pie__legal { padding-top: 24px; border-top: 1px solid rgba(241, 238, 231, 0.22); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 40px; font-size: 14px; line-height: 1.5; color: #A89F94; }
.pie__datos { max-width: 78ch; }
.pie__enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.pie__enlaces a { color: var(--arena); }
.pie__enlaces a:hover { color: var(--crema); }

/* Barra fija de contacto: solo en pantallas pequeñas */
.barra-movil { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 12px; gap: 10px; background: var(--crema); border-top: 1px solid rgba(17, 17, 17, 0.18); font-family: var(--titulos); font-weight: 700; font-size: 15px; line-height: 1; }
.barra-movil a { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 2px; text-decoration: none; }
.barra-movil__principal { flex: 1 1 0; background: var(--cafe); color: var(--crema); }
.barra-movil__secundario { flex: 0 0 auto; padding: 0 18px; background: var(--crema); color: var(--tinta); border: 1px solid var(--tinta); }


/* 8. PIEZAS COMPARTIDAS --------------------------------------------------- */

/* Tarjeta de papel con sombra */
.tarjeta, .ficha { background: var(--papel); box-shadow: 0 30px 60px -34px rgba(17, 17, 17, 0.45); }
.tarjeta { scroll-margin-top: 24px; }

/* Ficha: tarjeta con título y lista de datos */
.ficha { --columna-etiqueta: 150px; font-size: 17px; line-height: 1.45; }
.ficha--ancha { --columna-etiqueta: 190px; }
.ficha__titulo { padding: 22px 26px 16px; border-bottom: 1px solid rgba(17, 17, 17, 0.2); font-family: var(--titulos); font-weight: 700; font-size: 18px; line-height: 1.2; }
.ficha__lista { margin: 0; padding: 4px 26px 12px; list-style: none; display: flex; flex-direction: column; }
.ficha__fila { display: grid; grid-template-columns: var(--columna-etiqueta) minmax(0, 1fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(17, 17, 17, 0.12); }
.ficha__fila:last-child { border-bottom: 0; }
.ficha__fila dt { font-family: var(--titulos); font-size: 14px; line-height: 1.75; color: var(--cafe); }

/* Lista con marcas de "hecho" */
.lista-hecha li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid rgba(17, 17, 17, 0.12); }
.lista-hecha li:last-child { border-bottom: 0; }
.lista-hecha li::before { content: ""; width: 20px; height: 20px; margin-top: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23553A22' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 10.5l4.5 4.5L17 5.5'/%3E%3C/svg%3E") no-repeat; }

/* Lista de normas: nombre a la izquierda, explicación a la derecha */
.normas { display: flex; flex-direction: column; border-top: 2px solid var(--tinta); font-size: 17px; line-height: 1.5; }
.normas--dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 0 72px; }
.norma { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid rgba(17, 17, 17, 0.2); }
.norma--ancha { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); }
.norma__nombre { font-family: var(--titulos); font-weight: 700; font-size: 15px; line-height: 1.7; color: var(--cafe); }

/* Marcador: hueco rayado donde irá una foto o un video */
.marcador { aspect-ratio: 4 / 3; padding: 24px; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #3D2C1F; background-image: repeating-linear-gradient(135deg, rgba(203, 184, 156, 0.2) 0, rgba(203, 184, 156, 0.2) 1px, transparent 1px, transparent 14px); border: 1px dashed rgba(203, 184, 156, 0.7); font-family: var(--titulos); font-size: 15px; line-height: 1.4; color: #E2D5C0; }
.marcador--claro { aspect-ratio: 16 / 10; background-color: #DDD4C3; background-image: repeating-linear-gradient(135deg, rgba(85, 58, 34, 0.18) 0, rgba(85, 58, 34, 0.18) 1px, transparent 1px, transparent 14px); border-color: rgba(85, 58, 34, 0.65); color: var(--cafe); }

/* Foto o video real que sustituye a un marcador */
.foto-marco { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.video-marco { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* Franja final con el llamado a cotizar */
.llamado { background: var(--cafe) url("../imagenes/isotipo-fondo.svg") no-repeat; background-position: right max(40px, calc((100vw - 1240px) / 2 + 40px)) bottom -92px; background-size: 300px 453px; color: var(--crema); }
.llamado .contenedor { --arriba: clamp(64px, 8vw, 104px); --abajo: clamp(64px, 8vw, 104px); display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }


/* 9. INICIO --------------------------------------------------------------- */

/* Portada: texto a la izquierda, presupuesto de ejemplo a la derecha */
.portada { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); }
.portada__texto { padding: 88px 56px 96px max(var(--lateral), calc((100vw - 1240px) / 2 + 40px)); display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.portada__nota { max-width: 34em; padding-top: 22px; border-top: 1px solid rgba(17, 17, 17, 0.14); font-size: 16px; line-height: 1.5; color: var(--gris-calido); text-wrap: balance; }
.portada__lado { position: relative; padding: 60px max(var(--lateral), calc((100vw - 1240px) / 2 + 40px)) 56px 60px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.portada__fondo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background: var(--cafe-oscuro); clip-path: polygon(96px 0, 100% 0, 100% 100%, 0 100%); }
.portada__plano { position: absolute; top: -40px; right: -120px; width: 860px; max-width: none; height: auto; opacity: 0.22; }
/* Si el fondo de la portada es una fotografía: llena el panel y se entona con el café de la marca */
.portada__plano.portada__plano--foto { top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: grayscale(1) contrast(1.06); mix-blend-mode: luminosity; }
.portada__pie { position: relative; max-width: 33em; background: var(--cafe-oscuro); box-shadow: 0 0 14px 12px var(--cafe-oscuro); font-size: 16px; line-height: 1.5; color: var(--arena); }

/* Hoja de presupuesto de ejemplo */
.hoja { position: relative; background: var(--papel); color: var(--tinta); box-shadow: 0 30px 60px -30px rgba(17, 17, 17, 0.6); font-size: 16px; line-height: 1.3; }
.hoja__cabeza { padding: 22px 24px 16px; display: flex; flex-direction: column; gap: 6px; }
.hoja__titulos { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.hoja__titulo { font-family: var(--titulos); font-weight: 700; font-size: 18px; line-height: 1.2; }
.hoja__etiqueta { font-style: italic; font-size: 15px; color: var(--gris-calido); }
.hoja__ayuda { font-size: 15px; line-height: 1.4; color: var(--gris-calido); }
.hoja__pie { padding: 16px 24px 22px; font-size: 15px; line-height: 1.45; color: var(--gris-calido); }

/* Renglón del presupuesto: código, partida, unidad, importe y signo */
.partida { width: 100%; min-height: 50px; padding: 12px 24px; display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px 76px 16px; column-gap: 12px; align-items: center; background: transparent; border: 0; border-bottom: 1px solid rgba(17, 17, 17, 0.12); color: var(--tinta); font-family: inherit; font-size: 16px; line-height: 1.3; text-align: left; cursor: pointer; }
.partida--encabezado { min-height: 0; padding: 9px 24px; text-align: start; border-top: 1px solid rgba(17, 17, 17, 0.2); border-bottom: 1px solid rgba(17, 17, 17, 0.2); font-family: var(--titulos); font-size: 13px; line-height: 1.2; color: var(--gris-calido); cursor: default; }
.partida__importe { text-align: right; }
.partida__codigo { color: var(--cafe); }
.partida__signo { font-family: var(--titulos); font-size: 19px; line-height: 1; text-align: right; color: var(--cafe); }
.partida__signo::before { content: "+"; }
button.partida:hover { background: #F4EFE6; }
.partida[aria-expanded="true"], button.partida[aria-expanded="true"]:hover { background: #EFE9DD; }
.partida[aria-expanded="true"] .partida__nombre { font-weight: 700; }
.partida[aria-expanded="true"] .partida__signo::before { content: "\2212"; }

/* Barras que tapan los importes del ejemplo. largo-N es su largo en píxeles. */
.barra { display: block; justify-self: end; width: 100%; height: 10px; background: var(--arena); }
.barra--fina { height: 8px; background: #D5C8B1; }
.largo-26 { max-width: 26px; } .largo-28 { max-width: 28px; } .largo-30 { max-width: 30px; } .largo-32 { max-width: 32px; }
.largo-34 { max-width: 34px; } .largo-36 { max-width: 36px; } .largo-38 { max-width: 38px; } .largo-40 { max-width: 40px; }
.largo-42 { max-width: 42px; } .largo-44 { max-width: 44px; } .largo-46 { max-width: 46px; } .largo-48 { max-width: 48px; }
.largo-50 { max-width: 50px; } .largo-52 { max-width: 52px; } .largo-54 { max-width: 54px; } .largo-56 { max-width: 56px; }
.largo-58 { max-width: 58px; } .largo-60 { max-width: 60px; } .largo-64 { max-width: 64px; } .largo-70 { max-width: 70px; }
.largo-76 { max-width: 76px; }

/* Análisis de precio unitario que se abre bajo cada partida */
.apu { padding: 16px 24px 20px 88px; display: flex; flex-direction: column; gap: 14px; background: #EFE9DD; border-bottom: 1px solid rgba(17, 17, 17, 0.12); font-size: 15px; line-height: 1.35; }
.apu__titulo { font-family: var(--titulos); font-weight: 700; font-size: 13.5px; line-height: 1.3; color: var(--cafe); }
.apu__grupo { display: flex; flex-direction: column; gap: 7px; }
.apu__fila { display: grid; grid-template-columns: minmax(0, 1fr) 40px 76px 16px; column-gap: 12px; align-items: center; }

/* Compromisos: promesa a la izquierda, prueba a la derecha */
.compromisos { display: flex; flex-direction: column; border-top: 2px solid var(--tinta); }
.compromiso { row-gap: 18px; padding: 30px 0; border-bottom: 1px solid var(--raya); }

/* Escalera de servicios: cada peldaño es más alto y más oscuro que el anterior */
.escalera { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-items: end; }
.peldano { min-height: 400px; padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; background: var(--papel); color: var(--tinta); }
.peldano__para { font-style: italic; font-size: 16px; line-height: 1.45; color: var(--gris-calido); }
.peldano--2 { min-height: 450px; background: var(--arena-clara); }
.peldano--3 { min-height: 500px; background: var(--arena); }
.peldano--3 .numero, .peldano--3 .peldano__para, .peldano--3 .enlace--pie { color: var(--cafe-oscuro); }
.peldano--4 { min-height: 550px; background: var(--cafe); color: var(--crema); }
.peldano--4 .numero { color: var(--arena); }
.peldano--4 .peldano__para { color: #E2D5C0; }
.peldano--4 .enlace--pie { color: var(--crema); }

/* Servicios puntuales: texto a la izquierda y lista de los ocho servicios a la derecha */
.puntuales { row-gap: 28px; padding-top: 28px; border-top: 2px solid var(--tinta); }
.puntuales__lista { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); border-top: 1px solid var(--raya); font-size: 17px; line-height: 1.35; }
.puntuales__lista li { border-bottom: 1px solid var(--raya); }
.puntuales__lista a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: baseline; min-height: 48px; padding: 12px 20px 12px 0; color: var(--tinta); text-decoration: none; }
.puntuales__lista a span:first-child { font-family: var(--titulos); font-size: 15px; color: var(--cafe); }
.puntuales__lista a:hover span:last-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* A quién le construimos */
.segmentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 36px 48px; }
.segmento { padding-top: 22px; border-top: 2px solid var(--tinta); display: flex; flex-direction: column; gap: 12px; }
.segmento__quien { font-style: italic; font-size: 18px; line-height: 1.4; color: var(--gris-calido); }
.segmento__mensaje { font-family: var(--titulos); font-size: 25px; line-height: 1.28; letter-spacing: -0.01em; }

/* Datos de Torre VENTURO sobre fondo oscuro */
.datos { display: flex; flex-direction: column; border-top: 1px solid rgba(241, 238, 231, 0.28); font-size: 17px; line-height: 1.45; }
.dato { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(241, 238, 231, 0.28); }
.dato dt { font-family: var(--titulos); font-size: 14px; line-height: 1.75; color: var(--arena); }

/* Nosotros */
.retrato { display: block; width: 100%; max-width: 500px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 30px 60px -34px rgba(17, 17, 17, 0.5); }
.persona { padding-top: 22px; border-top: 2px solid var(--tinta); display: flex; flex-direction: column; gap: 6px; }
.persona__contacto { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; }

/* Quién dirige su obra: título, franja de tres paneles con imagen y nota */
.direccion__cabeza { --abajo: clamp(36px, 4vw, 56px); }
.direccion__pie { --arriba: 22px; }
.frentes { max-width: 1920px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--cafe-oscuro); color: var(--crema); }
.frente { display: flex; flex-direction: column; }
.frente + .frente { border-left: 1px solid rgba(203, 184, 156, 0.26); }
.frente__imagen { display: block; width: 100%; height: auto; aspect-ratio: 40 / 29; object-fit: cover; }
.frente__texto { padding: 22px var(--lateral) 40px; display: flex; flex-direction: column; gap: 8px; }
.frente__texto p { max-width: 24em; color: var(--arena); }
/* Si el panel lleva una fotografía, esta clase la entona con el café de la marca (opcional) */
.frente__imagen--cafe { opacity: 0.85; filter: grayscale(1) contrast(1.06); mix-blend-mode: luminosity; }


/* 10. PÁGINA DE SERVICIO -------------------------------------------------- */

.portada-servicio { --arriba: clamp(52px, 6.4vw, 92px); }
.antetitulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; line-height: 1.3; }
.antetitulo__nombre { font-family: var(--titulos); font-weight: 700; font-size: 19px; color: var(--cafe); }
.antetitulo__detalle { font-style: italic; font-size: 17px; color: var(--gris-calido); }

.entregable { padding-top: 22px; border-top: 2px solid var(--tinta); display: flex; flex-direction: column; gap: 10px; }

/* Ruta de permisos */
.pasos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.paso { min-height: 250px; padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 12px; background: #3F2D20; }
.paso .numero { color: var(--arena); }
.paso__entidad { margin-top: auto; font-style: italic; font-size: 16px; line-height: 1.45; color: var(--arena); }
.paso--final { background: var(--crema); color: var(--tinta); }
.paso--final .numero { color: var(--cafe); }
.paso--final .paso__entidad { color: var(--gris-calido); }


/* 11. TORRE VENTURO ------------------------------------------------------- */

.portada-torre { --arriba: clamp(56px, 7vw, 100px); --abajo: clamp(56px, 7vw, 100px); }
.portada-torre__ante { font-style: italic; font-size: 18px; line-height: 1.4; color: var(--arena); }

/* Tabla del expediente */
.expediente { display: flex; flex-direction: column; border-top: 2px solid var(--tinta); font-size: 18px; line-height: 1.45; }
.tramite { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 150px; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--raya); }
.tramite--encabezado { align-items: normal; padding: 12px 0; border-bottom-color: rgba(17, 17, 17, 0.2); font-family: var(--titulos); font-size: 14px; line-height: 1.3; color: var(--gris-calido); }
.tramite__paso { font-family: var(--titulos); font-weight: 700; font-size: 18px; line-height: 1.3; }

/* Estado de cada trámite. Cambie la clase para cambiar el color de la etiqueta. */
.estado { justify-self: start; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid; border-radius: 2px; font-family: var(--titulos); font-weight: 700; font-size: 13.5px; line-height: 1; white-space: nowrap; }
.estado--completado { background: var(--cafe); border-color: var(--cafe); color: var(--crema); }
.estado--en-tramite { background: var(--arena-clara); border-color: var(--cafe); color: var(--cafe); }
.estado--pendiente { background: transparent; border-color: rgba(17, 17, 17, 0.5); color: var(--tinta); }
.estado--por-definir { background: transparent; border: 1px dashed rgba(17, 17, 17, 0.55); color: var(--gris-calido); }


/* 12. COTIZACIÓN Y FORMULARIOS ------------------------------------------- */

.cotizacion { --arriba: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px 72px; align-items: start; }

.formulario { padding: 32px 32px 36px; display: flex; flex-direction: column; gap: 26px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px 24px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label, .grupo legend { font-family: var(--titulos); font-size: 14px; line-height: 1.3; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: #FFFFFF; border: 1px solid rgba(17, 17, 17, 0.5); border-radius: 2px; font-family: var(--texto); font-size: 17px; color: var(--tinta); }
.campo textarea { min-height: 140px; line-height: 1.5; resize: vertical; }
.opcional { font-family: var(--texto); font-style: italic; color: var(--gris-calido); }

.grupo { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.grupo legend { padding: 0; margin-bottom: 8px; }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0 24px; font-size: 17px; line-height: 1.35; }
.opciones--en-linea { display: flex; flex-wrap: wrap; gap: 0 36px; }
.opcion { display: flex; align-items: center; gap: 12px; min-height: 46px; }
.opcion input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--cafe); }

.consentimiento { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.consentimiento input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--cafe); }
.consentimiento label { font-size: 15px; line-height: 1.5; color: var(--gris-calido); }

.formulario__error { padding: 12px 14px; background: #FBEEEA; border: 1px solid #9C2B1B; border-radius: 2px; font-size: 16px; line-height: 1.45; color: #7A1F12; }

/* Mensaje que sustituye al formulario después de enviarlo */
.formulario-listo { padding: 40px 32px 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.formulario-listo h2 { font-family: var(--titulos); font-weight: 700; font-size: 26px; line-height: 1.2; }
.formulario-listo:focus, .aviso-listo:focus { outline: none; }

/* Columna lateral de contacto */
.lateral { padding-top: clamp(0px, 1vw, 14px); display: flex; flex-direction: column; gap: 44px; }
.lateral__titulo { padding-bottom: 14px; border-bottom: 2px solid var(--tinta); font-family: var(--titulos); font-weight: 700; font-size: 21px; line-height: 1.25; }
.contacto-persona { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; align-items: center; }
.contacto-persona img { display: block; width: 92px; height: 92px; object-fit: cover; }
.contacto-persona__nombre { font-family: var(--titulos); font-weight: 700; font-size: 19px; line-height: 1.3; }
.lateral__telefonos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.despues { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.despues li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.despues__numero { font-family: var(--titulos); font-size: 28px; line-height: 1; color: var(--cafe); }

.privacidad { --arriba: clamp(56px, 6.4vw, 88px); --abajo: clamp(56px, 6.4vw, 88px); }
.privacidad__texto { display: flex; flex-direction: column; gap: 16px; font-size: 17px; line-height: 1.55; }

/* Formulario de la bitácora (Torre VENTURO) */
.aviso { padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 18px; }
.aviso-listo { padding: 28px 28px 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }


/* 13. CATÁLOGO DE SERVICIOS Y CÓDIGOS QR --------------------------------- */

.ancla { scroll-margin-top: 16px; }

/* Índice «¿Qué necesita?»: cada renglón lleva a su servicio */
.indice { line-height: 1.4; }
.indice__lista { margin: 0; padding: 2px 26px 10px; list-style: none; display: flex; flex-direction: column; }
.indice__lista li { border-bottom: 1px solid rgba(17, 17, 17, 0.12); }
.indice__lista li:last-child { border-bottom: 0; }
.indice__lista a { display: flex; flex-direction: column; gap: 1px; padding: 11px 0; color: var(--tinta); text-decoration: none; }
.indice__lista a:hover .indice__servicio { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.indice__servicio { font-family: var(--titulos); font-weight: 700; font-size: 14px; line-height: 1.6; color: var(--cafe); }

/* Lista de servicios. Cada servicio: nombre y resumen, lo que recibe y tarjeta con código QR. */
.servicios { display: flex; flex-direction: column; border-top: 2px solid var(--tinta); }
.servicio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 250px; gap: 32px 56px; align-items: start; padding: 44px 0 48px; border-bottom: 1px solid var(--raya); scroll-margin-top: 16px; }
.servicio__resumen { font-size: 19px; line-height: 1.45; }
.servicio__para { font-style: italic; font-size: 16px; line-height: 1.45; color: var(--gris-calido); }
.servicio__lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(17, 17, 17, 0.2); font-size: 17px; line-height: 1.45; }
.servicio__lista li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid rgba(17, 17, 17, 0.12); }
.servicio__lista li::before { content: ""; width: 20px; height: 20px; margin-top: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23553A22' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 10.5l4.5 4.5L17 5.5'/%3E%3C/svg%3E") no-repeat; }
.servicio__nota { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--gris-calido); }
.servicio__nota strong { font-family: var(--titulos); font-size: 14px; color: var(--cafe); }

/* Tarjeta con código QR. Toda la tarjeta es un enlace: el código lo dibuja js/codigo-qr.js
   dentro de "qr__codigo" con la dirección de ese mismo enlace. */
.qr { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px; background: var(--papel); box-shadow: 0 30px 60px -34px rgba(17, 17, 17, 0.45); color: var(--tinta); text-decoration: none; overflow-wrap: break-word; }
.qr__codigo { display: block; width: 100%; max-width: 196px; aspect-ratio: 1 / 1; margin-bottom: 8px; }
.qr__codigo svg { display: block; width: 100%; height: 100%; }
.qr__titulo { font-family: var(--titulos); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--cafe); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.qr__ayuda { font-size: 15px; line-height: 1.45; color: var(--gris-calido); }
.qr:hover .qr__titulo { text-decoration-thickness: 2px; }

/* Tarjeta en fila: código a la izquierda y texto a la derecha */
.qr--fila { display: grid; grid-template-columns: 147px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; row-gap: 4px; align-items: start; }
.qr--fila .qr__codigo { grid-row: 1 / 3; margin-bottom: 0; }
.qr--fila .qr__titulo { align-self: end; }

/* Tarjetas con código una al lado de otra: tres si caben con al menos 360 píxeles cada una; si no, dos o una */
.codigos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 24px; }

/* Si el código no se pudo dibujar (enlace demasiado largo), la tarjeta queda solo con el texto */
.qr--sin-codigo { display: flex; flex-direction: column; }
.qr--sin-codigo .qr__codigo { display: none; }

/* Mientras se editan los textos (COMO-EDITAR.html), el hueco del código se ve rayado */
[data-editando] .qr__codigo { background-color: var(--arena-clara); background-image: repeating-linear-gradient(135deg, rgba(85, 58, 34, 0.18) 0, rgba(85, 58, 34, 0.18) 1px, transparent 1px, transparent 10px); outline: 1px dashed rgba(85, 58, 34, 0.65); outline-offset: -1px; }


/* 14. PANTALLAS MEDIANAS Y PEQUEÑAS -------------------------------------- */

/* Menú plegado bajo el botón de tres rayas */
@media (max-width: 1099px) {
  .menu-boton { display: flex; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 20px 24px; background: var(--crema); border-bottom: 1px solid rgba(17, 17, 17, 0.14); }
  .menu.abierto { display: flex; }
  .menu__enlaces { margin: 0; flex-direction: column; align-items: stretch; gap: 0; font-size: 18px; white-space: normal; }
  .menu__enlaces a, .menu__enlaces a[aria-current] { display: flex; align-items: center; min-height: 55px; padding: 0; border-bottom: 1px solid rgba(17, 17, 17, 0.12); }
  .boton--menu { min-height: 54px; margin-top: 20px; font-size: 16px; }
  .menu__enlaces a.menu__red { display: flex; justify-content: space-between; gap: 16px; }
  .menu__red span + span { font-size: 15px; color: var(--gris-calido); }
}

/* Catálogo: el código QR pasa debajo del servicio, en fila */
@media (max-width: 1100px) {
  .servicio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .servicio .qr { grid-column: 1 / -1; justify-self: start; width: 100%; max-width: 520px; display: grid; grid-template-columns: 147px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; row-gap: 4px; align-items: start; }
  .servicio .qr .qr__codigo { grid-row: 1 / 3; margin-bottom: 0; }
  .servicio .qr .qr__titulo { align-self: end; }
  .servicio .qr--sin-codigo { display: flex; }
}

/* Escalera de servicios en dos columnas */
@media (min-width: 901px) and (max-width: 1180px) {
  .escalera { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .peldano { min-height: 0; }
}

/* Teléfonos y tabletas en vertical */
@media (max-width: 900px) {
  .portada { grid-template-columns: minmax(0, 1fr); }
  .portada__texto { padding: 52px var(--lateral) 48px; }
  .portada__lado { padding: 168px var(--lateral) 48px; }      /* el aire de arriba deja ver el plano de fondo */
  .portada__fondo { clip-path: polygon(0 32px, 100% 0, 100% 100%, 0 100%); }
  .portada__plano { top: 22px; right: -52px; width: 480px; opacity: 0.3; }

  .frentes { grid-template-columns: minmax(0, 1fr); }
  .frente + .frente { border-left: 0; border-top: 1px solid rgba(203, 184, 156, 0.26); }
  .frente__texto { padding-bottom: 34px; }

  .partida { grid-template-columns: 44px minmax(0, 1fr) 30px 52px 12px; column-gap: 10px; padding-left: 18px; padding-right: 18px; }
  .apu { padding-left: 18px; padding-right: 18px; }
  .apu__fila { grid-template-columns: minmax(0, 1fr) 30px 52px 12px; column-gap: 10px; }
  .hoja__cabeza, .hoja__pie { padding-left: 18px; padding-right: 18px; }

  .peldano, .paso { min-height: 0; }
  .llamado { background-image: none; }
  .norma { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ficha__fila { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .tramite { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tramite--encabezado { display: none; }
  .estado { margin-top: 6px; }

  .cotizacion { grid-template-columns: minmax(0, 1fr); }
  .formulario, .formulario-listo { padding: 24px 20px 28px; }

  .franja { display: none; }

  .servicio { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 36px 0 40px; }
  .codigos { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .qr--fila, .servicio .qr { grid-template-columns: 98px minmax(0, 1fr); column-gap: 16px; padding: 16px 16px 18px; }

  .barra-movil { display: flex; }
  .pie__interior { padding-bottom: 104px; }
  .pie__columna { gap: 0; }
  .pie__columna h2 { margin-bottom: 6px; }
  .pie__columna a, .pie__enlaces a { display: flex; align-items: center; min-height: 44px; }
  .pie__persona { padding-top: 8px; }
}

/* Teléfonos muy estrechos */
@media (max-width: 340px) {
  .qr--fila, .servicio .qr { column-gap: 12px; padding: 14px 12px 16px; }
}


/* 15. IMPRESIÓN ----------------------------------------------------------- */

/* Lo que sale al imprimir el catálogo o al guardarlo en PDF (botón «Imprimir o guardar en PDF»).
   Se quitan el menú, los botones y los fondos, y el catálogo se acomoda a la hoja:
   cada servicio en una franja con su código QR a la derecha.
   Estas reglas solo valen para catalogo.html, que lleva la clase "pagina-catalogo" en su <body>;
   las demás páginas se imprimen como las imprime el navegador. */
@page { margin: 13mm 14mm 14mm; }

@media print {
  body.pagina-catalogo { background: #FFFFFF; }
  body.pagina-catalogo { font-size: 10.5pt; line-height: 1.45; }
  .pagina-catalogo a { color: var(--tinta); }

  .pagina-catalogo .saltar, .pagina-catalogo .menu, .pagina-catalogo .menu-boton, .pagina-catalogo .barra-movil, .pagina-catalogo .acciones, .pagina-catalogo .llamado, .pagina-catalogo .servicio .enlace,
  .pagina-catalogo .pie__marca, .pagina-catalogo .pie__columna h2, .pagina-catalogo .pie__enlaces a,
  .pagina-catalogo .pie__columnas > .pie__columna:nth-child(2), .pagina-catalogo .pie__columnas > .pie__columna:nth-child(3) { display: none !important; }

  /* Encabezado de la hoja: logo a la izquierda y contacto a la derecha */
  .pagina-catalogo .cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 9px; background: none; border-bottom: 1.5pt solid var(--tinta); }
  .pagina-catalogo .cabecera__barra { order: -1; max-width: none; min-height: 0; margin: 0; padding: 0; }
  .pagina-catalogo .marca { min-height: 0; }
  .pagina-catalogo .marca img { width: 163px; height: 32px; }
  .pagina-catalogo .franja { display: block; background: none; color: var(--gris-calido); font-size: 8.5pt; }
  .pagina-catalogo .franja__interior { max-width: none; min-height: 0; margin: 0; padding: 0; flex-direction: column; align-items: flex-end; gap: 3px; }
  .pagina-catalogo .franja__redes { gap: 16px; }
  .pagina-catalogo .franja__redes a { min-height: 0; gap: 5px; color: var(--gris-calido); }
  .pagina-catalogo .franja__nombre { color: var(--tinta); }

  /* Secciones sin fondo y con menos aire */
  .pagina-catalogo .contenedor { --arriba: 20px; --abajo: 20px; max-width: none; padding-left: 0; padding-right: 0; }
  .pagina-catalogo .sin-arriba { --arriba: 0px; }
  .pagina-catalogo .arena, .pagina-catalogo .oscura { background: none; color: var(--tinta); }
  .pagina-catalogo .tarjeta, .pagina-catalogo .ficha, .pagina-catalogo .qr { background: none; box-shadow: none; }
  .pagina-catalogo .flujo { gap: 14px; }
  .pagina-catalogo h1, .pagina-catalogo h2, .pagina-catalogo h3, .pagina-catalogo h4 { break-after: avoid; }

  .pagina-catalogo .titulo-1, .pagina-catalogo .titulo-1--servicio { font-size: 25pt; line-height: 1.08; }
  .pagina-catalogo .titulo-2 { font-size: 17pt; }
  .pagina-catalogo .titulo-2--menor { font-size: 13pt; line-height: 1.15; }
  .pagina-catalogo .entradilla { max-width: none; font-size: 10.5pt; line-height: 1.45; }
  .pagina-catalogo .dos, .pagina-catalogo .dos--amplia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 28px; }
  .pagina-catalogo .encabezado { align-items: end; }

  /* Portada del catálogo: título arriba e índice en dos columnas */
  .pagina-catalogo .portada-servicio { --arriba: 20px; --abajo: 16px; display: block; }
  .pagina-catalogo .portada-servicio .pila-26 { gap: 10px; }
  .pagina-catalogo .antetitulo__nombre { font-size: 11pt; }
  .pagina-catalogo .antetitulo__detalle { font-size: 10pt; }
  .pagina-catalogo .indice { margin-top: 14px; border: 0.75pt solid rgba(17, 17, 17, 0.45); font-size: 9.5pt; }
  .pagina-catalogo .ficha__titulo { padding: 8px 14px 7px; font-size: 10.5pt; }
  .pagina-catalogo .indice__lista { padding: 0 14px 2px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; }
  .pagina-catalogo .indice__lista li, .pagina-catalogo .indice__lista li:last-child { border-bottom: 0.5pt solid rgba(17, 17, 17, 0.25); }
  .pagina-catalogo .indice__lista li:nth-last-child(-n+3) { border-bottom: 0; }
  .pagina-catalogo .indice__lista a { padding: 6px 0; }
  .pagina-catalogo .indice__servicio { font-size: 8pt; }

  /* Cada servicio: resumen, lo que recibe y código QR, sin partirse entre dos hojas */
  .pagina-catalogo .servicios { border-top-width: 1.5pt; }
  .pagina-catalogo .servicio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 31mm; gap: 8px 20px; padding: 11px 0 12px; break-inside: avoid; }
  .pagina-catalogo .servicio .pila-14 { gap: 6px; }
  .pagina-catalogo .servicio .pila-8 { gap: 3px; }
  .pagina-catalogo .numero { font-size: 17pt; }
  .pagina-catalogo .servicio__resumen { font-size: 10.5pt; line-height: 1.4; }
  .pagina-catalogo .servicio__para { font-size: 9pt; line-height: 1.4; }
  .pagina-catalogo .etiqueta { font-size: 8.5pt; line-height: 1.6; }
  .pagina-catalogo .servicio__lista { font-size: 9.5pt; line-height: 1.4; }
  .pagina-catalogo .servicio__lista li { grid-template-columns: 12px minmax(0, 1fr); gap: 8px; padding: 4px 0; }
  .pagina-catalogo .servicio__lista li::before { width: 12px; height: 12px; margin-top: 2px; background-size: 12px 12px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .pagina-catalogo .servicio__nota { margin-top: 5px; font-size: 8.5pt; line-height: 1.4; }
  .pagina-catalogo .servicio__nota strong { font-size: 8pt; }

  /* Códigos QR: 31 mm de lado, con su rótulo debajo */
  .pagina-catalogo .qr, .pagina-catalogo .qr--fila, .pagina-catalogo .servicio .qr { grid-column: auto; justify-self: stretch; width: auto; max-width: none; display: flex; flex-direction: column; gap: 3px; padding: 0; break-inside: avoid; }
  .pagina-catalogo .qr__codigo, .pagina-catalogo .qr--fila .qr__codigo, .pagina-catalogo .servicio .qr .qr__codigo { width: 31mm; max-width: none; margin: -2.5mm 0 0 -2.5mm; }
  .pagina-catalogo .qr__titulo { font-size: 8.5pt; line-height: 1.25; text-decoration: none; }
  .pagina-catalogo .qr__ayuda { display: none; }
  .pagina-catalogo .codigos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
  .pagina-catalogo .qr--fila .qr__titulo { align-self: flex-start; }
  .pagina-catalogo .qr--fila .qr__ayuda { display: block; font-size: 8.5pt; line-height: 1.35; }

  /* Pie de la hoja: contacto y datos de la empresa en tinta oscura */
  .pagina-catalogo .pie { margin-top: 6px; background: none; color: var(--tinta); font-size: 8.5pt; line-height: 1.4; break-inside: avoid; }
  .pagina-catalogo .pie__interior { max-width: none; padding: 8px 0 0; gap: 4px; border-top: 1.5pt solid var(--tinta); }
  .pagina-catalogo .pie__columnas { display: block; }
  .pagina-catalogo .pie__columna, .pagina-catalogo .pie__persona { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; padding: 0; }
  .pagina-catalogo .pie__columna a, .pagina-catalogo .pie__persona span, .pagina-catalogo .pie__persona a { display: inline; min-height: 0; color: var(--tinta); }
  .pagina-catalogo .pie__columna a[href^="https://wa.me"] { display: none; }
  .pagina-catalogo .pie__legal { padding-top: 0; border-top: 0; font-size: 8pt; color: var(--gris-calido); }
  .pagina-catalogo .pie__datos { display: none; }      /* el RNC y la dirección quedan en el sitio; la hoja impresa lleva solo el contacto */
}