/* ==========================================================================
   Agencia Quiroga · 25 años — Sistema de marca para HTML
   Fuente: "Template PPT 25 AÑOS.pptx" (16:9, 1280 × 720 px de referencia)
   Ver MANUAL_DE_MARCA.md para reglas de uso.
   ========================================================================== */

/* ---------- Tipografía: Chaco (archivos en ./fonts/) ----------
   Thin 250 · Light 300 · Medium 500 · Bold 700 · Black 900, cada uno con itálica.
   En el template se usan Light, Medium y Bold. */
@font-face {
  font-family: "Chaco";
  font-weight: 250;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ChacoThin.otf") format("opentype");
}
@font-face {
  font-family: "Chaco";
  font-weight: 250;
  font-style: italic;
  font-display: swap;
  src: url("fonts/ChacoThinItalic.otf") format("opentype");
}
@font-face {
  font-family: "Chaco";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ChacoLight.otf") format("opentype");
}
@font-face {
  font-family: "Chaco";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("fonts/ChacoLightItalic.otf") format("opentype");
}
@font-face {
  font-family: "Chaco";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ChacoMedium.otf") format("opentype");
}
@font-face {
  font-family: "Chaco";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("fonts/ChacoMediumItalic.otf") format("opentype");
}
@font-face {
  font-family: "Chaco";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ChacoBold.otf") format("opentype");
}
@font-face {
  font-family: "Chaco";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("fonts/ChacoBoldItalic.otf") format("opentype");
}
@font-face {
  font-family: "Chaco";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ChacoBlack.otf") format("opentype");
}
@font-face {
  font-family: "Chaco";
  font-weight: 900;
  font-style: italic;
  font-display: swap;
  src: url("fonts/ChacoBlackItalic.otf") format("opentype");
}

/* ---------- Tokens ---------- */
:root {
  /* Paleta (muestreada de los fondos y textos del PPT) */
  --q-magenta: #8E1D6D;      /* extremo cálido del degradado */
  --q-indigo: #261F49;       /* zona oscura del degradado */
  --q-cyan: #35BEEC;         /* extremo frío del degradado */
  --q-azul-gota: #06A4D4;    /* gota del logo · texto destacado sobre blanco */
  --q-cyan-texto: #00B0F0;   /* texto destacado sobre fondos oscuros */
  --q-negro: #030303;
  --q-blanco: #FFFFFF;

  /* Degradado de marca (aproximación CSS de fondo-degradado.jpg) */
  --q-degradado:
    radial-gradient(120% 90% at 0% 100%, var(--q-cyan) 0%, rgba(53, 190, 236, 0) 55%),
    radial-gradient(90% 80% at 0% 0%, var(--q-magenta) 0%, rgba(142, 29, 109, 0) 60%),
    linear-gradient(90deg, #4A4472 0%, var(--q-indigo) 85%);
  /* Degradado lineal para barras y marcos */
  --q-degradado-barra: linear-gradient(90deg, var(--q-magenta) 0%, var(--q-indigo) 50%, var(--q-cyan) 100%);

  --q-font: "Chaco", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

/* ---------- Lienzo de slide 16:9 escalable ----------
   .slide-wrap es el contenedor; dentro, --u equivale a 1 px del diseño
   de 1280 × 720, así todas las medidas del PPT se escriben como calc(N * var(--u)). */
.slide-wrap {
  container-type: inline-size;
  width: 100%;
}
.slide {
  --u: calc(100cqw / 1280);
  position: relative;
  width: 100cqw;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--q-blanco);
  font-family: var(--q-font);
  color: var(--q-negro);
}
.slide > * { position: absolute; }

/* Fondo a sangre (imágenes del PPT) */
.slide .bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.rot180 { transform: rotate(180deg); }

/* Posicionamiento con coordenadas del PPT (px sobre 1280 × 720):
   <div class="pos" style="--x:100; --y:200; --w:500; --h:300">
   Si se omite --w o --h, esa dimensión queda en auto. */
.slide .pos {
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

/* Cuadro de texto: replica los márgenes internos por defecto de PowerPoint */
.slide .txt {
  margin: 0;
  padding: calc(4.8 * var(--u)) calc(9.6 * var(--u));
  line-height: 1.2;
  box-sizing: border-box;
}

/* ---------- Escala tipográfica (pt del PPT → px a 1280) ---------- */
.fs-14 { font-size: calc(18.67 * var(--u)); }  /* 14 pt · cuerpo */
.fs-18 { font-size: calc(24 * var(--u)); }     /* 18 pt · URL / pie */
.fs-28 { font-size: calc(37.33 * var(--u)); }  /* 28 pt · antetítulo */
.fs-40 { font-size: calc(53.33 * var(--u)); }  /* 40 pt · título */
.fs-66 { font-size: calc(88 * var(--u)); }     /* 66 pt · título de sección */

.w-thin   { font-weight: 250; }
.w-light  { font-weight: 300; }
.w-medium { font-weight: 500; }
.w-bold   { font-weight: 700; }
.w-black  { font-weight: 900; }

.c-blanco      { color: var(--q-blanco); }
.c-negro       { color: var(--q-negro); }
.c-cyan        { color: var(--q-cyan-texto); }
.c-azul        { color: var(--q-azul-gota); }

.al-izq { text-align: left; }
.al-der { text-align: right; }
.al-cen { text-align: center; }

/* ---------- Elementos recurrentes ---------- */
/* Logo blanco en esquina inferior derecha (se recorta contra el borde) */
.slide .logo-esquina {
  left: calc(1157.6 * var(--u));
  top: calc(616.6 * var(--u));
  width: calc(122.4 * var(--u));
  height: calc(122.4 * var(--u));
}
/* Gota cyan pequeña en esquina superior derecha */
.slide .gota-esquina {
  left: calc(1132.2 * var(--u));
  top: calc(21.2 * var(--u));
  width: calc(90.6 * var(--u));
  height: calc(90.6 * var(--u));
}

/* Zonas de contenido libres (áreas blancas/oscuras de cada plantilla) */
.slide .zona { box-sizing: border-box; }
.preview .slide .zona { outline: 2px dashed rgba(6, 164, 212, 0.55); outline-offset: -2px; }