/* Juan Díaz — compatibilidad de los bloques de WordPress con el diseño editorial.
   Las secciones se editan con bloques (grupos, titulares, párrafos, botones, imágenes). Aquí se les da el mismo aspecto
   que tenían las plantillas: no es un rediseño. */

/* ---------- Botones de bloque con el aspecto de .btn ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wp-block-button { margin: 0; }
.wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; background: var(--tinta); color: var(--hueso); font: 600 1rem/1 var(--sans); text-decoration: none; border: 2px solid var(--tinta); border-radius: 999px; transition: background .2s, color .2s, border-color .2s; cursor: pointer; }
.wp-block-button .wp-block-button__link:hover { background: var(--amarillo); color: var(--tinta); border-color: var(--tinta); }
.wp-block-button.is-style-amarillo .wp-block-button__link { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
.wp-block-button.is-style-amarillo .wp-block-button__link:hover { background: var(--hueso); border-color: var(--hueso); }
.wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: var(--tinta); color: var(--hueso); border-color: var(--tinta); }
.wp-block-button.is-style-enlace .wp-block-button__link { min-height: 0; padding: 0; background: transparent; color: inherit; border: 0; border-radius: 0; font-weight: 600; text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 3px; text-underline-offset: .26em; transition: text-decoration-color .2s; }
.wp-block-button.is-style-enlace .wp-block-button__link:hover { background: transparent; color: inherit; text-decoration-color: currentColor; }
.sec--amarillo .wp-block-button .wp-block-button__link:hover { background: var(--hueso); color: var(--tinta); border-color: var(--tinta); }
.sec--amarillo .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: var(--tinta); color: var(--hueso); }
.hero__actions { gap: 20px 32px; margin-top: 36px; }
.page-head__actions { gap: 16px 28px; margin-top: 32px; }
.contact__actions { gap: 14px; margin-top: 32px; }
.contact__or + .contact__actions { margin-top: 14px; }

/* ---------- Titular de la portada: una sola animación (el editor no conserva los tramos de línea) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__title { animation: subir 1s var(--ease) both; }
}

/* ---------- Foto con franja amarilla ---------- */
.photo__frame .wp-block-image { margin: 0; display: flex; flex: 1 1 auto; min-height: 0; width: 100%; }
.photo__frame .wp-block-image img { width: 100%; height: 100%; }
.photo__caption { background: var(--amarillo); color: var(--tinta); padding: 14px var(--gutter) 16px; font-size: .9rem; font-weight: 600; position: relative; }

/* ---------- Datos de contacto (filas etiqueta / valor) ---------- */
.contact__data > div p:first-child { color: var(--texto-suave); }
.contact__data > div p { margin: 0; }

/* ---------- Competencias y listas en bloques ---------- */
.likes > article { border-top: 2px solid var(--tinta); padding-top: 16px; }
.services > article.service { padding-block: 32px; border-top: 1px solid var(--linea); position: relative; }
.services > article.service:last-child { border-bottom: 1px solid var(--linea); }
.training { padding: 0; }
.training li em { font-style: normal; color: var(--texto-suave); }
.skills__cols--dos { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cta-title { max-width: 18ch; }
.papel > .wp-block-list { padding: 0; }
@media (max-width: 860px) { .skills__cols--dos { grid-template-columns: 1fr; } }

/* ---------- Ficha de proyecto: etiqueta de origen ---------- */
.feature__origen { display: inline-block; margin-bottom: 14px; padding: 4px 12px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--tinta); background: var(--amarillo); }
.feature__origen--colab { background: transparent; color: var(--hueso); box-shadow: inset 0 0 0 1px var(--amarillo); }

/* ---------- Páginas de secciones (ancho completo) ---------- */
.secciones > .wp-block-group { max-width: none; }