/* ==========================================================
   NovæONE Strategic Advisory — Servicios (page-specific)
   Extiende style.css. No modifica ninguna regla existente.
   ========================================================== */

/* ===== HERO — misma estructura que Home, foto propia ===== */
.hero.hero--services::before{
  background:url('../images/hero/services-hero-background.jpg') center center / cover no-repeat;
}
/* Overlay más ligero que el resto del sitio: se conserva la paleta
   institucional bluish-gray pero se deja apreciar más la fotografía. */
.hero.hero--services::after{
  background:linear-gradient(100deg, rgba(13,24,42,.74) 0%, rgba(17,32,54,.66) 50%, rgba(22,40,66,.58) 100%);
}

/* ===== INTRODUCCIÓN ===== */
.intro-practicas{ background:var(--white); padding:150px 0 40px; }
@media(max-width:768px){ .intro-practicas{ padding:104px 0 36px; } }

/* ===== CAPÍTULOS DE ÁREA ===== */
.practice-chapter{ padding:140px 0; border-bottom:1px solid var(--line); }
.practice-chapter.bg-frost{ background:var(--frost); }
.practice-chapter.bg-white{ background:var(--white); }
.practice-chapter:last-of-type{ border-bottom:none; }
@media(max-width:768px){ .practice-chapter{ padding:104px 0; } }

.chapter-grid{ display:grid; grid-template-columns:minmax(280px,42%) 1fr; gap:72px; align-items:start; }
@media(max-width:960px){ .chapter-grid{ grid-template-columns:1fr; gap:44px; } }

/* Alternancia de ritmo — la foto cambia de lado según el área, mismo componente */
.chapter-photo{ order:1; }
.chapter-content{ order:2; }
.practice-chapter.reverse .chapter-photo{ order:2; }
.practice-chapter.reverse .chapter-content{ order:1; }

.chapter-photo{ position:sticky; top:110px; width:100%; aspect-ratio:4/5; overflow:hidden; background:linear-gradient(160deg, var(--navy-800), var(--navy-900)); }
@media(max-width:960px){ .chapter-photo{ position:static; aspect-ratio:4/5; order:1 !important; } .practice-chapter.reverse .chapter-content{ order:2 !important; } }
.chapter-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.chapter-photo:hover img{ transform:scale(1.045); }

.chapter-photo.is-placeholder{ display:flex; align-items:center; justify-content:center; }
.chapter-photo.is-placeholder::before{ content:attr(data-num); font-family:var(--display); font-weight:500; font-size:clamp(72px,9vw,128px); color:rgba(198,164,77,.16); }
.chapter-photo .placeholder-note{ position:absolute; left:24px; right:24px; bottom:22px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.38); text-align:center; }

.chapter-content{ max-width:640px; }
.chapter-content .eyebrow{ display:block; margin-bottom:18px; }
.chapter-name{ font-size:clamp(30px,3.6vw,44px); margin-bottom:8px; }
.chapter-intl{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-bottom:22px; }

/* ===== IDENTIDAD VISUAL POR ÁREA (ícono + keyword + acento sutil) ===== */
.area-badge{ display:inline-flex; align-items:center; gap:10px; margin-bottom:26px; padding:7px 14px 7px 10px; border:1px solid color-mix(in srgb, var(--area-accent) 45%, transparent); border-radius:2px; }
.area-badge svg{ width:17px; height:17px; stroke:var(--area-accent); flex-shrink:0; }
.area-badge span{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--area-accent); }
.chapter-quote{ font-family:var(--display); font-style:italic; color:var(--gold); font-size:clamp(19px,2.1vw,25px); line-height:1.45; margin-bottom:34px; }
.chapter-copy p{ color:var(--grey); font-size:1.02rem; line-height:1.7; margin-bottom:20px; }
.chapter-copy p:last-child{ margin-bottom:0; }

/* ===== CAPACIDADES / ACORDEÓN ===== */
.capabilities{ margin-top:60px; border-top:1px solid var(--line); }
.cap-item{ border-bottom:1px solid var(--line); }
.cap-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; background:none; border:none; text-align:left; cursor:pointer; font-family:var(--display); font-weight:500; font-size:1.1rem; color:var(--ink); }
.cap-trigger:hover{ color:var(--gold); }
.cap-arrow{ width:10px; height:10px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(45deg); transition:transform .35s ease; flex-shrink:0; }
.cap-item.open .cap-arrow{ transform:rotate(-135deg); }

/* Antes se usaba la técnica display:grid + grid-template-rows:0fr/1fr para
   animar la apertura. Se reemplaza por max-height controlado desde JS
   (servicios.js calcula la altura real del contenido): la técnica de
   grid-rows depende de soporte parejo de "fr" en grid en todos los
   navegadores/versiones de iOS Safari, y en algunos dispositivos el panel
   no llegaba a mostrarse. max-height es la técnica más compatible para
   este tipo de acordeón. */
.cap-panel{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
.cap-panel-body{ padding:2px 0 34px; max-width:560px; }
.cap-quote{ font-family:var(--display); font-style:italic; color:var(--ink); font-size:1.02rem; line-height:1.5; margin-bottom:14px; }
.cap-focus{ color:var(--grey); font-size:.95rem; line-height:1.65; margin-bottom:22px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ font-family:var(--sans); font-size:.76rem; font-weight:500; color:var(--gold); border:1px solid rgba(156,122,60,.35); padding:8px 14px; letter-spacing:.01em; }

.chapter-close{ margin-top:64px; padding-top:32px; border-top:1px solid var(--line); font-family:var(--display); font-style:italic; color:var(--ink); font-size:1.1rem; line-height:1.5; max-width:620px; }

/* Fade + leve desplazamiento del contenido del acordeón al abrir.
   No depende del JS: se apoya en la misma clase .open que ya
   controla la flecha, así que no requiere tocar servicios.js. */
.cap-panel-body{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.cap-item.open .cap-panel-body{ opacity:1; transform:translateY(0); transition-delay:.1s; }

/* ===== NUESTROS PRINCIPIOS ===== */
.principles{ background:var(--navy-900); padding:150px 0; }
@media(max-width:768px){ .principles{ padding:90px 0; } }
.principles .section-head h2{ color:#fff; }
.principles-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px; margin-top:64px; border-top:1px solid rgba(255,255,255,.12); padding-top:58px; }
@media(max-width:860px){ .principles-grid{ grid-template-columns:1fr; gap:44px; } }
.principle-item{ transition:transform .35s ease; }
.principle-item:hover{ transform:translateY(-4px); }
.principle-item span.p-num{ display:block; font-family:var(--sans); font-weight:700; color:var(--gold-light); font-size:13px; letter-spacing:.08em; margin-bottom:18px; }
.principle-item h3{ font-family:var(--display); font-style:italic; font-weight:500; color:#fff; font-size:1.4rem; margin-bottom:16px; }
.principle-item p{ color:rgba(255,255,255,.72); font-size:.98rem; }

/* ===== SIGNATURE INTRO (reutiliza .signature de style.css) ===== */
.signature .section-head.center{ margin-bottom:0; }
.signature-card{ transition:transform .35s ease; }
.signature-card:hover{ transform:translateY(-4px); }

/* ===== MICROINTERACCIONES ===== */
.chip{ transition:transform .2s ease, border-color .2s ease, color .2s ease; }
.chip:hover{ transform:translateY(-2px); border-color:var(--gold); color:var(--gold); }

.cap-trigger{ transition:color .2s ease, padding-left .3s ease; }
.cap-item:hover .cap-trigger{ padding-left:6px; }

/* Línea que se dibuja al entrar en viewport, bajo los títulos de sección */
.section-head .line-draw{ display:block; width:0; height:1px; background:var(--gold); margin:20px auto 0; transition:width .6s cubic-bezier(.2,.7,.2,1) .2s; }
.section-head:not(.center) .line-draw{ margin:20px 0 0; }
.reveal.in .line-draw{ width:64px; }

.btn-primary, .btn-outline{ transition:background .25s ease, transform .2s ease, color .2s ease, box-shadow .25s ease; }

/* ==========================================================
   SOLO TELÉFONO — Áreas de Práctica sin fotografía
   No afecta escritorio ni tablet (>640px conserva la fotografía
   tal cual). Reemplaza el encabezado de cada área por un bloque
   navy editorial con el número del área como marca de agua.
   ========================================================== */
@media(max-width:640px){
  .chapter-photo{
    position:static !important;
    height:168px;
    aspect-ratio:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(160deg, var(--navy-800), var(--navy-900));
  }
  .chapter-photo img{ display:none; }
  .chapter-photo::before{
    content:attr(data-num);
    font-family:var(--display);
    font-weight:500;
    font-size:140px;
    line-height:1;
    color:rgba(247,245,240,.15);
  }
  .chapter-photo .placeholder-note{ display:none; }

  /* Más aire entre elementos del acordeón y los chips en móvil */
  .capabilities{ margin-top:48px; }
  .cap-trigger{ padding:22px 0; font-size:1.02rem; }
  .cap-panel-body{ padding-bottom:30px; }
  .chips{ gap:12px; }
  .chapter-close{ margin-top:48px; padding-top:26px; }
}

/* ==========================================================
   ÁREA 04 — INTERNACIONAL — énfasis editorial adicional.
   Mismos tokens de color y tipografía del resto del sitio;
   solo se le da un poco más de aire y presencia a la cita,
   por ser el área con la atención especial de esta ronda.
   ========================================================== */
#internacional .chapter-quote{ font-size:clamp(21px,2.4vw,28px); margin-bottom:36px; }
#internacional .capabilities{ margin-top:64px; }