/* =========================================================
   EMMA — plantilla de LISTADO / Recursos (child theme v3.0)
   Scopeado bajo .emma-recursos. Reutilizable para las 3 secciones
   tematicas (misma URL) y para el hub /recursos/.
   El grid es un bloque Query Loop NATIVO de WordPress: se llena y
   actualiza solo por categoria, sin Elementor y sin editar a mano.
   Naranja #FD830D exclusivo CTAs · verde solo dato positivo · Inter + Rubik.
   ========================================================= */
.emma-recursos{
  --morado:#4D4A9E; --deep:#3A3877; --violet:#AC92EC; --green:#8DC049;
  --orange:#FD830D; --orange-h:#e57407; --slate:#516377; --ink:#2c2a4a;
  --surface:#F6F6FB; --line:#ECECEE; --line2:#DDDDE3; --radius:16px;
  font-family:'Inter',system-ui,sans-serif; color:var(--slate); line-height:1.65;
}
.emma-recursos :where(h1,h2,h3,h4){color:var(--morado);line-height:1.18;letter-spacing:-.01em;margin:0}
.emma-recursos p{margin:0}
.emma-recursos a{color:inherit}
.emma-recursos .emma-r-wrap{max-width:1160px;margin-left:auto;margin-right:auto;padding:0 24px}

/* ===== HERO ===== */
.emma-recursos .emma-r-hero{background:var(--surface);border-bottom:1px solid var(--line);padding:52px 0 30px;text-align:center}
.emma-recursos .eyebrow{font-family:'Rubik',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--morado);display:inline-flex;align-items:center;gap:9px;margin-bottom:14px}
.emma-recursos .eyebrow::before{content:"";width:22px;height:2px;background:var(--green);border-radius:2px}
.emma-recursos .emma-r-hero h1{font-size:40px;margin:0 0 12px}
.emma-recursos .emma-r-hero p{max-width:620px;margin:0 auto;font-size:17px}
@media(max-width:600px){.emma-recursos .emma-r-hero h1{font-size:30px}}

/* chips de tema (navegacion cruzada entre secciones) */
.emma-recursos .emma-r-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:26px auto 0}
.emma-recursos .emma-r-chip{font-weight:600;font-size:14px;padding:9px 16px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--slate);text-decoration:none;transition:.15s}
.emma-recursos .emma-r-chip:hover{border-color:var(--violet);color:var(--morado)}
.emma-recursos .emma-r-chip.is-active{background:var(--morado);border-color:var(--morado);color:#fff}

/* ===== SECCIONES ===== */
.emma-recursos .emma-r-sec{padding:48px 0}
.emma-recursos .emma-r-sech{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin:0 0 20px}
.emma-recursos .cat{display:inline-block;font-family:'Rubik',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--morado);background:#EDECF7;padding:6px 10px;border-radius:6px;margin-bottom:12px;width:fit-content}
.emma-recursos .more{color:var(--morado);font-weight:600;text-decoration:none}
.emma-recursos .more::after{content:" \2192"}

/* ===== GRID QUERY LOOP (bloque nativo) ===== */
/* El bloque core/query se renderiza como .wp-block-query; el
   post-template en modo grid como ul.is-layout-grid. Se estiliza
   cada post (li) como tarjeta. */
.emma-recursos .wp-block-query .wp-block-post-template{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0;padding:0;list-style:none;
}
@media(max-width:900px){.emma-recursos .wp-block-query .wp-block-post-template{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.emma-recursos .wp-block-query .wp-block-post-template{grid-template-columns:1fr}}
.emma-recursos .wp-block-post-template > li,
.emma-recursos .wp-block-post{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(58,56,119,.06),0 12px 32px rgba(58,56,119,.07);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.emma-recursos .wp-block-post-template > li:hover{
  transform:translateY(-3px);box-shadow:0 2px 6px rgba(58,56,119,.10),0 24px 56px rgba(58,56,119,.13);border-color:var(--line2);
}
.emma-recursos .wp-block-post-featured-image{margin:0}
.emma-recursos .wp-block-post-featured-image img{width:100%;height:158px;object-fit:cover;display:block}
/* placeholder cuando el post no trae imagen destacada */
.emma-recursos .wp-block-post-featured-image a:empty,
.emma-recursos .wp-block-post-featured-image:empty{
  display:block;height:158px;background:linear-gradient(135deg,var(--morado),var(--deep));
}
.emma-recursos .wp-block-post-template > li > *:not(.wp-block-post-featured-image){
  padding-left:22px;padding-right:22px;
}
.emma-recursos .wp-block-post-terms{margin:16px 0 0;font-family:'Rubik',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--morado)}
.emma-recursos .wp-block-post-terms a{text-decoration:none}
.emma-recursos .wp-block-post-title{font-size:18.5px;line-height:1.3;margin:8px 0 10px}
.emma-recursos .wp-block-post-title a{color:var(--morado);text-decoration:none}
.emma-recursos .wp-block-post-title a:hover{color:var(--deep)}
.emma-recursos .wp-block-post-excerpt{font-size:14.5px;color:var(--slate)}
.emma-recursos .wp-block-post-excerpt__excerpt{margin:0}
.emma-recursos .wp-block-post-excerpt__more-link{color:var(--morado);font-weight:600;text-decoration:none}
/* v7.27 — la fecha de publicacion NO se muestra en las tarjetas de Recursos.
   Se oculta por CSS para que tambien desaparezca en las paginas ya montadas
   (ademas se quito el bloque del patron, para las paginas nuevas).
   Si algun dia se quiere volver a mostrar, borra la regla display:none. */
.emma-recursos .wp-block-post-date{display:none}
.emma-recursos .wp-block-post-excerpt{padding-bottom:20px}

/* Paginacion nativa */
.emma-recursos .wp-block-query-pagination{display:flex;gap:8px;justify-content:center;margin-top:34px}
.emma-recursos .wp-block-query-pagination a,
.emma-recursos .wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers{
  min-width:40px;height:40px;display:inline-grid;place-items:center;border-radius:10px;
  border:1px solid var(--line2);text-decoration:none;font-weight:600;color:var(--slate);padding:0 6px;
}
.emma-recursos .wp-block-query-pagination .page-numbers.current{background:var(--morado);border-color:var(--morado);color:#fff}

/* ===== DESTACADO (Query Loop de 1 post, layout ancho) ===== */
.emma-recursos .emma-r-featured .wp-block-post-template{grid-template-columns:1fr;gap:0}
.emma-recursos .emma-r-featured .wp-block-post-template > li{
  display:grid;grid-template-columns:1.15fr 1fr;border-radius:18px;
}
.emma-recursos .emma-r-featured .wp-block-post-featured-image img{height:100%;min-height:280px}
.emma-recursos .emma-r-featured .wp-block-post-featured-image:empty{height:100%;min-height:280px}
.emma-recursos .emma-r-featured .wp-block-post-title{font-size:25px}
.emma-recursos .emma-r-featured .wp-block-post-template > li > *:not(.wp-block-post-featured-image){padding-left:34px;padding-right:34px}
@media(max-width:760px){.emma-recursos .emma-r-featured .wp-block-post-template > li{grid-template-columns:1fr}}

/* ===== BANDA IMAN (lead magnet -> HubSpot) ===== */
.emma-recursos .emma-r-magnet{background:linear-gradient(135deg,var(--morado),var(--deep));color:#fff;border-radius:20px;padding:38px 40px;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;box-shadow:0 24px 56px rgba(58,56,119,.20)}
.emma-recursos .emma-r-magnet .eyebrow{color:#C9BEF0}
.emma-recursos .emma-r-magnet h3{color:#fff;font-size:25px;line-height:1.22;margin:0 0 10px}
.emma-recursos .emma-r-magnet p{color:rgba(255,255,255,.86);font-size:15.5px}
.emma-recursos .emma-r-magnet .emma-r-form{background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.4);border-radius:14px;padding:22px;text-align:center;font-size:13.5px;color:rgba(255,255,255,.8)}
@media(max-width:760px){.emma-recursos .emma-r-magnet{grid-template-columns:1fr}}

/* ===== CTA FINAL + botones ===== */
.emma-recursos .emma-r-cta{text-align:center;padding:56px 0}
.emma-recursos .emma-r-cta h3{font-size:27px;margin:0 0 10px}
.emma-recursos .emma-r-cta p{max-width:520px;margin:0 auto 22px}
.emma-recursos .emma-r-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.emma-recursos .emma-r-btn-primary{background:var(--orange);color:#fff;font-weight:600;padding:13px 24px;border-radius:11px;text-decoration:none;box-shadow:0 6px 18px rgba(253,131,13,.34);display:inline-block}
.emma-recursos .emma-r-btn-primary:hover{background:var(--orange-h)}
.emma-recursos .emma-r-btn-ghost{background:transparent;color:var(--morado);border:2px solid var(--morado);font-weight:600;padding:11px 22px;border-radius:11px;text-decoration:none;display:inline-block}
.emma-recursos .emma-r-btn-ghost:hover{background:var(--morado);color:#fff}

@media (prefers-reduced-motion: reduce){
  .emma-recursos .wp-block-post-template > li{transition:none}
}

/* v3.1 — titulares Inter Light + tracking abierto */
.emma-recursos .emma-r-hero h1{font-weight:400;letter-spacing:-.012em}
.emma-recursos .emma-r-magnet h3,.emma-recursos .emma-r-cta h3{font-weight:400;letter-spacing:-.01em}

/* v7.17 — padding-top inline movido a clase (invalidaba el bloque). */
.emma-recursos .emma-r-sec.is-tight{padding-top:8px}

/* ===== v7.24 / v7.26 — BANDA IMAN CON PORTADA DE LA GUIA =====
   La banda es un grupo de bloques nativos (imagen + texto + slot del form)
   para poder reemplazar la portada desde el editor, sin tocar codigo.
   Base: 2 columnas (texto + form). Con .has-cover: 3 columnas.
   v7.26: proporciones revisadas EN VIVO con el form real de HubSpot dentro
   (el iframe mide ~510px de alto). La columna del form pasa a 396px fijos
   para que el texto de consentimiento no se parta en 4 lineas, el iframe se
   fuerza al 100% del ancho, y el marco punteado desaparece cuando ya hay
   embed. Portada mas grande para equilibrar el alto del formulario. */
.emma-recursos .emma-r-magnet > *{margin-block:0}
.emma-recursos .emma-r-magnet.has-cover{grid-template-columns:228px 1fr 396px;gap:40px;padding:32px 38px;align-items:center}
.emma-recursos .emma-r-magnet h3{font-size:26px}
.emma-recursos .emma-r-cover{margin:0;align-self:center}
.emma-recursos .emma-r-cover img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 20px 44px rgba(0,0,0,.30);transform:rotate(-2deg);transition:transform .25s ease}
.emma-recursos .emma-r-magnet.has-cover:hover .emma-r-cover img{transform:rotate(0deg) translateY(-3px)}
.emma-recursos .emma-r-magnet-txt .eyebrow{margin-bottom:10px}
.emma-recursos .emma-r-magnet-txt h3{margin:0 0 10px}

/* Formulario de HubSpot dentro de la banda: sin marco cuando ya hay embed,
   y el iframe siempre al ancho de la columna. */
.emma-recursos .emma-r-form:has(.hs-form-frame){background:transparent;border:0;padding:0}
.emma-recursos .emma-r-form .hs-form-frame{width:100%}
.emma-recursos .emma-r-form iframe{width:100% !important;max-width:100% !important;border:0}

@media(max-width:1100px){
  .emma-recursos .emma-r-magnet.has-cover{grid-template-columns:190px 1fr 340px;gap:30px}
}
@media(max-width:980px){
  .emma-recursos .emma-r-magnet.has-cover{grid-template-columns:170px 1fr;gap:28px}
  .emma-recursos .emma-r-magnet.has-cover .emma-r-form{grid-column:1 / -1}
}
@media(max-width:760px){
  .emma-recursos .emma-r-magnet.has-cover{grid-template-columns:1fr;padding:28px 22px}
  .emma-recursos .emma-r-cover{max-width:170px;margin:0 auto}
  .emma-recursos .emma-r-cover img{transform:none}
  .emma-recursos .emma-r-magnet h3{font-size:23px}
}
@media (prefers-reduced-motion: reduce){
  .emma-recursos .emma-r-cover img{transition:none;transform:none}
}