/* ════════════════════════════════════════════════════════════
   ITO DIRECTORIO · Estilos del frontend (idénticos al widget)
   Mismo índice de secciones [1]–[11] documentado en el widget.
   ════════════════════════════════════════════════════════════ */
  .itd-scope, .itd-scope *, .itd-scope *::before, .itd-scope *::after{
    margin:0; padding:0; box-sizing:border-box;
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif !important;
    -webkit-tap-highlight-color:transparent;
  }

  /* ════════════════════════════════════════════════════════════
     [1] VARIABLES Y CONTENEDOR PRINCIPAL
     Cambia aquí colores, radios y paddings globales del widget
     ════════════════════════════════════════════════════════════ */
  .itd-scope{
    --itd-bg:#050507;                /* fondo negro */
    --itd-orange:#D4451D;            /* naranja principal de marca */
    --itd-orange-soft:#FF6B35;       /* naranja claro para acentos/hover */
    --itd-glass:rgba(255,255,255,.045);
    --itd-glass-hi:rgba(255,255,255,.09);
    --itd-stroke:rgba(255,255,255,.10);
    --itd-txt:#F5F5F7;
    --itd-txt-dim:rgba(245,245,247,.58);
    --itd-r-card:22px;
    position:relative;
    background:var(--itd-bg);
    color:var(--itd-txt);
    padding:clamp(40px,6vw,72px) clamp(16px,4vw,48px);
    overflow:hidden;
    isolation:isolate;
  }
  /* ════════════════════════════════════════════════════════════
     [2] ATMÓSFERA DE FONDO
     ::before = 3 glows naranjas radiales · ::after = grid tech con máscara
     ════════════════════════════════════════════════════════════ */
  .itd-scope::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(620px 420px at 12% -8%, rgba(212,69,29,.16), transparent 64%),
      radial-gradient(720px 520px at 92% 14%, rgba(255,107,53,.10), transparent 66%),
      radial-gradient(560px 480px at 50% 112%, rgba(212,69,29,.12), transparent 62%);
  }
  .itd-scope::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse 88% 72% at 50% 28%, #000 38%, transparent 78%);
    mask-image:radial-gradient(ellipse 88% 72% at 50% 28%, #000 38%, transparent 78%);
  }
  .itd-inner{ position:relative; z-index:1; max-width:1240px; margin:0 auto; }

  /* ════════════════════════════════════════════════════════════
     [3] RESET DEFENSIVO DE BOTONES
     Anula el estilo global de <button> del theme (ej. el rosa). NO BORRAR.
     ════════════════════════════════════════════════════════════ */
  .itd-scope button{
    appearance:none !important; -webkit-appearance:none !important;
    background-color:transparent !important; background-image:none !important;
    border:0 !important; border-radius:0 !important;
    color:inherit !important; text-shadow:none !important; box-shadow:none !important;
    text-transform:none !important; letter-spacing:normal !important;
    line-height:normal !important; outline:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  .itd-scope button:hover, .itd-scope button:focus, .itd-scope button:active,
  .itd-scope button:focus-visible{
    background-color:transparent !important; background-image:none !important;
    color:inherit !important; box-shadow:none !important; outline:none !important;
  }

  /* ════════════════════════════════════════════════════════════
     [4] HEADER
     Eyebrow (badge superior), título con degradado y subtítulo
     ════════════════════════════════════════════════════════════ */
  .itd-head{ text-align:center; margin-bottom:clamp(26px,4vw,42px); }
  .itd-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--itd-orange-soft);
    padding:7px 16px; border-radius:100px;
    background:linear-gradient(135deg, rgba(212,69,29,.16), rgba(212,69,29,.05));
    border:1px solid rgba(212,69,29,.32);
    backdrop-filter:blur(12px) saturate(160%);
    -webkit-backdrop-filter:blur(12px) saturate(160%);
    margin-bottom:16px;
  }
  .itd-eyebrow svg{ width:13px; height:13px; }
  .itd-title{
    font-size:clamp(26px,4.2vw,42px); font-weight:700; line-height:1.12;
    letter-spacing:-.02em;
  }
  .itd-title em{
    font-style:normal;
    background:linear-gradient(95deg,#FF8A50 0%, var(--itd-orange) 55%, #B33312 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .itd-sub{
    margin-top:10px; font-size:clamp(13px,1.5vw,15px); font-weight:300;
    color:var(--itd-txt-dim); max-width:560px; margin-left:auto; margin-right:auto;
  }

  /* ════════════════════════════════════════════════════════════
     [5] TOOLBAR
     Caja del buscador (glass) + contador de resultados
     ════════════════════════════════════════════════════════════ */
  .itd-toolbar{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    margin-bottom:18px;
  }
  .itd-search{
    flex:1 1 320px; position:relative; display:flex; align-items:center;
    background:var(--itd-glass);
    border:1px solid var(--itd-stroke);
    border-radius:16px;
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 28px rgba(0,0,0,.30);
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  .itd-search:focus-within{
    border-color:rgba(212,69,29,.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(212,69,29,.16), 0 8px 28px rgba(0,0,0,.30);
  }
  .itd-search svg{
    width:17px; height:17px; margin-left:16px; flex:none;
    stroke:var(--itd-txt-dim); transition:stroke .25s ease;
  }
  .itd-search:focus-within svg{ stroke:var(--itd-orange-soft); }
  .itd-search input{
    width:100%; background:transparent !important; border:0 !important; outline:0 !important;
    color:var(--itd-txt) !important; font-size:14px; font-weight:400;
    padding:14px 16px 14px 12px; appearance:none; -webkit-appearance:none;
    box-shadow:none !important;
  }
  .itd-search input::placeholder{ color:rgba(245,245,247,.38); font-weight:300; }
  .itd-count{
    flex:none; display:inline-flex; align-items:baseline; gap:6px;
    font-size:12px; font-weight:300; color:var(--itd-txt-dim);
    padding:10px 16px; border-radius:14px;
    background:var(--itd-glass); border:1px solid var(--itd-stroke);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
  }
  .itd-count strong{ font-size:17px; font-weight:600; color:var(--itd-orange-soft); }

  /* ════════════════════════════════════════════════════════════
     [5b] LIMPIAR FILTROS Y SELECTOR DE VISTA
     .itd-clear → pill que aparece solo con filtros activos (.itd-show)
     .itd-view  → toggle cuadrícula/lista (botón activo = .itd-on)
     ════════════════════════════════════════════════════════════ */
  .itd-scope .itd-clear{
    display:none; flex:none; align-items:center; gap:7px;
    font-size:12.5px; font-weight:500; color:#FFB899 !important;
    padding:10px 16px; border-radius:14px !important; cursor:pointer;
    background-color:rgba(212,69,29,.10) !important;
    border:1px dashed rgba(212,69,29,.45) !important;
    transition:background-color .25s ease, border-color .25s ease, transform .25s ease;
  }
  .itd-scope .itd-clear.itd-show{ display:inline-flex; }
  .itd-scope .itd-clear svg{ width:13px; height:13px; stroke:#FFB899; flex:none; }
  @media (hover:hover){
    .itd-scope .itd-clear:hover{
      background-color:rgba(212,69,29,.22) !important;
      border-color:rgba(212,69,29,.75) !important;
      transform:translateY(-1px);
    }
  }
  .itd-scope .itd-empty .itd-clear{ margin-top:18px; }

  .itd-view{
    flex:none; display:inline-flex; gap:4px; padding:4px;
    border-radius:14px;
    background:var(--itd-glass); border:1px solid var(--itd-stroke);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
  }
  .itd-scope .itd-view button{
    width:38px; height:33px; border-radius:10px !important; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background-color .25s ease;
  }
  .itd-scope .itd-view button svg{
    width:16px; height:16px; stroke:var(--itd-txt-dim); transition:stroke .25s ease;
  }
  @media (hover:hover){
    .itd-scope .itd-view button:hover{ background-color:rgba(255,255,255,.08) !important; }
  }
  .itd-scope .itd-view button.itd-on,
  .itd-scope .itd-view button.itd-on:hover,
  .itd-scope .itd-view button.itd-on:focus,
  .itd-scope .itd-view button.itd-on:active{
    background-color:#C03E1A !important;
    background-image:linear-gradient(135deg, rgba(212,69,29,.95), rgba(160,42,14,.95)) !important;
    box-shadow:0 4px 14px rgba(212,69,29,.32), inset 0 1px 0 rgba(255,255,255,.2) !important;
  }
  .itd-scope .itd-view button.itd-on svg{ stroke:#fff; }

  /* ════════════════════════════════════════════════════════════
     [6] FILTROS
     Carrusel horizontal de pills · .itd-on = filtro activo · fades laterales
     ════════════════════════════════════════════════════════════ */
  .itd-filters-wrap{ position:relative; margin-bottom:clamp(26px,3.5vw,38px); }
  .itd-filters{
    display:flex; gap:9px; overflow-x:auto; padding:4px 2px 12px;
    scrollbar-width:none; -ms-overflow-style:none;
    scroll-snap-type:x proximity;
  }
  .itd-filters::-webkit-scrollbar{ display:none; }
  .itd-filters-wrap::before, .itd-filters-wrap::after{
    content:""; position:absolute; top:0; bottom:8px; width:42px; z-index:2; pointer-events:none;
    opacity:0; transition:opacity .3s ease;
  }
  .itd-filters-wrap::before{ left:0; background:linear-gradient(90deg,var(--itd-bg),transparent); }
  .itd-filters-wrap::after{ right:0; background:linear-gradient(-90deg,var(--itd-bg),transparent); }
  .itd-filters-wrap.itd-fade-l::before{ opacity:1; }
  .itd-filters-wrap.itd-fade-r::after{ opacity:1; }
  .itd-scope .itd-chip{
    flex:none; display:inline-flex; align-items:center; gap:7px;
    font-size:12.5px; font-weight:500; color:var(--itd-txt-dim) !important;
    padding:9px 16px; border-radius:100px !important; cursor:pointer; white-space:nowrap;
    background-color:var(--itd-glass) !important;
    border:1px solid var(--itd-stroke) !important;
    backdrop-filter:blur(16px) saturate(170%);
    -webkit-backdrop-filter:blur(16px) saturate(170%);
    transition:color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease;
    scroll-snap-align:start;
    user-select:none;
  }
  .itd-scope .itd-chip span{
    font-size:10.5px; font-weight:600; color:var(--itd-txt-dim);
    background:rgba(255,255,255,.07); border-radius:100px; padding:2px 7px;
    transition:background-color .25s ease, color .25s ease;
  }
  @media (hover:hover){
    .itd-scope .itd-chip:hover{ color:var(--itd-txt) !important; border-color:rgba(255,255,255,.22) !important; background-color:var(--itd-glass-hi) !important; transform:translateY(-1px); }
  }
  .itd-scope .itd-chip.itd-on, .itd-scope .itd-chip.itd-on:hover, .itd-scope .itd-chip.itd-on:focus, .itd-scope .itd-chip.itd-on:active{
    color:#fff !important;
    background-color:#C03E1A !important;
    background-image:linear-gradient(135deg, rgba(212,69,29,.95), rgba(160,42,14,.95)) !important;
    border-color:rgba(255,128,80,.55) !important;
    box-shadow:0 6px 22px rgba(212,69,29,.34), inset 0 1px 0 rgba(255,255,255,.22) !important;
  }
  .itd-scope .itd-chip.itd-on span{ background:rgba(0,0,0,.22); color:#FFD9C7; }

  /* ════════════════════════════════════════════════════════════
     [7] GRID Y CARDS
     Tarjetas liquid glass: logo (.itd-logo), nombre, 3 pills (.itd-tag) y CTA
     ════════════════════════════════════════════════════════════ */
  .itd-grid{
    display:grid; gap:18px;
    grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  }
  .itd-card{
    position:relative; display:flex; flex-direction:column;
    border-radius:var(--itd-r-card);
    background:linear-gradient(160deg, var(--itd-glass-hi) 0%, var(--itd-glass) 42%, rgba(255,255,255,.025) 100%);
    border:1px solid var(--itd-stroke);
    backdrop-filter:blur(22px) saturate(180%);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 38px rgba(0,0,0,.38);
    padding:20px 20px 18px;
    cursor:pointer;
    transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease;
    will-change:transform;
    overflow:hidden;
    content-visibility:auto;
    contain-intrinsic-size:auto 250px;
  }
  .itd-card::before{ /* destello superior liquid glass */
    content:""; position:absolute; inset:0 0 auto 0; height:46%;
    background:linear-gradient(180deg, rgba(255,255,255,.07), transparent);
    border-radius:var(--itd-r-card) var(--itd-r-card) 0 0;
    pointer-events:none;
  }
  .itd-card::after{ /* glow naranja en hover */
    content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
    background:radial-gradient(420px 220px at 18% -12%, rgba(212,69,29,.22), transparent 68%);
    opacity:0; transition:opacity .35s ease;
  }
  @media (hover:hover){
    .itd-card:hover{
      transform:translateY(-5px);
      border-color:rgba(212,69,29,.42);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 22px 52px rgba(0,0,0,.46), 0 0 0 1px rgba(212,69,29,.14);
    }
    .itd-card:hover::after{ opacity:1; }
    .itd-card:hover .itd-cta svg{ transform:translateX(3px); }
    .itd-card:hover .itd-logo{ border-color:rgba(212,69,29,.45); }
  }
  .itd-card:active{ transform:translateY(-2px) scale(.992); }
  .itd-card:focus-visible{ outline:2px solid var(--itd-orange-soft); outline-offset:3px; }

  .itd-card-top{ display:flex; align-items:flex-start; gap:13px; margin-bottom:14px; }
  .itd-logo{
    flex:none; width:44px; height:44px; border-radius:12px; overflow:hidden;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .35s ease;
  }
  .itd-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
  .itd-logo b{
    font-size:14px; font-weight:600; letter-spacing:.02em;
    background:linear-gradient(135deg,#FF8A50,var(--itd-orange));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .itd-name{
    font-size:16.5px; font-weight:600; line-height:1.28; letter-spacing:-.01em;
    padding-top:2px;
  }
  .itd-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
  .itd-tag{
    font-size:11px; font-weight:500; color:rgba(255,190,160,.92);
    padding:5px 11px; border-radius:100px;
    background:rgba(212,69,29,.12);
    border:1px solid rgba(212,69,29,.26);
  }
  .itd-cta{
    margin-top:auto; align-self:flex-start;
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:500; color:var(--itd-txt);
    padding:9px 16px; border-radius:100px; cursor:pointer;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    transition:background-color .3s ease, border-color .3s ease, color .3s ease;
  }
  .itd-cta svg{ width:13px; height:13px; stroke:var(--itd-orange-soft); transition:transform .3s cubic-bezier(.22,1,.36,1); }
  @media (hover:hover){
    .itd-card:hover .itd-cta{ background:rgba(212,69,29,.16); border-color:rgba(212,69,29,.42); }
  }

  /* ════════════════════════════════════════════════════════════
     [7b] VISTA DE LISTA
     Se activa agregando .itd-list al grid (lo hace el JS, sección 19).
     Cada card pasa de columna a fila: logo+nombre · pills · CTA.
     ════════════════════════════════════════════════════════════ */
  .itd-grid.itd-list{ grid-template-columns:1fr; gap:12px; }
  .itd-grid.itd-list .itd-card{
    flex-direction:row; align-items:center; gap:18px;
    padding:16px 20px;
    contain-intrinsic-size:auto 92px;
  }
  .itd-grid.itd-list .itd-card-top{
    margin-bottom:0; align-items:center; flex:none; width:280px; min-width:0;
  }
  .itd-grid.itd-list .itd-name{ padding-top:0; }
  .itd-grid.itd-list .itd-tags{ margin-bottom:0; flex:1; min-width:0; }
  .itd-grid.itd-list .itd-cta{ margin-top:0; margin-left:auto; flex:none; white-space:nowrap; align-self:center; }
  @media (max-width:900px){
    .itd-grid.itd-list .itd-card{ flex-wrap:wrap; gap:12px; }
    .itd-grid.itd-list .itd-card-top{ width:100%; }
    .itd-grid.itd-list .itd-cta{ margin-left:0; }
  }

  /* ════════════════════════════════════════════════════════════
     [8] ANIMACIÓN DE ENTRADA / ESTADOS
     .itd-reveal→.itd-in = aparición · .itd-hide = oculto por filtro · .itd-empty = sin resultados
     ════════════════════════════════════════════════════════════ */
  .itd-card.itd-reveal{ opacity:0; transform:translateY(22px); }
  .itd-card.itd-in{
    opacity:1; transform:translateY(0);
    transition:opacity .55s ease, transform .6s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease;
  }
  .itd-hide{ display:none !important; }

  /* Sin resultados */
  .itd-empty{
    display:none; text-align:center; padding:64px 20px;
    border-radius:var(--itd-r-card);
    background:var(--itd-glass); border:1px dashed rgba(255,255,255,.14);
  }
  .itd-empty.itd-show{ display:block; }
  .itd-empty svg{ width:38px; height:38px; stroke:var(--itd-orange-soft); opacity:.85; margin-bottom:14px; }
  .itd-empty h4{ font-size:16px; font-weight:600; margin-bottom:6px; }
  .itd-empty p{ font-size:13px; font-weight:300; color:var(--itd-txt-dim); }

  /* ════════════════════════════════════════════════════════════
     [9] MODAL (POP-UP)
     Overlay con blur + tarjeta glass · header, web, descripción y pills
     ════════════════════════════════════════════════════════════ */
  .itd-overlay{
    position:fixed; inset:0; z-index:99990;
    background:rgba(4,4,8,.62);
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    opacity:0; pointer-events:none;
    transition:opacity .32s ease;
  }
  .itd-overlay.itd-open{ opacity:1; pointer-events:auto; }
  .itd-modal{
    position:relative; width:100%; max-width:620px; max-height:min(86vh,86dvh);
    display:flex; flex-direction:column;
    border-radius:28px;
    background:linear-gradient(165deg, rgba(34,34,40,.92) 0%, rgba(16,16,20,.94) 100%);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(34px) saturate(190%);
    -webkit-backdrop-filter:blur(34px) saturate(190%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 40px 90px rgba(0,0,0,.6), 0 0 80px rgba(212,69,29,.10);
    transform:translateY(26px) scale(.96);
    transition:transform .38s cubic-bezier(.22,1,.36,1);
    overflow:hidden;
  }
  .itd-overlay.itd-open .itd-modal{ transform:translateY(0) scale(1); }
  .itd-modal::before{
    content:""; position:absolute; inset:0 0 auto 0; height:120px; pointer-events:none;
    background:radial-gradient(420px 150px at 22% 0%, rgba(212,69,29,.26), transparent 72%);
  }
  .itd-scope .itd-close{
    position:absolute; top:16px; right:16px; z-index:3;
    width:34px; height:34px; border-radius:50% !important; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background-color:rgba(255,255,255,.08) !important;
    background-image:none !important;
    border:1px solid rgba(255,255,255,.14) !important;
    transition:background-color .25s ease, transform .25s ease;
  }
  .itd-scope .itd-close:focus, .itd-scope .itd-close:active{
    background-color:rgba(255,255,255,.08) !important;
  }
  .itd-scope .itd-close:focus-visible{
    background-color:rgba(255,255,255,.08) !important;
    box-shadow:0 0 0 2px rgba(212,69,29,.6) !important;
  }
  .itd-scope .itd-close svg{ width:14px; height:14px; stroke:var(--itd-txt); }
  @media (hover:hover){ .itd-scope .itd-close:hover{ background-color:rgba(212,69,29,.32) !important; transform:rotate(90deg); } }
  .itd-modal-scroll{
    overflow-y:auto; padding:30px 28px 28px;
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:rgba(212,69,29,.5) transparent;
  }
  .itd-m-head{ position:relative; display:flex; align-items:center; gap:16px; margin-bottom:18px; }
  .itd-m-logo{
    flex:none; width:62px; height:62px; border-radius:16px; overflow:hidden;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
  }
  .itd-m-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
  .itd-m-logo b{
    font-size:20px; font-weight:600;
    background:linear-gradient(135deg,#FF8A50,var(--itd-orange));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .itd-m-name{ font-size:21px; font-weight:700; letter-spacing:-.015em; line-height:1.2; margin-bottom:6px; padding-right:30px; }
  .itd-m-web{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:500; color:var(--itd-orange-soft);
    text-decoration:none !important;
    padding:5px 12px; border-radius:100px;
    background:rgba(212,69,29,.12); border:1px solid rgba(212,69,29,.30);
    transition:background-color .25s ease, border-color .25s ease;
  }
  .itd-m-web svg{ width:12px; height:12px; stroke:var(--itd-orange-soft); }
  @media (hover:hover){ .itd-m-web:hover{ background:rgba(212,69,29,.22); border-color:rgba(212,69,29,.5); } }
  .itd-m-desc{
    position:relative;
    font-size:14px; font-weight:300; line-height:1.75; color:rgba(245,245,247,.82);
    padding:16px 18px; border-radius:16px; margin-bottom:22px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  }
  .itd-m-label{
    display:flex; align-items:center; gap:8px;
    font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--itd-txt-dim); margin-bottom:11px;
  }
  .itd-m-label svg{ width:13px; height:13px; stroke:var(--itd-orange-soft); }
  .itd-m-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
  .itd-m-pill{
    font-size:12px; font-weight:500; color:#FFD0BA;
    padding:7px 14px; border-radius:100px;
    background:linear-gradient(135deg, rgba(212,69,29,.22), rgba(212,69,29,.08));
    border:1px solid rgba(212,69,29,.36);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  }
  .itd-m-pill.itd-cat{
    color:rgba(245,245,247,.78);
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.14);
  }

  /* ════════════════════════════════════════════════════════════
     [10] RESPONSIVE
     ≤768px: grid 2 col · ≤560px: 1 col + modal tipo bottom-sheet iOS
     ════════════════════════════════════════════════════════════ */
  @media (max-width:768px){
    .itd-scope{ padding:42px 16px 52px; }
    .itd-grid{ grid-template-columns:1fr 1fr; gap:12px; }
    .itd-card{ padding:16px 14px 14px; }
    .itd-name{ font-size:14.5px; }
    .itd-toolbar{ gap:10px; }
    .itd-count{ padding:9px 13px; }
    .itd-modal-scroll{ padding:26px 20px 24px; }
  }
  @media (max-width:560px){
    .itd-grid{ grid-template-columns:1fr; }
    .itd-overlay{ padding:0; align-items:flex-end; }
    .itd-modal{
      max-width:100%; max-height:min(92vh,92dvh);
      border-radius:26px 26px 0 0;
      transform:translateY(100%);
    }
    .itd-overlay.itd-open .itd-modal{ transform:translateY(0); }
    .itd-modal::after{
      content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%);
      width:42px; height:4px; border-radius:100px; background:rgba(255,255,255,.22);
    }
  }
  /* ════════════════════════════════════════════════════════════
     [11] ACCESIBILIDAD
     Desactiva animaciones si el usuario lo pide en su sistema
     ════════════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion:reduce){
    .itd-scope *, .itd-scope *::before, .itd-scope *::after{
      transition-duration:.01ms !important; animation:none !important;
    }
    .itd-card.itd-reveal{ opacity:1; transform:none; }
  }