/* ============================================================
   home.css — Estilos de la Home + componentes compartidos
   (hero, section-heading, text-image-block, accordion, cta-band).
   Reutilizable por las otras 4 páginas. Fuente de verdad: home.png.
   Tokens en tokens.css. NO redefinir colores/sizes aquí salvo layout.
   ============================================================ */

/* ---------- HERO (lienzo beige único con header overlay; piedras a la derecha) ----------
   El banner rosso-hero3.jpg (1980×970, beige #E2DED8 + stack de piedras a la derecha)
   es el BACKGROUND de la sección. background-size:contain → el banner ENTERO siempre
   visible (el stack nunca se recorta a ningún ancho); anclado a la derecha. La franja
   beige del banner se funde con --bg-hero (mismo lienzo). Esto corrige el bug del viejo
   `auto 100%` que recortaba el stack a anchos ≠ del de captura (INVARIANTS §6c).
   El header va position:absolute encima → padding-top despeja el nav. */
.hero {
  position: relative;
  /* background-color = beige PROPIO del banner (#E3DED8), NO --bg-hero (#E7E6E2):
     con contain el banner no cubre todo el ancho; igualar el color elimina el
     seam entre la franja del banner y el relleno de la sección. */
  background-color: #E3DED8;
  background-image: url('../img/rosso-hero3.jpg');
  background-size: contain;            /* banner entero → stack completo a todo ancho */
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding-top: 150px;                  /* despeja el header absoluto */
  padding-bottom: 40px;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__eyebrow { margin-bottom: 14px; }
.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.18;
  color: var(--c-purple-2);
  margin: 0;
}
.hero__btn { margin-top: 26px; }

/* ---------- SECTION-HEADING (eyebrow + título) ---------- */
.section-heading--left   { text-align: left; }
.section-heading--center { text-align: center; }
.section-heading__eyebrow { margin-bottom: 10px; }
.section-heading__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.18;
  color: var(--c-purple-2);
  margin: 0;
}
.section-heading__title--lg { font-size: var(--fs-h1); }

/* ---------- TEXT-IMAGE BLOCK (2 col) ---------- */
.ti-block { padding: var(--space-section) 0; }
.ti-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.ti-block__inner--img-left  { direction: rtl; }
.ti-block__inner--img-left > * { direction: ltr; }
.ti-block__eyebrow { margin-bottom: 12px; line-height: 1.35; }
.ti-block__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.18;
  color: var(--c-purple-2);
  margin: 0 0 24px;
}
.ti-block__body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--c-gray);
  line-height: var(--lh-base);
  max-width: 30em;
  margin-bottom: 22px;
}
.ti-block__body p { margin: 0; }
.ti-block__media {
  display: flex;
  justify-content: center;
}
.ti-block__img { width: 100%; height: auto; }
.ti-block__img--portrait {
  width: auto;
  max-height: 540px;
  margin: 0 auto;
}

/* ---------- SOLUCIONES · composición de óvalos (bloque 3) ----------
   3 capas separadas (reemplazan rosso-bg1.png con watermark quemado):
   - óvalo IZQ (bg1, 218x400) más ABAJO; óvalo DER (bg2, 218x361) más ARRIBA.
   - wordmark (bg3-logo, 640x183) overlay tenue, centrado, cruzando ambos.
   Aspect ratios reales preservados (width % + height auto → no deforma).
   El wrapper usa aspect-ratio para escalar la composición completa con su ancho;
   el offset vertical del óvalo izq es ~17% de su altura (medido de home.png). */
.soluciones-ovals {
  position: relative;
  width: 100%;
  /* Los óvalos van LADO A LADO (no apilados): izq anclado abajo, der arriba,
     ~48% del ancho con solape leve. El óvalo IZQ (218x400) a 48% de ancho mide
     ~0.88x el ancho de la composición de alto; el contenedor debe ser al menos
     tan alto para que NO se corte en reposo, y dejar headroom para el scale(1.035)
     del hover (el izq, anclado abajo, crece hacia arriba → ~0.91x). aspect-ratio
     611/558 (H/W≈0.913) garantiza ambos óvalos completos en reposo Y en hover.
     El parent .ti-block__media--ovals quita el overflow:hidden que los clipeaba. */
  aspect-ratio: 611 / 558;
}
/* El media wrapper de la composición de óvalos NO debe clipear: los óvalos son
   imagen-FORMA (PNG transparente) y su scale en hover debe verse completo. Anula
   el overflow:hidden + zoom-de-banner que .ti-block__media aplica a fotos de marco. */
.ti-block__media--ovals {
  overflow: visible;
  border-radius: 0;
}
.ti-block__media--ovals:hover .ti-block__img { transform: none; }

.soluciones-ovals__oval {
  position: absolute;
  width: 48%;        /* óvalo / ancho de composición → lado a lado con solape leve */
  height: auto;      /* preserva aspect ratio real del PNG (no deforma) */
  display: block;
}
.soluciones-ovals__oval--left  { left: 0;    bottom: 0; }  /* izq · más abajo */
.soluciones-ovals__oval--right { right: 0;   top: 0; }     /* der · más arriba */
.soluciones-ovals__logo {
  position: absolute;
  z-index: 2;                 /* por encima de los óvalos */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92%;                 /* wordmark cruza ambos óvalos al medio */
  height: auto;
  opacity: .92;               /* tenue, como el diseño */
  display: block;
}
/* Hover amigable: los óvalos hacen un leve scale desde su ancla y el wordmark se aviva. */
.soluciones-ovals__oval { transition: transform .55s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.soluciones-ovals__oval--left  { transform-origin: left bottom; }
.soluciones-ovals__oval--right { transform-origin: right top; }
.soluciones-ovals__logo { transition: opacity .55s ease; }
.soluciones-ovals:hover .soluciones-ovals__oval { transform: scale(1.035); }
.soluciones-ovals:hover .soluciones-ovals__logo { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .soluciones-ovals__oval, .soluciones-ovals__logo { transition: none; }
  .soluciones-ovals:hover .soluciones-ovals__oval { transform: none; }
}

/* social-bar inline (retrato Dra. Rosso): LinkedIn + Mail, alineados a la izquierda */
.social-bar--inline {
  justify-content: flex-start;
  gap: 12px;
  margin-top: 22px;
}
.social-bar--inline a { width: 30px; height: 30px; }
.social-bar--inline img { width: 30px; height: 30px; }

/* ---------- HOME · ÁREAS (acordeón) ---------- */
.home-areas {
  padding: var(--space-section) 0;
  background: var(--bg-section);
}
.home-areas .section-heading { margin-bottom: 48px; }
.home-areas .section-heading__eyebrow { margin-bottom: 8px; }
.home-areas__more {
  text-align: center;
  margin-top: 40px;
}

/* ---------- ACCORDION ---------- */
.accordion {
  max-width: 880px;
  margin: 0 auto;
}
.accordion__item { border-bottom: 1px solid var(--c-beige); }
.accordion__head {
  position: relative;
  width: 100%;
  background: none;
  border: none;
  padding: 26px 0;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-serif);
}
.accordion__title {
  font-family: var(--font-serif);
  line-height: 1.2;
  transition: color .15s ease;
}
/* estilo 'area' (Home): Cardo 36, cerrado #989898 / abierto bold #A27EA0 */
.accordion--area .accordion__title {
  font-weight: 400;
  font-size: var(--fs-accordion);
  color: var(--c-gray);
}
.accordion--area .is-open .accordion__title {
  font-weight: 700;
  color: var(--c-accent);
}
/* estilo 'faq' (Preguntas): Cardo-Bold 24 #A27EA0 */
.accordion--faq .accordion__title {
  font-weight: 700;
  font-size: var(--fs-faq);
  color: var(--c-accent);
}

/* Panel: expand/colapso suave vía grid-template-rows 0fr→1fr (sin medir altura en JS) */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  text-align: center;
  transition: grid-template-rows .35s ease, opacity .3s ease;
}
.accordion__panel > .accordion__panel-inner {
  overflow: hidden;
  min-height: 0;
}
.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: 26px;
}
.accordion__body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--c-gray);
  line-height: var(--lh-base);
  max-width: 720px;
  margin: 0 auto 16px;
}
.accordion__body p { margin: 0; }
.accordion__less {
  display: inline-flex;
  flex-direction: column;       /* chevron ARRIBA, texto debajo (como el diseño) */
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-copyright);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-gray);
  transition: color .2s ease;
}
.accordion__less:hover { color: var(--c-accent); }
/* Chevron de VER MENOS: apunta hacia ARRIBA (estado abierto), sobre el texto */
.accordion__less-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg);
}
.accordion__less-text { display: inline-block; }

/* ---------- CTA BAND (full-bleed textura) ---------- */
.cta-band {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 88px 0;
  text-align: center;
}
.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-band__eyebrow { margin-bottom: 10px; }
.cta-band__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.18;
  color: var(--c-purple-2);
  margin: 0 0 18px;
}
.cta-band__text {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--c-gray);
  line-height: var(--lh-base);
  max-width: 36em;
  margin: 0 0 22px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .ti-block__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ti-block__inner--img-left { direction: ltr; }
  .ti-block__inner--img-left .ti-block__media { order: -1; }

  /* Hero en móvil: banner debajo del texto (stack entero, sin recorte).
     contain mantiene el banner completo; lo bajamos para no pisar el título. */
  .hero {
    min-height: 560px;
    background-position: right bottom;
    background-size: contain;
    padding-bottom: 0;
  }
  .hero__title { font-size: 34px; }
}