/* ============================================================
   Globa — Placas de oportunidad
   Migrado del proyecto de placas (3a25ddfa). ADITIVO: no pisa
   ningún token ya confirmado en este proyecto. Los tres valores
   que sí diferían (--font-display, --radius-sm, --ease-out) viven
   scopeados en .globa-placa, no en :root.
   ============================================================ */

/* Títulos y precios de placa: TT Hoves Pro Trial Expanded Bold — archivo real
   de Globa. Se registra bajo SU PROPIO nombre de familia para no alterar el
   'TT Hoves Pro' que ya usan Propuesta, Sitio Landing y los componentes. */
@font-face{font-family:"TT Hoves Pro Trial";src:url("../assets/fonts/TTHovesProTrial-ExpandedBold.ttf") format("truetype");font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --space-10:128px;

  /* ---- Lienzo de la placa (Instagram story) ---- */
  --placa-w:1080px;
  --placa-h:1920px;
  --placa-pad-x:96px;
  --placa-pad-top:156px;
  --placa-pad-bottom:96px;
  /* Anclas verticales tomadas del vector de Figma (Op_NY.pdf, 1080x1920):
     logo 157..219 · collage 661..1334 · chips 1359..1536 · precio 1591..1656.
     NO son márgenes acumulables: el collage, los chips y el precio están en el
     MISMO y absoluto con nombres de uno o de dos renglones. El grupo
     título+fecha vive en la banda de arriba y crece hacia arriba. */
  --placa-anchor-titulo:240px;   /* banda del título. UN renglón: 421px de alto,
                                    centrado. DOS: 393px, alineada al pie, que
                                    deja la fecha a 38px del collage */
  --placa-anchor-collage:661px;
  --placa-anchor-chips:1359px;
  --placa-anchor-precio:1577px;
  --placa-gap-tight:0px;         /* precio -> letra chica: pegados, la base de la
                                    letra chica cae 34px debajo de la del precio */
  --placa-gap-cuotas:12px;       /* precio -> barra de cuotas */
  --placa-gap-meta:-4.5px;       /* destino -> fecha: el interlineado 0.9375 ya
                                    acerca las cajas, así que la costura es
                                    negativa para dejar 50px entre bases */
  --placa-servicio-gap:20px;

  /* ---- Escala tipográfica de la placa, medida sobre el vector ---- */
  --size-placa-destino:176px;
  --size-placa-meta:40px;
  --size-placa-precio:90px;
  --size-placa-precio-sm:56px;
  --size-placa-cuotas:44px;
  --size-placa-servicio:21px;
  --size-placa-print:26px;
  --size-placa-nota:19px;

  /* Interlineados de la placa, del mismo vector */
  --leading-placa-destino:0.9375;  /* 165px de paso a 176px de cuerpo */
  --leading-placa-print:0.923;     /* 24px de paso a 26px */
  --leading-placa-servicio:0.952;  /* 20px de paso a 21px */

  /* ---- Rampa de pantalla/deck del proyecto de placas ---- */
  --size-display:96px;
  --size-h1:64px;
  --size-h2:44px;
  --size-h3:30px;
  --size-body-lg:22px;
  --size-body:17px;
  --size-caption:14px;

  --leading-tight:0.88;
  --leading-title:1.02;
  --leading-snug:1.2;
  --leading-body:1.45;

  --tracking-tight:-0.02em;
  --tracking-title:-0.015em;
  --tracking-normal:0;
  --tracking-wide:0.04em;

  /* ---- Pesos (nombres del proyecto de placas) ---- */
  --weight-regular:400;   /* @kind font */
  --weight-medium:500;    /* @kind font */
  --weight-semibold:600;  /* @kind font */
  --weight-bold:700;      /* @kind font */
  --weight-black:800;     /* @kind font */

  /* ---- Inclinaciones de las polaroids del collage ---- */
  --tilt-a:-5deg; /* @kind other */
  --tilt-b:3deg;  /* @kind other */
  --tilt-c:7deg;  /* @kind other */

  /* Las fotos del collage van PLANAS, sin drop shadow (así están en las placas
     publicadas). --shadow-card queda solo para tarjetas de interfaz. */
  --shadow-card:0 2px 10px -4px color-mix(in srgb,var(--globa-negro) 14%,transparent);

  --dur-base:240ms; /* @kind other */

  /* ---- Superficies y textos que usa el sistema de placas ----
     Nombres que este proyecto no tenía. Se agregan tal cual venían para que los
     componentes de placa resuelvan igual que en el proyecto viejo. */
  --globa-verde-vivo-24:color-mix(in srgb,var(--globa-verde-vivo) 24%,transparent);
  --globa-verde-agua-10:color-mix(in srgb,var(--globa-verde-agua) 10%,var(--globa-crema));
  --globa-verde-agua-20:color-mix(in srgb,var(--globa-verde-agua) 20%,var(--globa-crema));
  --globa-turquesa-15:color-mix(in srgb,var(--globa-turquesa) 15%,transparent);

  --surface-sand:var(--globa-arena);
  --surface-deep:var(--globa-verde-agua);
  --surface-turquoise:var(--globa-turquesa);
  --surface-photo-frame:var(--globa-blanco);  /* marco blanco de las polaroids */
  --surface-note:var(--globa-verde-agua-10);  /* caja de aclaración familiar */

  --text-deep:var(--globa-verde-agua);
  --text-on-deep:var(--globa-crema);
  --text-on-dark:var(--globa-blanco);

  --border-hairline:color-mix(in srgb,var(--globa-negro) 12%,transparent);

}

/* ============================================================
   Scope de placa. Poné class="globa-placa" en el <body> (o en el
   contenedor) de cualquier página que arme placas: los tres valores
   de abajo son los del proyecto viejo y difieren de los de este
   proyecto, así que sólo aplican acá adentro.
   ============================================================ */
/* ============================================================
   Scope de placa. PlacaFrame ya pone class="globa-placa" en su div
   externo, así que toda placa hereda estos valores automáticamente.
   Ponelo a mano sólo si escribís HTML de placa suelto.
   ============================================================ */
.globa-placa{
  --font-display:"TT Hoves Pro Trial","Public Sans","Helvetica Neue",sans-serif;
  --text-brand:var(--globa-verde-vivo);  /* titulares y precios en Verde Vivo */
  --radius-sm:8px;
  --ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
}