/* FILE: /styles.css */
:root{
  --text:#fff;
  --muted: rgba(255,255,255,.90);
  --glass: rgba(0,0,0,.35);
  --panel: rgba(0,0,0,.55);
  --card: rgba(0,0,0,.25);
  --line: rgba(255,255,255,.12);
  --soft: rgba(255,255,255,.06);
  --shadow: 0 12px 30px rgba(0,0,0,.35);

  --r10: 10px;
  --r12: 12px;
  --r14: 14px;
  --r16: 16px;
  --r18: 18px;
  --r22: 22px;

  --pad: 22px;
  --maxw: 1100px;
}

html{
  scrollbar-gutter: stable;
  overflow-x: hidden;
}

@supports not (scrollbar-gutter: stable){
  html{ overflow-y: scroll; }
}

/* ================================================== Header / Nav ================================================== */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--glass);
  border-bottom:1px solid var(--line);
}

.nav{
  max-width:1400px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-sizing:border-box;

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  white-space:nowrap;
}

.brand span{
  font-family: "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 1.05rem;
}

.brand img{
  width:46px;
  height:46px;
  object-fit:contain;
}

/* NAV como fila (ul + selector idioma) */
nav{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative; /* para el menú móvil absoluto */
}

nav ul{
  list-style:none;
  display:flex;
  gap:10px;
  margin:0;
  padding:0;
}

nav a{
  color:var(--text);
  text-decoration:none;
  font-size:.82rem;
  padding:8px 10px;
  border-radius:var(--r10);
  opacity:.9;

  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

nav a:hover{
  background:rgba(255,255,255,.08);
  opacity:1;
}

nav a.active{
  opacity: 1;
  border: 0;
  border-radius: 0;

  background: repeating-linear-gradient(
    45deg,
    #f4c400 0 14px,
    #0b0b0b 14px 28px
  );
  
  color: #fff;

  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0  2px 6px rgba(0,0,0,.6);

}

/* ===== Menú (botón) ===== */
.menu-btn{
  display:none;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  border-radius:var(--r12);
  padding:10px 12px;
  cursor:pointer;
}

/* ===== Selector idioma (con imágenes reales) ===== */
.lang-dd{
  position:relative;
  display:inline-block;
}

.lang-dd summary{
  list-style:none;
}
.lang-dd summary::-webkit-details-marker{
  display:none;
}

.lang-toggle{
  width:44px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  border-radius: var(--r12);
  cursor:pointer;
  padding:0;
}

.lang-current{
  width:22px;
  height:16px;
  object-fit:cover;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.18);
}

/* Panel desplegable */
.lang-panel{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;

  display:flex;
  gap:8px;
  padding:10px;

  border-radius: var(--r16);
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.88);

  z-index:30;
}

.lang-btn{
  width:36px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius:10px;
  cursor:pointer;
  padding:0;
}

.lang-btn img{
  width:22px;
  height:16px;
  object-fit:cover;
  border-radius:4px;
}

.lang-btn:hover{
  background: rgba(255,255,255,.12);
}

.lang-btn.is-active{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.26);
}

/* ===== Header/Nav móvil ===== */
@media (max-width: 920px){

  /* Mostrar botón hamburguesa */
  .menu-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
  }

  /* Menú (ul) a dropdown */
  #menuList{
    display:none;              /* cerrado por defecto */
    position:absolute;
    top: calc(100% + 10px);
    right: 0;

    flex-direction:column;
    gap:6px;

    min-width: 220px;
    padding:10px;

    border-radius: var(--r16);
    border:1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.88);

    z-index: 40;
  }

  /* Abierto por JS */
  #menuList.open{
    display:flex;
  }

  /* Links del menú más “tocables” */
  #menuList a{
    display:block;
    padding:10px 12px;
    border-radius: var(--r12);
  }
}

/* ================================================== Lightbox + Modal (GLOBAL) ================================================== */
.lightbox{
  position:fixed;
  inset:0;
  z-index:999;
  background: rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
}
.lightbox.open{ display:flex; }

.lightbox-inner{
  /* contenedor neutro: NO panel */
  width: auto;
  max-width: 96vw;
  max-height: none;

  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  overflow: visible;
  position: relative;
}

.lightbox-inner img{
  display: block;

  max-height: 50vh;
  max-width: 96vw;

  width: auto;
  height: auto;

  object-fit: contain;
  background: none;
}

#lightboxImg{
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Lightbox: ocultar botón cerrar (✕) */
#lightbox .close{
  display: none;
}

.close{
  position:absolute;
  top:10px;
  right:10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.08);
  color:var(--text);
  border-radius:var(--r12);
  padding:10px 12px;
  cursor:pointer;
  z-index:2;
}

.modal{
  position:fixed;
  inset:0;
  z-index:998;
  background: rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
}
.modal.open{ display:flex; }

/* Entrada suave del panel */
.modal-inner{
  transform: translateY(10px);
  opacity: 0;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1), opacity 220ms cubic-bezier(.22,.61,.36,1);
}

.modal.open .modal-inner{
  transform: translateY(0);
  opacity: 1;
}

/* Bloquear scroll del fondo cuando hay overlay */
html.modal-open,
body.modal-open{
  overflow: hidden;
}

.modal-inner{
  width: min(980px, 96vw);
  max-height: 86vh;
  background: rgba(0,0,0,.60);
  border:1px solid var(--line);
  border-radius:var(--r18);
  overflow:hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  display:flex;
  flex-direction:column;
}

/* Línea técnica superior (panel activo) */
.modal-inner::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  opacity:.65;
  pointer-events:none;
}

.modal-head{
  padding:16px 56px 12px 16px; /* ← espacio reservado al botón */
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.04);

  display: block;
}

.modal-title{
  margin:0;

  font-family: "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.modal-date{
  margin: 4px 0 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.62);
  letter-spacing: .02em;
}

.modal-body{
  padding:16px;
  overflow:auto;
  overscroll-behavior: contain;
}

/* Modal: ocultar scrollbar visual (scroll sigue activo) */
.modal-body{
  scrollbar-width: none;        /* Firefox */
}

.modal-body::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.modal-text{
  margin:0 0 14px;
  color: var(--muted);
  line-height:1.7;
  white-space: pre-line;
}

.mapbox{
  margin-top:14px;
  border-radius:var(--r16);
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--soft);
}
.mapbox iframe{
  width:100%;
  height:240px;
  border:0;
  display:block;
}

.gallery{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.gallery a{
  border-radius:var(--r14);
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--soft);
  aspect-ratio:4 / 3;
  display:block;
}
.gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gallery a:hover img{ transform: scale(1.03); }

/* ===== Galería con flechas (solo dentro del modal) ===== */
#modal .gallery-wrap{
  position: relative;
  margin-top: 10px;
}

#modal .gallery{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 2px 36px 10px; /* deja hueco para flechas */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge viejo */
}

/* Si NO hay overflow, centra las fotos en el modal */
#modal .gallery-wrap:not(.has-overflow) .gallery{
  justify-content: center;
}

#modal .gallery::-webkit-scrollbar{
  height: 0;                       /* Chrome/Safari */
}

#modal .gallery a{
  flex: 0 0 auto;
  border-radius: var(--r14);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--soft);
  aspect-ratio: auto;
}

#modal .gallery img{
  display: block;
  height: 160px;
  width: auto;
  object-fit: contain;
  transform: none;
}

/* Galería: evitar selección y arrastre */
#modal .gallery img,
#lightboxImg{
  user-select: none;
  -webkit-user-drag: none;
}

/* Botones flecha */
#modal .gbtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.55);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}

#modal .gbtn.left{ left: 6px; }
#modal .gbtn.right{ right: 6px; }

#modal .gbtn[hidden]{ display: none; }

.links{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.links a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
  border:1px solid var(--line);
  background: var(--soft);
  padding:9px 12px;
  border-radius:999px;
}
.links a:hover{ background: rgba(255,255,255,.10); 
}

/* Modal: cuando el contenido es artículo HTML (Misiones) */
.modal-text.is-article{
  white-space: normal;
}

/* ===== Tipografía del artículo (Misiones) dentro del modal ===== */
#modal #modalText.modal-text.is-article{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* En móvil: igual que el “subtitle” del sistema (.92rem / 1.5) */
@media (max-width: 920px){
  #modal #modalText.modal-text.is-article{
    font-size: .92rem;
    line-height: 1.5;
  }

  .modal-title{
    font-size: 1.02rem;
    line-height: 1.2;
  }
}


.modal-text.is-article p{
  margin: 0 0 12px;
  text-align: justify;
}
.modal-text.is-article h1,
.modal-text.is-article h2,
.modal-text.is-article h3{
  margin: 16px 0 10px;
  color: var(--text);

  font-family: "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;

  text-align: center;
}

.modal-text.is-article a{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
}

/* ==================================================
   Misiones — Artículo dentro del modal
   ================================================== */

/* Contenedor principal de misión */
#modal #modalText.modal-text.is-article .mission-prose{
  max-width: 950px;
  margin: 0 auto;
}

/* Listas dentro del artículo (bitácora) */
#modal #modalText.modal-text.is-article ul{
  margin: 0 0 12px;
  padding-left: 1.2em;
  color: var(--muted);
}

#modal #modalText.modal-text.is-article li{
  margin: 6px 0;
  line-height: 1.7;
}

/* ===== Video embed centrado y responsive ===== */
.modal-text.is-article .video-embed{
  display: flex;
  justify-content: center;
  margin: 18px 0;
}

.modal-text.is-article .video-embed iframe{
  width: 100%;
  max-width: 720px;   /* tamaño máximo en desktop */
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r16);
}

/* Imagen única enlazada (evento sin galería) */
#modal #modalText.modal-text.is-article p > a:has(img) {
  display: block;
  text-align: center;
  margin: 18px 0;
}

#modal #modalText.modal-text.is-article p > a:has(img) img {
  display: block;
  width: 90%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--r16);
  border: 1px solid var(--line);
}

/* ==================================================
   Equipamiento (ARTÍCULOS) — Wiki real (infobox flotante)
   Solo dentro del modal
   ================================================== */

/* Contenedor del artículo: “contiene” el float sin romper el layout */
#modal #modalText.modal-text.is-article .equip-wiki{
  overflow: hidden;
}

/* Ya NO usamos grid aquí */
#modal #modalText.modal-text.is-article .equip-wiki-grid{
  display: block;
}

/* Infobox flotante a la derecha (wiki real) */
#modal #modalText.modal-text.is-article .equip-infobox{
  float: right;
  width: 30%;
  margin: 0 0 12px 16px; /* separación con el texto */
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: var(--r16);
  padding: 12px;
  box-sizing: border-box;
}

/* En móvil: no flotante, apilado */
@media (max-width: 820px){
  #modal #modalText.modal-text.is-article .equip-infobox{
    float: none;
    width: 100%;
    margin: 0 0 12px 0;
  }
}

/* Intro */
#modal #modalText.modal-text.is-article .equip-intro{
  margin: 0 0 12px;
  color: var(--muted);
}

/* Imagen principal del infobox */
#modal #modalText.modal-text.is-article .equip-infobox-figure{
  margin: 0 0 10px;
}

#modal #modalText.modal-text.is-article .equip-infobox-figure--diagram{
  margin-top: 22px;
}

#modal #modalText.modal-text.is-article .equip-infobox-figure a{
  text-decoration: none;
}
#modal #modalText.modal-text.is-article .equip-infobox-figure img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r14);
  border: 1px solid var(--line);
  background: rgba(0,0,0,.25);
}
#modal #modalText.modal-text.is-article .equip-infobox-caption{
  margin-top: 4px;          /* más pegado */
  font-size: .78rem;        /* más pequeño */
  line-height: 1.25;
  color: rgba(255,255,255,.55);
  text-align: center;
}

/* h3 en infobox alineado a la izquierda */
#modal #modalText.modal-text.is-article .equip-infobox h3{
  text-align: center;      /* centrados */
  font-size: .95rem;       /* un poco más pequeños */
  margin: 12px 0 8px;
  letter-spacing: .04em;
}

/* Tabla de especificaciones (dl) */
#modal #modalText.modal-text.is-article .equip-specs{
  margin: 0;
}
#modal #modalText.modal-text.is-article .equip-specs > div{
  display: grid;
  grid-template-columns: 15% 85%;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
#modal #modalText.modal-text.is-article .equip-specs > div:first-child{
  border-top: 0;
  padding-top: 0;
}

#modal #modalText.modal-text.is-article .equip-specs dt{
  margin: 0;
  font-weight: 600;            /* negrita (única diferencia) */
  font-size: .85rem;           /* igual que dd */
  letter-spacing: .02em;       /* igual que dd */
  color: rgba(255,255,255,.82);/* igual que dd */
  text-transform: none;        /* quita uppercase */
}

#modal #modalText.modal-text.is-article .equip-specs dd{
  margin: 0;
  font-size: .85rem;
  letter-spacing: .02em;
  text-align: right;
  color: rgba(255,255,255,.82);
  padding-right: 6px;
  box-sizing: border-box;
}

#modal #modalText.modal-text.is-article .equip-units{
  margin: 0;
  padding-left: 18px; /* sangría de viñeta controlada */
}

#modal #modalText.modal-text.is-article .equip-units li{
  margin: 2px 0;
  font-size: .85rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.82);
  line-height: 1.3;
}

#modal #modalText.modal-text.is-article .equip-figure img{
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  margin: 0 auto; /* la centra */
}
#modal #modalText.modal-text.is-article .equip-figure figcaption{
  padding: 10px 12px;
  font-size: .9rem;
  color: rgba(255,255,255,.68);
}

/* Galería sin borde en artículos de Equipamiento */
#modal #modalText.modal-text.is-article .equip-wiki .gallery a{
  border: 0;
  background: none;
}

/* =================================================================================== QUIENES SOMOS =================================================================================== */

.panel-quienes{
  --fontBody: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fontTitle: "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  font-family: var(--fontBody);

  --titleGap: 12px;   /* separación título -> contenido */
  --blockGap: 32px;   /* separación entre bloques grandes */
  --textMax: 950px;
}

/* Esta página deja ver Vanta: quitamos el gran “cristal” solo aquí */
.panel.panel-quienes{
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Layout base: ancho de texto (normal) */
.panel-quienes .about-box,
.panel-quienes .members-zone{
  width: min(1100px, 94vw);
  margin-left: auto;
  margin-right: auto;
}

/* Tarjetas: un poco más estrechas que el texto (solo PC) */
.panel-quienes .members{
  width: min(var(--textMax), 94vw);
  margin-left: auto;
  margin-right: auto;

  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;          /* esto lo ajustas en el punto 2 */
  align-items:start;
}


/* Secciones (aire entre bloques) */
.panel-quienes .about-box--after{ margin-top: var(--blockGap); }
.panel-quienes .members-zone{ margin-top: var(--blockGap); }

/* about-box: por ahora transparente (Vanta manda) */
.panel-quienes .about-box{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Sistema ÚNICO de títulos */
.panel-quienes .about-title{
  font-family: var(--fontTitle);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 var(--titleGap);
}

/* Texto de página: TODO igual (subtitle + story + after-text) */
.panel-quienes .subtitle,
.panel-quienes .story,
.panel-quienes .after-text{
  font-family: var(--fontBody);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--muted);
}

/* Separador entre “presentación” e “historia” */
.panel-quienes .about-box .section{
  border-top: 0;
  margin-top: var(--blockGap);
  padding-top: 0;         /* antes: 20px */
}

.panel-quienes .subtitle{
  margin: 0;
  width: 100%;
  max-width: none;

  text-align: center !important;
}

.panel-quienes .story{
  max-width: var(--textMax);
  margin: 0 auto;
  text-align: justify;
  /* ya NO necesitas white-space: pre-line aquí */
}

/* Párrafos reales para storyBody: control fino del espacio */
.panel-quienes .story p{
  margin: 0 0 20px;      /* prueba 10px / 12px / 14px */
}

.panel-quienes .story p:last-child{
  margin-bottom: 0;
}

.panel-quienes .story-final{
  margin: 18px auto 0;

  text-align: center;     /* igual que .story */
  font-weight: 400;       /* igual que el cuerpo */
  font-size: 1.15rem;     /* mismo tamaño */
  line-height: 1.75;      /* mismo interlineado */
  color: var(--muted);    /* mismo color */
}

.panel-quienes .after-text{
  margin: 0 auto;
  max-width: var(--textMax);
  text-align: center;
}

/* ===== ID card (NO TOCADO) ===== */
.panel-quienes .member-card{
  aspect-ratio: 63 / 88;

  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --idPhotoH: clamp(250px, 29vh, 340px);

  --logoH: 140px;

  --idBorderW: 10px;
  --idRed: rgb(220,0,0);
  --idInnerR: var(--r18);

  --tapeH: 54px;

  background-color: rgb(246,246,246);
  background-image: url("img/patterns/gb-watermark.svg");
  background-repeat: repeat;
  background-size: 800px 800px;
  background-position: 0 0;

  border: var(--idBorderW) solid var(--idRed);
  border-radius: calc(var(--idInnerR) + var(--idBorderW));

  box-shadow: var(--shadow);
  overflow:hidden;

  padding:8px;

  display:flex;
  flex-direction:column;
  gap:14px;

  position: relative;
}

.panel-quienes .member-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: var(--tapeH);

  background: repeating-linear-gradient(
    45deg,
    #f4c400 0 40px,
    #1a1a1a 40px 80px
  );

  z-index: 0;
  pointer-events:none;
}

.panel-quienes .member-card > *{
  position: relative;
  z-index: 1;
}

.panel-quienes .member-top{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.panel-quienes .avatar.avatar--portrait{
  width:100%;
  height: var(--idPhotoH);
  border-radius:var(--r16);
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  overflow:hidden;
  position:relative;
}

.panel-quienes .avatar.avatar--portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.panel-quienes .member-right{
  height: var(--idPhotoH);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.panel-quienes .member-logo{
  height: var(--logoH);
  width:auto;
  align-self:center;
  object-fit:contain;
  opacity:.95;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
  margin:2px 0 2px;
}

.panel-quienes .member-fields{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.panel-quienes .member-fields .field{
  background: rgba(230,230,230,.4);
  border:1px solid rgba(0,0,0,.10);
  border-radius:var(--r14);
  padding:6px 12px;
}

.panel-quienes .member-fields .label,
.panel-quienes .field--desc .label{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
  color: rgba(0,0,0,.78);
  margin-bottom:6px;
}

.panel-quienes .member-fields .value{
  color: rgba(0,0,0,.85);
  font-weight:600;
  line-height:1.35;
  font-size: .98rem;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-quienes .field--desc{
  background: rgba(230,230,230,.4);
  border:1px solid rgba(0,0,0,.10);
  border-radius:var(--r14);
  padding:14px 18px;

  flex:1;
  min-height:0;

  margin-bottom: 56px;
}

.panel-quienes .field--desc .value{
  color: rgba(0,0,0,.85);
  font-weight:600;
  line-height:1.7;
  font-size: .98rem;   /* ← aquí reduces un poco */
  text-align: justify;
}

.panel-quienes .link{
  color: rgba(0,0,0,.88);
  text-decoration:none;
  border-bottom:1px dashed rgba(0,0,0,.35);
}
.panel-quienes .link:hover{
  border-bottom-color: rgba(0,0,0,.65);
}

.panel-quienes .about-logo-final{
  width: min(1100px, 94vw);
  margin: var(--blockGap) auto 0;
  text-align: center;
}

.panel-quienes .about-logo-final__img{
  width: clamp(160px, 18vw, 260px);
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

/* ===== Responsive general ===== */
@media (max-width: 920px){

  /* ===== Layout / contenedores ===== */

  .panel.panel-quienes{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
  }

  .panel-quienes .about-box{
    width: min(1100px, 88vw);
  }

  .panel-quienes .members-zone{
    width: min(1100px, 94vw);
  }

  .panel-quienes .members{
    grid-template-columns: 1fr;
    overflow-x: hidden;
    container-type: inline-size;
  }

  /* ===== Tarjetas (escala como imagen) ===== */

  .panel-quienes .member-card-wrap{
    --mw: min(520px, calc(100cqw - 8px));
    --designW: 520px;
    --scale: calc(var(--mw) / var(--designW));

    width: var(--mw);
    margin: 0 auto;
    height: calc(var(--mw) * 88 / 63);

    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

  .panel-quienes .member-card{
    width: 520px;
    height: calc(520px * 88 / 63);

    box-sizing: border-box;

    position: absolute;
    top: 0;
    left: 0;

    transform-origin: top left;
    transform: scale(var(--scale));

    /* ✅ DIAL: proporción arriba/abajo */
    --topFrac: 0.54; /* 0.60 = 60% arriba / 40% descripción */
  }

  .panel-quienes .member-top{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .panel-quienes .avatar.avatar--portrait,
  .panel-quienes .member-right{
    height: calc((520px * 88 / 63) * var(--topFrac)) !important;
  }

  .panel-quienes .avatar.avatar--portrait{
    justify-self: center !important;
    width: 100% !important;
    max-width: 100% !important;

    overflow: hidden;
    border-radius: var(--r16);

    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .panel-quienes .avatar.avatar--portrait img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
    border-radius: inherit;
  }

  .panel-quienes .member-logo{
    height: 165px;
  }

  /* ===== Tipografía móvil (títulos + textos generales) ===== */

  .panel-quienes .about-title{
    font-size: 1.22rem;
  }

  .panel-quienes .subtitle,
  .panel-quienes .story,
  .panel-quienes .after-text,
  .panel-quienes .story-final{
    font-size: .92rem;
    line-height: 1.5;
  }

  /* ===== Tipografía móvil (dentro de tarjeta) ===== */

  .panel-quienes .member-fields .value,
  .panel-quienes .field--desc .value{
    font-size: 1.12rem;
  }

  .panel-quienes .member-fields .label,
  .panel-quienes .field--desc .label{
    font-size: .78rem;
  }

}

/* =================================================================================== Equipamiento =================================================================================== */

/* ---------- Base / estándar de página ---------- */

.panel.panel-equipamiento{
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.panel-equipamiento .top,
.panel-equipamiento .equip-grid,
.panel-equipamiento .empty{
  width: min(1100px, 94vw);
  margin-left: auto;
  margin-right: auto;
}

.panel-equipamiento .top{
  display:block;
}

.panel-equipamiento h1{
  font-family: "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 var(--titleGap);
}

.panel-equipamiento .subtitle{
  margin: 0 auto;
  width: 100%;
  max-width: var(--textMax);
  color: var(--muted);
  font-weight: 400;
  line-height: 1.75;
  font-size: 1.15rem;
  text-align: justify;
  white-space: pre-line;
}

/* ---------- Grid (PC) ---------- */

.panel-equipamiento .equip-grid{
  margin-top: 24px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

/* ---------- Variables / skin ---------- */

.panel-equipamiento{
  --eqStripeW: 22px;
  --eqNameH: 64px;

  --eqCardBg: #3f3f3f;

  --eqCardOverlay:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.60)),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.12) 0 1px,
      rgba(0,0,0,0) 1px 7px
    ),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.09) 0 1px,
      rgba(0,0,0,0) 1px 5px
    );

  --fontBody: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fontTitle: "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --titleGap: 12px;
  --textMax: 950px;

  font-family: var(--fontBody);
}

/* ---------- Cards catálogo (PC) ---------- */

.panel-equipamiento .equip-card{
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;

  background: var(--eqCardBg);

  box-shadow:
    0 14px 32px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.35);

  position: relative;

  background-image: var(--eqCardOverlay);
  background-position: 0 0, 0 0, 0 -1px;

  /* Estado base: sin animación por defecto (la pone is-ready) */
}

.panel-equipamiento .equip-card::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width: var(--eqStripeW);

  background: repeating-linear-gradient(
    45deg,
    #f4c400 0 14px,
    #0b0b0b 14px 28px
  );

  z-index: 3;
  pointer-events:none;
}

/* ---------- Zona imagen (PC) ---------- */

.panel-equipamiento .equip-imgwrap{
  aspect-ratio: 3 / 4;

  position: relative;
  overflow: hidden;
  box-sizing: border-box;

  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  padding: 12px 12px 18px 12px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-equipamiento .equip-imgwrap::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  pointer-events: none;
  background: transparent;
  z-index: 2;
}

.panel-equipamiento .equip-imgwrap img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  filter: contrast(1.06) saturate(.92);

  transform: none;
  transition: none;
  will-change: auto;
}

/* ---------- Nombre ---------- */

.panel-equipamiento .equip-name{
  margin: 0;
  position: absolute;
  left: calc(var(--eqStripeW) + 8px);
  right: -18px;
  bottom: 18px;

  height: 44px;
  display: flex;
  align-items: center;

  padding: 0 18px 0 26px;

  color: rgba(255,255,255,.95);
  font-family: "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;

  font-size: 1.12rem;
  line-height: 1;

  z-index: 4;

  background: linear-gradient(to bottom, rgb(235,10,10), rgb(200,0,0));

  clip-path: polygon(
    2% 0,
    100% 0,
    100% 100%,
    0 100%
  );

  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.panel-equipamiento .equip-content{ padding: 0; }
.panel-equipamiento .equip-desc{ display:none; }

/* ---------- Estado vacío ---------- */

.panel-equipamiento .empty{
  margin-top: 14px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 0;
  color: var(--muted);
  text-align:center;
}

/* Focus teclado */
.panel-equipamiento .equip-card:focus-visible{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 4px;
}

/* ===== Entrada suave Equipamiento (NO se pisa con hover) ===== */
@media (prefers-reduced-motion: no-preference){
  .panel-equipamiento .equip-grid.is-loading .equip-card{
    opacity: 0;
    transform: translateY(14px);
  }

  .panel-equipamiento .equip-grid.is-ready .equip-card{
    opacity: 1;
    transform: none;

    transition:
      opacity 360ms ease calc(var(--i, 0) * 55ms),
      transform 360ms cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 55ms),
      box-shadow 160ms ease;

    will-change: opacity, transform;
  }
}

/* Reduced motion: sin “fade/slide” */
@media (prefers-reduced-motion: reduce){
  .panel-equipamiento .equip-grid.is-loading .equip-card,
  .panel-equipamiento .equip-grid.is-ready .equip-card{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px){
  .panel-equipamiento .equip-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px){

  .panel.panel-equipamiento{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
  }

  .panel-equipamiento .top,
  .panel-equipamiento .equip-grid,
  .panel-equipamiento .empty{
    width: min(1100px, 88vw);
  }

  .panel-equipamiento .equip-grid{
    grid-template-columns: 1fr;
  }

  .panel-equipamiento h1{
    font-size: 1.22rem;
  }

  .panel-equipamiento .subtitle{
    font-size: .92rem;
    line-height: 1.5;
  }

  .panel-equipamiento .equip-imgwrap::after{
    height: 86px;
    background: linear-gradient(
      to top,
      rgba(0,0,0,.82),
      rgba(0,0,0,0)
    );
  }

  .panel-equipamiento .equip-name{
    left: 14px;
    right: 14px;
    bottom: 14px;
    font-size: 1.06rem;
  }
}

/* ---------- Hover (solo efecto, NO define transition) ---------- */

@media (hover: hover){
  .panel-equipamiento .equip-card:hover{
    transform: translateY(-4px);
    box-shadow:
      0 0 12px rgba(255,255,255,.55),
      0 0 22px rgba(255,170,210,.35),
      0 0 36px rgba(255,120,180,.22);
  }

  .panel-equipamiento .equip-card:hover .equip-imgwrap img{
    transform: none;
    filter: contrast(1.06) saturate(.92);
  }
}

@media (hover: none){
  .panel-equipamiento .equip-card:hover .equip-imgwrap img{
    transform: none;
  }
}

/* Active */
.panel-equipamiento .equip-card:active{
  transform: translateY(-2px) scale(.995);
}


/* =================================================================================== MISIONES =================================================================================== */

/* Header */
.panel-misiones .top{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.panel-misiones .top > div:first-child{
  min-width:0;
}

.panel-misiones h1{
  font-family: "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

.panel-misiones .subtitle{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 950px;
  margin: 12px auto 16px;
  text-align: justify;
  text-align-last: left;
}

/* Search */
.panel-misiones .controls{
  display:flex;
  gap:10px;
  align-items:center;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  justify-content: flex-start;
}

.panel-misiones .search{
  width: 100%;
  padding:10px 12px;
  border-radius:var(--r12);
  border:1px solid var(--line);
  background: var(--soft);
  color:var(--text);
  outline:none;
}
.panel-misiones .search::placeholder{ color: rgba(255,255,255,.55); }

/* List */
.panel-misiones .missions{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:12px;
  width: 100%;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

/* Card */
.panel-misiones .mission{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:14px;
  padding:12px;
  border-radius:var(--r16);
  background: var(--card);
  border:1px solid var(--line);
  align-items:start;

  cursor:pointer;
  position: relative;
  overflow: hidden;
  transition: transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease, border-color .2s ease;
}

/* Hover: velo blanquecino sobre TODA la tarjeta */
.panel-misiones .mission::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: rgba(255,255,255,.06);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events:none;
}

.panel-misiones .mission:hover::before{ opacity: 1; }

.panel-misiones .mission:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px rgba(0,0,0,.35);
}

.panel-misiones .mission:focus-visible{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 3px;
}

/* Card parts */
.panel-misiones .thumb{
  border-radius:var(--r14);
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--soft);
  aspect-ratio:4 / 3;
  display:block;
}

.panel-misiones .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.panel-misiones .meta{
  min-width:0;
  border-radius:var(--r14);
  padding:2px;
}

.panel-misiones .line1{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.panel-misiones .title{
  margin:0;
  font-family: "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.panel-misiones .date{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  color: var(--muted);
  font-size: .9rem;
  white-space: nowrap;
}

.panel-misiones .excerpt{
  margin:10px 0 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}

.panel-misiones .tags{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.panel-misiones .tag{
  font-size:.82rem;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--line);
  color: rgba(255,255,255,.88);
}

/* Empty state */
.panel-misiones .empty{
  width: 100%;
  max-width: 950px;
  margin: 12px auto 0;

  box-sizing: border-box;

  border:1px dashed rgba(255,255,255,.18);
  border-radius:var(--r16);
  padding:16px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  line-height:1.6;
}

/* ===== Entrada suave Misiones (solo tarjetas, visible y clara) ===== */
@media (prefers-reduced-motion: no-preference){

  /* Estado inicial oculto SOLO mientras .missions tenga is-loading */
  .panel-misiones .missions.is-loading .mission{
    opacity: 0;
    transform: translateY(14px);
  }

  /* Estado animado (stagger) */
  .panel-misiones .missions.is-ready .mission{
    opacity: 1;
    transform: none;

    transition:
      opacity 360ms ease calc(var(--i, 0) * 55ms),
      transform 360ms cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 55ms),
      box-shadow .2s ease,
      border-color .2s ease;
    
    will-change: opacity, transform;
  }
}

/* ===== Responsive Misiones (tipografía coherente con el sistema) ===== */
@media (max-width: 920px){

  .panel-misiones h1{
    font-size: 1.22rem;
  }

  /* Igual que Quiénes somos (móvil) */
  .panel-misiones .subtitle{
    font-size: .92rem;
    line-height: 1.5;
    text-align: justify;
    text-align-last: auto;
    margin: 0 auto 12px;
    max-width: min(1100px, 88vw);
  }

  /* Texto de tarjetas (baja un punto para que no “grite”) */
  .panel-misiones .title{
    font-size: 1.02rem;
  }

  .panel-misiones .excerpt{
    font-size: .92rem;
    line-height: 1.5;
  }

  .panel-misiones .date{
    font-size: .82rem;
  }
}

/* =================================================================================== GUÍA TOBIN =================================================================================== */

/* ===== PANEL ===== */
.panel.panel-tobin{
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  --textMax: 950px;
}

.panel-tobin .about-box,
.panel-tobin .members-zone{
  width: min(1100px, 94vw);
  margin-inline: auto;
}

.panel-tobin .members-zone{
  margin-top: var(--blockGap, 32px);
}

.panel-tobin .about-title{
  font-family: var(--fontTitle, "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 var(--titleGap, 12px);
}

.panel-tobin .subtitle{
  font-family: var(--fontBody, "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  text-align: justify;
  max-width: var(--textMax);
  margin-inline: auto;
}

/* ===== GRID ===== */
.panel-tobin .tobin-grid{
  margin-top: 16px;
  display: grid;
  gap: 16px;
  align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ===== CARTA ===== */
.panel-tobin .tcard{
  aspect-ratio: 63 / 88;
  position: relative;
  display: grid;
  grid-template-rows: 8% 52% 6% 34%;
  overflow: hidden;
  background: rgba(20,20,22,.92);
  border-radius: 16px;
  isolation: isolate;

  /* Color por tipo */
  --typeColor:#2a2a2e;
  --typeInk: color-mix(in srgb, var(--typeColor) 85%, #000);

  /* medidas */
  --frame: 14px;
  --strokeW: 1px;
  --strokeC: rgba(0,0,0,.82);

  /* ILUSTRACIÓN */
  --artBorder: 8px;
  --artDark:  color-mix(in srgb, var(--typeColor) 62%, #000);
  --artLight: color-mix(in srgb, var(--typeColor) 68%, #fff);

  --artTop:    var(--artDark);
  --artRight:  var(--artDark);
  --artBottom: var(--artLight);
  --artLeft:   var(--artLight);

  /* DESCRIPCIÓN */
  --descBorder: var(--artBorder);

  --descTop:    var(--artTop);
  --descRight:  var(--artRight);
  --descBottom: var(--artBottom);
  --descLeft:   var(--artLeft);

  --descBg:   color-mix(in srgb, var(--typeColor) 32%, #e0e0e0);
  --descText: color-mix(in srgb, #000 75%, var(--typeColor));

  /* Acabado panel descripción */
  --descHi: .06;
  --descVig: .10;
  --descGrain: .04;

  /* Texturas */
  --noiseTex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E");
  --noiseTexCard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.75'/%3E%3C/svg%3E");

  --uTexScale: 160;

  /* Acabado del fondo unificado */
  --uHi: .14;
  --uSheen: .08;
  --uVig: .38;

  /* Refuerzo diagonales */
  --diagC: rgba(0,0,0,.95);
  --diagA: .55;
  --diagS: 1px;
}

/* Fallback si color-mix no está soportado */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .panel-tobin .tcard{
    --artDark: rgba(0,0,0,.55);
    --artLight: rgba(255,255,255,.35);
    --artTop: var(--artDark);
    --artRight: var(--artDark);
    --artBottom: var(--artLight);
    --artLeft: var(--artLight);
  }
}

/* Colores por tipo */
.panel-tobin .tcard[data-type="human_spirit"]{ --typeColor:#3b6ea8; }
.panel-tobin .tcard[data-type="minor_nonhuman"]{ --typeColor:#2f7d5a; }
.panel-tobin .tcard[data-type="paranormal_phenomenon"]{ --typeColor:#b89b2e; }
.panel-tobin .tcard[data-type="major_metaspecter"]{ --typeColor:#402b58; }
.panel-tobin .tcard[data-type="major_deity_demon"]{ --typeColor:#a33a3a; }

/* Fondo unificado + acabado */
.panel-tobin .tcard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  pointer-events:none;
  z-index:0;

  background:
    var(--noiseTexCard),
    radial-gradient(140% 90% at 50% 8%, rgba(255,255,255,var(--uHi)), transparent 55%),
    linear-gradient(135deg,
      rgba(255,255,255,var(--uSheen)),
      transparent 45%,
      rgba(0,0,0,.10) 100%
    ),
    radial-gradient(160% 140% at 50% 120%, rgba(0,0,0,var(--uVig)), transparent 55%),
    color-mix(in srgb, var(--typeColor) 78%, #000);

  background-size:
    calc(var(--uTexScale) * 1px) calc(var(--uTexScale) * 1px),
    auto, auto, auto, auto;

  background-repeat:
    repeat,
    no-repeat, no-repeat, no-repeat, no-repeat;

  background-blend-mode:
    overlay,
    normal, normal, normal, normal;
}

/* Línea fantasma exterior */
.panel-tobin .tcard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none;
  z-index:5;
}

/* Asegura que el contenido va por encima del fondo */
.panel-tobin .tcard > *{
  position: relative;
  z-index:1;
}

/* ===== BARRA SUPERIOR ===== */
.panel-tobin .tcard-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 12px;
  background: transparent;
  z-index: 10;
}

.panel-tobin .tcard-ico,
.panel-tobin .tcard-threat{
  display:none;
}

.panel-tobin .tcard-title{
  margin: 0;
  display:flex;
  align-items:center;
  height: 100%;
  font-family: "Cormorant SC", "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight:800;
  line-height:1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);

  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 1px 1px rgba(0,0,0,.30);
}

/* ===== ILUSTRACIÓN · SISTEMA (4 bordes + inglete) ===== */
.panel-tobin .tcard-art{
  position: relative;
  overflow: hidden;
}

.panel-tobin .tcard-art-frame{
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--frame);
  right: var(--frame);
  pointer-events: none;
  z-index: 2;
}

.panel-tobin .tcard-frame{
  position: absolute;
  pointer-events: none;
}

/* Perfil + ruido (marco ilustración) */
.panel-tobin .tcard-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;

  box-sizing: border-box;
  border: var(--strokeW) solid var(--strokeC);

  background-image: var(--noiseTex);
  background-size: 160px 160px;
  background-blend-mode: soft-light;
  opacity: .45;
}

.panel-tobin .tcard-frame--top{
  left: 0; right: 0; top: 0;
  height: var(--artBorder);
  background: var(--artTop);
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--artBorder)) 100%,
    var(--artBorder) 100%
  );
}
.panel-tobin .tcard-frame--top::after{
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--artBorder)) 100%,
    var(--artBorder) 100%
  );
}

.panel-tobin .tcard-frame--right{
  top: 0; bottom: 0; right: 0;
  width: var(--artBorder);
  background: var(--artRight);
  clip-path: polygon(
    0 var(--artBorder),
    100% 0,
    100% 100%,
    0 calc(100% - var(--artBorder))
  );
}
.panel-tobin .tcard-frame--right::after{
  clip-path: polygon(
    0 var(--artBorder),
    100% 0,
    100% 100%,
    0 calc(100% - var(--artBorder))
  );
}

.panel-tobin .tcard-frame--bottom{
  left: 0; right: 0; bottom: 0;
  height: var(--artBorder);
  background: var(--artBottom);
  clip-path: polygon(
    var(--artBorder) 0,
    calc(100% - var(--artBorder)) 0,
    100% 100%,
    0 100%
  );
}
.panel-tobin .tcard-frame--bottom::after{
  clip-path: polygon(
    var(--artBorder) 0,
    calc(100% - var(--artBorder)) 0,
    100% 100%,
    0 100%
  );
}

.panel-tobin .tcard-frame--left{
  top: 0; bottom: 0; left: 0;
  width: var(--artBorder);
  background: var(--artLeft);
  clip-path: polygon(
    0 0,
    100% var(--artBorder),
    100% calc(100% - var(--artBorder)),
    0 100%
  );
}
.panel-tobin .tcard-frame--left::after{
  clip-path: polygon(
    0 0,
    100% var(--artBorder),
    100% calc(100% - var(--artBorder)),
    0 100%
  );
}

.panel-tobin .tcard-art-inner{
  position: absolute;
  top: var(--artBorder);
  bottom: var(--artBorder);
  left: calc(var(--frame) + var(--artBorder));
  right: calc(var(--frame) + var(--artBorder));
  overflow: hidden;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

.panel-tobin .tcard-art-inner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.panel-tobin .tcard-art--empty{
  width: 100%;
  height: 100%;
}

/* ===== FRANJA TÉCNICA ===== */
.panel-tobin .tcard-tech{
  position: relative;
}

.panel-tobin .tcard-tech-inner{
  position: relative;
  z-index: 1;
  padding: 6px calc(var(--frame) + var(--artBorder));

  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 1px rgba(0,0,0,.45);

  font-family: "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: .82rem;
  line-height: 1.1;
}

.panel-tobin .tcard-techRow{
  width: 100%;
  display: grid;
  grid-template-columns: 75% 25%;
  align-items: center;
}

.panel-tobin .tcard-typeText,
.panel-tobin .tcard-cdi{
  font-family: "Cormorant SC", "Cormorant", serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .9rem;
}

.panel-tobin .tcard-cdi{
  text-align: right;
}

/* ===== DESCRIPCIÓN ===== */
.panel-tobin .tcard-desc{
  position: relative;
  overflow: hidden;
  background: transparent;
}

.panel-tobin .tcard-desc-frame{
  position: absolute;
  left:  var(--frame);
  right: var(--frame);
  top: 0;
  bottom: var(--frame);
  background: transparent;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.panel-tobin .tcard-dframe{
  position: absolute;
  pointer-events: none;
}

/* Perfil + ruido (marco descripción) */
.panel-tobin .tcard-dframe::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  box-sizing: border-box;

  border: var(--strokeW) solid var(--strokeC);

  background-image: var(--noiseTex);
  background-size: 160px 160px;
  background-blend-mode: soft-light;
  opacity: .45;
}

/* 🔥 ESTO ES LO QUE NO PUEDE FALTAR: geometría de los 4 bordes de descripción */
.panel-tobin .tcard-dframe--top{
  left: 0; right: 0; top: 0;
  height: var(--descBorder);
  background: var(--descTop);
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--descBorder)) 100%,
    var(--descBorder) 100%
  );
}
.panel-tobin .tcard-dframe--top::after{
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--descBorder)) 100%,
    var(--descBorder) 100%
  );
}

.panel-tobin .tcard-dframe--right{
  top: 0; bottom: 0; right: 0;
  width: var(--descBorder);
  background: var(--descRight);
  clip-path: polygon(
    0 var(--descBorder),
    100% 0,
    100% 100%,
    0 calc(100% - var(--descBorder))
  );
}
.panel-tobin .tcard-dframe--right::after{
  clip-path: polygon(
    0 var(--descBorder),
    100% 0,
    100% 100%,
    0 calc(100% - var(--descBorder))
  );
}

.panel-tobin .tcard-dframe--bottom{
  left: 0; right: 0; bottom: 0;
  height: var(--descBorder);
  background: var(--descBottom);
  clip-path: polygon(
    var(--descBorder) 0,
    calc(100% - var(--descBorder)) 0,
    100% 100%,
    0 100%
  );
}
.panel-tobin .tcard-dframe--bottom::after{
  clip-path: polygon(
    var(--descBorder) 0,
    calc(100% - var(--descBorder)) 0,
    100% 100%,
    0 100%
  );
}

.panel-tobin .tcard-dframe--left{
  top: 0; bottom: 0; left: 0;
  width: var(--descBorder);
  background: var(--descLeft);
  clip-path: polygon(
    0 0,
    100% var(--descBorder),
    100% calc(100% - var(--descBorder)),
    0 100%
  );
}
.panel-tobin .tcard-dframe--left::after{
  clip-path: polygon(
    0 0,
    100% var(--descBorder),
    100% calc(100% - var(--descBorder)),
    0 100%
  );
}

.panel-tobin .tcard-desc-inner{
  position: absolute;
  z-index: 3;
  left:  calc(var(--frame) + var(--descBorder));
  right: calc(var(--frame) + var(--descBorder));
  top: var(--descBorder);
  bottom: calc(var(--frame) + var(--descBorder));

  background: var(--descBg);
  overflow: hidden;
  padding: 4px 6px;
  box-sizing: border-box;
}

/* Acabado del panel de descripción (sin tocar bordes) */
.panel-tobin .tcard-desc-inner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,var(--descHi)), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,var(--descVig)), transparent 55%),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,var(--descGrain)) 0px,
      rgba(0,0,0,var(--descGrain)) 1px,
      transparent 2px,
      transparent 4px
    );
}

.panel-tobin .tcard-descText{
  margin: 0;
  color: var(--descText);

  font-family: "Cormorant", "Georgia", "Times New Roman", serif;
  font-size: .92rem;
  line-height: 1.25;
  text-align: justify;

  font-weight: 500;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);

  position: relative;
  z-index: 1;
}

.panel-tobin .tcard-descText::first-letter{
  font-weight: 700;
}

/* ---------- Interacción PC (sin sombras) ---------- */
@media (hover: hover) and (pointer:fine){
  .panel-tobin .tobin-grid .tcard{
    cursor: pointer;
    transition: transform 70ms cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
  .panel-tobin .tobin-grid .tcard:hover{
    transform: translateY(-4px);
  }

}

/* ================= Aparición suave (stagger) ================= */
/* NO dejamos la carta en opacity 0 “por defecto”. Solo por estado del grid. */
@media (prefers-reduced-motion: no-preference){
  .panel-tobin .tobin-grid{
    opacity: 1;
    transform: none;
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .panel-tobin .tobin-grid.is-loading{
    opacity: 0;
    transform: translateY(6px);
  }

  .panel-tobin .tobin-grid.is-loading .tcard{
    opacity: 0;
    transform: translateY(8px);
  }

  .panel-tobin .tobin-grid.is-ready .tcard{
    opacity: 1;
    transform: none;
    transition:
      opacity 220ms ease calc(var(--i, 0) * 18ms),
      transform 220ms ease calc(var(--i, 0) * 18ms);
  }
}

@media (prefers-reduced-motion: reduce){
  .panel-tobin .tobin-grid,
  .panel-tobin .tcard{
    transition: none !important;
  }
}

/* ---------- Modal Tobin (único) ---------- */
@media (min-width:1024px){
  .tobin-modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 6vh 6vw;
    box-sizing: border-box;

    z-index: 99999;
    contain: paint;
  }

  .tobin-modal .tcard-expanded{
    transform: translateZ(0) scale(1.20);
    transform-origin: center;
    will-change: transform;
    backface-visibility: hidden;
  }
    
  .tobin-modal .tcard{
    cursor: default;
  }
  .tobin-modal .tcard:hover{
    transform: none;
  }
  .tobin-modal .tcard-expanded:hover{
    transform: translateZ(0) scale(1.20);
  }

}

/* ===== RESPONSIVE ===== */
@media (max-width:920px){
  .panel-tobin .tobin-grid{
    grid-template-columns:1fr;
  }

  .panel-tobin .about-title{
    font-size: 1.22rem;
  }

  .panel-tobin .subtitle{
    font-size: .92rem;
    line-height: 1.5;
  }

  .panel-tobin .tcard-title{
    font-size: 1.08rem;
    text-align: center;
  }
}

/* Ajuste de hairline para Chrome / Blink */
@supports (-webkit-appearance: none) {
  .panel-tobin .tcard{
    --strokeC: rgb(0, 0, 0);
  }
}

/* ===== Refuerzo diagonales · ILUSTRACIÓN ===== */
.panel-tobin .tcard-frame::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity: var(--diagA);
}

.panel-tobin .tcard-frame--top::before{
  background:
    linear-gradient(45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      left bottom / var(--artBorder) var(--artBorder) no-repeat,
    linear-gradient(-45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      right bottom / var(--artBorder) var(--artBorder) no-repeat;
}

.panel-tobin .tcard-frame--bottom::before{
  background:
    linear-gradient(-45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      left top / var(--artBorder) var(--artBorder) no-repeat,
    linear-gradient(45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      right top / var(--artBorder) var(--artBorder) no-repeat;
}

.panel-tobin .tcard-frame--left::before{
  background:
    linear-gradient(45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      left top / var(--artBorder) var(--artBorder) no-repeat,
    linear-gradient(-45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      left bottom / var(--artBorder) var(--artBorder) no-repeat;
}

.panel-tobin .tcard-frame--right::before{
  background:
    linear-gradient(-45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      right top / var(--artBorder) var(--artBorder) no-repeat,
    linear-gradient(45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      right bottom / var(--artBorder) var(--artBorder) no-repeat;
}

/* ===== Refuerzo diagonales · DESCRIPCIÓN ===== */
.panel-tobin .tcard-dframe::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity: var(--diagA);
}

.panel-tobin .tcard-dframe--top::before{
  background:
    linear-gradient(45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      left bottom / var(--descBorder) var(--descBorder) no-repeat,
    linear-gradient(-45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      right bottom / var(--descBorder) var(--descBorder) no-repeat;
}

.panel-tobin .tcard-dframe--bottom::before{
  background:
    linear-gradient(-45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      left top / var(--descBorder) var(--descBorder) no-repeat,
    linear-gradient(45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      right top / var(--descBorder) var(--descBorder) no-repeat;
}

.panel-tobin .tcard-dframe--left::before{
  background:
    linear-gradient(45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      left top / var(--descBorder) var(--descBorder) no-repeat,
    linear-gradient(-45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      left bottom / var(--descBorder) var(--descBorder) no-repeat;
}

.panel-tobin .tcard-dframe--right::before{
  background:
    linear-gradient(-45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      right top / var(--descBorder) var(--descBorder) no-repeat,
    linear-gradient(45deg, transparent 46%, var(--diagC) 47%, var(--diagC) calc(47% + var(--diagS)), transparent calc(47% + var(--diagS) + 1px))
      right bottom / var(--descBorder) var(--descBorder) no-repeat;
}


/* ==================================================   Contacto   ================================================== */

.panel.panel-contacto{
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Variables locales (ajuste rápido) */
.panel-contacto{
  /* Redes sociales “chapitas” */
  --socialChipH: 48px;              /* más presencia */
  --socialChipPadX: 18px;
  --socialChipGap: 12px;
  --socialChipRadius: 10px;         /* menos “pill”, más placa */
  --socialChipBorder: rgba(255,255,255,.35);
  --socialChipBg: rgba(255,255,255,.04);
  --socialChipBgHover: rgba(255,255,255,.10);
  --socialChipBorderHover: rgba(255,255,255,.75);

  --textMax: 950px;
}

/* Anchos coherentes con Quienes / Tobin */
.panel-contacto .about-box,
.panel-contacto .contacts-zone{
  width: min(1100px, 94vw);
  margin-inline: auto;
}

/* Separación entre bloques */
.panel-contacto .contacts-zone{
  margin-top: var(--blockGap, 32px);
}

/* ==================================================
   Títulos
   ================================================== */

.panel-contacto .about-title{
  font-family: var(--fontTitle, "IBM Plex Sans Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 var(--titleGap, 12px);
}

/* En esta web: todos los títulos iguales */
.panel-contacto .about-title--section{
  font-size: 1.35rem;
  margin-bottom: 12px;
}


/* ==================================================
   Subtítulo (2 líneas: intro + emphasis)
   ================================================== */

.panel-contacto .subtitle{
  font-family: var(--fontBody, "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  text-align: center;

  /* Para \n en i18n */
  white-space: pre-line;

  max-width: var(--textMax);
  margin-inline: auto;
}

.panel-contacto .subtitle--emphasis{
  margin-top: 6px;
  font-weight: 450;
  color: var(--text);
}

/* ==================================================
   Bloque de contacto (redes + email)
   ================================================== */

.panel-contacto .contact-block{
  margin-top: 18px;
  display: grid;
  gap: 32px;            /* más aire entre chips y mail */
  justify-items: center;
}

/* ==================================================
   Logo separador (Contacto)
   ================================================== */

.panel-contacto .contact-logo{
  margin: 8px auto 22px;
  display: flex;
  justify-content: center;
}

.panel-contacto .contact-logo img{
  width: 420px;        /* más contenido que el SVG */
  max-width: 38vw;
  opacity: .95;
}


/* ==================================================
   Redes sociales (3 chapas pequeñas, blancas, transparentes)
   ================================================== */

.panel-contacto .social-chips{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;

  /* limita el bloque para que no “estire” infinito en desktop */
  width: min(620px, 100%);
  margin-inline: auto;
}

.panel-contacto .social-chip{
  height: var(--socialChipH);
  padding: 0 var(--socialChipPadX);

  display: inline-flex;
  align-items: center;
  gap: var(--socialChipGap);

  border-radius: var(--socialChipRadius);
  border: 1px solid var(--socialChipBorder);
  background: var(--socialChipBg);

  color: var(--text);
  text-decoration: none;
    
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .9rem;

  justify-content: center;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.panel-contacto .social-chip:hover{
  transform: translateY(-2px);
  background: var(--socialChipBgHover);
  border-color: var(--socialChipBorderHover);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.25),
    0 6px 18px rgba(0,0,0,.35);
}

.panel-contacto .social-chip__ic{
  width: 22px;
  height: 22px;

  display: grid;
  place-items: center;

  flex-shrink: 0;
}

.panel-contacto .social-chip__ic svg,
.panel-contacto .social-chip__ic img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.panel-contacto .social-chip__txt{
  font-size: .95rem;
  line-height: 1;
  color: var(--text);
}

/* ==================================================
   Email (color destacado, limpio)
   ================================================== */

.panel-contacto .email{
  font-size: 1.4rem;
  font-weight: 500;
  color: #029acc;
}

.panel-contacto .email a{
  color: #029acc;
  text-decoration: none;
}

.panel-contacto .email a:hover{
  text-decoration: underline;
}

/* Subtítulo justo bajo el título de sección */
.panel-contacto .contacts-zone .about-title + .subtitle{
  margin-top: 0;
  margin-bottom: 14px;
}

/* ==================================================
   Chapitas (base): Amigos / Webs
   ================================================== */

.panel-contacto .link-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;

  width: min(860px, 100%);
  margin-inline: auto;
}


.panel-contacto .link-card{
  display: block;
  border-radius: var(--r14, 14px);
  overflow: hidden;
  text-decoration: none;

  border: none;
  background: none;

  transition: transform .18s ease;
}

.panel-contacto .link-card:hover{
  transform: translateY(-2px);
}

/* Imagen (480×270, 16:9) */
.panel-contacto .link-card .thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display: block;

  opacity: .82;
  transition: opacity .18s ease;
}

.panel-contacto .link-card:hover .thumb{
  opacity: 1;
}

/* ==================================================
   Aire final de página (Contacto)
   ================================================== */

.panel-contacto .contacts-zone:last-of-type{
  margin-bottom: 48px;
}


/* ==================================================
   Estado vacío / error (fallback)
   ================================================== */

.panel-contacto .empty{
  grid-column: 1 / -1; /* ocupa todo el ancho del grid */
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;

  padding: 14px 16px;
  border-radius: var(--r14, 14px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}

/* ==================================================
   Responsive
   ================================================== */

/* Tablet / compacto */
@media (max-width: 1100px){
  .panel-contacto .link-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Móvil (preset tipográfico + ajustes generales) */
@media (max-width: 920px){

  .panel-contacto .about-title{
    font-size: 1.22rem;
  }

  .panel-contacto .subtitle{
    font-size: .92rem;
    line-height: 1.5;
  }

  .panel-contacto .contact-logo{
    margin: 6px auto 18px;
  }

  .panel-contacto .contact-logo img{
    width: clamp(210px, 74vw, 340px); /* ~95% visual */
    max-width: 85vw;
  }

  .panel-contacto .contact-block{
    gap: 26px;
  }

  .panel-contacto .email{
    font-size: 1.2rem;
    line-height: 1.25;
    text-align: center;
  }

      /* Link cards: 2 columnas y bloque más estrecho en móvil */
  .panel-contacto .link-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(520px, 100%);
    gap: 8px;
  }

    /* Chips: no full-width, más compactos (iPhone 12 friendly) */
  .panel-contacto .social-chips{
    width: 60%;
    max-width: 520px;
    gap: 8px;
    margin-inline: auto;
  }

  .panel-contacto .social-chip{
    height: 42px;
    padding: 0 12px;
    font-size: .78rem;
    letter-spacing: .03em;
  }

  .panel-contacto .social-chip__ic{
    width: 18px;
    height: 18px;
  }

  /* Email: evitar overflow real */
  .panel-contacto .email{
    max-width: min(520px, 100%);
  }

  .panel-contacto .email a{
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }


}

/* Muy estrecho: chips en 1 columna */
@media (max-width: 480px){
  .panel-contacto .social-chips{
    grid-template-columns: 1fr;
  }
}