/* ==========================================================================
   style.css · Demo "Constructor Management" (contratista, NEGOCIO FICTICIO) · Hammock AI
   --------------------------------------------------------------------------
   DE DÓNDE SALE
   Es el mismo style.css de base/ con dos cambios:
   1. Otros valores en los tokens de :root (el "tema"): colores, fuentes y
      radios. Ningún componente se reescribió para cambiar el aspecto.
   2. Al final, la sección 7 "Extras de esta demo": aviso de sitio de
      ejemplo, íconos de servicios, antes/después, pasos y banda de contacto.
   Si un cliente parte de esta demo, cambia los tokens y reutiliza los extras.

   CÓMO ESTÁ ORDENADO
   1. Tokens · 2. Reset y base · 3. Estructura · 4. Componentes ·
   5. Pantallas más grandes · 6. Preferencias e impresión · 7. Extras.
   Todo lo que está fuera de un @media es para un celular de ~360 px; las
   pantallas grandes solo AGREGAN reglas con @media (min-width: …).

   POR QUÉ NO HAY style="" EN EL HTML
   La política de seguridad (CSP) del sitio solo acepta estilos de este
   archivo. Un style="" en el HTML se ignora: todo el estilo vive aquí.
   ========================================================================== */


/* FUENTES PROPIAS =========================================================
   Alojadas en fonts/ (mismo sitio: nadie externo se entera de la visita).
   Licencia SIL Open Font License 1.1, que permite uso comercial; el texto
   de cada licencia va junto al archivo (fonts/OFL-*.txt) y en CREDITOS.md.
   font-display: swap = mientras la fuente carga se ve el texto con la del
   sistema, nunca una página en blanco. */
@font-face {
  font-family: "Archivo Black";
  src: url("fonts/archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 1. TOKENS (tema "Constructor Management") ==========================================
   Azul plano de obra + amarillo de seguridad + fondo color yeso.
   Contraste medido el 2026-10-21 (mínimo AA: 4,5:1 texto; 3:1 foco):
   texto/fondo 14,6 · texto-suave/fondo-alt 6,5 · texto oscuro/botón amarillo
   7,8 · blanco/portada azul 11,3 · amarillo/portada azul 5,5 ·
   pie 12,1 · foco/fondo-alt 4,5 · foco amarillo/portada 5,5.
   El botón amarillo sobre fondo claro mide 1,9:1 contra el fondo: está bien
   porque su texto lo identifica (WCAG 1.4.11 no exige borde en ese caso). */
:root {
  /* --- Color --- */
  --color-fondo: #f7f4ef;
  --color-fondo-alt: #ece6dc;
  --color-superficie: #ffffff;
  --color-texto: #1a2230;
  --color-texto-suave: #485062;
  --color-borde: #d9d1c3;
  --color-marca: #1f3b63;
  --color-marca-oscuro: #142a47;
  --color-sobre-marca: #ffffff;
  --color-acento: #f5a524;
  --color-sobre-acento: #1a2230;
  --color-enlace: var(--color-marca);
  --color-boton: var(--color-acento);      /* botones amarillos con texto oscuro */
  --color-boton-hover: #ffbd4a;
  --color-sobre-boton: #1a2230;
  --color-foco: #b8400b;
  --color-cabecera-fondo: var(--color-fondo);
  --color-hero-fondo: #1f3b63;
  --color-hero-texto: #ffffff;
  --color-hero-texto-suave: #d6dfeb;
  --color-hero-foco: var(--color-acento);
  --color-pie-fondo: #142a47;
  --color-pie-texto: #e6ebf2;
  --color-pie-foco: var(--color-acento);

  /* --- Tipografía --- */
  --fuente-texto: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-titulos: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --peso-titulos: 400;               /* Archivo Black ya es gruesa: 400 evita una "negrita falsa" */
  --espaciado-titulos: -0.01em;
  --texto-chico: 0.9375rem;
  --texto-base: 1.0625rem;           /* 17 px: Atkinson se lee mejor un poco más grande */
  --texto-grande: 1.1875rem;
  --titulo-1: clamp(2.125rem, 1.4rem + 3.4vw, 3.5rem);
  --titulo-2: clamp(1.625rem, 1.25rem + 1.8vw, 2.375rem);
  --titulo-3: 1.1875rem;
  --interlineado: 1.6;
  --interlineado-titulos: 1.12;

  /* --- Espacio --- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4.5rem;
  --seccion-espacio: clamp(3.25rem, 2rem + 4.5vw, 6rem);
  --margen-lateral: 1rem;
  --ancho-max: 72rem;
  --ancho-texto: 42rem;
  --alto-cabecera: 4rem;

  /* --- Forma: esquinas más rectas que la base (más "de obra") --- */
  --radio-chico: 4px;
  --radio: 10px;
  --radio-grande: 16px;
  --radio-boton: 8px;
  --sombra: 0 1px 2px rgb(20 42 71 / 0.08), 0 8px 20px rgb(20 42 71 / 0.07);
}


/* 2. RESET Y BASE ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box; /* el ancho incluye el relleno y el borde */
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* La cabecera queda pegada arriba (sticky). Esto evita que tape el
     título de la sección al saltar desde el menú, o el elemento que
     recibe el foco con el teclado. */
  scroll-padding-top: calc(var(--alto-cabecera) + var(--esp-4));
}

/* El desplazamiento suave solo para quien NO pidió reducir el movimiento
   en su sistema (algunas personas se marean con animaciones). */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: var(--interlineado);
  overflow-wrap: break-word; /* palabras largas (correos) no rompen el ancho */
}

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

/* El atributo hidden siempre gana, aunque otra regla diga display. */
[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  margin: 0 0 var(--esp-4);
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  line-height: var(--interlineado-titulos);
  letter-spacing: var(--espaciado-titulos);
  text-wrap: balance; /* reparte el texto del título en líneas parejas */
}

h1 { font-size: var(--titulo-1); }
h2 { font-size: var(--titulo-2); }
h3 { font-size: var(--titulo-3); }

p,
ul,
ol,
dl,
figure {
  margin: 0 0 var(--esp-4);
}

:where(p, ul, ol, dl, figure):last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-enlace);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

/* FOCO VISIBLE: quien navega con teclado tiene que ver dónde está.
   :focus-visible lo muestra con teclado y no al hacer clic con el mouse.
   Nunca uses "outline: none" sin poner otro indicador en su lugar. */
:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
}

::selection {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}

/* Fuentes: ver @font-face arriba de los tokens. */


/* Utilidad: oculta un texto a la vista pero lo deja para lectores de
   pantalla (por ejemplo, "se abre en una pestaña nueva"). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Enlace "Saltar al contenido": es lo primero que encuentra el teclado.
   Está fuera de la pantalla y aparece solo cuando recibe el foco. */
.saltar {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: 100;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-chico);
  background: var(--color-texto);
  color: var(--color-fondo);
  font-weight: 700;
  transform: translateY(-200%);
}

.saltar:focus {
  transform: none;
}


/* 3. ESTRUCTURA ============================================================ */

/* Contenedor: ancho máximo y 16 px de margen a cada lado en celular. */
.contenedor {
  width: min(100% - 2 * var(--margen-lateral), var(--ancho-max));
  margin-inline: auto;
}

.seccion {
  padding-block: var(--seccion-espacio);
}

.seccion--alt {
  background: var(--color-fondo-alt);
}

.seccion__intro {
  max-width: var(--ancho-texto);
  margin-bottom: var(--esp-6);
  color: var(--color-texto-suave);
  font-size: var(--texto-grande);
}

/* main recibe el foco desde "Saltar al contenido" (tabindex="-1");
   no necesita anillo porque no es un control. */
main:focus {
  outline: none;
}


/* 4. COMPONENTES =========================================================== */

/* --- Cabecera y menú ---
   Sin JavaScript: los enlaces del menú se ven siempre, en una o dos filas.
   Con JavaScript: en celular se esconden detrás del botón "Menú".

   @media (scripting: enabled) es verdadero cuando el navegador ejecuta JS.
   Así el CSS esconde el menú desde el primer dibujo de la página, sin
   esperar a main.js (evita que la página "salte" al cargar). Navegadores
   antiguos que no la entienden muestran el menú abierto: sigue usable. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-cabecera-fondo);
  border-bottom: 1px solid var(--color-borde);
}

.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--esp-4);
  min-height: var(--alto-cabecera);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px; /* área táctil cómoda */
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos); /* mismo peso que los títulos (evita "negrita falsa") */
  font-size: 1.125rem;
  text-decoration: none;
}

.marca__logo {
  width: 2rem;
  height: 2rem;
}

.menu {
  flex-basis: 100%; /* sin JS: el menú baja a su propia fila */
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--esp-1);
  margin: 0;
  padding: 0 0 var(--esp-2);
  list-style: none;
}

.menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--esp-2);
  border-radius: var(--radio-chico);
  color: var(--color-texto);
  font-weight: 600;
  text-decoration: none;
}

.menu a:hover {
  background: var(--color-fondo-alt);
}

.boton-menu {
  display: none; /* sin JS no sirve, así que no se muestra */
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px;
  padding: 0 var(--esp-4);
  border: 1px solid var(--color-texto-suave);
  border-radius: var(--radio-boton);
  background: var(--color-superficie);
  color: var(--color-texto);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Ícono de tres líneas dibujado con CSS (no es una imagen). */
.boton-menu__icono,
.boton-menu__icono::before,
.boton-menu__icono::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.boton-menu__icono {
  position: relative;
}

.boton-menu__icono::before,
.boton-menu__icono::after {
  content: "";
  position: absolute;
  left: 0;
}

.boton-menu__icono::before { top: -6px; }
.boton-menu__icono::after { top: 6px; }

/* Abierto: las tres líneas forman una X. main.js solo cambia
   aria-expanded; el CSS lee ese atributo. Una sola fuente de verdad:
   lo que ve la persona y lo que anuncia el lector de pantalla coinciden. */
.boton-menu[aria-expanded="true"] .boton-menu__icono {
  background: transparent;
}

.boton-menu[aria-expanded="true"] .boton-menu__icono::before {
  transform: translateY(6px) rotate(45deg);
}

.boton-menu[aria-expanded="true"] .boton-menu__icono::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (scripting: enabled) {
  .boton-menu {
    display: inline-flex;
  }

  .menu {
    display: none;
  }

  /* "+" = el elemento que viene justo después del botón (el nav). */
  .boton-menu[aria-expanded="true"] + .menu {
    display: block;
  }

  .menu li {
    flex-basis: 100%; /* en celular, un enlace por fila: fácil con el pulgar */
    border-top: 1px solid var(--color-borde);
  }
}

/* --- Botones ---
   Son enlaces con forma de botón (llevan a WhatsApp, al teléfono, etc.).
   Alto mínimo 48 px: se tocan bien con el pulgar. */
.botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 48px;
  padding: var(--esp-3) var(--esp-5);
  border: 2px solid transparent; /* en modo de alto contraste se vuelve visible */
  border-radius: var(--radio-boton);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.boton svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.boton--principal {
  background: var(--color-boton);
  color: var(--color-sobre-boton);
}

.boton--principal:hover {
  background: var(--color-boton-hover);
  color: var(--color-sobre-boton);
}

.boton--secundario {
  border-color: currentColor;
  background: transparent;
  color: var(--color-texto);
}

/* color-mix: un velo del mismo color del texto. Funciona sobre fondo claro
   u oscuro sin tocar nada. Navegadores antiguos: sin velo (sigue usable). */
.boton--secundario:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: var(--color-texto);
}

.boton--ancho {
  width: 100%;
}

.etiqueta {
  display: inline-block;
  margin-bottom: var(--esp-4);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--radio-chico);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  font-size: var(--texto-chico);
  font-weight: 700;
}

/* --- Portada (hero) --- */
.hero {
  /* Dentro de la portada, "texto" y "foco" toman los colores de la portada.
     Así, si la portada es oscura, el botón secundario y el anillo de foco
     se ven bien sin escribir reglas nuevas: basta cambiar los tokens. */
  --color-texto: var(--color-hero-texto);
  --color-foco: var(--color-hero-foco);
  padding-block: var(--esp-7) var(--seccion-espacio);
  background: var(--color-hero-fondo);
  color: var(--color-hero-texto);
}

.hero__grilla {
  display: grid;
  gap: var(--esp-6);
  align-items: center;
}

.hero__bajada {
  max-width: 36rem;
  margin-bottom: var(--esp-6);
  color: var(--color-hero-texto-suave);
  font-size: var(--texto-grande);
}

.hero__imagen {
  width: 100%;
  border-radius: var(--radio-grande);
}

/* --- Tarjetas (servicios) ---
   repeat(auto-fit, minmax(…)): tantas columnas como quepan de al menos
   16rem. En celular cabe una; en escritorio, tres. Sin @media. */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--esp-4);
  padding: 0;
  list-style: none;
}

.tarjeta {
  padding: var(--esp-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  box-shadow: var(--sombra);
}

.tarjeta h3 {
  margin-bottom: var(--esp-2);
}

/* --- Galería (trabajos) --- */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--esp-4);
  padding: 0;
  list-style: none;
}

.galeria figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
}

.galeria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover; /* recorta la foto para que todas midan igual */
}

.galeria figcaption {
  padding: var(--esp-3) var(--esp-4);
  color: var(--color-texto-suave);
  font-size: var(--texto-chico);
}

/* --- Sobre nosotros --- */
.dos-columnas {
  display: grid;
  gap: var(--esp-6);
}

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

.lista-check {
  display: grid;
  gap: var(--esp-3);
  padding: 0;
  list-style: none;
}

.lista-check li {
  position: relative;
  padding-left: 2rem;
}

/* Visto bueno dibujado con bordes: es decoración, el texto dice lo importante. */
.lista-check li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0.35rem;
  width: 0.5rem;
  height: 0.85rem;
  border: solid var(--color-marca);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* --- Preguntas frecuentes (<details>) ---
   <details> abre y cierra sin JavaScript, funciona con teclado (Enter o
   Espacio) y el lector de pantalla anuncia si está abierta o cerrada. */
.preguntas {
  max-width: var(--ancho-texto);
}

.pregunta {
  border-bottom: 1px solid var(--color-borde);
}

.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: 44px;
  padding-block: var(--esp-4);
  font-weight: 700;
  list-style: none; /* quita el triángulo por defecto… */
  cursor: pointer;
}

.pregunta summary::-webkit-details-marker {
  display: none; /* …también en Safari */
}

/* Signo + y − dibujados con dos líneas de fondo (no con texto, para que
   el lector de pantalla no lea "más"). */
.pregunta summary::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}

.pregunta[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.pregunta__respuesta {
  padding-bottom: var(--esp-4);
  color: var(--color-texto-suave);
}

/* --- Contacto --- */
.contacto {
  display: grid;
  gap: var(--esp-6);
}

.contacto__acciones {
  display: grid;
  gap: var(--esp-3);
  max-width: 26rem;
  margin-top: var(--esp-5);
  padding: 0;
  list-style: none;
}

.panel {
  padding: var(--esp-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
}

.panel h3 {
  margin-bottom: var(--esp-3);
}

.panel h3:not(:first-child) {
  margin-top: var(--esp-6);
}

.horario div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--esp-4);
  padding-block: var(--esp-2);
  border-bottom: 1px dashed var(--color-borde);
}

.horario dt {
  font-weight: 600;
}

.horario dd {
  margin: 0;
}

address {
  font-style: normal;
}

/* --- Pie de página --- */
.pie {
  --color-foco: var(--color-pie-foco); /* el foco también se ve sobre fondo oscuro */
  padding-block: var(--esp-7) var(--esp-6);
  background: var(--color-pie-fondo);
  color: var(--color-pie-texto);
}

.pie a {
  color: inherit;
}

.pie__grilla {
  display: grid;
  gap: var(--esp-6);
}

.pie__nombre {
  margin-bottom: var(--esp-2);
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  font-size: 1.25rem;
}

.pie ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--esp-4);
  padding: 0;
  list-style: none;
}

.pie nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.pie__legal {
  padding-top: var(--esp-5);
  border-top: 1px solid rgb(255 255 255 / 0.2);
  font-size: var(--texto-chico);
}

/* --- Página 404 --- */
.error {
  max-width: var(--ancho-texto);
  padding-block: var(--seccion-espacio);
}


/* 5. PANTALLAS MÁS GRANDES ================================================= */

/* Desde 48em (768 px, tablet vertical): el menú se ve siempre en la
   cabecera y el botón "Menú" desaparece. */
@media (min-width: 48em) {
  .boton-menu {
    display: none;
  }

  .menu {
    display: block;
    flex-basis: auto;
  }

  .menu ul {
    padding-bottom: 0;
  }

  .menu li {
    flex-basis: auto;
    border-top: 0;
  }

  .contacto {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .pie__grilla {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .pie__legal {
    grid-column: 1 / -1;
  }
}

/* Desde 60em (960 px, escritorio): portada y "nosotros" a dos columnas. */
@media (min-width: 60em) {
  .hero__grilla {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .dos-columnas {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
}


/* 6. PREFERENCIAS DE LA PERSONA E IMPRESIÓN ================================ */

/* Quien pidió menos movimiento en su sistema: sin animaciones. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Modo de colores forzados (alto contraste de Windows): los fondos de
   color desaparecen, así que el ícono del menú usa el color del texto. */
@media (forced-colors: active) {
  .boton-menu__icono,
  .boton-menu__icono::before,
  .boton-menu__icono::after {
    background: CanvasText;
  }

  .boton-menu[aria-expanded="true"] .boton-menu__icono {
    background: transparent;
  }
}

@media print {
  .cabecera,
  .saltar,
  .boton-menu {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}


/* 7. EXTRAS DE ESTA DEMO ==================================================== */

/* --- Aviso "demo" ---
   Obligatorio en toda demo: nadie debe creer que es un negocio real. */
.aviso-demo {
  --color-foco: var(--color-texto); /* anillo oscuro sobre fondo amarillo */
  padding: var(--esp-2) var(--margen-lateral);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  font-size: var(--texto-chico);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.aviso-demo a {
  color: inherit;
}

/* --- Botón de demo ---
   En una demo, WhatsApp, teléfono y correo NUNCA llevan a un número o correo
   inventado (podría ser de una persona real). Llevan a https://hammockai.site
   y lo dicen en el mismo botón: la marca "ejemplo" y una segunda línea
   "¿Quieres un sitio así? → Hammock AI" (misma convención en todas las demos).
   En el sitio de un cliente se borran .boton--demo, .boton__marca y
   .boton__destino, y el href pasa a wa.me, tel: o mailto:. */
.boton--demo {
  justify-content: flex-start;
  padding-inline: var(--esp-4);
  text-align: left;
}

.boton__textos {
  display: grid;
  gap: 0.125rem;
}

.boton__destino {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.boton__marca {
  display: inline-block;
  margin-left: 0.25rem;
  vertical-align: 0.1em;
  line-height: 1.5;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radio-chico);
  background: var(--color-sobre-boton);
  color: var(--color-boton);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Marca con dos líneas: nombre y rubro --- */
.marca {
  gap: var(--esp-3);
  line-height: 1.05;
  flex: 1 1 0; /* celular: el nombre del template se parte en dos líneas y "Menú" queda al lado */
  min-width: 0;
}

@media (min-width: 48em) {
  .marca {
    flex: 0 1 auto; /* con el menú a la vista, la marca ocupa solo lo que mide */
    max-width: 12.5rem; /* el nombre va en dos líneas para que el botón quede en la misma fila */
  }
}

.marca__logo {
  width: 2.25rem;
  height: 2.25rem;
}

.marca__rubro {
  display: block;
  color: var(--color-texto-suave);
  font-family: var(--fuente-texto);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Botón de WhatsApp en la cabecera: solo en escritorio (en el celular ya
   está en la portada y no compite con el botón "Menú"). */
.cabecera__cta {
  display: none;
}

/* --- Portada: fondo azul con cuadrícula de plano (2 degradados de 1 px,
   sin imágenes) --- */
.hero {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

.hero .etiqueta {
  margin-bottom: var(--esp-5);
}

.resaltado {
  color: var(--color-acento);
}

.hero__puntos {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-6) 0 0;
  padding: 0;
  color: var(--color-hero-texto-suave);
  list-style: none;
}

.hero__puntos li {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
}

.hero__puntos svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2em;
  color: var(--color-acento);
}

.hero__imagen {
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.25);
}

/* --- Ícono de cada servicio --- */
.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--esp-4);
  border-radius: var(--radio);
  background: #fdf0d5;
  color: var(--color-marca);
}

.tarjeta__icono svg {
  width: 1.75rem;
  height: 1.75rem;
}

.tarjeta {
  border-top: 4px solid var(--color-acento);
}

/* --- Antes y después ---
   Celular: cada obra en una tarjeta, "antes" arriba y "después" abajo
   (imágenes grandes). Tablet: lado a lado. Escritorio: 3 obras por fila. */
.obras {
  display: grid;
  gap: var(--esp-5);
  padding: 0;
  list-style: none;
}

.obra {
  padding: var(--esp-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  box-shadow: var(--sombra);
}

.obra h3 {
  margin-bottom: var(--esp-3);
}

.obra__par {
  display: grid;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
}

.obra__foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radio-chico);
}

.obra__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* La etiqueta "Antes" / "Después" va sobre la imagen, con fondo sólido para
   que se lea sobre cualquier dibujo o foto. */
.obra__foto figcaption {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  padding: 0.125rem var(--esp-2);
  border-radius: var(--radio-chico);
  background: var(--color-texto);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
}

.obra__foto--despues figcaption {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}

.obra p {
  color: var(--color-texto-suave);
  font-size: var(--texto-chico);
}

/* Aviso honesto: son ilustraciones, no fotos de obras reales. */
.nota {
  max-width: var(--ancho-texto);
  margin-top: var(--esp-6);
  padding: var(--esp-4) var(--esp-5);
  border-left: 4px solid var(--color-acento);
  border-radius: var(--radio-chico);
  background: var(--color-superficie);
  color: var(--color-texto-suave);
  font-size: var(--texto-chico);
}

/* --- Así trabajamos: pasos numerados ---
   La lista es <ol> (el orden importa). El número grande lo dibuja CSS con
   un contador; el lector de pantalla ya anuncia "1 de 5" por ser lista. */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--esp-4);
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.paso {
  position: relative;
  padding: var(--esp-5) var(--esp-5) var(--esp-5) 4.75rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
}

.paso::before {
  content: counter(paso);
  counter-increment: paso;
  position: absolute;
  top: var(--esp-5);
  left: var(--esp-5);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-marca);
  color: #ffffff;
  font-family: var(--fuente-titulos);
  font-size: 1.0625rem;
}

.paso h3 {
  margin-bottom: var(--esp-2);
}

.paso p {
  color: var(--color-texto-suave);
}

/* --- Banda de contacto (azul con cuadrícula, como la portada) --- */
.banda {
  --color-texto: #ffffff;
  --color-foco: var(--color-acento);
  padding-block: var(--esp-7);
  background-color: var(--color-marca);
  background-image:
    linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  color: #ffffff;
}

.banda__fila {
  display: grid;
  gap: var(--esp-5);
  align-items: center;
}

.banda h2 {
  margin-bottom: var(--esp-2);
}

.banda p {
  color: var(--color-hero-texto-suave);
}

/* --- Pie: aviso de demo --- */
.pie__aviso {
  font-weight: 700;
}

@media (min-width: 36em) {
  .obra__par {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 60em) {
  .cabecera__cta {
    display: inline-flex;
    min-height: 44px;
    padding-block: var(--esp-2);
  }

  .obras {
    grid-template-columns: repeat(3, 1fr);
  }

  .obra__par {
    grid-template-columns: 1fr;
  }

  .banda__fila {
    grid-template-columns: 1fr auto;
  }
}