/**
 * "Chrome" de una ficha individual: volver, banner, eyebrow+título, caja
 * "Resumen". Lo comparten `single.php` (entradas del blog), `single-caso.php`
 * (casos de éxito) y `page-legal.php` (Términos/Cookies/Privacidad, sin
 * banner ni eyebrow) — misma tarjeta blanca con sombra, aunque el cuerpo de
 * cada uno sea distinto. Autocontenido, igual que blog.css — se carga en
 * is_singular(['post', 'caso']) || is_page_template('page-legal.php'), ver
 * inc/enqueue.php.
 */

.entry-volver {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    margin: var(--space-32) 0 var(--space-24);
    font-size: var(--text-label-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink);
    text-decoration: none;
}

.entry-volver:hover,
.entry-volver:focus-visible {
    color: var(--color-brand-red);
}

/* Tarjeta: banner + contenido comparten un mismo fondo blanco con sombra,
   apoyada sobre el gris de --color-fondo del body — el banner queda pegado
   al borde de arriba (sin margen ni radio propio, lo recorta el
   `overflow: hidden` de la tarjeta) y el resto del contenido va con relleno
   en .entry-card-body. */
.entry-card {
    background: var(--color-white);
    border-radius: var(--radius-large);
    box-shadow: 0 12px 32px rgba(18, 18, 18, 0.08);
    overflow: hidden;
    margin-bottom: 6rem;
}

.entry-banner img {
    display: block;
    width: 100%;
    height: clamp(120px, 20vw, 190px);
    object-fit: cover;
}

.entry-card-body {
    padding: var(--space-32) var(--space-32) var(--space-48);
}

/* Mismo 1.5rem lateral que la tarjeta de empleos y el hero en teléfono. */
@media (max-width: 767px) {
    .entry-card-body {
        padding: var(--space-24) var(--space-24) var(--space-32);
    }

    /* Mismo 3.5rem que el padding de .section en teléfono (layout.css). */
    .entry-card {
        margin-bottom: 3.5rem;
    }

    .entry-banner img {
        height: 220px;
    }
}

/* page-legal.php no tiene el link "Volver" de single.php (que empuja el
   contenido hacia abajo con su propio margin-top) — sin esto la tarjeta
   queda pegada al header. */
.container--legal {
    padding-top: 2rem;
}

.entry-header {
    margin-bottom: var(--space-24);
}

.entry-meta {
    margin: 0 0 var(--space-8);
    font-size: var(--text-label-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand-red);
}

.entry-header h1 {
    margin: 0;
    font-size: var(--text-header-h2);
    line-height: 1.25;
}

.entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-16);
}

/* Apariencia (color/borde/hover/activo) de .entry-tag: unificada con
   .ax-hermanas__tag, .nav-search-tag y .blog-filtro-tag en layout.css
   (tema), que se carga siempre — ver el comentario ahí. Acá solo queda el
   layout de la fila (.entry-tags, arriba). */

.entry-resumen {
    margin-bottom: var(--space-32);
    padding: var(--space-24);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    color: var(--color-body);
}

.entry-resumen strong {
    color: var(--color-ink);
}

.entry-content {
    color: var(--color-body);
    line-height: 1.75;
}

.entry-content p {
    margin: 0 0 1.25em;
}

.entry-content strong {
    font-weight: 700;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin: 1.75em 0 0.75em;
    line-height: 1.3;
}

/* Sin esto heredan el h2/h3/h4 crudo de base.css (36/30/24px, pensado para
   títulos de sección de página completa) y un subtítulo dentro del cuerpo
   del texto queda del mismo tamaño que el <h1> de la ficha. Un escalón más
   abajo que la escala de sección. */
.entry-content h2 {
    font-size: var(--text-title-h4);
    font-weight: 700;
}

/* Separador entre secciones — no en la primera, que ya queda separada del
   <h1> por el margin-bottom de .entry-header. */
.entry-content h2:not(:first-child) {
    padding-top: 1.5em;
    border-top: 1px solid var(--color-border);
}

.entry-content h3 {
    font-size: var(--text-title-h5);
}

.entry-content h4 {
    font-size: var(--text-title-h6);
}

.entry-content ul,
.entry-content ol {
    margin: 0 0 1.25em;
    padding-left: 1.25em;
}

.entry-content li {
    margin-bottom: 0.5em;
}

.entry-content ul.wp-block-list li {
    list-style: disc;
}

.entry-content a:not(.btn) {
    color: var(--color-brand-red);
    text-decoration: underline;
}

/* Los botones (.btn-primary, .btn-whatsapp, etc.) traen su propio color
   desde base.css — sin el :not(.btn) de arriba, la regla de link rojo de
   esta hoja les ganaba por especificidad y el texto quedaba invisible
   sobre fondos rojos/verdes (obligaba a un style="color:#fff" a mano en
   cada botón del contenido). El radio también se pareja acá: .btn-whatsapp
   trae --radius-pill de base.css (pensado para el botón flotante), pero
   dentro del contenido del blog conviven con .btn-primary/.btn-secondary
   (--radius-btn) y deben verse como el mismo sistema de botones. */
.entry-content a.btn {
    text-decoration: none;
    border-radius: var(--radius-btn);
}

.entry-content blockquote {
    margin: var(--space-32) 0;
    padding: var(--space-32);
    background: var(--color-deep-blue);
    border-radius: var(--radius-large);
    color: var(--color-white);
    font-style: italic;
    text-align: center;
}

.entry-content blockquote p {
    margin: 0 0 var(--space-8);
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content blockquote strong {
    color: var(--color-white);
}

.entry-content img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-large);
}

.entry-content figure {
    margin: var(--space-32) 0;
}

.entry-content figcaption {
    margin-top: var(--space-8);
    font-size: var(--text-body-sm);
    color: var(--color-muted);
    text-align: center;
}

.entry-content .has-very-light-gray-color {
    border-radius: 10px;
}

/* Tabla de especificaciones dentro de un post — solo un par de fichas de
   Chiller la usan (specs técnicas, comparativas), así que no hay una clase
   .tabla del sistema todavía; se estiliza el <table> crudo tal como ya se
   hace con blockquote/img más arriba. */
.entry-content table {
    width: 100%;
    margin: 0 0 1.75em;
    border-collapse: collapse;
    font-size: var(--text-body-sm);
}

.entry-content th,
.entry-content td {
    padding: var(--space-16);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.entry-content th {
    background: var(--color-fondo);
    color: var(--color-ink);
    font-weight: 700;
}

.entry-content details {
    margin: 0 0 var(--space-16);
    padding: var(--space-16) var(--space-24);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
}

.entry-content summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-ink);
}

.entry-content details[open] summary {
    margin-bottom: var(--space-8);
}

.entry-pdf-cta {
    margin: 0;
}

/* Formulario de contacto al final de una entrada del blog (selector
   "Formulario de contacto", template-parts/blog/formulario-contacto.php).
   Separador propio en vez de depender de .entry-content h2:not(:first-child)
   porque el título es opcional — sin título no habría ningún h2 que lo
   dispare. */
.entry-formulario-contacto {
    margin-top: 2.5em;
    padding-top: 2em;
    border-top: 1px solid var(--color-border);
}

.entry-formulario-contacto .section-head {
    margin: 0 auto 1.5rem;
}

.wp-embed-responsive .wp-has-aspect-ratio iframe {
    border-radius: 20px;
}