/* Archivo (Omnibus-Type) instanciada en peso 600 / ancho 72 y recortada a
   latino basico: 8.9 KB. SIL Open Font License 1.1 — ver archivo-LICENSE.txt.
   font-display:block porque la cortina de entrada tapa el primer segundo y
   medio: preferimos esperar a la fuente antes que ensenar un salto. */
@font-face {
  font-family: "Archivo Wordmark";
  src: url("archivo-600-72.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: #fdfcfa;
    color: #1a1a1a;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 680px; margin: 0 auto; padding: 0 24px; }
  a { color: #1a1a1a; }
  a:hover { opacity: 0.6; }

  /* nav */
  .top {
    border-bottom: 1px solid #dedad4;
  }
  .top-inner {
    max-width: 1180px; margin: 0 auto; padding: 18px 32px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .top .site { font-weight: 500; font-size: 15px; text-decoration: none; }
  .top .ig { display: flex; align-items: center; color: #1a1a1a; }
  .top .ig svg { display: block; }

  /* hero — title fills the upper half, image fills the lower */
  .wrap-wide { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 640px) { .wrap-wide { padding: 0 24px; } .top-inner { padding: 16px 24px; } }
  .masthead { display: flex; flex-direction: column; background: #eceae7; position: relative; }
  /* el titulo se queda pegado y la foto le pasa por debajo al scrollear */
  .hero {
    flex: 0 0 auto;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 78px 0 30px;
    position: sticky; top: 0; z-index: 2;
  }
  h1 {
    position: relative; width: 100%; max-width: 940px;
    container-type: inline-size;   /* el tamano del logotipo se mide contra esto */
    margin: 0;
  }
  /* El logotipo es TEXTO VIVO en Archivo 600/72 — la alternativa libre (OFL) a
     Heading Now, ajustada midiendo el trazado original: asta/versalita .174
     contra .175 del original. Ya no hay wordmark.svg.
     Las medidas salen del logotipo viejo: el bloque completo mide 7.59 veces la
     altura de versalita, de ahi el 19.19cqw; la interlinea era 1.074; y
     "Santiago" arranca al 24.2% del ancho, que es lo que da el alineado a la
     derecha. Con cqw el bloque guarda esas proporciones a cualquier ancho. */
  .wordmark {
    display: flex; flex-direction: column;
    font-family: "Archivo Wordmark", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 19.19cqw;
    line-height: 0.7375;   /* = 1.074 versalitas x (cap/em 0.6867) */
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .wordmark > span:first-child { align-self: flex-start; }
  .wordmark > span:last-child  { align-self: flex-end; }
  /* copia clara que se cruza encima cuando la foto pasa por detras */
  .wordmark.claro {
    position: absolute; inset: 0;
    filter: invert(1);
    opacity: 0;
  }

  /* full-bleed photo */
  /* la foto va a sangre: de borde a borde, sin bandas a los lados */
  .hero-img {
    flex: 0 0 auto; width: 100%; margin: 0;
    aspect-ratio: 16 / 9;
    position: relative; z-index: 1;
    background: #ddd9d4; position: relative; overflow: hidden;
  }
  @media (max-width: 640px) { .hero-img { aspect-ratio: 4 / 5; } }
  @media (max-width: 640px) { .hero-img img { object-position: 42% 50%; } }
  /* object-position decide QUÉ parte de la foto se ve al recortar.
     Si en movil Victor queda descentrado, mueve el 50% de la línea .hero-img img (mobile). */
  .hero-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: 50% 50%;
  }
  .hero-img .ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #a09b91; font-size: 14px; letter-spacing: .02em;
  }
  /* copy that used to live in the hero */
  .lede { padding: 60px 0 8px; }
  .lede p.intro { max-width: 560px; font-size: 18px; }
  .lede p.intro + p.intro { margin-top: 16px; }

  /* sections */
  section { padding: 56px 0; border-top: 1px solid #e3e0da; }
  h2 {
    font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
    color: #6b675f; margin-bottom: 36px;
  }

  /* presets */
  .preset { padding: 28px 0; border-top: 1px solid #eeebe5; }
  .preset:first-of-type { border-top: none; padding-top: 0; }
  .preset-top {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  }
  .preset h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
  .preset h3 small { font-weight: 400; font-size: 15px; color: #6b675f; margin-left: 8px; }
  .preset .price { font-size: 18px; font-weight: 500; white-space: nowrap; }
  .preset p { margin-top: 8px; color: #45423c; max-width: 520px; }
  .preset .incl { margin-top: 6px; font-size: 14.5px; color: #6b675f; }
  .buy {
    display: inline-block; margin-top: 18px;
    border: 1.5px solid #1a1a1a; border-radius: 3px;
    padding: 9px 22px; font-size: 15px; font-weight: 500;
    text-decoration: none; background: transparent; cursor: pointer;
    font-family: inherit; transition: background .15s, color .15s;
  }
  .buy:hover { background: #1a1a1a; color: #fdfcfa; opacity: 1; }
  .demos-note { margin-top: 36px; font-size: 15px; color: #6b675f; }

  /* credits line */
  .credits {
    margin-top: 26px; padding-top: 22px; border-top: 1px solid #e3e0da;
    max-width: 560px; font-size: 15.5px; color: #6b675f;
  }
  .credits strong { color: #1a1a1a; font-weight: 600; }

  /* media */
  .media + .media { margin-top: 40px; }
  .media h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
  .media .cap { font-size: 14.5px; color: #6b675f; margin-bottom: 14px; }
  .vid {
    display: block; width: 100%; padding: 0; border: 1px solid #e3e0da;
    background: #edeae4; cursor: pointer; position: relative;
    aspect-ratio: 16/9; overflow: hidden; font-family: inherit;
  }
  .vid img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .vid .pl {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(26,26,26,0.82); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; padding-left: 4px; transition: background .15s;
  }
  .vid:hover .pl { background: #1a1a1a; }
  .vid iframe { width: 100%; height: 100%; border: 0; display: block; }
  .vid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 620px) { .vid-grid { grid-template-columns: 1fr; } }
  .vid-grid h3 { font-size: 15.5px; font-weight: 600; }
  .vid-grid .cap { font-size: 14px; margin-bottom: 10px; }
  .vid-grid > div + div { margin-top: 0; }
  @media (max-width: 620px) { .vid-grid { gap: 28px; } }
  .sp-embed { border: 1px solid #e3e0da; }
  .sp-embed iframe { display: block; width: 100%; height: 380px; border: 0; }
  .reels { list-style: none; margin-top: 14px; }
  .reels li { border-top: 1px solid #eeebe5; }
  .reels li:last-child { border-bottom: 1px solid #eeebe5; }
  .reels a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 13px 0; text-decoration: none; font-size: 15.5px;
  }
  .reels a:hover { opacity: 1; color: #6b675f; }
  .reels .arw { color: #a09b91; font-size: 14px; flex-shrink: 0; }

  /* about */
  .about-photo {
    width: 100%; aspect-ratio: 4/5; background: #edeae4;
    margin-bottom: 32px; overflow: hidden;
  }
  .about-photo img {
    width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: 50% 58%;
  }
  .about p + p { margin-top: 16px; }

  /* gear */
  .gear { list-style: none; }
  .gear li { padding: 18px 0; border-top: 1px solid #eeebe5; }
  .gear li:first-child { border-top: none; padding-top: 0; }
  .gear .g-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .gear h3 { font-size: 17px; font-weight: 600; }
  .gear .g-link { font-size: 14px; color: #6b675f; white-space: nowrap; }
  .gear p { margin-top: 5px; color: #45423c; font-size: 15.5px; max-width: 520px; }
  .gear .feat { background: #f4f2ed; margin: 0 -20px; padding: 20px; border-top: none; }
  .gear .feat p { max-width: 500px; }

  /* faq — cada pregunta en su propia tarjeta, se despliega al darle clic.
     El rebote sale del easing con sobrepaso: pasa de largo y regresa. */
  .faq { display: flex; flex-direction: column; gap: 10px; }
  .qa {
    border: 1px solid #e3e0da; border-radius: 4px; background: #fff;
    transition: border-color .3s ease;
  }
  .qa[data-abierta] { border-color: #c9c3b8; }
  .qa-t {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 17px 18px; background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 16.5px; font-weight: 500; color: #1a1a1a;
    text-align: left; line-height: 1.4;
  }
  .qa-t:focus-visible { outline: 2px solid #1a1a1a; outline-offset: -2px; border-radius: 4px; }
  .qa-c {
    width: 15px; height: 15px; flex-shrink: 0; color: #a09b91;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
  }
  .qa[data-abierta] .qa-c { transform: rotate(180deg); color: #1a1a1a; }
  /* La altura va en pixeles (la mide el JS en --alto). Es lo unico que deja
     que el easing SE PASE de largo y regrese: ahi esta el rebote. Con fr no
     se puede, porque un fr nunca crece mas que su contenido.
     Sin JS el panel queda abierto, asi que las respuestas siempre se leen. */
  .qa-panel { overflow: hidden; }
  .qa-panel p { padding: 0 18px 18px; color: #45423c; font-size: 15.5px; }

  .faq[data-js] .qa-panel {
    height: 0;
    transition: height .34s cubic-bezier(.4, 0, .2, 1);   /* al cerrar, seco */
  }
  .faq[data-js] .qa[data-abierta] .qa-panel {
    height: var(--alto, auto);
    transition: height .58s cubic-bezier(.34, 1.7, .5, 1); /* al abrir, rebota */
  }
  .faq[data-js] .qa-panel p {
    opacity: 0; transform: translateY(-5px);
    transition: opacity .26s ease, transform .26s ease;
  }
  .faq[data-js] .qa[data-abierta] .qa-panel p {
    opacity: 1; transform: none; transition-delay: .1s;
  }
  @media (prefers-reduced-motion: reduce) {
    .qa-c, .faq[data-js] .qa-panel, .faq[data-js] .qa-panel p { transition-duration: .01ms !important; }
  }

  /* footer */
  footer {
    border-top: 1px solid #e3e0da;
    padding: 32px 0 48px; font-size: 14px; color: #6b675f;
  }
  .foot-inner {
    max-width: 680px; margin: 0 auto; padding: 0 24px;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  }
  footer a { color: #6b675f; }
  .foot-links { display: flex; gap: 20px; }

  @media (max-width: 540px) {
    .preset-top { flex-direction: column; gap: 4px; }
  }

  /* ---- menu desplegable ---- */
  .top-acc { display: flex; align-items: center; gap: 14px; }
  .menu-b {
    width: 34px; height: 34px; padding: 0; margin: 0; border: none; background: none;
    cursor: pointer; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 5px; color: #1a1a1a;
  }
  .menu-b span {
    display: block; width: 19px; height: 1.6px; background: currentColor; border-radius: 2px;
    transition: transform .34s cubic-bezier(.34,1.6,.5,1), opacity .2s ease;
  }
  .top[data-menu] .menu-b span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
  .top[data-menu] .menu-b span:nth-child(2) { opacity: 0; }
  .top[data-menu] .menu-b span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
  .menu-b:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; border-radius: 3px; }

  /* mismo rebote que las preguntas: altura en pixeles */
  .menu { overflow: hidden; }
  .top[data-js] .menu {
    height: 0; visibility: hidden;
    transition: height .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s;
  }
  .top[data-js][data-menu] .menu {
    height: var(--menu-alto, auto); visibility: visible;
    transition: height .5s cubic-bezier(.34,1.6,.5,1), visibility 0s;
  }
  .menu-in {
    max-width: 1180px; margin: 0 auto; padding: 6px 32px 20px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .top.estrecha .menu-in { max-width: 680px; padding: 6px 24px 20px; }
  .menu-in a {
    text-decoration: none; color: #1a1a1a; font-size: 19px; font-weight: 500;
    letter-spacing: -.01em; padding: 9px 0; border-top: 1px solid #e3e0da;
  }
  .menu-in a:first-child { border-top: none; }
  .menu-in a:hover { opacity: .55; }
  .menu-in a[aria-current="page"] { color: #a09b91; }
  @media (max-width: 640px) { .menu-in { padding: 6px 24px 18px; } }

  /* ---- nav estrecha, para las paginas internas ---- */
  .top.estrecha .top-inner { max-width: 680px; padding: 18px 24px; }

  /* ---- cabecera de pagina interna ---- */
  .cabecera { padding: 64px 0 8px; }
  .cabecera h1 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(34px, 6vw, 52px); font-weight: 700;
    letter-spacing: -.03em; line-height: 1.05; text-transform: none;
  }
  .cabecera p { margin-top: 14px; max-width: 520px; color: #6b675f; font-size: 17px; }
  .interna section:first-of-type { border-top: none; }

  /* ---- caja de contacto ---- */
  .caja-contacto {
    border: 1px solid #e3e0da; border-radius: 4px; background: #fff;
    padding: 26px 24px; margin-top: 8px;
  }
  .caja-contacto h3 { font-size: 17px; font-weight: 600; }
  .caja-contacto .pie-caja { margin-top: 6px; color: #6b675f; font-size: 15px; }
  .caja-contacto .pie-caja a { color: #1a1a1a; }
  .campo { margin-top: 20px; }
  .campo label { display: block; font-size: 15px; font-weight: 500; }
  .campo input, .campo textarea {
    width: 100%; margin-top: 8px; padding: 11px 13px;
    font-family: inherit; font-size: 16px; line-height: 1.5; color: #1a1a1a;
    background: #fdfcfa; border: 1.5px solid #ccc7bd; border-radius: 3px;
  }
  .campo textarea { min-height: 132px; resize: vertical; }
  .campo input:focus, .campo textarea:focus { outline: none; border-color: #1a1a1a; background: #fff; }
  .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .enviar {
    margin-top: 22px; padding: 12px 26px; border: none; border-radius: 3px;
    font-family: inherit; font-size: 16px; font-weight: 600;
    color: #fdfcfa; background: #1a1a1a; cursor: pointer;
  }
  .enviar:hover { background: #000; }
  .enviar[disabled] { opacity: .5; cursor: default; }
  .aviso-form {
    margin-top: 16px; font-size: 15px; padding: 11px 14px; border-radius: 3px;
    border: 1px solid #d8d3ca; background: #f4f2ed; color: #45423c;
  }
  .aviso-form[data-error] { border-color: #d9c3c3; background: #f9efef; }
  .aviso-form[hidden] { display: none; }