/* ==========================================================================
   X10 · Ajustes para WordPress
   x10.css es el diseño de la web original. Este archivo lo adapta al
   marcado de los bloques (grupos, imágenes, vídeos, botones, navegación).
   ========================================================================== */

/* ---------- Bases de los bloques ---------- */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
.wp-block-image, .wp-block-video, .wp-block-table, .wp-block-buttons, .wp-block-details, .wp-block-quote { margin: 0; }
.wp-block-image img { width: 100%; height: auto; }
.wp-block-image.portrait img { height: 100%; object-fit: cover; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Botones ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--s2); }
.wp-block-button .wp-block-button__link,
.contact-form .btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .8rem 1.5rem;
  font: 600 1rem/1.2 var(--font-sans); letter-spacing: .01em; text-decoration: none; text-align: center;
  color: var(--navy-deep);
  background: linear-gradient(120deg, #C99E49 0%, #D7AF5E 55%, #E2BE74 100%);
  border: 1px solid var(--gold); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.wp-block-button .wp-block-button__link:hover { color: var(--navy-deep); background: linear-gradient(120deg, #D1A64F 0%, #DDB767 55%, #EFCE89 100%); }
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
  color: var(--navy); background: transparent; border: 1px solid color-mix(in srgb, var(--slate) 55%, transparent); box-shadow: none; padding: .8rem 1.5rem;
}
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover { border-color: var(--navy); background: var(--card); }
.wp-block-button.btn-small .wp-block-button__link { min-height: 2.75rem; padding: .6rem 1.1rem; font-size: .9375rem; }

/* ---------- Cabecera ---------- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
.site-header { position: static; }
.header-inner { gap: var(--s3); }
.brand { margin-left: -.35rem; padding-block: .5rem; }
.brand img { height: 48px !important; width: auto !important; transition: height var(--t-med) var(--ease-out); }
.site-header.is-scrolled .brand img { height: 42px !important; }
.x10-nav { margin-left: auto; }
.x10-nav .wp-block-navigation__container { gap: var(--s3); }
.x10-nav .wp-block-navigation-item__content {
  position: relative; display: inline-block; padding: .5rem 0;
  font-size: .9375rem; font-weight: 600; color: var(--navy); text-decoration: none;
}
.x10-nav .wp-block-navigation__container .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease-out);
}
.x10-nav .wp-block-navigation__container .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }
.x10-nav .wp-block-navigation__responsive-container-open,
.x10-nav .wp-block-navigation__responsive-container-close { color: var(--navy); }
.x10-nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
/* Menú desplegable hasta 1023 px (WordPress lo pliega solo por debajo de 600 px) */
@media (min-width: 600px) and (max-width: 1023px) {
  .x10-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .x10-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.x10-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--s5) var(--gutter); background: var(--cream) !important; color: var(--navy) !important;
}
.x10-nav .is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; }
.x10-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.x10-nav .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: .9rem 0; font-size: 1.25rem; border-bottom: 1px solid var(--border); }
/* En móvil y tableta el icono del menú va a la derecha del todo; el botón se oculta en pantallas pequeñas */
@media (max-width: 1023px) {
  .header-inner > .x10-nav { order: 3; margin-left: 0; }
  .header-inner > .nav-cta { margin-left: auto; }
}
@media (max-width: 479px) { .site-header .wp-block-buttons.nav-cta { display: none; } .header-inner > .x10-nav { margin-left: auto; } }

/* ---------- Marcas de arco dorado (sustituyen al SVG de la web original) ---------- */
.section-head > .eyebrow::after,
.contact-copy::before {
  content: ""; display: block; width: 4.5rem; height: 1.05rem; margin: .6rem 0 1rem;
  background: url(../icons/arc.svg) no-repeat left center / contain;
}
.contact-copy::before { margin-top: 0; }

/* ---------- Portada ---------- */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: url(../icons/hero-arc.svg) no-repeat center / 100% 100%;
}
.hero-title { text-wrap: balance; }
.hero-copy > .eyebrow { margin-bottom: 0; }
.hero-brand img { width: 100%; }

/* ---------- Franja de cifras ---------- */
.proof-item > p { margin: 0; }

/* ---------- Por qué nace X10: iconos de la comparativa ---------- */
.versus-steps { padding: 0; }
.versus-steps li::before {
  content: ""; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius);
  background: var(--cream-alt) no-repeat center / 1.35rem;
}
.versus-consult li:nth-child(1)::before { background-image: url(../icons/growth-slate.svg); }
.versus-consult li:nth-child(2)::before { background-image: url(../icons/board-slate.svg); }
.versus-consult li:nth-child(3)::before { background-image: url(../icons/doc-slate.svg); }
.versus-x10 li::before { background-color: rgba(254, 249, 243, .08); }
.versus-x10 li:nth-child(1)::before { background-image: url(../icons/growth-light.svg); }
.versus-x10 li:nth-child(2)::before { background-image: url(../icons/people-light.svg); }
.versus-x10 li:nth-child(3)::before { background-image: url(../icons/gear-light.svg); }
.versus-x10 li:nth-child(4)::before { background-image: url(../icons/handshake-light.svg); }
.versus-x10 li:nth-child(5)::before { background-image: url(../icons/trend-light.svg); }
.versus-col > .wp-block-heading { margin-bottom: var(--s3); }

/* ---------- Iconos en disco (imágenes editables) ---------- */
.wp-block-image.icon-disc { display: grid; place-items: center; }
.wp-block-image.icon-disc img { width: 100%; height: 100%; object-fit: contain; }
.moment .wp-block-heading { margin: var(--s2) 0 .4rem; }

/* ---------- Servicios ---------- */
.group-title { display: block; padding-bottom: 0; margin-bottom: .35rem; border-bottom: 0; }
.group-sub {
  margin: 0 0 var(--s1); padding-bottom: var(--s2); border-bottom: 2px solid var(--navy);
  font: 600 var(--fs-eyebrow)/1.4 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--slate);
}
.service-list > .service .wp-block-heading { margin-bottom: .35rem; }
.service-list > .service p { margin: 0; }

/* ---------- Modalidades ---------- */
.plan > p { margin-bottom: 0; }
.plan .plan-days { margin: .35rem 0 var(--s3); }
.plan .plan-focus { margin-bottom: .35rem; }
.plans-foot .wp-block-buttons { margin: 0; }

/* ---------- Cómo trabajamos ---------- */
.step .step-num { margin: 0; }
.step .wp-block-heading { margin-bottom: .4rem; }
.step > p { margin: 0; }
.step .step-gets-label {
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--border);
  font: 600 var(--fs-eyebrow)/1.4 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text);
}
.step .step-gets { margin-top: .2rem; padding-top: 0; border-top: 0; font-weight: 600; color: var(--navy); }
.hundred-copy .wp-block-heading { margin-bottom: var(--s2); }
.priorities-title::before { content: ""; width: 1.6rem; height: 1.6rem; flex: none; background: url(../icons/check-list.svg) no-repeat center / contain; }
.priorities-title em { margin-left: auto; font: 600 .6875rem/1 var(--font-sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.priorities .wp-block-table { overflow-x: auto; }
.priorities .wp-block-table :is(th, td) { border: 0; }
.priorities .wp-block-table td { border-top: 1px solid var(--border); }
.priorities .wp-block-table thead { border: 0; }
.priorities td:last-child { font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ---------- Casos ---------- */
.case-head .wp-block-heading { font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); max-width: 34ch; }
.case-flow > .flow-item > p { margin: .2rem 0 0; }
.case-flow > .flow-item > .flow-label { margin: 0; }
.case-flow .flow-result > p:not(.flow-label) { color: var(--navy); font-weight: 600; }
.flow-result .result-figure { display: block; margin: .2rem 0 .35rem; font: 600 1.6rem/1 var(--font-serif); color: var(--gold-text); }

/* ---------- Beneficios ---------- */
.benefits { position: relative; display: grid; gap: var(--s3); }
@media (min-width: 640px) { .benefits { grid-template-columns: 1fr 1fr; } }
.benefit { padding: var(--s3); background: var(--card); border: 1px solid var(--border); }
.benefit .wp-block-heading { margin: var(--s2) 0 .35rem; font-size: 1.35rem; line-height: 1.15; }
.benefit p { margin: 0; font-size: var(--fs-small); }
@media (max-width: 1099px) {
  .benefit { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2); align-items: start; }
  .benefit .icon-disc { grid-row: span 2; width: 3rem; height: 3rem; padding: .75rem; }
  .benefit .wp-block-heading { margin-top: .2rem; }
}
@media (min-width: 1100px) {
  .benefits { --step: 1.75rem; --disc: 3.5rem; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); align-items: start; }
  .benefit { position: relative; z-index: 1; padding: 0; background: none; border: 0; text-align: center; }
  .benefit .icon-disc { margin-inline: auto; }
  .benefit .wp-block-heading { margin-top: var(--s2); font-size: 1.3rem; }
  .benefit:nth-child(1) { margin-top: calc(6 * var(--step)); }
  .benefit:nth-child(2) { margin-top: calc(5 * var(--step)); }
  .benefit:nth-child(3) { margin-top: calc(4 * var(--step)); }
  .benefit:nth-child(4) { margin-top: calc(3 * var(--step)); }
  .benefit:nth-child(5) { margin-top: calc(2 * var(--step)); }
  .benefit:nth-child(6) { margin-top: calc(1 * var(--step)); }
  /* La línea dorada pasa por el centro de los siete iconos */
  .benefits::before {
    content: ""; position: absolute; z-index: 0;
    left: calc(100% / 14); width: calc(100% - 100% / 7);
    top: calc(var(--disc) / 2); height: calc(6 * var(--step));
    background: url(../icons/benefits-line.svg) no-repeat center / 100% 100%;
  }
}

/* ---------- Preguntas frecuentes ---------- */
.faq details > p { margin: 0; padding: 0 3rem 1.25rem 0; max-width: 40rem; }

/* ---------- Contacto ---------- */
.contact-copy .wp-block-heading { margin-bottom: var(--s3); }

/* ---------- Pie ---------- */
.footer-nav, .footer-mail, .copyright { margin: 0; }
.footer-brand img { height: 60px !important; width: auto !important; }

/* ---------- Páginas (aviso legal, privacidad) ---------- */
.legal .wp-block-post-title { font-size: clamp(2.2rem, 1.8rem + 2vw, 3.2rem); margin: 0 0 var(--s4); }
.legal h2.wp-block-heading { font-size: 1.6rem; margin: var(--s5) 0 var(--s2); }

/* ---------- Blog ---------- */
.x10-blog { padding-bottom: var(--s7); }
.x10-blog .blog-head .wp-block-heading, .x10-blog .wp-block-query-title { font-size: clamp(2.4rem, 1.8rem + 3vw, 3.8rem); margin-top: var(--s2); }
.post-list { display: grid; gap: var(--s4); padding: 0; }
@media (min-width: 900px) { .post-list { grid-template-columns: repeat(3, 1fr); } }
.post-list > li { display: flex; margin: 0; }
.post-list .post-card { flex: 1; }
.post-card .wp-block-post-title { font-size: 1.65rem; line-height: 1.15; margin: 0; }
.post-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.post-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.post-card .wp-block-post-excerpt__excerpt { margin: 0; }
.post-card .post-more { margin-top: auto; padding-top: var(--s2); font-weight: 600; color: var(--gold-text); }
.wp-block-query-pagination { margin-top: var(--s5); gap: var(--s3); font-weight: 600; }

/* ---------- Artículo ---------- */
.post .wp-block-post-terms.eyebrow a { color: var(--slate); text-decoration: none; }
.post-header .wp-block-post-title { font-size: clamp(2.2rem, 1.7rem + 2.6vw, 3.4rem); line-height: 1.06; margin: var(--s2) 0 var(--s3); text-wrap: balance; }
.post-header .wp-block-post-excerpt__excerpt { margin: 0 0 var(--s2); font-size: 1.1875rem; line-height: 1.7; color: var(--text); }
.post-header .post-meta { gap: .3rem; font-size: .875rem; color: var(--muted); }
.post-header .post-meta p { margin: 0; }
.post-body .wp-block-table :is(th, td) { border: 0; border-bottom: 1px solid var(--border); }
.post-body .wp-block-table thead { border-bottom: 0; }
.post-body .wp-block-table thead th { border-bottom: 1px solid var(--gold); }
.post-body .wp-block-table { margin: var(--s3) 0 var(--s4); }
.post-body blockquote p { margin: 0; font: inherit; }
.post-body .note { padding: var(--s2) var(--s3); background: var(--cream-alt); border: 1px solid var(--border); font-size: var(--fs-small); }
.post-cta .wp-block-heading { color: var(--on-dark); font-size: 1.8rem; margin: 0 0 var(--s2); }
.post-cta .wp-block-buttons { margin-top: var(--s2); }

/* ==========================================================================
   Animaciones (solo en la web publicada: el editor no tiene la clase .js)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Entrada de la portada */
  .js .hero-copy > *, .js .hero-brand { opacity: 0; transform: translateY(14px); }
  .js .hero-brand { transform: none; }
  .js .hero::before { clip-path: inset(0 100% 0 0); }
  .js.is-loaded .hero-copy > *, .js.is-loaded .hero-brand {
    opacity: 1; transform: none;
    transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  }
  .js.is-loaded .hero-brand { transition-duration: 1400ms; }
  .js.is-loaded .hero-copy > :nth-child(1) { transition-delay: 290ms; }
  .js.is-loaded .hero-copy > :nth-child(2) { transition-delay: 430ms; }
  .js.is-loaded .hero-copy > :nth-child(3) { transition-delay: 570ms; }
  .js.is-loaded .hero-copy > :nth-child(4) { transition-delay: 710ms; }
  .js.is-loaded .hero::before { clip-path: inset(0 0 0 0); transition: clip-path 2400ms var(--ease-draw) 350ms; }

  /* Aparición suave de cada bloque al llegar a él */
  /* La misma lista está en assets/js/x10.js (REVEAL) */
  .js :is(.x10-main, .x10-blog) :is(.section-head, .person, .proof-item, .split-main > p, .ambient, .versus, .closing-line, .moment, .service-group, .plan, .plans-foot, .steps, .hundred, .case, .faq, .contact-panel, .post-card) { opacity: 0; transform: translateY(12px); }
  .js :is(.x10-main, .x10-blog) :is(.section-head, .person, .proof-item, .split-main > p, .ambient, .versus, .closing-line, .moment, .service-group, .plan, .plans-foot, .steps, .hundred, .case, .faq, .contact-panel, .post-card).is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }

  /* Arcos dorados que se dibujan */
  .js .section-head > .eyebrow::after, .js .contact-copy::before { clip-path: inset(0 100% 0 0); }
  .js .section-head.is-in > .eyebrow::after, .js .contact-panel.is-in .contact-copy::before { clip-path: inset(0 0 0 0); transition: clip-path var(--t-slow) var(--ease-draw) 150ms; }

  /* Beneficios: la línea sube y cada beneficio llega a su vez */
  .js .benefits::before { clip-path: inset(0 100% 0 0); }
  .js .benefits.is-in::before { clip-path: inset(0 0 0 0); transition: clip-path 1800ms var(--ease-draw) 150ms; }
  .js .benefits .benefit { opacity: 0; transform: translateY(10px); }
  .js .benefits.is-in .benefit { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .js .benefits.is-in .benefit:nth-child(2) { transition-delay: 370ms; }
  .js .benefits.is-in .benefit:nth-child(3) { transition-delay: 540ms; }
  .js .benefits.is-in .benefit:nth-child(4) { transition-delay: 710ms; }
  .js .benefits.is-in .benefit:nth-child(5) { transition-delay: 880ms; }
  .js .benefits.is-in .benefit:nth-child(6) { transition-delay: 1050ms; }
  .js .benefits.is-in .benefit:nth-child(7) { transition-delay: 1220ms; }
  .js .benefits.is-in .benefit:nth-child(1) { transition-delay: 200ms; }

  .faq details[open] > p { animation: faq-in 380ms var(--ease-out); }
}