/* =============================================================================
   recursos-index.css - Carrasco TI Group
   Proposito:  Estilos de la pagina. Externalizado desde el HTML el 2026-08-25
               para poder retirar 'unsafe-inline' de style-src.
   Autor:      Desiderio Carrasco - CTG
   ============================================================================= */

  :root{
    --grafito:#1C2630; --acero:#5C6B78; --acero-soft:#69757F;
    --lienzo:#FFFFFF; --panel:#F6F7F8; --line:#DDE2E6;
    --bronce:#A67C3D; --bronce-deep:#8B6530;
  }
  .sr-only,
  .sr-only-c{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  a, button, [role='button']{ touch-action: manipulation; }
  *{ box-sizing:border-box; margin:0; padding:0; }
  body{
    background-color:var(--lienzo);
    background-image:
      linear-gradient(rgba(92,107,120,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(92,107,120,0.05) 1px, transparent 1px);
    background-size:44px 44px;
    color:var(--grafito); font-family:'Source Serif 4', serif; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; max-width:100%; }
  .display{ font-family:'Space Grotesk', sans-serif; }
  .mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:.06em; }
  .wrap{ max-width:880px; margin:0 auto; padding:0 28px; }
  :focus-visible{ outline:2px solid var(--grafito); outline-offset:3px; }

  header.site{
    position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1120px; margin:0 auto; }
  .brand{ display:flex; align-items:center; gap:0; }
  .brand-name{ margin-left:-5px; }
  .brand-icon{ height:30px; width:30px; }
  .brand-name{ font-weight:700; font-size:1.1rem; letter-spacing:-0.01em; color:var(--grafito); }
  .back-link{
    font-family:'IBM Plex Mono',monospace; font-size:.76rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--acero);
  }
  .back-link:hover{ color:var(--grafito); }

  .hero{ padding:44px 0 26px; }
  .eyebrow{ font-size:.74rem; letter-spacing:.12em; color:var(--acero); text-transform:uppercase; margin-bottom:14px; }
  h1{ font-weight:700; font-size:clamp(1.7rem,3.6vw,2.25rem); line-height:1.18; color:var(--grafito); max-width:24ch; }
  .hero-sub{ margin-top:14px; color:var(--acero-soft); max-width:58ch; font-size:1rem; }

  /* BUSCADOR - anadido 2026-08-26
     Oculto por defecto: sin JavaScript un campo que no filtra es peor que no
     tenerlo. `html.js` lo pone el propio script de forma sincrona, asi que el
     navegador ya sabe que va a mostrarlo y no hay salto de maquetacion.
     Sin bronce: el acento sigue siendo solo la categoria de cada tarjeta. */
  .buscador{ display:none; }
  html.js .buscador{ display:block; margin:0 0 4px; }
  html.js .buscador[hidden]{ display:none; }
  /* Esquineros: abrazan la LUPA, no el campo. Asi el motivo identifica la
     herramienta en vez de encuadrar el input, que lo volvia decorativo. Se
     probo la version que enmarcaba todo el campo el 2026-08-26 y encerraba
     demasiado: el buscador parecia una caja de marca, no un instrumento. */
  .buscador-marco{ position:relative; display:block; max-width:41rem; }
  .buscador-icono{
    position:absolute; left:16px; top:50%; margin-top:-9px;
    width:18px; height:18px; color:var(--acero); pointer-events:none;
    transition:color .18s ease;
  }
  .buscador-icono::before,
  .buscador-icono::after{
    content:""; position:absolute; width:10px; height:10px;
    transition:transform .18s ease;
  }
  .buscador-icono::before{ top:-5px; left:-5px; border-top:1px solid currentColor; border-left:1px solid currentColor; }
  .buscador-icono::after{ right:-5px; bottom:-5px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; }
  .buscador-marco:focus-within .buscador-icono{ color:var(--grafito); }
  .buscador-marco:focus-within .buscador-icono::before{ transform:translate(-1px,-1px); }
  .buscador-marco:focus-within .buscador-icono::after{ transform:translate(1px,1px); }
  .buscador-lupa{ width:18px; height:18px; }
  .buscador-campo{
    width:100%; padding:11px 14px 11px 50px;
    font-family:'Source Serif 4', serif; font-size:.95rem; color:var(--grafito);
    background:var(--lienzo); border:1px solid var(--line); border-radius:0;
    -webkit-appearance:none; appearance:none;
  }
  .buscador-campo::placeholder{ color:var(--acero); opacity:1; }
  .buscador-campo:hover{ border-color:var(--acero); }
  .buscador-estado{
    margin-top:8px; min-height:1.2em; font-size:.7rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--acero);
  }
  .buscador-estado-vacio{ color:var(--grafito); text-transform:none; letter-spacing:0;
    font-family:'Source Serif 4', serif; font-size:.9rem; }

  .list{ padding:20px 0 80px; display:flex; flex-direction:column; }
  .card{
    display:grid; grid-template-columns:200px 1fr; gap:26px; align-items:center;
    padding:32px 0; border-top:1px solid var(--line);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  }
  .card:hover{ opacity:1; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(28,38,48,.07); }
  /* `display:grid` pisa el display:none que trae el atributo hidden, asi que
     sin esto el buscador contaba bien y no ocultaba nada. */
  .card[hidden]{ display:none; }
  .card-thumb{ border:1px solid var(--line); overflow:hidden; aspect-ratio: 4 / 3; }
  .card-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
  .card-meta{ font-size:.7rem; letter-spacing:.1em; color:var(--acero); text-transform:uppercase;
    margin-bottom:10px; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px; }
  .card-tag{ color:var(--bronce-deep); }
  .card-meta-sep{ color:var(--line); }
  .card-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.4rem; color:var(--grafito); max-width:32ch; }
  .card-desc{ margin-top:10px; color:var(--acero-soft); font-size:.96rem; max-width:60ch; }

  @media (max-width:640px){
    .card{ grid-template-columns:1fr; }
  }

  /* En estrecho la meta no cabe en una linea y el flex la partia por donde
     tocara, dejando un separador colgando al final. Se apila a proposito:
     categoria arriba, fecha y lectura debajo. */
  @media (max-width:520px){
    .card-meta{ display:block; }
    .card-tag{ display:block; margin-bottom:3px; }
    .card-tag + .card-meta-sep{ display:none; }
    .card-meta-sep{ margin:0 6px; }
  }

  footer{ border-top:1px solid var(--line); padding-top:40px; margin-top:64px; }
  .footer-compact{
    max-width:1120px; margin:0 auto; padding:0 28px 28px;
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:28px;
  }
  .footer-compact-brand{ display:flex; flex-direction:column; gap:10px; max-width:32ch; }
  .footer-compact-lockup{ display:flex; align-items:center; gap:0; }
  .footer-compact-icon{ height:26px; width:26px; flex-shrink:0; }
  .footer-compact-name{ margin-left:-4px; font-weight:700; font-size:1rem; letter-spacing:-0.01em; color:var(--grafito); }
  .footer-compact-note{ font-size:.74rem; color:var(--acero); }
  .footer-compact-nav{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.78rem; }
  .footer-compact-nav a{ color:var(--acero); transition:color .2s ease; }
  .footer-compact-nav a:hover{ color:var(--grafito); }
  .footer-social{ display:flex; gap:2px; margin-left:-10px; }
  .footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--acero); transition:color .2s ease, transform .2s ease; }
  .footer-social a:hover{ color:var(--grafito); transform:translateY(-1px); }
  .footer-social svg{ width:17px; height:17px; }
  .footer-compact-bottom{
    max-width:1120px; margin:0 auto; padding:20px 28px 24px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-family:'Source Serif 4', serif; font-size:.74rem; color:var(--acero);
  }
  .footer-compact-bottom a{ color:var(--acero); border-bottom:1px solid var(--line); transition:color .2s ease, border-color .2s ease; }
  .footer-compact-bottom a:hover{ color:var(--grafito); border-color:var(--grafito); }
  @media (max-width:640px){ .footer-compact{ flex-direction:column; } }

/* --- clases que sustituyen a los antiguos atributos style=" -------------
   Movidas aqui el 2026-08-25: una CSP por hash NO cubre los atributos
   style=", solo los bloques <style>. Ver la regla de oro, punto 6.8. */
.brand-suffix{ color:var(--acero); font-weight:400; }

/* =============================================================================
   PIE EN GRAFITO — 2026-08-26
   Mismo cierre en todo el sitio, no solo en la portada. Grafito de la marca
   (#1C2630), nunca negro puro. El logo hereda el color: si se fija, el
   wordmark "ARRASCO" desaparece sobre oscuro.
   ============================================================================= */
  footer{
    background:#1C2630; border-top-color:#1C2630;
    background-image:
      linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:44px 44px;
  }
  .footer-compact-lockup{ color:#F2F5F7; }
  .footer-compact-name{ color:inherit; }
  .footer-compact-name .brand-suffix{ color:#96A3AE; }
  .footer-compact-note{ color:#C6D0D8; }
  .footer-compact-nav a,
  .footer-social a{ color:#AEBAC4; }
  .footer-compact-bottom{ color:#9AA7B2; border-top-color:rgba(255,255,255,.14); }
  .footer-compact-bottom a{ color:#AEBAC4; border-bottom-color:rgba(255,255,255,.22); }
  @media (hover:hover) and (pointer:fine){
    .footer-compact-nav a:hover,
    .footer-social a:hover,
    .footer-compact-bottom a:hover{ color:#FFFFFF; border-color:rgba(255,255,255,.5); }
  }

/* =============================================================================
   MOVIMIENTO REDUCIDO - anadido 2026-08-26
   La home, la 404 y el cotizador ya lo respetaban; esta pagina no, y desde que
   el buscador anima los esquineros al enfocar hacia falta. Se anula el
   movimiento, nunca el indicador: el foco sigue viendose por el cambio de
   color y por el anillo del navegador.
   ============================================================================= */
@media (prefers-reduced-motion: reduce){
  .card,
  .card-thumb img,
  .buscador-icono,
  .buscador-icono::before,
  .buscador-icono::after,
  .footer-compact-nav a,
  .footer-social a,
  .footer-compact-bottom a{ transition:none; }
  .card:hover{ transform:none; }
  .buscador-marco:focus-within .buscador-icono::before,
  .buscador-marco:focus-within .buscador-icono::after{ transform:none; }
  html{ scroll-behavior:auto; }
}