/* ==========================================================================
   Términos y Condiciones — Invertí en YPF
   --------------------------------------------------------------------------
   Maquetado fiel a Figma:
   archivo QCbSalrbtvI7OAEnjWHX74 · frame "UI — TyC Híbrido A+C · Desktop" (3212:568)
   Este archivo cubre por ahora SOLO el hero / "Title block" (3212:570).

   Convenciones para no romper nada de lo existente:
   - Todo va prefijado con .tyc-  (prefijo verificado como libre en el proyecto).
   - Se carga DESPUÉS de css/styles.css para poder pisar las reglas globales
     de h1 y p sin usar !important.
   - No se toca ninguna regla, clase ni variable preexistente.

   Heredado a propósito de css/styles.css (no se redeclara):
   - body { padding-top: 55px }        compensa el .headerYPF fixed de 55px
   - body { background-color: #f0f5fa } fondo de página
   - h1    { font-family: Montserrat; font-weight: 700; color: #3965b9;
             line-height: 46px }       ya coincide con el Figma
   ========================================================================== */

/* Fondo de la página.
   styles.css define `body { background-color: #f0f5fa }` de forma global (ese
   celeste afecta a todas las páginas del sitio), así que se pisa acá scopeado
   a .page-tyc en lugar de modificar el global. */
body.page-tyc {
  background-color: #f5f5f5;
}

/* --------------------------------------------------------------------------
   Hero / "Title block" — Figma 3212:570
   1440 x 368 · padding 80px 120px · flex column · gap 16px
   -------------------------------------------------------------------------- */
.tyc-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 80px 120px;
}

/* Bloque título + subtítulo — Figma 3212:571 · 588px · gap 20px */
.tyc-hero__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 588px;
  max-width: 100%;
}

/* H1 — Figma 3212:572 · Montserrat Bold 40/46 · #3965b9 · alto 92 (2 líneas)
   line-height va declarado explícitamente a propósito: styles.css tiene
   `@media all and (min-width: 992px) { h1 { line-height: 1.05 } }`, que sobre
   40px daba 42px y dejaba el hero en 358px en vez de los 368px del Figma.
   family, weight y color sí se heredan del h1 global y ya coinciden. */
.tyc-hero__title {
  margin: 0;
  width: 100%;
  font-size: 40px;
  line-height: 46px;
  word-break: break-word;
}

/* Subtítulo — Figma 3212:573 · Montserrat Regular 18 · #646e86 · alto 44 (2 líneas)
   line-height: 22px se deriva del alto del nodo (44 / 2 líneas). Con `normal`
   Montserrat rendea 21px y el bloque quedaba en 42px. */
.tyc-hero__subtitle {
  margin: 0;
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #646e86;
}

/* Fila meta — Figma 3212:574 · 1200 x 36 · space-between · center */
.tyc-hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Fecha de actualización — Figma 3212:575 · DIN Pro Regular 12/18 · #646e86
   "DIN Pro" del Figma se mapea a la familia 'din-regular' ya declarada
   en css/global.css (fonts/DINRegular.woff2). */
.tyc-hero__updated {
  margin: 0;
  font-family: "din-regular", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #646e86;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Botón "Descargar PDF" — Figma 3212:576 (component/button/default)
   Size=Small · Hierarchy=Primary · State=Idle · Color=Brand
   bg #0451dd · height 36 · radius 8 · padding 0 8px
   -------------------------------------------------------------------------- */
.tyc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  background-color: #0451dd;
  text-decoration: none;
}

/* Label — Figma I3212:576;9743:70392 · DIN Pro Medium 14/18 · blanco
   El wrapper del label tiene su propio padding 0 8px en el Figma. */
.tyc-button__label {
  padding: 0 8px;
  font-family: "din-medium", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #ffffff;
  white-space: nowrap;
}

/* Ícono — Figma I3212:576;9743:70393 · caja 24x24, vector 18x18 (inset 12.5%) */
.tyc-button__icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   BODY — Figma 3220:4032
   Grilla: 120 | Índice 384 | gap 24 | Contenido 792 | 120  = 1440
   ========================================================================== */
/* La columna de contenido es fluida en vez de fija en 792px: a 1440 el cálculo
   da exactamente los valores del Figma (1440 - 240 de padding - 24 de gap - 384
   de índice = 792), y por debajo de 1440 se encoge en lugar de desbordar. */
.tyc-body {
  display: grid;
  grid-template-columns: minmax(0, 384px) minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
  padding: 0 120px 80px;
}

/* Rango tablet (834–1279px): sin referencia en el Figma, que es solo 1440.
   Se reduce el padding y el ancho del índice para que la columna de texto no
   quede impracticable. */
@media only screen and (max-width: 1279px) {
  .tyc-body {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    padding: 0 40px 80px;
  }
}

@media only screen and (min-width: 834px) and (max-width: 1279px) {
  .tyc-hero {
    padding: 56px 38px;
  }
}

/* --------------------------------------------------------------------------
   Columna izquierda — Índice (sticky) · Figma 3220:4033
   flex column · gap 8px · 384px
   El offset de 55px es la altura del .headerYPF fixed (css/header.css).
   -------------------------------------------------------------------------- */
.tyc-index {
  position: sticky;
  top: 55px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Requisito 1: scroll propio, acompaña todo el documento */
  max-height: calc(100dvh - 55px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* La barra de scroll se oculta pero el scroll sigue funcionando con la
     ruedita, trackpad, teclado y arrastre. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tyc-index::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* "CONTENIDO" — Figma 3220:4034 · DIN Pro Regular 12/18 · #647186 */
.tyc-index__label {
  margin: 0;
  font-family: "din-regular", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #647186;
}

.tyc-index__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* "Introducción" (sin número) — Figma 3220:4035/4036
   Es un ítem navegable, no un grupo. Montserrat SemiBold 15 · #3d3d3d · alto 42 */
.tyc-index__intro {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  /* El separador va como inset shadow y no como border: en Figma el stroke es
     interno y no suma al alto del frame (42px = 12 + 18 + 12). */
  box-shadow: inset 0 -1px 0 #e3e7ef;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  color: #3d3d3d;
  transition: background-color 150ms ease;
}

/* Grupo — Figma 3220:4037 y ss. · flex column · gap 4px */
.tyc-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Header de grupo — Figma "Índice / Header de grupo" (3166:51649)
   Descripción del componente en Figma: "Click en cualquier punto expande/colapsa
   el grupo. NO navega." · alto 48 = 12 + 22 + 12 */
.tyc-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 12px 8px;
  border: 0;
  border-radius: 0;
  /* Igual que en el ítem de Introducción: stroke interno, no suma al alto.
     48px = 12 + 24 (alto del chevron, que domina la fila) + 12. */
  box-shadow: inset 0 -1px 0 #e3e7ef;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease;
}

/* Chevron — 24x24. El vector de Figma es 7.41x12 posicionado en (8.59, 6).
   chevron-down es el mismo glifo rotado 90°: rotando sobre el centro de la
   caja (12,12) se obtiene exactamente el inset de Figma para el estado abierto. */
.tyc-group__chevron {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform 150ms ease;
}

.tyc-group.is-open > .tyc-group__header .tyc-group__chevron {
  transform: rotate(90deg);
}

/* Título del grupo — Montserrat SemiBold 16/22 · #212121 */
.tyc-group__title {
  flex: 1 0 0;
  min-width: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #212121;
}

/* Rango de cláusulas ("4–6") — DIN Pro Regular 12/18 · #647186 */
.tyc-group__range {
  flex-shrink: 0;
  font-family: "din-regular", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #647186;
  white-space: nowrap;
}

/* Contenedor de ítems: colapsado por defecto (multi-open lo maneja el JS) */
.tyc-group__items {
  display: none;
  flex-direction: column;
  gap: 4px;
}

.tyc-group.is-open > .tyc-group__items {
  display: flex;
}

/* Ítem de sección — Figma "Índice / Ítem de sección" (3166:51656)
   Estado normal: Montserrat Regular 14/18 · #647186 · alto 38 */
.tyc-index__item {
  display: flex;
  align-items: center;
  padding: 10px 8px 10px 20px;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #647186;
  transition: background-color 150ms ease;
}

/* Estado activo (scroll-spy) — bg #3965b9 · SemiBold 14/20 · blanco · alto 40
   El padding-left es 16px y no 20px: así está en el Figma (3220:4041). */
.tyc-index__item.is-active {
  padding-left: 16px;
  background-color: #3965b9;
  font-weight: 600;
  line-height: 20px;
  color: #ffffff;
}

/* Hover — requisito 12: solo desktop, tint #EDF2FA, 150ms, nunca expande.
   El ítem activo no cambia con hover. */
@media (hover: hover) and (pointer: fine) {
  .tyc-group__header:hover,
  .tyc-index__item:not(.is-active):hover,
  .tyc-index__intro:hover {
    background-color: #edf2fa;
  }
}

/* --------------------------------------------------------------------------
   Columna derecha — Contenido · Figma 3220:4054
   792px · secciones separadas 56px
   -------------------------------------------------------------------------- */
.tyc-content {
  display: flex;
  flex-direction: column;
  gap: 56px;
  min-width: 0;
}

/* Divisor de grupo — Figma 3220:4055, 4060, 4094, 4131, 4170, 4216, 4273, 4325
   Montserrat Bold 14 · tracking 1.5px · #646e86 · alto 17
   Es hermano de las secciones dentro de .tyc-content, con el mismo gap de 56px.
   El texto va en mayúsculas tal como está en el diseño (no es text-transform:
   el contenido del nodo ya viene en mayúsculas). */
.tyc-group-divider {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 1.5px;
  color: #646e86;
  scroll-margin-top: 71px;
}

/* Sección — Figma 3220:4108 y ss. · flex column · gap 20px
   scroll-margin-top compensa el .headerYPF fixed (55px) al saltar por ancla. */
.tyc-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-margin-top: 71px;
  /* El Figma declara word-break:break-word en el frame de la sección. Sin esto
     las URLs largas del texto legal (p. ej. la del BCRA en la cláusula 20, o
     www.santander.com.ar/legales/comisiones-bcra) no cortan y desbordan la
     columna en anchos de tablet. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Título de sección — Montserrat Bold 22 · #3965b9
   line-height: 27px se deriva del alto del nodo (una línea = 27, dos = 54).
   Va explícito también porque styles.css define reglas globales para h2. */
.tyc-section__title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 27px;
  color: #3965b9;
}

/* Texto legal — Figma "Texto legal (placeholder)"
   Montserrat Regular 15 · line-height 1.6 · #3d3d3d · gap 16px */
.tyc-section__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tyc-section__text p {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: #3d3d3d;
}

/* ==========================================================================
   MOBILE (0–833px) — el índice pasa a bottom sheet con botón flotante
   --------------------------------------------------------------------------
   834px en adelante es tablet y muestra las dos columnas.
   Cubre los requisitos 8, 9, 10 y 13.
   Los valores de "chrome" del sheet (radio, handle, paddings, FAB) están
   tomados de las capturas provistas: no hay nodo de Figma mobile todavía.
   ========================================================================== */

/* Piezas que solo existen en el sheet: ocultas en desktop. */
.tyc-index__handle,
.tyc-index__sheet-head,
.tyc-index-overlay,
.tyc-index-fab {
  display: none;
}

@media only screen and (max-width: 833px) {
  .tyc-hero {
    padding: 48px 24px;
  }

  .tyc-hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .tyc-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 24px 48px;
  }

  /* --- el índice se transforma en bottom sheet ------------------------- */
  .tyc-index {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1101;
    gap: 0;
    /* Requisito 8: crece con el contenido hasta ~90% del viewport.
       Requisito 13b: dvh y no vh, por la barra de URL del navegador.
       border-box para que el padding quede dentro del tope y el alto total
       sea 90dvh exacto y no 90dvh + padding. */
    box-sizing: border-box;
    max-height: 90dvh;
    padding: 0 16px 16px;
    border-radius: 16px 16px 0 0;
    background: #ffffff;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
    /* El scroll interno pasa al nav para que handle y header queden fijos. */
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 240ms ease;
  }

  body.tyc-sheet-open .tyc-index {
    transform: translateY(0);
  }

  /* Handle. Requisito 13a: el drag-to-close se implementa por JS; además
     quedan el ✕ y el tap en el overlay. */
  .tyc-index__handle {
    display: block;
    flex-shrink: 0;
    width: 48px;
    height: 4px;
    margin: 8px auto 4px;
    border-radius: 999px;
    background: #d6d6d6;
  }

  .tyc-index__sheet-head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 12px;
  }

  .tyc-index__sheet-title {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #212121;
  }

  .tyc-index__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #212121;
    cursor: pointer;
  }

  /* En el sheet el título lo da el header, no el label "CONTENIDO". */
  .tyc-index__label {
    display: none;
  }

  /* Requisito 8: scroll interno del listado. */
  .tyc-index__nav {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tyc-index__nav::-webkit-scrollbar {
    width: 0;
    display: none;
  }

  /* --- overlay oscuro -------------------------------------------------- */
  .tyc-index-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
  }

  body.tyc-sheet-open .tyc-index-overlay {
    opacity: 1;
    visibility: visible;
  }

  /* --- botón flotante "Índice" ---------------------------------------- */
  .tyc-index-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 1050;
    padding: 13px 24px;
    border: 0;
    border-radius: 999px;
    background: #0451dd;
    box-shadow: 0 6px 20px rgba(4, 81, 221, 0.35);
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: #ffffff;
    cursor: pointer;
    transform: translate(-50%, 0);
    transition: transform 220ms ease, opacity 220ms ease;
  }

  /* Requisito 10: se oculta al scrollear hacia abajo y reaparece al subir. */
  .tyc-index-fab.is-hidden {
    opacity: 0;
    transform: translate(-50%, 160%);
    pointer-events: none;
  }

  /* Con el sheet abierto el FAB no debe quedar sobre el overlay. */
  body.tyc-sheet-open .tyc-index-fab {
    opacity: 0;
    transform: translate(-50%, 160%);
    pointer-events: none;
  }

  /* Bloquea el scroll del documento detrás del sheet. */
  body.tyc-sheet-open {
    overflow: hidden;
  }
}