/* ===========================================================
   PI Creative House — sistema visual
   ------------------------------------------------------------
   Todo lo de aqui se deriva del isotipo existente, no del gusto.

   GEOMETRIA (medida sobre pich_mark.svg):
     El isotipo es un cuadrado de 207.38 x 208.73 (ratio 0.9936)
     con dos chaflanes de 45 grados en esquinas OPUESTAS
     (superior-izquierda e inferior-derecha). El cateto del corte
     mide 68.63 sobre un lado de 207.38 = 33.1 %, o sea 1/3.

     Regla del sistema:
       - Cajas CUADRADAS  -> corte proporcional exacto de 1/3 (igual al logo).
       - Cajas NO cuadradas -> corte FIJO, multiplo de la unidad base,
         porque un porcentaje sobre un rectangulo ancho deforma el angulo
         y deja de ser 45 grados.

   UNIDAD BASE: 8px. Los cortes son 1u / 2u / 3u / 5u (ratios 1:2:3:5),
   simples y reproducibles a mano. Nada de valores sueltos tipo 13px.

   COLOR:
     Marca = #FE3C0F (naranja) + #202020 (tinta). Fijos, no se tocan.
     Contraste medido con WCAG 2.1. Reglas que salieron de la medicion:
       - #FE3C0F sobre claro da 3.2-3.6:1 -> NO sirve para texto chico.
         Sobre claro, el texto naranja usa --naranja-texto (#C22D0B, 5.1:1).
         #FE3C0F queda para BLOQUES y elementos graficos, donde no aplica.
       - Boton naranja: el texto va en tinta #202020 (4.55:1), no en blanco
         (3.58:1, reprueba). Ademas se ve mas editorial.
       - Sobre oscuro #FE3C0F si pasa como texto (5.43:1 sobre #0D0D0D).
   =========================================================== */

:root {
  /* --- Marca, tal cual salen del SVG --- */
  --pich-naranja: #FE3C0F;
  --pich-tinta:   #202020;

  /* --- Escala del naranja --- */
  --naranja-900: #7A1C05;
  --naranja-texto: #C22D0B;   /* unico naranja apto para texto chico sobre claro */
  --naranja-500: #FE3C0F;
  --naranja-300: #FF7A52;     /* solo sobre fondo oscuro */
  --naranja-100: #FFD9CE;

  /* --- Neutros (todos verificados >= 4.5:1 en su uso) --- */
  --tinta-900: #101010;
  --tinta-800: #202020;
  --tinta-600: #3D3D3D;
  --tinta-500: #5C5C5C;       /* minimo legible para etiquetas sobre claro */
  --tinta-200: #C9C6C1;       /* solo bordes, nunca texto */
  --papel:     #F4F1EC;
  --papel-pur: #FFFFFF;
  /* Para fondos oscuros */
  --tenue-osc: #8A847F;       /* minimo legible para etiquetas sobre oscuro */

  /* --- Unidad base y cortes de marca --- */
  --u: 8px;
  --corte-xs: var(--u);                    /* 1u — pills, chips */
  --corte-s:  calc(var(--u) * 2);          /* 2u — botones */
  --corte-m:  calc(var(--u) * 3);          /* 3u — tarjetas, celdas */
  --corte-l:  calc(var(--u) * 5);          /* 5u — paneles grandes */
  --corte-cuadrado: 33.1%;                 /* proporcion exacta del isotipo */

  /* --- Ritmo --- */
  --space-seccion: clamp(5rem, 3rem + 8vw, 11rem);
  --gutter: clamp(1rem, 0.5rem + 3vw, 4rem);
  --medida: 62ch;

  /* --- Movimiento --- */
  --dur-rapida: 160ms;
  --dur-normal: 420ms;
  --dur-lenta: 900ms;
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Primitiva de marca: el corte del isotipo ---- */
/* Cuadrados: proporcion identica al logo. */
.chaflan-cuadrado {
  clip-path: polygon(
    var(--corte-cuadrado) 0, 100% 0,
    100% calc(100% - var(--corte-cuadrado)),
    calc(100% - var(--corte-cuadrado)) 100%,
    0 100%, 0 var(--corte-cuadrado)
  );
}
/* Rectangulos: corte fijo para conservar los 45 grados. */
.chaflan   { --corte: var(--corte-m); }
.chaflan-s { --corte: var(--corte-s); }
.chaflan-l { --corte: var(--corte-l); }
.chaflan, .chaflan-s, .chaflan-l {
  clip-path: polygon(
    var(--corte) 0, 100% 0,
    100% calc(100% - var(--corte)),
    calc(100% - var(--corte)) 100%,
    0 100%, 0 var(--corte)
  );
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, a { cursor: pointer; }

/* ---- Foco visible: obligatorio, nunca se quita sin reemplazo ---- */
:focus-visible {
  outline: 3px solid var(--pich-naranja);
  outline-offset: 3px;
  border-radius: 1px;
}
/* Sobre fondo naranja el anillo naranja no se ve: se invierte. */
.sobre-naranja :focus-visible,
.btn-naranja:focus-visible {
  outline-color: var(--tinta-900);
}

/* ---- Salto al contenido ---- */
.saltar {
  position: absolute; left: var(--gutter); top: 0;
  transform: translateY(-140%);
  background: var(--pich-tinta); color: #fff;
  padding: .75rem 1.25rem; z-index: 999;
  font-size: .875rem; text-decoration: none;
  transition: transform var(--dur-rapida);
}
.saltar:focus { transform: translateY(.5rem); }

/* ---- Objetivos tactiles: minimo 44x44 ---- */
@media (pointer: coarse) {
  /* OJO: min-height NO tiene efecto sobre un elemento inline no
     reemplazado. Sin el display el enlace de correo medía 17 px de alto
     aunque el valor computado dijera 44. Hace falta sacarlo de inline. */
  a, button {
    min-height: 44px;
    display: inline-block;
  }
  /* Los enlaces dentro de parrafo deben seguir fluyendo con el texto:
     ahi el area se gana con relleno vertical, no cambiando el display. */
  p > a, li > a, span > a, strong > a {
    display: inline;
    /* 0.7rem daba 43 px de alto total: un pixel corto. Medido a 375 px
       con puntero grueso. El relleno tiene que cubrir 44 menos el
       interlineado, no repartirse a ojo. */
    padding-block: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    /* SIN ESTA LINEA una animacion infinite no se detiene: se repite
       cada 0.01 ms y se convierte en un estroboscopio, justo para
       quien pidio menos movimiento. Es un riesgo de salud, no de
       estetica. Nunca quitar. */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}