/* ============================================================
   EVANS CARNERO — internal-components.css
   Componentes añadidos con los documentos de mejoras 10/2026,
   compartidos por las páginas internas. Reutilizan los tokens de
   site.css (colores, tipografías, bordes, curvas de animación) y
   no modifican ninguna regla del diseño aprobado.
   ============================================================ */

/* ---------- HERO: frase destacada, varios párrafos y botón secundario ---------- */
.page-hero--rich p{max-width:720px;}
.page-hero--rich p:not(:last-of-type){margin-bottom:14px;}
body.internal-page .page-hero p.page-hero-sub{
  color:#ffffff !important;
  font-size:clamp(17px,1.7vw,22px);font-weight:600;line-height:1.4;
  max-width:760px;margin-bottom:16px;
}
body.internal-page .page-hero p.page-hero-sub:last-of-type{margin-bottom:34px;}
body.internal-page .page-hero-buttons .btn.btn-ghost{color:#ffffff;border-color:rgba(255,255,255,.45);}
body.internal-page .page-hero-buttons .btn.btn-ghost:hover{border-color:#ffffff;}

/* ---------- FILA DE BOTONES ---------- */
.btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:44px;}
.btn-row--center{justify-content:center;margin-top:0;}
.btn-row--flush{margin-top:0;}

/* ---------- TEXTO CON VARIOS PÁRRAFOS ---------- */
.prose p + p{margin-top:20px;}
.split--block{margin-bottom:64px;}
.split--block:last-child{margin-bottom:0;}

/* ---------- FRASE QUE PRESENTA UNA LISTA ---------- */
.list-intro{
  max-width:820px;margin-bottom:14px;
  font-size:16px;line-height:1.8;font-weight:600;color:var(--grey-700);
}
.section-dark .list-intro{color:var(--grey-100);}

/* ---------- FRASE DE CIERRE (misma pieza que el cierre del bloque CEO) ---------- */
blockquote.pull-quote{
  max-width:820px;margin:56px 0 0;
  padding:6px 0 6px 26px;border-left:2px solid var(--black);
  font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);font-weight:600;line-height:1.4;
  color:var(--black);
}
.section-dark blockquote.pull-quote{color:var(--white);border-left-color:var(--accent-light);}
@media(max-width:768px){
  blockquote.pull-quote{padding-left:18px;margin-top:44px;}
}

/* ---------- ETIQUETAS (listas cortas) ---------- */
.chip-list{display:flex;flex-wrap:wrap;gap:10px;}
.chip-list li{
  padding:10px 16px;border:1px solid var(--grey-100);border-radius:2px;background:var(--white);
  font-size:13.5px;line-height:1.3;color:var(--grey-700);
}
.chip-list--sm{gap:6px;}
.chip-list--sm li{padding:6px 10px;font-size:12px;}
.section-dark .chip-list li{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);color:var(--grey-300);
}

/* ---------- DOS COLUMNAS ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px 64px;}
.col-title{
  margin-bottom:20px;
  font-size:14px;font-weight:700;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;
}
@media(max-width:768px){
  .two-col{grid-template-columns:1fr;gap:40px;}
}

/* ---------- TARJETAS: título como H3 (jerarquía H2 → H3) y enlace sobre fondo oscuro ---------- */
.info-card h3{font-size:19px;line-height:1.3;font-weight:700;}
.section-dark .info-card h3{color:var(--white);}
.section-dark .info-card a.card-link{color:var(--white);}

/* ---------- PREGUNTAS FRECUENTES (acordeón nativo <details>) ---------- */
.faq-list{max-width:980px;border-top:1px solid var(--grey-100);}
.faq-item{border-bottom:1px solid var(--grey-100);}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 0;cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary h3{font-size:17px;font-weight:600;line-height:1.45;letter-spacing:0;}
.faq-item summary .material-symbols-outlined{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:1px solid var(--grey-300);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--accent);
  transition:transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.faq-item summary:hover .material-symbols-outlined{border-color:var(--accent);}
.faq-item[open] summary .material-symbols-outlined{
  transform:rotate(180deg);background:var(--black);border-color:var(--black);color:var(--white);
}
.faq-answer{padding:0 58px 28px 0;}
.faq-answer p{max-width:820px;font-size:15.5px;line-height:1.8;color:var(--grey-700);}
.section-dark .faq-list,
.section-dark .faq-item{border-color:rgba(255,255,255,.15);}
.section-dark .faq-answer p{color:var(--grey-300);}
.section-dark .faq-item summary .material-symbols-outlined{border-color:rgba(255,255,255,.35);color:var(--accent-light);}
.section-dark .faq-item[open] summary .material-symbols-outlined{background:var(--white);border-color:var(--white);color:var(--black);}
@media(max-width:600px){
  .faq-item summary{padding:22px 0;gap:16px;}
  .faq-item summary h3{font-size:16px;}
  .faq-answer{padding-right:0;}
}

/* ---------- VIDEO CON PORTADA (el reproductor se carga al hacer clic) ---------- */
.video-box{position:relative;max-width:1100px;aspect-ratio:16/9;background:#000000;overflow:hidden;}
.video-box iframe,
.video-box video{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-play{
  position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;
  background:var(--black);cursor:pointer;
}
.video-play img{
  width:100%;height:100%;object-fit:cover;opacity:.82;
  transition:opacity .4s var(--ease), transform .8s var(--ease);
}
.video-play:hover img{opacity:1;transform:scale(1.03);}
.video-play-icon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;background:var(--white);color:var(--black);
  display:flex;align-items:center;justify-content:center;font-size:40px;
  transition:transform .35s var(--ease);
}
.video-play:hover .video-play-icon{transform:translate(-50%,-50%) scale(1.08);}
@media(max-width:600px){
  .video-play-icon{width:64px;height:64px;font-size:32px;}
}

/* ---------- FILA DE ENLACES INTERNOS ---------- */
.link-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  margin-top:56px;padding-top:28px;border-top:1px solid var(--grey-100);
}
.link-row-label{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.link-row a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--black);
}
.link-row a .material-symbols-outlined{font-size:16px;transition:transform .3s var(--ease);}
.link-row a:hover .material-symbols-outlined{transform:translateX(4px);}
blockquote.pull-quote--flush{margin-top:0;}

/* ---------- FORMULARIOS: campos por intención, aviso, confirmación y error ---------- */
.contact-form-section .section-head + .form-grid{margin-top:0;}
#propuesta,
#form{scroll-margin-top:80px;}
.form-grid > .full{grid-column:1 / -1;}
/* Campo que no aplica al motivo elegido (lo oculta assets/js/contact-form.js). */
.form-field[hidden]{display:none;}
.form-privacy{
  max-width:820px;padding-left:16px;border-left:2px solid rgba(255,255,255,.28);
  font-size:13px;line-height:1.7;color:var(--grey-300);
}
.form-confirm{
  position:relative;padding:22px 24px 22px 68px;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);
}
.form-confirm:focus{outline:none;}
.form-confirm .material-symbols-outlined{
  position:absolute;left:22px;top:20px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);color:var(--black);font-size:18px;
}
.form-confirm p{font-size:15.5px;line-height:1.65;font-weight:600;color:var(--white);}
.form-alert{
  padding:16px 20px;border:1px solid rgba(255,143,143,.55);background:rgba(255,143,143,.08);
  font-size:14.5px;line-height:1.6;font-weight:600;color:#ffb3b3;
}

/* ---------- BLOQUE EDITORIAL (texto + lista + texto + cierre) ---------- */
.ed-block .lead-block{margin-bottom:36px;}
.ed-block .lead-block:last-child{margin-bottom:0;}
.ed-block .lead-block--after{margin-top:48px;margin-bottom:0;}
.ed-block .risk-list{margin-bottom:0;}

/* ---------- TARJETAS: etiqueta superior, conclusión y grilla de tres ---------- */
.card-kicker{
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.info-card p.card-conclusion{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--grey-100);
  font-size:14.5px;line-height:1.6;font-weight:600;color:var(--black);
}
/* Tres tarjetas: en tablet pasan a una columna (dos columnas dejarían una suelta). */
@media(max-width:980px){
  .card-grid.card-grid--trio{grid-template-columns:1fr;}
}

/* ---------- TABLA DE CONTENIDOS ---------- */
.toc-band{
  padding:48px 0 52px;background:var(--paper-grad-alt);
  border-top:1px solid var(--grey-100);border-bottom:1px solid var(--grey-100);
}
.toc-label{
  display:block;margin-bottom:18px;
  font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
}
.toc-list{list-style:none;columns:3;column-gap:56px;counter-reset:toc;}
.toc-list li{break-inside:avoid;counter-increment:toc;}
.toc-list a{
  display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--grey-100);
  font-size:14.5px;line-height:1.45;font-weight:600;color:var(--grey-700);
  transition:padding-left .4s var(--ease), color .3s var(--ease), border-color .4s var(--ease);
}
.toc-list a::before{
  content:counter(toc, decimal-leading-zero);flex:0 0 auto;
  font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--accent);
}
.toc-list a:hover{padding-left:10px;color:var(--black);border-color:var(--accent);}
@media(max-width:1100px){
  .toc-list{columns:2;column-gap:40px;}
}
@media(max-width:600px){
  .toc-band{padding:36px 0 40px;}
  .toc-list{columns:1;}
}

/* ---------- SOBRE EL AUTOR ---------- */
.author-box{
  display:grid;grid-template-columns:180px 1fr;gap:48px;align-items:start;
  max-width:1100px;padding:48px;border:1px solid var(--grey-100);background:var(--white);
}
.author-box--solo{grid-template-columns:1fr;}
.author-photo{width:180px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;}
.author-photo img{width:100%;height:100%;object-fit:cover;}
.author-name{font-size:clamp(26px,2.6vw,34px);margin-bottom:18px;}
.author-box .prose p{max-width:820px;font-size:16px;line-height:1.8;color:var(--grey-700);}
.link-row--compact{margin-top:28px;padding-top:22px;}
.author-updated{margin-top:22px;font-size:12.5px;letter-spacing:.04em;color:var(--grey-500);}
@media(max-width:768px){
  .author-box{grid-template-columns:1fr;gap:28px;padding:32px 24px;}
  .author-photo{width:120px;}
}

/* ---------- FRAMEWORK "DEL TALENTO AL LEGADO" (línea de tiempo de etapas) ----------
   Colores por variables: por defecto para secciones oscuras; .fw-track--light
   para secciones claras. Lo usan Creator Economy y Sobre mí. */
.fw-track{
  --fw-line:rgba(255,255,255,.24);
  --fw-node:var(--white);
  --fw-halo:rgba(255,255,255,.12);
  --fw-halo-end:rgba(255,255,255,.3);
  --fw-arrow:rgba(255,255,255,.7);
  --fw-num:var(--accent-light);
  --fw-title:var(--white);
  --fw-text:var(--grey-300);
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:64px 0;
}
.fw-track--light{
  --fw-line:var(--grey-300);
  --fw-node:var(--black);
  --fw-halo:rgba(11,11,12,.08);
  --fw-halo-end:rgba(11,11,12,.2);
  --fw-arrow:var(--grey-500);
  --fw-num:var(--accent);
  --fw-title:var(--black);
  --fw-text:var(--grey-700);
}
.fw-step{
  position:relative;padding:34px 36px 0 0;
  border-top:1px solid var(--fw-line);
}
/* nodo de la etapa sobre la línea */
.fw-step::before{
  content:"";position:absolute;left:0;top:-6px;width:11px;height:11px;border-radius:50%;
  background:var(--fw-node);box-shadow:0 0 0 5px var(--fw-halo);
}
/* flecha hacia la etapa siguiente */
.fw-step:not(:last-child)::after{
  content:"";position:absolute;right:18px;top:-5px;width:9px;height:9px;
  border-top:1px solid var(--fw-arrow);border-right:1px solid var(--fw-arrow);
  transform:rotate(45deg);
}
.fw-step:last-child::before{box-shadow:0 0 0 5px var(--fw-halo-end);}
.fw-num{
  display:block;margin-bottom:14px;
  font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--fw-num);
}
.fw-step h3{
  margin-bottom:12px;
  font-size:20px;font-weight:700;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;color:var(--fw-title);
}
.fw-step p{font-size:14px;line-height:1.75;color:var(--fw-text);}
/* las etapas de una misma fila aparecen una tras otra */
body.internal-page .fw-step:nth-child(4n+2){transition-delay:.08s;}
body.internal-page .fw-step:nth-child(4n+3){transition-delay:.16s;}
body.internal-page .fw-step:nth-child(4n+4){transition-delay:.24s;}

.fw-section .quote-static{padding:88px 0 0;}
.fw-section .quote-static blockquote:last-child{margin-bottom:0;}
.fw-outro{max-width:680px;margin:0 auto;color:var(--grey-300);font-size:15.5px;line-height:1.85;}
.fw-section--light .fw-outro{color:var(--grey-700);}

@media(max-width:1100px){
  .fw-track{grid-template-columns:repeat(2,1fr);gap:52px 0;}
  body.internal-page .fw-step:nth-child(n){transition-delay:0s;}
}
@media(max-width:600px){
  .fw-track{
    grid-template-columns:1fr;gap:0;margin-left:5px;
    border-left:1px solid var(--fw-line);
  }
  .fw-step{border-top:0;padding:0 0 36px 28px;}
  .fw-step:last-child{padding-bottom:0;}
  .fw-step::before{left:-6px;top:3px;}
  .fw-step:not(:last-child)::after{display:none;}
  .fw-section .quote-static{padding-top:64px;}
}

/* ---------- BLOQUE EDITORIAL EN DOS COLUMNAS (foto + texto) ---------- */
.ed-split .split-text .list-intro{margin-top:26px;}
.ed-split .split-text .ed-chips{margin-top:4px;}
.ed-split .split-text .lead-block{max-width:none;}
.ed-split .split-text .lead-block--after{margin-top:26px;}
.ed-split .split-text blockquote.pull-quote{margin-top:32px;font-size:clamp(18px,1.8vw,22px);}
.ed-split .split-text .btn-row{margin-top:34px;}
.risk-list.risk-list--single{grid-template-columns:1fr;}
/* frase resaltada dentro de un texto (<strong>) */
.ed-block .prose strong{font-weight:700;color:var(--black);}
.section-dark.ed-block .prose strong{color:var(--white);}

/* ---------- TARJETAS QUE SE REPARTEN SOLAS (la última fila nunca deja huecos) ---------- */
.card-grid.card-grid--flow{display:flex;flex-wrap:wrap;}
.card-grid.card-grid--flow > *{flex:1 1 260px;}