/* AMRender: papel claro y tinta azul marino, turquesa del logo AM para líneas y enlaces, amarillo sólo para
   cotizar y para el sello 360°. Letra de la marca: Barlow Condensed en títulos y Barlow en el texto. */
:root {
  --tinta: #131a33;
  --tinta-2: #4a5268;
  --papel: #f4f6f7;
  --blanco: #ffffff;
  --marino: #0c1326;
  --turquesa: #01a49e;
  --turquesa-texto: #04716d;
  --amarillo: #f3b802;
  --linea: rgba(19, 26, 51, 0.14);
  --f-titulo: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lado: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.55 var(--f-texto); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.02; margin: 0; letter-spacing: 0.005em; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.4vw, 48px); }
h3 { font-size: 23px; line-height: 1.12; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; border-radius: 4px; }
.ancho { width: min(1160px, 100% - 2 * var(--lado)); margin: 0 auto; }

/* barra superior */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
         padding: 10px var(--lado); background: rgba(244, 246, 247, 0.94); backdrop-filter: saturate(1.4) blur(10px);
         -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linea); }
.marca { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.marca img { width: auto; height: 30px; }
.marca span { font-family: var(--f-titulo); font-weight: 700; font-size: 25px; letter-spacing: 0.01em; color: var(--tinta); }
.menu { display: flex; align-items: center; gap: 18px; }
.menu a:not(.boton) { font-family: var(--f-titulo); font-weight: 600; font-size: 18px; text-decoration: none; color: var(--tinta-2); }
.menu a:not(.boton):hover, .menu a[aria-current="page"] { color: var(--tinta); }
.menu a[href="/#como-trabajamos"] { display: none; }
@media (min-width: 720px) { .menu a[href="/#como-trabajamos"] { display: inline; } }
@media (max-width: 380px) { .menu a[href="/portafolio/"] { display: none; } }

/* botones y enlaces */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 24px;
         border-radius: 999px; background: var(--amarillo); color: var(--marino); text-decoration: none;
         font-family: var(--f-titulo); font-weight: 600; font-size: 20px; letter-spacing: 0.01em; }
.boton:hover { background: #ffc61a; }
.boton-chico { min-height: 38px; padding: 6px 16px; font-size: 17px; }
.enlace { font-family: var(--f-titulo); font-weight: 600; font-size: 20px; color: var(--turquesa-texto);
          text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.enlace:hover { color: var(--tinta); }
.nota { color: var(--tinta-2); }

/* inicio: modelo contra render */
.hero { display: grid; }
.compara { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #dfe3e6; touch-action: pan-y;
           user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.compara picture, .compara .capa { position: absolute; inset: 0; width: 100%; height: 100%; }
.compara .capa { object-fit: cover; object-position: 50% 50%; }
.capa-maqueta-caja { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.divisor { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--blanco);
           box-shadow: 0 0 0 1px rgba(12, 19, 38, 0.18); pointer-events: none; }
.perilla { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
           width: 46px; height: 46px; border-radius: 50%; background: var(--blanco); color: var(--marino);
           font-family: var(--f-titulo); font-weight: 700; font-size: 18px; letter-spacing: 0.08em;
           box-shadow: 0 2px 12px rgba(12, 19, 38, 0.35); }
.chip { position: absolute; bottom: 14px; padding: 4px 11px 3px; border-radius: 999px; font-family: var(--f-titulo);
        font-weight: 600; font-size: 15px; pointer-events: none; }
.chip-modelo { left: 14px; background: rgba(255, 255, 255, 0.86); color: var(--marino); }
.chip-render { right: 14px; background: rgba(12, 19, 38, 0.72); color: var(--blanco); }
.pista { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px;
         background: rgba(12, 19, 38, 0.72); color: var(--blanco); font-size: 14px; white-space: nowrap;
         pointer-events: none; transition: opacity 0.5s ease; }
.pista.fuera { opacity: 0; }
.rango { position: absolute; inset: auto 0 0 0; width: 100%; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.compara:has(.rango:focus-visible) { outline: 3px solid var(--turquesa); outline-offset: -3px; }
.hero-texto { padding: 26px var(--lado) 38px; }
.hero h1 { font-size: clamp(44px, 12vw, 64px); font-weight: 700; line-height: 0.95; letter-spacing: -0.005em; }
.entrada { margin-top: 14px; font-size: 18.5px; color: var(--tinta-2); max-width: 34em; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(380px, 5fr) 8fr; align-items: center; min-height: calc(100svh - 61px); }
  .hero-texto { order: -1; padding: 48px 40px 48px max(var(--lado), calc((100vw - 1160px) / 2)); }
  .hero h1 { font-size: clamp(56px, 5.6vw, 92px); }
  .compara { aspect-ratio: auto; height: calc(100svh - 61px); min-height: 520px; }
  .chip { bottom: 20px; } .chip-modelo { left: 20px; } .chip-render { right: 20px; }
}

/* secciones */
.seccion { padding: 64px 0; }
.seccion-blanca { background: var(--blanco); }
.seccion-oscura { background: var(--marino); color: #eef0f3; }
.seccion-oscura .encabeza p { color: rgba(238, 240, 243, 0.72); }
.encabeza { display: grid; gap: 8px; margin-bottom: 28px; }
.encabeza p { color: var(--tinta-2); }
@media (min-width: 900px) {
  .seccion { padding: 96px 0; }
  .encabeza { grid-template-columns: 1fr 1fr; align-items: end; }
  .dos { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
}

/* portafolio en el inicio */
.proyecto-cab { display: grid; gap: 8px; margin-bottom: 18px; padding-top: 18px; border-top: 2px solid var(--tinta); }
.proyecto-cab h3 { font-size: 30px; }
.proyecto-cab p { color: var(--tinta-2); max-width: 46em; }
.mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mosaico figure { margin: 0; }
.mosaico .m0 { grid-column: 1 / -1; }
.mosaico img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; }
.mosaico figcaption, .foto-pie { margin-top: 6px; font-size: 14.5px; color: var(--tinta-2); }
@media (min-width: 900px) {
  .mosaico { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
  .mosaico .m0 { grid-column: 1; grid-row: 1 / 3; }
  .mosaico .m0 img { aspect-ratio: auto; height: calc(100% - 28px); }
}
.recorrido { margin-top: 48px; }
.recorrido h2, .recorrido h3 { font-size: 30px; }
.recorrido > p { margin-top: 6px; color: var(--tinta-2); }
.tarjetas-360 { list-style: none; margin: 18px calc(-1 * var(--lado)) 0; padding: 0 var(--lado) 6px; display: grid;
                grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
                scroll-padding-inline: var(--lado); scrollbar-width: none; }
.tarjetas-360::-webkit-scrollbar { display: none; }
.tarjetas-360 li { scroll-snap-align: start; }
@media (min-width: 720px) { .tarjetas-360 { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 18px 0 0; padding: 0; overflow: visible; } }
.t360 { display: grid; gap: 2px; text-decoration: none; }
.t360-foto { position: relative; display: block; overflow: hidden; border-radius: 3px; }
.t360-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.6s ease; }
.t360:hover .t360-foto img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .t360-foto img { transition: none; } .t360:hover .t360-foto img { transform: none; } }
.sello { position: absolute; top: 10px; right: 10px; padding: 3px 10px 2px; border-radius: 999px; background: var(--amarillo);
         color: var(--marino); font-family: var(--f-titulo); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; }
.t360-nombre { margin-top: 8px; font-family: var(--f-titulo); font-weight: 600; font-size: 21px; }
.t360-nivel { font-size: 14.5px; color: var(--tinta-2); }

/* para quién */
.para-quien { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 22px; }
.para-quien li { padding-left: 16px; border-left: 3px solid var(--turquesa); }
.para-quien p { margin-top: 4px; color: var(--tinta-2); }
@media (min-width: 900px) { .para-quien { margin: 6px 0 0; grid-template-columns: 1fr 1fr; gap: 30px 32px; } }

/* cómo trabajamos: una secuencia, por eso va numerada */
.pasos { list-style: none; counter-reset: paso; margin: 26px 0 0; padding: 0; display: grid; gap: 24px; }
.pasos li { counter-increment: paso; position: relative; padding-left: 58px; min-height: 42px; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: -4px; width: 42px; height: 42px; border-radius: 50%;
                    display: grid; place-items: center; background: var(--marino); color: var(--blanco);
                    font-family: var(--f-titulo); font-weight: 700; font-size: 22px; }
.pasos p { margin-top: 4px; color: var(--tinta-2); }
@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .pasos li { padding: 58px 0 0; }
  .pasos li::before { top: 0; }
  .pasos li:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 52px; right: -18px; height: 2px; background: var(--turquesa); }
}
.recibe { margin-top: 48px; padding: 24px; background: var(--blanco); border-radius: 4px; border: 1px solid var(--linea); }
.recibe h3 { font-size: 26px; }
.recibe dl { margin: 14px 0 0; display: grid; gap: 12px; }
.recibe dl div { display: grid; gap: 2px; align-content: start; }
.recibe dt { font-family: var(--f-titulo); font-weight: 600; font-size: 20px; }
.recibe dd { margin: 0; color: var(--tinta-2); }
@media (min-width: 900px) { .recibe dl { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* detalle al 100 % */
.detalles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detalles figure { margin: 0; }
.detalles img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.detalles figcaption { margin-top: 6px; font-size: 15px; color: rgba(238, 240, 243, 0.8); }
@media (min-width: 900px) { .detalles { grid-template-columns: repeat(4, 1fr); gap: 14px; } }

/* opiniones (sólo con opiniones reales) */
.opiniones { display: grid; gap: 18px; margin-top: 24px; }
.opiniones figure { margin: 0; padding: 22px; background: var(--blanco); border-radius: 4px; border: 1px solid var(--linea); }
.opiniones blockquote { margin: 0; font-size: 18px; }
.opiniones figcaption { margin-top: 10px; font-family: var(--f-titulo); font-weight: 600; font-size: 18px; }

/* quiénes somos */
.somos { margin-top: 14px; font-size: 19px; line-height: 1.6; max-width: 36em; }
@media (min-width: 900px) { .somos { margin-top: 4px; } }

/* contacto y pie */
.contacto { padding: 56px 0; background: var(--marino); color: var(--blanco); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.contacto h2 { font-size: clamp(36px, 5vw, 56px); font-weight: 700; }
.contacto p { margin: 10px 0 22px; color: rgba(255, 255, 255, 0.76); font-size: 18px; }
.pie { padding: 30px 0 calc(30px + env(safe-area-inset-bottom, 0px)); background: var(--marino); color: rgba(255, 255, 255, 0.66);
       font-size: 14.5px; }
.pie .ancho { display: grid; gap: 10px; }
.pie-marca { display: flex; align-items: center; gap: 8px; color: var(--blanco); font-family: var(--f-titulo); font-weight: 700; font-size: 21px; }
.pie-marca img { height: 24px; width: auto; background: var(--blanco); border-radius: 4px; padding: 2px 3px; box-sizing: content-box; }
.pie p:not(.pie-marca) { max-width: 52em; }

/* portafolio y proyecto */
.titulo-pagina { font-size: clamp(46px, 7vw, 76px); font-weight: 700; line-height: 0.95; }
.seccion > .ancho > .entrada { margin-top: 12px; }
.regreso { display: inline-block; margin-bottom: 14px; font-family: var(--f-titulo); font-weight: 600; font-size: 19px;
           color: var(--turquesa-texto); text-decoration: none; }
.fichas { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 900px) { .fichas { grid-template-columns: 1fr 1fr; } }
.ficha { display: grid; gap: 4px; text-decoration: none; }
.ficha img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; }
.ficha-nombre { margin-top: 10px; font-family: var(--f-titulo); font-weight: 600; font-size: 28px; }
.ficha-texto, .ficha-cuenta { color: var(--tinta-2); }
.ficha-cuenta { font-size: 15px; }
.sub { margin-top: 56px; font-size: 30px; }
.galeria { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 900px) { .galeria { grid-template-columns: 1fr 1fr; gap: 22px; } }
.foto { display: block; text-decoration: none; cursor: zoom-in; }
.foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; }

/* imagen ampliada */
.caja { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #070b16;
        color: var(--blanco); }
.caja::backdrop { background: rgba(7, 11, 22, 0.92); }
.caja figure { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; touch-action: pan-y; }
.caja img { width: 100%; height: 100%; object-fit: contain; }
.caja figcaption { padding: 12px var(--lado) calc(16px + env(safe-area-inset-bottom, 0px)); font-family: var(--f-titulo);
                   font-weight: 600; font-size: 20px; text-align: center; }
.caja button { position: absolute; border: 0; background: rgba(255, 255, 255, 0.12); color: var(--blanco); cursor: pointer;
               font-family: var(--f-titulo); font-weight: 600; }
.caja-cerrar { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; padding: 8px 16px; border-radius: 999px; font-size: 17px; }
.caja-ant, .caja-sig { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; font-size: 28px; line-height: 1; }
.caja-ant { left: 10px; } .caja-sig { right: 10px; }
.caja button:hover { background: rgba(255, 255, 255, 0.22); }