/* ==========================================================================
   SECCIONES DE CONTENIDO: Showreel, Por qué contratarme, Experiencia,
   Logros, Formación y Contacto.
   ========================================================================== */

/* ---------- Showreel ---------- */
.showreel__wrap { max-width: 960px; margin-inline: auto; }
.video {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(600px 300px at 70% 20%, rgba(56,189,248,.28), transparent 60%),
    linear-gradient(135deg, var(--ink-2), var(--ink));
  border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-lg);
}
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__poster {
  position: absolute; inset: 0; width: 100%; border: 0; background: transparent; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
  text-align: center; padding: var(--space-5);
}
.video__play {
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: var(--accent); color: var(--ink); box-shadow: 0 0 0 12px rgba(56,189,248,.22);
  transition: transform .25s var(--ease);
}
.video__poster:hover .video__play { transform: scale(1.08); }
.video__play svg { width: 34px; height: 34px; margin-left: 4px; }
.video__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); }
.video__sub { color: var(--text-on-dark-soft); font-size: var(--fs-sm); margin: 0; }
.showreel__chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); }

/* ---------- Por qué contratarme ---------- */
.why__grid { display: grid; gap: var(--space-5); }
@media (min-width: 700px)  { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .why__grid { grid-template-columns: repeat(3, 1fr); } }
.why__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: var(--space-4);
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(45,212,191,.18)); font-size: 1.4rem;
}
.why__title { font-size: var(--fs-lg); }
.why__text  { color: var(--text-soft); font-size: var(--fs-sm); margin: 0; }
.why__proof { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; color: var(--accent-deep); }

/* ---------- Experiencia (timeline) ---------- */
.timeline { position: relative; display: grid; gap: var(--space-5); padding-left: var(--space-6); }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--accent), var(--line));
}
.job { position: relative; }
.job::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-6) + 1px); top: 1.6rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--accent);
}
.job--current::before { background: var(--accent); box-shadow: 0 0 0 6px rgba(56,189,248,.25); }
.job__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.job__role { font-size: var(--fs-lg); margin-bottom: .15rem; }
.job__company { font-weight: 600; color: var(--accent-deep); margin: 0; }
.job__meta { font-size: var(--fs-xs); color: var(--text-soft); text-align: right; }
.job__meta strong { display: block; color: var(--text); font-size: var(--fs-sm); }
.job__list { margin: var(--space-4) 0; display: grid; gap: var(--space-2); }
.job__list li { position: relative; padding-left: 1.4rem; font-size: var(--fs-sm); color: var(--text-soft); }
.job__list li::before { content: "→"; position: absolute; left: 0; color: var(--accent-deep); font-weight: 700; }
.job__list b { color: var(--text); }
.job__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.job__sub { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--bg); font-size: var(--fs-sm); }
.job__sub strong { display: block; }
.job__sub span { color: var(--text-soft); }
@media (max-width: 560px) { .job__meta { text-align: left; } }

.earlier { margin-top: var(--space-5); }
.earlier summary {
  cursor: pointer; font-family: var(--font-display); font-weight: 700; padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); list-style: none;
}
.earlier summary::-webkit-details-marker { display: none; }
.earlier summary::after { content: "+"; float: right; color: var(--accent-deep); font-size: 1.3rem; line-height: 1; }
.earlier[open] summary::after { content: "–"; }
.earlier__body { padding: var(--space-4) var(--space-5) 0; color: var(--text-soft); font-size: var(--fs-sm); }

/* ---------- Logros ---------- */
.wins__grid { display: grid; gap: var(--space-5); }
@media (min-width: 700px)  { .wins__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .wins__grid { grid-template-columns: repeat(3, 1fr); } }
.win {
  background: var(--ink-2); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius);
  padding: var(--space-6); transition: transform .3s var(--ease), border-color .3s;
}
.win:hover { transform: translateY(-4px); border-color: rgba(56,189,248,.5); }
.win__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); line-height: 1; color: #fff; }
.win__num small { font-size: .5em; color: var(--accent); margin-left: .15em; }
.win__title { font-size: var(--fs-base); margin: var(--space-3) 0 var(--space-2); color: #fff; }
.win__text { font-size: var(--fs-sm); color: var(--text-on-dark-soft); margin: 0 0 var(--space-3); }
.win__where { font-size: var(--fs-xs); color: var(--accent); font-weight: 600; margin: 0; }

/* ---------- Formación ---------- */
.edu__grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .edu__grid { grid-template-columns: 1fr 1fr 1fr; } }
.edu__title { font-size: var(--fs-lg); margin-bottom: var(--space-4); }
.edu__list { display: grid; gap: var(--space-3); }
.edu__list li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.edu__list strong { display: block; }
.edu__list span { color: var(--text-soft); font-size: var(--fs-xs); }
.edu__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Contacto ---------- */
.contact { background: radial-gradient(800px 400px at 100% 0%, rgba(56,189,248,.2), transparent 60%), var(--ink); color: var(--text-on-dark); }
.contact__grid { display: grid; gap: var(--space-7); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact__title { font-size: var(--fs-2xl); }
.contact__list { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.contact__item {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: var(--text-on-dark); text-decoration: none !important; transition: border-color .2s, background .2s;
}
.contact__item:hover { border-color: var(--accent); background: rgba(56,189,248,.08); }
.contact__ico { font-size: 1.4rem; width: 32px; text-align: center; }
.contact__item small { display: block; color: var(--text-on-dark-soft); font-size: var(--fs-xs); }
.contact__item strong { font-family: var(--font-display); }

.form { background: var(--surface); color: var(--text); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--shadow-lg); }
.form__title { font-size: var(--fs-lg); }
.form__row { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: block; margin-bottom: var(--space-4); }
.field span { display: block; font-size: var(--fs-xs); font-weight: 700; margin-bottom: .3rem; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: var(--fs-sm); padding: .75rem .9rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-deep); box-shadow: 0 0 0 4px rgba(56,189,248,.2); }
.form__note { font-size: var(--fs-xs); color: var(--text-soft); margin: var(--space-3) 0 0; }

/* ---------- Recomendaciones ---------- */
.quotes__grid { display: grid; gap: var(--space-5); }
@media (min-width: 800px) { .quotes__grid { grid-template-columns: repeat(2, 1fr); } }
.quote { display: flex; flex-direction: column; }
.quote__text { position: relative; font-size: var(--fs-base); color: var(--text); margin: 0 0 var(--space-5); flex: 1; }
.quote__text::before { content: "“"; display: block; font-family: var(--font-display); font-size: 3.5rem; line-height: .6; color: var(--accent); margin-bottom: var(--space-2); }
.quote__who { display: flex; align-items: center; gap: var(--space-3); }
.quote__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: .85rem; flex: none; }
.quote__name { font-weight: 700; font-family: var(--font-display); display: block; }
.quote__role { font-size: var(--fs-xs); color: var(--text-soft); }
.quotes__source { text-align: center; margin-top: var(--space-5); font-size: var(--fs-sm); }

.contact .section__lead { color: var(--text-on-dark-soft); }