/* ===== Sección Experiencias ===== */
.section-experiences{
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0 0 0;
  background: var(--bg-section, radial-gradient(1200px 600px at 0% 0%, #232345 0%, #070813 60%, #040615 100%));
  overflow: hidden;
}

/* Título */
.exp-heading{
  margin: 0 0 clamp(20px,3vw,30px);
  font-size: clamp(42px, 6.6vw, 96px);
  line-height: .95;
}

/* Layout: acordeón + visual */
.experiences-grid{
  display: grid;
  grid-template-columns: 1fr 1.25fr; /* izquierda lista, derecha imagen */
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
.exp-visual{
  margin: 0;
  align-self: center;
  filter: drop-shadow(0 18px 50px rgba(0,0,0,.35));
}
.exp-visual img{
  min-width: clamp(420px, 45vw, 610px);
  width: 100%;
  height: auto;
  display: block;
  margin-left: 20%;
}

/* Acordeón */
.exp-accordion{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
}
.exp-item{ border-radius: 18px; overflow: hidden; margin: 0; list-style: none;}

.exp-title{ font-size: clamp(17px, 2.4vw, 28px); font-weight: 700; }

/* Hover/focus visual */
.exp-item:hover .exp-header,
.exp-item:focus-within .exp-header{
  filter: brightness(1.07);
}

/* Responsive: apilar, imagen arriba */
@media (max-width: 960px){
  .experiences-grid{
    grid-template-columns: 1fr;
  }
  .exp-visual{
    order: -1;
    justify-self: center;
  }
  .exp-visual img{
    max-width: min(520px, 88vw);
  }
}

/* El título ocupa todo el ancho (fila completa) */
.experiences-grid { 
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}

.experiences-head{
  grid-column: 1 / -1;      /* título sobre ambas columnas */
  margin-bottom: clamp(10px, 2vw, 14px);
}

/* Asegura que acordeón e imagen queden en la misma fila y alineados arriba */
.exp-accordion{ align-self: start; }
.exp-visual{ align-self: start; }

/* (opcional) centra horizontalmente la imagen dentro de su columna */
.exp-visual{ justify-self: end; } /* o center según prefieras */

/* Responsive: ya apilamos en una columna */
@media (max-width: 960px){
  .experiences-grid{ grid-template-columns: 1fr; }
  .exp-visual{ order: -1; justify-self: center; }
}

/* ===== Experiencias: layout fijo (accordion izquierda, imagen derecha) ===== */
.experiences-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
  grid-template-areas:
    "head head"
    "accordion visual";
}

.experiences-head{ grid-area: head; margin-bottom: clamp(10px, 2vw, 14px); }


/* derecha */
.exp-visual{
  grid-area: visual;
  align-self: start;
  justify-self: end;   /* o center si prefieres */
}

/* Mobile: imagen arriba del acordeón */
@media (max-width: 960px){
  .experiences-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "visual"
      "accordion";
    gap: clamp(16px, 3vw, 24px);
  }
  .exp-visual{ justify-self: center; }
}

/* Contenedor del acordeón: 15px de separación SIEMPRE */
.exp-list{
  display: grid;
  gap: 15px;                 /* <-- separación constante entre ítems */
  margin: 0;
  padding: 0;
}

/* Botón del acordeón (fila clickable) */
.exp-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-radius: 16px;       /* radio INDEPENDIENTE */
  background: linear-gradient(90deg,#0a1a2c,#211a31);
  border: 1px solid rgba(255,255,255,.12);
}

/* Quita márgenes heredados que alteren el gap */
.exp-panel p,
.exp-trigger h4{ margin: 0; }

/* Contenedor del acordeón: 15px entre opciones SIEMPRE */
.exp-accordion{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:15px;                 /* <-- separación fija */
}

/* Ítem */
.exp-item{
  list-style:none;
  margin:0;
}

/* Botón/trigger (respeta tus estilos) */
.exp-header{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:14px;
  padding:18px 22px;
  text-align:left;
  color:#ffffff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;                 /* radio independiente */
  background:linear-gradient(91deg,
              rgba(27,148,214,.22),
              rgba(88,73,144,.22) 50%,
              rgba(206,97,116,.22));
  backdrop-filter:blur(6px) saturate(1.02);
  cursor:pointer;
  transition:filter .2s var(--ease,ease), transform .2s var(--ease,ease);
}
.exp-header:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* Panel (cerrado) */
.exp-panel{
  /* colapsado */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height .28s ease, opacity .22s ease, margin-top .22s ease;

  /* borde + radio */
  border: 3px solid transparent;
  border-radius: 14px;

  /* 1) PRIMERA CAPA = RELLENO (ajústala a tu gusto)
     2) SEGUNDA CAPA = BORDE DEGRADADO */
  background:
    linear-gradient(rgb(58, 58, 58), rgba(58, 58, 58)) padding-box,          /* ← FONDO */
    linear-gradient(180deg,#1B94D6 0%,#584990 50%,#CE6174 100%) border-box;   /* ← BORDE */

  /* CLAVE: recortar cada capa donde corresponde */
  background-clip: padding-box, border-box;

  /* spacing cuando está cerrado */
  margin-top: 0;
  padding: 0 18px;

  /* si no quieres la línea tenue en el borde superior, quita esta línea: */
  /* box-shadow: inset 0 1px 0 rgba(255,255,255,.12); */

  backdrop-filter: blur(6px) saturate(1.02);
}

/* Panel (abierto) */
.exp-item.is-open .exp-panel{
  max-height:220px;           /* ajusta si necesitas */
  opacity:1;
  pointer-events:auto;
  margin-top:10px;            /* separa del trigger */
  padding:16px 18px;
  /* opcional: un glow suave sin crear otro borde */
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
}

/* Tipografía interna */
.exp-panel p{ margin:0; line-height:1.55; font-size: clamp(14px, 3vw, 22px);}

/* Caret (tu mismo CSS) */
.exp-caret{
  width:22px; height:22px; position:relative;
}
.exp-caret::before{
  content:"";
  position:absolute; inset:0; margin:auto;
  width:8px; height:8px;
  border-right:2px solid #e9eef7;
  border-bottom:2px solid #e9eef7;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.exp-item.is-open .exp-caret::before{ transform: rotate(-135deg); }

.exp-icons{ display:grid; place-items:center; width:26px; height:26px; }
.exp-icons .ico{ width:22px; height:22px; display:block; }

/* Por defecto: se ve “abrir” (flecha abajo) */
.exp-item .ico-open{ display:block; }
.exp-item .ico-close{ display:none; }

/* Cuando está abierto: se ve “cerrar” (flecha arriba) */
.exp-item.is-open .ico-open{ display:none; }
.exp-item.is-open .ico-close{ display:block; }

/* ===== Item ABIERTO: un solo borde degradado + relleno con fondo glass ===== */
.exp-item.is-open{
  position: relative;
  padding: 14px 16px;                /* espacio respecto al borde */
  border: 3px solid transparent;
  border-radius: 16px;

  /* 1) Capa interna (padding-box): fondo glass oscuro
     2) Capa externa (border-box): borde degradado */
  background:
    linear-gradient(90deg, rgba(31, 31, 31, 0.78), rgba(37, 37, 37, 0.78)) padding-box,
    linear-gradient(180deg, #1B94D6 0%, #584990 50%, #CE6174 100%) border-box;
  background-clip: padding-box, border-box;

  /* glass */
  backdrop-filter: blur(6px) saturate(1.02);
}

/* Header y panel SIN fondos ni bordes para que 'descansen' sobre el relleno del item */
.exp-item.is-open .exp-header{
  background: transparent;
  border: 0;
  border-radius: 12px 12px 0 0;
  padding: 18px 18px;
  box-shadow: none;
}

.exp-item.is-open .exp-panel{
  background: transparent;     /* <- el relleno lo pone el item abierto */
  border: 0;
  box-shadow: none;
  margin-top: 8px;
  padding: 0 18px 14px 18px;
  max-height: 700px;
  opacity: 1;
  pointer-events: auto;
}

/* Panel CERRADO: sin borde y sin fondo para que no quede “marco fantasma” */
.exp-panel{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  margin-top: 0;
  padding: 0 18px;
  border: 0;
  background: transparent;
}

/* ===== Item ABIERTO: borde degradado con interior totalmente transparente ===== */
.exp-item.is-open{
  position: relative;
  padding: 14px 16px;          /* espacio entre contenido y el borde */
  border-radius: 16px;
  background: transparent;     /* nada de fondo */
  border: 0;                   /* el borde lo pinta ::before */
}

/* Solo el aro degradado */
.exp-item.is-open::before{
  content: "";
  position: absolute;
  inset: 0;                    /* ocupa todo el item */
  padding: 3px;                /* grosor del borde */
  border-radius: inherit;
  background: linear-gradient(180deg,#1B94D6 0%,#584990 50%,#CE6174 100%);

  /* Truco de máscara: deja visible solo el “aro” y hace el centro 100% transparente */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;        /* no bloquea clics */
}

/* El header y el panel NO deben pintar fondo ni bordes cuando está abierto */
.exp-item.is-open .exp-header{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 12px 12px 0 0;
}
.exp-item.is-open .exp-panel{
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-top: 8px;
  padding: 0 18px 14px 18px;
  max-height: 800px;
  opacity: 1;
  pointer-events: auto;
}

/* Asegúrate también de no aplicar blur al contenedor abierto */
.exp-item.is-open{ backdrop-filter: none; }

/* ===== Mobile: preview flotante bajo el ítem abierto ===== */
@media (max-width: 960px){
  /* ya no usamos la columna de imagen */
  .exp-visual{ display:none !important; }

  /* espacio inferior para que quepa la imagen flotante */
  .section-experiences{
    padding-bottom: clamp(84px, 22vh, 180px);
  }

  /* contenedor flotante */
  .exp-float-preview{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(220px, 72vw, 380px);
    pointer-events: none;            /* no bloquea taps del acordeón */
    z-index: 4;
    display: none;                   /* se muestra al abrir */
  }
  .exp-float-preview img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    filter: drop-shadow(0 18px 48px rgba(0,0,0,.45));
  }

  /* Por estética: el item abierto queda sobre la imagen */
  .exp-item.is-open{ position: relative; z-index: 5; }
}

/* ===== Mobile: imagen embebida debajo del item abierto ===== */
@media (max-width: 960px){
  /* ocultamos la columna de imagen fija del layout desktop */
  .exp-visual{ display:none !important; }

  /* preview embebido por ítem */
  .exp-inline-preview{
    display: none;
    margin: 12px auto 18px;
    width: clamp(220px, 72vw, 420px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0,0,0,.45);
  }
  .exp-inline-preview.is-visible{ display:block; }
  .exp-inline-preview img{
    display:block; width:100%; height:auto;
  }

  /* un poco más de aire al final de la sección por si el último abre imagen */
  .section-experiences{ padding-bottom: max(56px, 8vh); }
}