/* =========================
   ABOUT — estilos específicos
   ========================= */

/* Spacing alineado a tu sistema */
section { padding: clamp(64px, 10vh, 120px) 0; }
section:first-of-type { padding-top: clamp(48px, 8vh, 80px); }

/* -------------------------
   A01 — HERO
-------------------------- */
.about-hero .container{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(24px, 5vw, 72px);
  align-items:center;
}
.hero-copy h1{
  font-size: clamp(36px, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 8px 0;
}
.hero-copy p{ margin: 8px 0; max-width: 68ch; }
.hero-copy .muted{ color: var(--muted); }
.hero-photo{
  display:grid; place-items:center;
}
.hero-photo img{
  width: clamp(220px, 34vw, 460px);
  height: clamp(220px, 34vw, 460px);
  object-fit: cover;
  border-radius: 999px;
  outline: 2px solid var(--soft);
  outline-offset: 6px;
  box-shadow: 0 12px 50px rgba(0,0,0,.1);
  transition: transform .4s ease, box-shadow .4s ease;
}
.hero-photo img:hover{ transform: scale(1.015); box-shadow: 0 18px 70px rgba(0,0,0,.14); }

/* -------------------------
   A02 — EXPERIENCE (rail)
-------------------------- */
.xp-section .container{ display:flex; flex-direction:column; gap: 18px; }
.xp-head h2{ margin:0; font-size: clamp(26px, 3.4vw, 40px); }
.xp-head .muted{ color: var(--muted); }

.xp-rail{
  --gap: 10px;
  display:grid;
  grid-template-columns: 2.5fr 1fr 1fr;
  gap: var(--gap);
  list-style:none; padding:0; margin: 6px 0 0;
  align-items: stretch;
}
.xp-item{
  position:relative;
  border: 1px solid color-mix(in srgb, var(--text), transparent 78%);
  border-radius: 16px;
  background: var(--page-bg);
  overflow:hidden;
  transition: grid-column .6s ease, transform .4s ease, border-color .3s ease, box-shadow .3s ease;
  cursor: pointer;
  container-type: inline-size;
}
.xp-item:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--text), transparent 60%); box-shadow: 0 10px 28px rgba(0,0,0,.06); }

/* “Estiramiento”: el activo ocupa más */
.xp-item[data-active="true"]{
  grid-column: span 2;
}

/* contenido */
.xp-item article{
  height:100%;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: clamp(16px, 3.5cqi, 28px);
  gap: 12px;
  position: relative;
}

/* tira lateral suave */
.xp-item::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 100% 0%, color-mix(in srgb, var(--text) 8%, transparent), transparent 70%);
  pointer-events:none;
}

/* header */
.xp-item header{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px;
}
.xp-item h3{ font-size: clamp(16px, 2.8cqi, 22px); margin:0; letter-spacing:-0.01em; }
.xp-item .when{ font-family: 'TheGoodMonolith', monospace; opacity:.65; }

/* contenido */
.xp-item p{ margin: 6px 0 0; color: var(--text); opacity: .9; }
.xp-item .tags{ display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 0; padding:0; list-style:none; }
.xp-item .tags li{
  padding: 6px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border: 1px dashed color-mix(in srgb, var(--text), transparent 70%);
  font-size: 12px; letter-spacing:.01em;
}

/* -------------------------
   A03 — PRINCIPLES
-------------------------- */
.principles h2{ text-align:center; margin:0 0 12px 0; font-size: clamp(26px, 3.4vw, 40px); }
.pill-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}
.pill{
  grid-column: span 4;
  padding: 14px 16px;
  border-radius: 999px;
  text-align:center;
  border:1px solid color-mix(in srgb, var(--text), transparent 75%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 6%, transparent), transparent 90%);
}

/* -------------------------
   Responsive
-------------------------- */
@media (max-width: 980px){
  .about-hero .container{ grid-template-columns: 1fr; text-align:center; }
  .hero-photo img{ width: clamp(220px, 48vw, 380px); height: clamp(220px, 48vw, 380px); }
  .xp-rail{ grid-template-columns: 1fr; }
  .xp-item[data-active="true"]{ grid-column: auto; }
  .pill{ grid-column: span 6; }
}
/* ===== ABOUT — EXPERIENCE (solo estilos locales) ===== */
.xp { padding: clamp(60px, 10vh, 120px) 0; }
.xp-title{
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.02em;
  margin: 0 0 18px 0;
}
.xp-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.xp-item{
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: clamp(14px, 3vw, 28px);
  padding: 18px 16px;
  border: 1px solid color-mix(in srgb, var(--text), transparent 82%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--page-bg) 92%, transparent);
}
.xp-meta{
  display: flex;
  flex-direction: column;
  gap: 6px;
  white-space: nowrap;
  color: var(--muted);
  font-weight: 600;
}
.xp-year{ font-variant-numeric: tabular-nums; }
.xp-company{ opacity: .8; }
.xp-role{
  margin: 4px 0 8px 0;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: -0.01em;
}
.xp-bullets{
  margin: 0; padding-left: 18px;
}
.xp-bullets li{
  margin: 6px 0;
  color: var(--text);
}

/* ===== FOOTER (idéntico a Home) ===== */
.site-footer{ padding-top: 0; }
.footer-top{ display:flex; justify-content:flex-end; padding-bottom:8px; }
.socials{ display:flex; gap:18px; list-style:none; margin:0; padding:0 24px; }
.socials a{ font-weight:600; opacity:.9; }
.socials a:hover{ opacity:1; }
.marquee{ overflow:hidden; border-top:1px solid var(--soft); border-bottom:1px solid var(--soft); margin-top:18px; }
.marquee__track{
  display:inline-flex; gap:2rem; white-space:nowrap; padding:16px 0;
  font-weight:900; letter-spacing:.02em; font-size:clamp(26px, 5.5vw, 64px);
  animation: marquee 22s linear infinite;
}
@keyframes marquee{
  from{ transform: translateX(0) }
  to{ transform: translateX(-50%) }
}

/* Responsive */
@media (max-width: 860px){
  .xp-item{ grid-template-columns: 1fr; }
}
/* ===== ABOUT — PRINCIPLES (Tarjetas flip 3D) ===== */
.cards{
  padding: clamp(24px,4vw,48px) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: clamp(12px,2.5vw,20px);
  perspective: 1200px;
}
@media (max-width:1024px){ .cards{ grid-template-columns: repeat(2, minmax(260px,1fr)); } }
@media (max-width:560px){ .cards{ grid-template-columns: 1fr; } }

.cards details{
  pointer-events: none;
  position: relative;
  justify-self: center;
  transform-style: preserve-3d;
  width: 100%;
  rotate: var(--rotation, 0deg);
  transition: transform .9s cubic-bezier(.34,1.56,.64,1), rotate .3s cubic-bezier(.34,1.56,.64,1);
}
@media (hover:hover){
  .cards details:hover{ rotate: 0deg; }
  .cards details:hover summary svg{ translate: -5% -5%; }
}
.cards details[open]{ transform: rotateY(180deg); }

.cards summary,
.cards .back{
  aspect-ratio: 3/4;
  border: 1px solid color-mix(in srgb, var(--text), transparent 78%);
  border-radius: 14px;
  padding: clamp(14px,2.5vw,22px);
  width: 100%;
  backface-visibility: hidden;
  background: color-mix(in srgb, var(--page-bg) 92%, #000 8%);
}

.cards summary{
  overflow: clip;
  position: relative;
  pointer-events: all;
  cursor: pointer;
  list-style: none;
  transform: translateZ(2px);
}
.cards summary h1{
  font-family: inherit;
  font-size: clamp(22px,2.6vw,34px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
.cards summary svg{
  position: absolute;
  right: -8%;
  bottom: -4%;
  max-height: 40%;
  max-width: 80%;
  transform: rotate(-16deg);
  transition: translate .4s cubic-bezier(.34,1.56,.64,1);
}
.cards summary::-webkit-details-marker{ display:none; }

.cards .back{
  pointer-events: none;
  position: absolute;
  inset: 0;
  transform: rotateY(180deg) translateZ(-1px);
  display: grid;
  align-content: end;
  gap: 10px;
}
.cards .back p{
  margin: 0;
  color: var(--muted);
  font-size: clamp(14px,1.5vw,16px);
}
.cards .back p:first-child{
  font-weight: 600;
  color: var(--text);
}
.cards .back ul{
  margin: 4px 0 0 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cards .back li{
  padding: 6px 8px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  background: color-mix(in srgb, var(--text) 92%, transparent);
  color: #E2FC91;
}

/* ===== ABOUT — CTA “ralo” a la derecha ===== */
/* Aplica solo en About: añade la clase contact-cta--right en tu HTML del CTA */
.contact-cta.contact-cta--right{
  max-width: clamp(260px, 28vw, 420px);
  margin-left: auto;        /* empuja a la derecha */
  text-align: left;
}
/* CTA centrado solo en About */
.contact-cta--center { 
  display: grid; 
  place-items: center;        /* centra el bloque completo */
  text-align: center;         /* centra el contenido dentro */
}

.contact-cta--center .contact-cta__inner {
  margin-inline: auto;        /* asegura centrado del contenedor */
  max-width: 900px;           /* opcional: limitar ancho */
}