/* ============================================================
   BARNES Buenos Aires — Art de Vivre (principal + subsecciones)
   Fiel a Demo-Art-Vivre-Principal / Demo-Polo / Demo-Vinedos (.ai de diseño).
   Posiciones/anchos: pt del .ai × (1920/1980). Tipografía: pt = px (convención del sitio,
   tokens de tokens.css). Header y footer son los globales del sitio.

   [1] .adv-hero*     — principal: título + intro centrados sobre blanco (sin foto)
   [2] .adv-tabs*     — 4 tabs que navegan a las subsecciones
   [3] .adv-block*    — 4 bloques alternados panel crema + foto (DESCUBRIR)
   [4] .adv-subhero*  — subsecciones: hero con foto + título
   [5] .adv-intro*    — subsecciones: título + 3 párrafos centrados
   [6] .adv-form*     — subsecciones: "Consúltenos para conocer más" (form compartido)
   ============================================================ */

/* Texto corrido del comp: Raleway 16 con tracking +50 (medido: los renglones del comp son ~7%
   más anchos que Raleway sin tracking) y paso de línea de 28pt × 1920/1980 = 27.15px. */
.adv-hero, .adv-blocks, .adv-intro, .adv-form {
    --adv-tracking: .05em;
    --adv-lh-px: 27.15px;
    --adv-lh: 1.697;
}

/* Saltos de línea de diseño (<br class="ln">): solo en pantallas anchas, donde reproducen el
   corte del comp; debajo el texto vuelve a fluir y el guion de corte desaparece con el salto. */
@media (max-width: 1279px) {
    .adv-block .ln, .adv-block .ln-hy,
    .adv-step .ln, .adv-step .ln-hy { display: none; }
}
@media (max-width: 760px) {
    .adv-hero .ln, .adv-hero .ln-hy,
    .adv-intro .ln, .adv-intro .ln-hy,
    .adv-form__head .ln, .adv-form__head .ln-hy { display: none; }
}
@media (min-width: 761px) {
    .adv-hero .is-hard, .adv-intro .is-hard, .adv-form__head .is-hard { white-space: nowrap; }
}
@media (max-width: 1099px) {
    .adv-service-card .ln, .adv-service-card .ln-hy { display: none; }
}
@media (min-width: 1100px) {
    .adv-service-card .is-hard { white-space: nowrap; }
}
@media (min-width: 1280px) {
    .adv-block .is-hard, .adv-step .is-hard { white-space: nowrap; }
}

/* ===================== [1] HERO PRINCIPAL (sin foto) ===================== */
/* El header de esta página es position:absolute sobre el <main> (sin hero full-bleed): el
   padding-top suma el alto REAL del header (var --adv-hh, lo mide assets/js/art-de-vivre.js;
   173px desktop / 77px con hamburguesa en el CSS base) + 103px hasta el H1 medido en el comp. */
.adv-hero {
    --adv-hh: 173px;
    padding: calc(var(--adv-hh) + 103px) var(--gutter) 0;
    text-align: center;
}
.adv-hero__title {
    font-family: var(--ff-display);
    font-size: clamp(2.4rem, 4.6vw, 4rem);   /* 64px del comp */
    line-height: var(--lh-h2);
    color: var(--c-ink);
}
.adv-hero__text { margin-top: 34px; }
.adv-hero__text p {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--adv-lh);               /* paso de 28pt del comp */
    letter-spacing: var(--adv-tracking);
    color: var(--c-ink);
}
.adv-hero__text p + p { margin-top: var(--adv-lh-px); } /* un renglón en blanco entre párrafos (56pt de paso) */

/* ===================== [2] TABS ===================== */
/* 4 cajas 256.1×46.3pt → 248.3×44.9px, gap 11.9pt → 11.5px, borde #000 fino, radio 3.8pt. */
.adv-tabs { padding: 204px var(--gutter) 0; }
.adv-tabs__row {
    max-width: 1028.4px;                      /* 4 × 248.3 + 3 × 11.5 */
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 11.5px;
}
.adv-tabs__item {
    height: 45px;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: 4px;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);                /* 16px Raleway-Medium del comp */
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-ink);
    padding: 0 12px;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.adv-tabs__item:hover,
.adv-tabs__item:focus-visible {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #ffffff;
}

/* ===================== [3] BLOQUES ALTERNADOS ===================== */
/* Fila = extensión de los dos paneles (299.8 → 1679.0pt = 1337.5px). Panel 789.4pt (57.24%),
   foto 564×386pt (40.9%). Impar: texto-izq/foto-der, la foto pisa 100pt del panel. Par:
   foto-izq/texto-der, la foto pisa 62pt del panel y arranca 87.8pt adentro de la fila.
   Alto del panel y baja de la foto: medidos por bloque (vars inline, ver art-de-vivre.php). */
.adv-blocks { padding: 161px 0 257px; }          /* 257px hasta el borde superior del footer (comp) */
.adv-block + .adv-block { margin-top: var(--adv-gap-top, 107px); }   /* aire entre paneles: lo varía el comp por bloque */
.adv-row {
    width: min(1337.5px, 100% - 2 * var(--gutter));
    margin-inline: auto;
    display: flex;
    align-items: flex-start;
}
.adv-panel {
    flex: 0 0 57.24%;
    min-height: var(--adv-panel-h, 484px);
    background: var(--c-bg-alt);
    padding-top: 71px;
    position: relative; z-index: 1;
}
.adv-media {
    flex: 0 0 40.9%;
    position: relative; z-index: 2;
    margin-top: var(--adv-media-y, 54px);
    aspect-ratio: 564 / 386;
}
.adv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adv-block--odd  .adv-media { margin-left: -7.25%; }                 /* 100pt de 1379.2 */
.adv-block--even .adv-media { margin-left: 6.37%; }                  /* 87.8pt desde el borde izquierdo */
.adv-block--even .adv-panel { margin-left: -4.5%; }                  /* la foto pisa 62pt */
.adv-block--odd  .adv-panel { padding-right: 12.67%; }               /* zona tapada por la foto */
.adv-block--even .adv-panel { padding-left: 7.85%; }
.adv-panel__inner { max-width: 475.6px; }                            /* = ancho del divisor (490.5pt) */
.adv-block--odd  .adv-panel__inner { margin-left: clamp(32px, 4.93vw, 94.6px); }
.adv-block--even .adv-panel__inner { margin-left: auto; margin-right: clamp(28px, 4.24vw, 81.4px); }
.adv-kicker {
    font-family: var(--ff-display);
    font-size: var(--fs-h2);                  /* 48px */
    line-height: var(--lh-h2);
    color: var(--c-ink);
}
.adv-divider {
    display: block; width: 100%; height: 1px;
    background: #818181;
    margin-top: var(--adv-divider-gap, 13px);
}
.adv-subtitle {
    font-family: var(--ff-display);
    font-size: var(--fs-h3);                  /* 36px */
    line-height: var(--lh-h3);
    color: var(--c-ink);
    margin-top: var(--adv-sub-gap, 36px);
}
.adv-body {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--adv-lh);
    letter-spacing: var(--adv-tracking);
    color: var(--c-ink);
    margin-top: var(--adv-body-gap, 20px);
}
.adv-cta { margin-top: var(--adv-cta-gap, 35px); }

/* ===================== [4] HERO SUBSECCIONES ===================== */
/* 1982.7×714.2pt → 1920×692px. La foto ya trae el oscurecido de arriba quemado (verificado
   contra el comp): sin scrim propio. Título Bauer 72px blanco centrado. */
.adv-subhero {
    position: relative;
    min-height: clamp(440px, 36vw, 692px);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center;
    background: var(--c-hero-bg);
    overflow: hidden;
    padding: calc(var(--header-h) + 28px) var(--gutter) clamp(34px, 3.29vw, 63px);
}
.adv-subhero__media { position: absolute; inset: 0; z-index: 0; }
.adv-subhero__img { width: 100%; height: 100%; object-fit: cover; }
.adv-subhero__content { position: relative; z-index: 1; }
.adv-subhero__title {
    color: var(--c-on-dark);                  /* base.css: hN → negro por default */
    font-size: var(--fs-hero);                /* 72px */
    line-height: var(--lh-hero);
}

/* ===================== [5] INTRO SUBSECCIONES ===================== */
.adv-intro { padding: var(--adv-intro-top, 89px) var(--gutter) 0; text-align: center; }
.adv-intro__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h3);                  /* 36px */
    line-height: var(--lh-h3);
    color: var(--c-ink);
}
.adv-intro__text { margin-top: 27px; }
.adv-intro__text p {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--adv-lh);
    letter-spacing: var(--adv-tracking);
    color: var(--c-ink);
}
.adv-intro__text p + p { margin-top: var(--adv-lh-px); }
.adv-intro__text strong { font-weight: 600; }
.adv-intro__text:not(:has(.is-hard)) { max-width: 660px; margin-inline: auto; }

/* ===================== [6] FORM "CONSÚLTENOS" ===================== */
/* Título rojo 36px 2 líneas + subtítulo, FUERA de la caja; caja blanca 993px con borde fino y
   radio (componente de campos compartido .barnes-form). Nota "* Campos obligatorios" fuera. */
.adv-form { padding: calc(242px + var(--adv-form-top, 0px)) var(--gutter) var(--adv-form-bottom, 116px); }
.adv-form__head { text-align: center; margin-bottom: 36px; }
.adv-form__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--c-accent);
}
.adv-form__subtitle {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--adv-lh);                 /* este renglón del comp va sin tracking */
    color: var(--c-ink);
    margin-top: 18px;
}
.adv-form__box {
    max-width: 993px;
    margin-inline: auto;
    background: var(--c-bg);
    border: 1px solid var(--c-line);              /* hairline del comp (0.25pt #818181) como en Tasar */
    border-radius: 8px;
    padding: clamp(28px, 4vw, 48px);
}
.adv-form__box .barnes-form { margin-inline: auto; }
.adv-form__box .barnes-form__foot { justify-content: center; }
.adv-form__note {
    max-width: 993px;
    margin: 24px auto 0;
    font-family: var(--ff-body); font-size: var(--fs-small); color: #818181;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
    .adv-hero { --adv-hh: 77px; }
    .adv-tabs { padding-top: clamp(56px, 8vw, 110px); }
    .adv-blocks { padding-top: clamp(48px, 7vw, 96px); }
    .adv-block + .adv-block { margin-top: clamp(40px, 6vw, 80px); }
    .adv-row { flex-direction: column; width: 100%; }
    .adv-panel,
    .adv-block--even .adv-panel { flex: 0 0 auto; width: 100%; min-height: 0; margin-left: 0; padding: 40px var(--gutter); }
    .adv-block--odd .adv-panel { padding-right: var(--gutter); }
    .adv-panel__inner { max-width: 100%; margin: 0 !important; }
    .adv-media,
    .adv-block--odd .adv-media,
    .adv-block--even .adv-media { flex: 0 0 auto; width: 100%; margin: 0 !important; order: -1; }
    .adv-intro { padding-top: clamp(48px, 7vw, 80px); }
    .adv-form { padding-top: clamp(72px, 14vw, 160px); }
}
@media (max-width: 1100px) {
    .adv-tabs__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .adv-tabs__row { grid-template-columns: 1fr; }
}

/* ===================== [7] ART ADVISORY: servicios, galería, pasos, equipo ===================== */
/* Medidas del .ai (pt × 1920/1980). El comp de esta página está corrido ~+16pt a la derecha del
   eje (artefacto del artboard): todo se centra al eje de la página, como el resto del sitio. */
.adv-services, .adv-steps, .adv-team, .adv-carousel {
    --adv-tracking: .05em;
    --adv-lh-px: 27.15px;
    --adv-lh: 1.697;
}
.adv-services { padding: 112.8px var(--gutter) 0; text-align: center; }
.adv-services__title,
.adv-steps__kicker,
.adv-team__title {
    font-family: var(--ff-display);
    font-size: 24px;
    line-height: 1.2;
    color: var(--c-accent);
    font-weight: 400;
}
.adv-team__title { font-size: 28px; }
.adv-services__grid {
    max-width: 984.6px;                        /* 2 × 474.2 + 36.3 */
    margin: 63.4px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36.3px;
}
.adv-service-card {
    background: var(--c-bg-alt);
    border-radius: 12px;
    min-height: 298px;
    padding: 67.1px 24px 0;
}
.adv-service-card__title {
    font-family: var(--ff-display);
    font-weight: 700;                          /* Bauer Bodoni Bold del comp */
    font-size: 24px;
    line-height: 1.164;                        /* 28.8pt de paso */
    color: var(--c-ink);
    min-height: 2.328em;                       /* 2 renglones: alinea los divisores de las dos cards */
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
}
.adv-service-card__divider {
    display: block; height: 1px; width: 100%; max-width: 392px;
    margin: 26.7px auto 0;
    background: rgba(0, 0, 0, .3);
}
.adv-service-card__text {
    margin-top: 25px;
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--adv-lh);
    letter-spacing: var(--adv-tracking);
    color: var(--c-ink);
}

/* Galería a sangre: 3 fotos en grid CSS, cada celda con el aspecto natural de su foto. */
.adv-gallery { margin-top: 232.4px; }
.adv-gallery__grid {
    max-width: 2000px; margin-inline: auto;
    display: grid;
    grid-template-columns: 576.9fr 810.7fr 553.4fr;
    gap: 19.6px;
    height: 41.04vw;                           /* 788px @1920: aspecto natural de las 3 fotos */
    max-height: 820px;
}
.adv-gallery__item { margin: 0; overflow: hidden; }
.adv-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bloque crema: pasos + equipo */
.adv-cream { background: var(--c-bg-alt); margin-top: 61px; padding: 59px var(--gutter) 135px; }
.adv-steps { text-align: center; }
.adv-steps__kicker { font-size: 24.27px; }
.adv-steps__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--c-ink);
    margin-top: 35.8px;
}
.adv-steps__list {
    max-width: 1224px;
    margin: 104.9px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 666.1px) minmax(0, 558px);
    justify-content: center;
    row-gap: 63.4px;
    text-align: left;
}
.adv-step {
    display: grid;
    grid-template-columns: 90.3px 1px 1fr;
    align-items: start;
}
.adv-step__num {
    font-family: var(--ff-display);
    font-size: 36px;
    line-height: 1.2;
    color: var(--c-accent);
    margin-top: -7.5px;
}
.adv-step__rule { display: block; margin-top: -10.3px; width: 1px; height: 144.8px; background: rgba(0, 0, 0, .45); }
.adv-step__body { padding-left: 31.1px; }
.adv-step__title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    color: var(--c-ink);
}
.adv-step__text {
    margin-top: 16px;
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: 1.73;
    letter-spacing: var(--adv-tracking);
    color: var(--c-ink);
}
.adv-steps__cta { height: 40.7px; margin-top: 70px; display: flex; justify-content: center; }
.adv-steps__download { gap: 12px; min-width: 212px; height: 100%; }
.adv-steps__download svg { width: 16px; height: 16px; }

.adv-team { margin-top: 142.8px; text-align: center; }
.adv-team__grid {
    margin-top: 72.8px;
    display: grid;
    grid-template-columns: repeat(2, 285.3px);
    justify-content: center;
    column-gap: 159.9px;
    row-gap: 56px;
    text-align: left;
}
.adv-team-card { width: 285.3px; }
.adv-team-card__photo { width: 285.3px; height: auto; aspect-ratio: 613 / 649; display: block; }
.adv-team-card__name {
    margin-top: 28px;
    font-family: var(--ff-display);
    font-size: 24px;
    line-height: 1.2;
    color: var(--c-ink);
}
.adv-team-card__role {
    margin-top: 8px;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-nav);
    color: var(--c-ink);
}
.adv-team-card__subtitle { font-weight: 300; }
.adv-team-card__subtitle.is-italic { font-style: italic; font-weight: 400; }
.adv-team-card__contact {
    width: 263.8px;
    margin-top: 20.3px;
    padding: 19.8px 0 12.3px;
    border-top: 1px solid #221f1f;
    border-bottom: 1px solid #818181;
    font-family: var(--ff-body);
    font-size: var(--fs-nav);
    color: var(--c-ink);
}
.adv-team-card__row {
    display: flex; align-items: center; gap: 24px;
    width: 263.8px; height: 44.2px;
    padding-left: 8px;
    border-bottom: 1px solid #818181;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    color: var(--c-ink);
    transition: color .2s var(--ease);
}
.adv-team-card__row:hover, .adv-team-card__row:focus-visible { color: var(--c-accent); }
.adv-team-card__icon {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: #000; color: #fff;
}
.adv-team-card__icon svg { width: 10px; height: 10px; }

/* ===================== [8] ENCUENTROS: carrusel ===================== */
/* Slide 1059×759pt → 1026.9×736px, separación 17.4px; la del medio centrada, las de los
   costados cortadas por el borde de la pantalla. */
.adv-carousel { --adv-slide-w: clamp(280px, 53.49vw, 1200px); margin-top: 237.6px; }
.adv-carousel__track {
    display: flex;
    gap: 17.4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-inline: calc((100% - var(--adv-slide-w)) / 2);
    scrollbar-width: none;
}
.adv-carousel__track::-webkit-scrollbar { display: none; }
.adv-carousel__slide {
    position: relative;
    flex: 0 0 var(--adv-slide-w);
    margin: 0;
    padding-bottom: 43.5px;
    scroll-snap-align: center;
}
.adv-carousel__slide img { width: 100%; height: auto; aspect-ratio: 1059 / 759; object-fit: cover; display: block; }
.adv-carousel__caption {
    position: absolute; left: 48px; bottom: 0;
    font-family: var(--ff-display);
    font-size: 20px;
    line-height: 24px;
    color: var(--c-ink);
}
.adv-carousel__nav { display: flex; justify-content: center; gap: 119.7px; margin-top: 51.2px; }
.adv-carousel__arrow {
    display: block; padding: 8px 0;
    color: #bec5be;
    transition: color .2s var(--ease);
}
.adv-carousel__arrow:hover, .adv-carousel__arrow:focus-visible { color: var(--c-ink); }
.adv-carousel__arrow svg { display: block; }

@media (max-width: 1100px) {
    .adv-steps__list { grid-template-columns: minmax(0, 560px); row-gap: 40px; }
    .adv-services { padding-top: clamp(56px, 8vw, 98px); }
    .adv-gallery { margin-top: clamp(56px, 10vw, 245px); }
    .adv-cream { margin-top: clamp(32px, 5vw, 61px); }
    .adv-team { margin-top: clamp(64px, 8vw, 125px); }
    .adv-team__grid { column-gap: clamp(24px, 6vw, 159.9px); }
    .adv-carousel { margin-top: clamp(48px, 9vw, 207px); }
}
@media (max-width: 760px) {
    .adv-services__grid { grid-template-columns: minmax(0, 1fr); }
    .adv-gallery__grid { grid-template-columns: 1fr; height: auto; max-height: none; gap: 12px; }
    .adv-gallery__item { aspect-ratio: var(--adv-ar); }
    .adv-step { grid-template-columns: 56px 1px 1fr; }
    .adv-step__rule { height: auto; align-self: stretch; }
    .adv-step__body { padding-left: 20px; }
    .adv-team__grid { grid-template-columns: 285.3px; row-gap: 48px; }
    .adv-carousel__nav { gap: 48px; }
}