/*
Theme Name: Ingenima
Author: Ingenima
Description: Block theme para Ingenima
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: ing
*/

/*--------------------------------------------------------------
# Fuente: Lufga
--------------------------------------------------------------*/

@font-face {
    font-family: 'Lufga';
    src: url('assets/fonts/Fontspring-DEMO-lufga-light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lufga';
    src: url('assets/fonts/Fontspring-DEMO-lufga-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lufga';
    src: url('assets/fonts/Fontspring-DEMO-lufga-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lufga';
    src: url('assets/fonts/Fontspring-DEMO-lufga-semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lufga';
    src: url('assets/fonts/Fontspring-DEMO-lufga-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lufga';
    src: url('assets/fonts/Fontspring-DEMO-lufga-extrabold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --bordo:     #54132B;
    --rosa:      #FD8FC9;
    --rosaclaro: #FADEF2;
    --blanco:    #FFFFFF;
    --negro:     #1B1B1B;
    --beige:     #F2E9DF;
    --azul:      #5757E9;
    --naranja:   #FD4028;
    --amarillo:  #FDC402;
    --verde:     #04D0AE;
    --gris:      #878787;
    --grisclaro: #F6F6F6;

    --transition-base: all 0.3s ease;

    --ffamily:      'Lufga', sans-serif;
    --ffamily-body: 'Montserrat', sans-serif;
    --fsize: 1rem;
    --fsize--1: clamp(0.75rem,   0.71rem + 0.18vw,  0.875rem);  /* ~12–14px */
    --fsize-0:  clamp(0.875rem,  0.84rem + 0.18vw,  1rem);       /* ~14–16px — p (Text) */
    --fsize-1:  clamp(1rem,      0.96rem + 0.18vw,  1.125rem);   /* ~16–18px — h4 (Boton) */
    --fsize-2:  clamp(1.0625rem, 1.01rem + 0.27vw,  1.25rem);    /* ~17–20px (Destacados) */
    --fsize-3:  clamp(1.25rem,   1.18rem + 0.36vw,  1.5rem);     /* ~20–24px (Titulos Blog) */
    --fsize-4:  clamp(1.8125rem, 1.69rem + 0.63vw,  2.25rem);    /* ~29–36px — h3 */
    --fsize-5:  clamp(2.375rem,  2.2rem  + 0.89vw,  3rem);       /* ~38–48px — h2 */
    --fsize-6:  clamp(2.75rem,   2.55rem + 0.98vw,  3.4375rem);  /* ~44–55px — h1 */
}

/*--------------------------------------------------------------
# Reset global
--------------------------------------------------------------*/

html { scroll-behavior: smooth; margin: 0; padding: 0; }
body { margin: 0; padding: 0; overflow-x: hidden; font-family: var(--ffamily-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--ffamily) !important; }
* { box-sizing: border-box; }

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

/*
  ### Main Colors
*/

/*******
## BG Colors
*******/

.ing-bg--bordo     { background-color: var(--bordo, #54132B); }
.ing-bg--rosa      { background-color: var(--rosa, #FD8FC9); }
.ing-bg--rosaclaro { background-color: var(--rosaclaro, #FADEF2); }
.ing-bg--blanco    { background-color: var(--blanco, #FFFFFF); }
.ing-bg--negro     { background-color: var(--negro, #1B1B1B); }
.ing-bg--beige     { background-color: var(--beige, #F2E9DF); }
.ing-bg--azul      { background-color: var(--azul, #5757E9); }
.ing-bg--naranja   { background-color: var(--naranja, #FD4028); }
.ing-bg--amarillo  { background-color: var(--amarillo, #FDC402); }
.ing-bg--verde     { background-color: var(--verde, #04D0AE); }
.ing-bg--gris      { background-color: var(--gris, #878787); }
.ing-bg--grisclaro { background-color: var(--grisclaro, #F6F6F6); }

/*******
## Text Colors
*******/

.ing--bordo     { color: var(--bordo, #54132B) !important; }
.ing--rosa      { color: var(--rosa, #FD8FC9) !important; }
.ing--rosaclaro { color: var(--rosaclaro, #FADEF2) !important; }
.ing--blanco    { color: var(--blanco, #FFFFFF) !important; }
.ing--negro     { color: var(--negro, #1B1B1B) !important; }
.ing--beige     { color: var(--beige, #F2E9DF) !important; }
.ing--azul      { color: var(--azul, #5757E9) !important; }
.ing--naranja   { color: var(--naranja, #FD4028) !important; }
.ing--amarillo  { color: var(--amarillo, #FDC402) !important; }
.ing--verde     { color: var(--verde, #04D0AE) !important; }
.ing--gris      { color: var(--gris, #878787) !important; }
.ing--grisclaro { color: var(--grisclaro, #F6F6F6) !important; }

/*
  ### Page Background (color de fondo configurable por página)
  El <body> recibe la clase .ing-pagebg-{color} (ver inc/setup.php).
  El footer hereda el mismo color, así su banda exterior coincide con la página.
*/

body.ing-pagebg-rosaclaro { background-color: var(--rosaclaro, #FADEF2); }
body.ing-pagebg-bordo     { background-color: var(--bordo, #54132B); }
body.ing-pagebg-beige     { background-color: var(--beige, #F2E9DF); }
body.ing-pagebg-rosa      { background-color: var(--rosa, #FD8FC9); }
body.ing-pagebg-blanco    { background-color: var(--blanco, #FFFFFF); }
body.ing-pagebg-grisclaro { background-color: var(--grisclaro, #F6F6F6); }

/*--------------------------------------------------------------
# Font Sizes
--------------------------------------------------------------*/

.fsize--1 { font-size: var(--fsize--1) !important; }

.fsize-0, p  { font-size: var(--fsize-0) !important; font-weight: 400; }
.fsize-1, h4 { font-size: var(--fsize-1) !important; font-weight: 500 !important; }
.fsize-2     { font-size: var(--fsize-2) !important; }
.fsize-3     { font-size: var(--fsize-3) !important; }
.fsize-4, h3 { font-size: var(--fsize-4) !important; font-weight: 300 !important; }
.fsize-5, h2 { font-size: var(--fsize-5) !important; font-weight: 300 !important; }
.fsize-6, h1 { font-size: var(--fsize-6) !important; font-weight: 700 !important; }

/*
## Font family utilities
   .ing-lufga      → tipografía de títulos (Lufga)
   .ing-montserrat → tipografía de texto (Montserrat)
*/

.ing-lufga      { font-family: var(--ffamily, 'Lufga', sans-serif) !important; }
.ing-montserrat { font-family: var(--ffamily-body, 'Montserrat', sans-serif) !important; }

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

.ing-btn,
.gform_button,
.ing-btn-secondary {
    font-size:        var(--fsize-1, 18px) !important;
    font-family:      var(--ffamily, sans-serif) !important;
    color:            var(--negro, #1B1B1B) !important;
    background-color: var(--rosa, #FD8FC9) !important;
    min-height:       55px !important;
    font-weight:      500 !important;
    text-decoration:  none !important;
    outline:          none !important;
    border:           2px solid var(--rosa, #FD8FC9) !important;
    border-radius:    50px !important;
    cursor:           pointer !important;
    display:          inline-block !important;
    letter-spacing:   0.02em !important;
    margin-bottom:    0 !important;
    padding:          0 28px !important;
    text-align:       center !important;
    align-content:    center !important;
    overflow-wrap:    break-word !important;
    word-break:       break-word !important;
    -webkit-transition: var(--transition-base) !important;
    transition:       var(--transition-base) !important;
}

.ing-btn:hover,
.gform_button:hover {
    background-color: var(--rosaclaro, #FADEF2) !important;
    color: var(--rosa, #FD8FC9) !important;
}

.ing-btn-secondary:hover {
    background-color: var(--rosaclaro, #FADEF2) !important;
}

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/

.ing-animate {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.ing-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes ing-hero-fadein {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ing-hero-el {
    opacity: 0;
    animation: ing-hero-fadein 0.9s ease-out forwards;
}
.ing-hero-el--1 { animation-delay: 0.15s; }
.ing-hero-el--2 { animation-delay: 0.45s; }
.ing-hero-el--3 { animation-delay: 0.7s;  }
.ing-hero-el--4 { animation-delay: 0.95s; }

@keyframes ing-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ing-marquee-track {
    display: flex;
    width: max-content;
    animation: ing-marquee 28s linear infinite;
}
.ing-marquee-track:hover { animation-play-state: paused; }
.ing-marquee-item { font-family: var(--ffamily, 'Lufga', sans-serif); }
.ing-marquee-item::after { content: '•'; margin-left: 8px; }

/*--------------------------------------------------------------
# Header nav — WP-generated markup
--------------------------------------------------------------*/

.ing-header__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (min-width: 1024px) {
    .ing-header__nav ul { gap: 32px; }
}

.ing-header__nav ul li a {
    font-family: var(--ffamily-body);
    font-size: var(--fsize-0, 1rem);
    font-weight: 400;
    color: var(--negro, #1B1B1B);
    text-decoration: none;
    transition: color 0.2s;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

/* Reserves bold text width without layout shift on hover */
.ing-header__nav ul li a::after {
    content: attr(data-text);
    font-weight: 600;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    display: block;
}

.ing-header__nav ul li a:hover,
.ing-header__nav ul li.current-menu-item a { font-weight: 600; }

/*--------------------------------------------------------------
# Header — submenú desplegable (Multiverso, desktop)
--------------------------------------------------------------*/

.ing-header__nav .menu-item-has-children { position: relative; }

/* Puente invisible: mantiene el hover al pasar del ítem al panel. */
.ing-header__nav .menu-item-has-children::before {
    content: "";
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 22px;
    background: transparent;
}

.ing-header__nav .sub-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 410px;
    margin: 0;
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background-color: #fff;
    border: 1px solid var(--negro, #1B1B1B);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(84, 19, 43, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.ing-header__nav .menu-item-has-children:hover > .sub-menu,
.ing-header__nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.ing-header__nav .sub-menu li { width: 100%; }

.ing-header__nav .sub-menu li a {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: var(--fsize-1, 1.125rem);
    font-weight: 400;
    transition: background-color 0.2s ease;
}

/* Anula el truco de reserva-bold (::after) dentro del submenú. */
.ing-header__nav .sub-menu li a::after { content: none; display: none; }

.ing-header__nav .sub-menu li a:hover { background-color: var(--grisclaro, #F5F5F5); font-weight: 400; }

.ing-submenu__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}
.ing-submenu__icon svg { width: 100%; height: 100%; display: block; }
.ing-submenu__label { line-height: 1.2; }

/*--------------------------------------------------------------
# Header — hamburger toggle (mobile, < md)
--------------------------------------------------------------*/

/* `display` lo maneja Tailwind (.flex .md:hidden); acá solo el layout interno */
.ing-header__toggle {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: 4px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.ing-header__toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--negro, #1B1B1B);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.ing-header[data-open="true"] .ing-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.ing-header[data-open="true"] .ing-header__toggle-bar:nth-child(2) {
    opacity: 0;
}
.ing-header[data-open="true"] .ing-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/*--------------------------------------------------------------
# Header — mobile dropdown panel (< md)
--------------------------------------------------------------*/

/* Visibilidad controlada por el atributo [hidden] (toggle JS) y .md:hidden.
   No declarar `display` acá: rompería el [hidden]. */
.ing-header__mobile {
    margin-top: 8px;
    padding: 12px 16px 16px;
    background-color: #fff;
    border: 1px solid var(--negro, #1B1B1B);
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(84, 19, 43, 0.12);
    animation: ing-header-drop 0.25s ease;
}

@keyframes ing-header-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ing-header__mobile-nav ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ing-header__mobile-nav ul li { border-bottom: 1px solid rgba(27, 27, 27, 0.08); }
.ing-header__mobile-nav ul li:last-child { border-bottom: none; }

.ing-header__mobile-nav ul li a {
    display: block;
    padding: 13px 6px;
    font-family: var(--ffamily-body);
    font-size: var(--fsize-1, 1.125rem);
    font-weight: 500;
    color: var(--negro, #1B1B1B);
    text-decoration: none;
}

.ing-header__mobile-nav ul li.current-menu-item a { font-weight: 700; }

/* Submenú (Multiverso) en mobile: siempre visible, indentado bajo el padre. */
.ing-header__mobile-nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: 4px 0 8px 8px;
    display: flex;
    flex-direction: column;
}
.ing-header__mobile-nav .sub-menu li { border-bottom: none; }
.ing-header__mobile-nav .sub-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 6px;
    font-size: var(--fsize-0, 1rem);
    font-weight: 400;
}
.ing-header__mobile-nav .sub-menu .ing-submenu__icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}
.ing-header__mobile-nav .sub-menu .ing-submenu__icon svg { width: 100%; height: 100%; display: block; }

/*--------------------------------------------------------------
# Casos Slider — scroll + drag behavior
--------------------------------------------------------------*/

.ing-casos-swiper {
    width: 100%;
    overflow: hidden;
    padding: 0 20px;
    box-sizing: border-box;
}

.ing-caso-slide {
    width: calc(100vw - 60px) !important;
}

@media (min-width: 768px) {
    .ing-caso-slide {
        width: clamp(320px, calc(100vw - 150px), 1300px) !important;
    }
}

.ing-caso-card {
    display: block;
    position: relative;
    width: 100%;
    height: 260px;
    border-radius: 24px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .ing-caso-card {
        height: clamp(360px, 52vw, 750px);
    }
}

.ing-caso-card img { pointer-events: none; -webkit-user-drag: none; }

.ing-caso-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
    pointer-events: none;
}

.ing-caso-card__texto { font-size: var(--fsize-4) !important; }
@media (min-width: 769px) {
    .ing-caso-card__texto { font-size: var(--fsize-6) !important; }
}

/*--------------------------------------------------------------
# Multiverso — JS state classes
--------------------------------------------------------------*/

.ing-multiverso__icono-btn.is-active {
    transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.3);
}

.ing-multiverso__card { display: none; }
.ing-multiverso__card.is-active,
.ing-multiverso__card.is-static { display: flex; align-items: center; }

/* Multiverso — página (tabber modular: nav generado por JS + paneles) */

/* Nav de pestañas — el contenido lo genera main.js leyendo los paneles */
.ing-mv-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: var(--grisclaro, #F6F6F6);
    border-radius: 9999px;
    position: relative;
    z-index: 2;
}
.ing-mv-tabs__hint { padding: 16px 24px; color: var(--gris, #878787); font-size: var(--fsize-0); }

.ing-mv-tab {
    flex: 1 1 auto;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--gris, #878787);
    font-family: var(--ffamily-body, sans-serif);
    font-size: var(--fsize-0) !important;
    font-weight: 400;
    padding: 18px 24px;
    border-radius: 9999px;
    transition: var(--transition-base, all 0.3s ease);
}
.ing-mv-tab.is-active {
    background: var(--rosa, #FD8FC9);
    color: var(--bordo, #54132B);
    font-weight: 600;
}

/* Paneles: se ocultan solo cuando main.js marcó el tabber como listo, así en
   el editor y sin JS todos los paneles quedan visibles (apilados). */
.ing-mv-tabber--ready .ing-mv-panel { display: none; }
.ing-mv-tabber--ready .ing-mv-panel.is-active {
    display: block;
    animation: ing-mv-panel-in 0.45s ease-out;
}

/* Fade de costado al cambiar de pestaña (el panel pasa de display:none a
   visible, lo que reinicia la animación en cada cambio). */
@keyframes ing-mv-panel-in {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ing-mv-tabber--ready .ing-mv-panel.is-active { animation: none; }
}

/* Bloque Proceso — número (imagen) y decoración derecha (imagen) */
.ing-mv-proceso__num {
    flex: none;
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.ing-mv-proceso__deco {
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: contain;
}
@media (min-width: 768px) {
    .ing-mv-proceso__num { width: 72px; height: 72px; }
    .ing-mv-proceso__deco { width: 64px; height: 64px; }
}

/* Bloque Tags — chips */
.ing-mv-tag {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--negro, #1B1B1B);
    border-radius: 9999px;
    font-size: var(--fsize-0) !important;
    color: var(--negro, #1B1B1B);
    background: transparent;
}

/* Bloque Logos — items */
.ing-mv-logos__item {
    height: 38px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

/* Texto enriquecido (wysiwyg) dentro de las secciones Multiverso */
.ing-mv-rich p { margin: 0; }
.ing-mv-rich p:last-child { margin-bottom: 0; }
.ing-mv-rich ul { list-style: disc; padding-left: 1.25em; margin: 0 0; }
.ing-mv-rich ol { list-style: decimal; padding-left: 1.25em; margin: 0.5em 0; }
.ing-mv-rich li { margin-bottom: 0.35em; }

@media (max-width: 768px) {
    .ing-mv-tabs { flex-direction: column; border-radius: 24px; }
    .ing-mv-tab { width: 100%; }
}

/*--------------------------------------------------------------
# CTA — descendant selectors on WP editor content
--------------------------------------------------------------*/

.ing-cta__desc p {
    font-size: var(--fsize-1) !important;
    font-weight: 400 !important;
    color: var(--bordo, #54132B);
}
.ing-cta__desc strong,
.ing-cta__desc b { display: block; }

/*--------------------------------------------------------------
# Footer nav — WP-generated markup
--------------------------------------------------------------*/

.ing-footer__nav-col h4 {
    font-size: var(--fsize-2) !important;
    font-weight: 600 !important;
    color: var(--negro, #1B1B1B) !important;
    margin-bottom: 10px !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

.ing-footer__nav-col ul { list-style: none; margin: 0; padding: 0; }
.ing-footer__nav-col ul li { margin-bottom: 8px; }
.ing-footer__nav-col ul li a {
    font-size: var(--fsize-0) !important;
    font-weight: 600;
    color: var(--negro, #1B1B1B);
    text-decoration: none;
    transition: opacity 0.2s;
}
.ing-footer__nav-col ul li a:hover { opacity: 1; color: var(--bordo, #54132B); }

/* Columna de enlaces top-level (Casos de éxito, Somos, Blog) —
   mismo peso/tamaño que el encabezado "Multiverso", con más aire entre ítems. */
.ing-footer__nav-col--links ul li { margin-bottom: 20px; }
.ing-footer__nav-col--links ul li:last-child { margin-bottom: 0; }
.ing-footer__nav-col--links ul li a {
    font-size: var(--fsize-2) !important;
    font-weight: 600;
    line-height: 1.2;
}

/*--------------------------------------------------------------
# Portafolio sliders — CSS marquee
--------------------------------------------------------------*/

@keyframes ing-marquee-ltr {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes ing-marquee-rtl {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.ing-portafolio-row {
    width: 100%;
    overflow: hidden;
}

.ing-portafolio-track {
    display: flex;
    gap: 16px;
    width: max-content;
    will-change: transform;
    animation: ing-marquee-ltr 18s linear infinite;
}

.ing-portafolio-track--rtl {
    animation: ing-marquee-rtl 18s linear infinite;
}

.ing-portafolio-row:hover .ing-portafolio-track {
    animation-play-state: paused;
}

.ing-portafolio-slide {
    flex: none;
    width: clamp(280px, 40vw, 520px);
}

.ing-portafolio-slide__inner {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: rgba(255,255,255,0.06);
}

/*--------------------------------------------------------------
# Somos — página Nosotros
--------------------------------------------------------------*/

/* Texto enriquecido (wysiwyg) dentro de los bloques Somos */
.ing-somos-rich p { margin: 0 0 1.25em; }
.ing-somos-rich p:last-child { margin-bottom: 0; }
.ing-somos-rich strong,
.ing-somos-rich b { font-weight: 700 !important; }

/* Cards de valores: el ícono asoma sobre el borde superior, centrado */
.ing-somos-card { overflow: visible; }
.ing-somos-card__icono {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 72px;
}

/*--------------------------------------------------------------
# Blog — Página completa (ing-blog-archive)
--------------------------------------------------------------*/

/* Buscador */
.ing-blog-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 500px;
    background-color: var(--blanco, #FFFFFF);
    border: 1px solid var(--negro, #1B1B1B);
    border-radius: 50px;
    padding: 0 40px;
    transition: var(--transition-base);
}
.ing-blog-search:focus-within {
    border-color: var(--bordo, #54132B);
}
.ing-blog-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    height: 48px;
    font-family: var(--ffamily-body, sans-serif);
    font-size: var(--fsize-0, 1rem) !important;
    color: var(--negro, #1B1B1B);
}
.ing-blog-search__input::placeholder { color: var(--gris, #878787); }
.ing-blog-search__btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--negro, #1B1B1B);
    cursor: pointer;
}

/* Pills de categoría */
.ing-blog-pill {
    display: inline-block;
    padding: 22px 45px;
    border-radius: 50px;
    background-color: var(--grisclaro, #F6F6F6);
    color: var(--negro, #1B1B1B) !important;
    font-family: var(--ffamily-body, sans-serif);
    font-size: var(--fsize-0, 1rem) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    line-height: 1;
    transition: var(--transition-base);
}
.ing-blog-pill:hover {
    background-color: var(--rosaclaro, #FADEF2);
}
.ing-blog-pill.is-active {
    background-color: var(--rosa, #FD8FC9);
    font-weight: 700 !important;
}

/* Tarjetas */
/* Grilla: fundido suave mientras carga el filtro por AJAX */
#ingBlogArchiveGrid { transition: opacity 0.25s ease; }
#ingBlogArchiveGrid.is-loading { opacity: 0.4; pointer-events: none; }

.ing-blog-card { transition: var(--transition-base); }
.ing-blog-card:hover { transform: translateY(-4px); }
.ing-blog-card__titulo a { transition: var(--transition-base); }
.ing-blog-card:hover .ing-blog-card__titulo a { color: var(--bordo, #54132B) !important; }

/*--------------------------------------------------------------
# Blog — Entrada individual (single.php)
--------------------------------------------------------------*/

/* Cuerpo del artículo (HTML generado por the_content — no se puede inline) */
.ing-articulo__content > * { margin-bottom: 1.5rem; }
.ing-articulo__content > *:last-child { margin-bottom: 0; }
.ing-articulo__content h2 {
    font-size: var(--fsize-5) !important;
    font-weight: 800 !important;
    color: var(--negro, #1B1B1B) !important;
    line-height: 1.1;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
}
.ing-articulo__content h3 {
    font-weight: 700 !important;
    color: var(--negro, #1B1B1B) !important;
    margin-top: 1.5rem;
}
.ing-articulo__content p,
.ing-articulo__content li {
    color: var(--negro, #1B1B1B) !important;
    line-height: 1.7;
}
.ing-articulo__content ul,
.ing-articulo__content ol { padding-left: 1.4em; margin-left: 0; }
.ing-articulo__content ul { list-style: disc; }
.ing-articulo__content ol { list-style: decimal; }
.ing-articulo__content li { margin-bottom: 0.4rem; }
.ing-articulo__content a { color: var(--bordo, #54132B); text-decoration: underline; }
.ing-articulo__content img { border-radius: 14px; height: auto; }

/*--------------------------------------------------------------
# Contacto — tarjeta del formulario + Gravity Forms
--------------------------------------------------------------*/

.ing-contacto__card {
    border: 1px solid rgba(84, 19, 43, 0.10);
    box-shadow: 0 18px 50px rgba(84, 19, 43, 0.06);
}

.gform_wrapper .gform_body .gform_fields {
    row-gap: 16px !important;
}

/* Leyenda "* indica campos obligatorios" — no va en el diseño */
.ing-form .gform_wrapper .gform_required_legend { display: none !important; }

.ing-form .gform_wrapper .gfield { margin: 0 !important; }

/* Labels visibles (ej. WhatsApp) */
.ing-form .gform_wrapper .gfield_label {
    font-family: var(--ffamily-body, sans-serif);
    font-size: var(--fsize-0, 1rem) !important;
    font-weight: 600 !important;
    margin-bottom: 8px;
    color: var(--negro, #1B1B1B) !important;
}

/* Inputs y textarea */
.ing-form .gform_wrapper input[type="text"],
.ing-form .gform_wrapper input[type="email"],
.ing-form .gform_wrapper input[type="tel"],
.ing-form .gform_wrapper input[type="number"],
.ing-form .gform_wrapper textarea {
    width: 100% !important;
    height: 57px;
    background-color: var(--blanco, #FFFFFF) !important;
    border: 1px solid var(--negro, #1B1B1B) !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-family: var(--ffamily-body, sans-serif) !important;
    font-size: var(--fsize-0, 1rem) !important;
    font-weight: 400 !important;
    color: var(--negro, #1B1B1B) !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: var(--transition-base, all 0.3s ease) !important;
}

.ing-form .gform_wrapper textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

.ing-form .gform_wrapper input::placeholder,
.ing-form .gform_wrapper textarea::placeholder {
    color: var(--negro, #1B1B1B);
}

.ing-form .gform_wrapper input:focus,
.ing-form .gform_wrapper textarea:focus {
    border-color: var(--rosa, #FD8FC9) !important;
    outline: none !important;
}

/* Texto de ayuda bajo el campo */
.ing-form .gform_wrapper .gfield_description {
    font-family: var(--ffamily-body, sans-serif);
    font-size: var(--fsize--1, 0.875rem) !important;
    color: var(--negro, #1B1B1B);
    padding: 6px 2px 0 !important;
    margin: 0 !important;
}

/* Asterisco obligatorio */
.ing-form .gform_wrapper .gfield_required { color: var(--rosa, #FD8FC9); }

/* Botón enviar — alineado a la derecha */
.ing-form .gform_wrapper .gform_footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0 0 !important;
    margin: 10px 0 0 !important;
}
.ing-form .gform_wrapper .gform_footer .gform_button {
    width: auto !important;
    padding: 0 44px !important;
}

/* Estados de error */
.ing-form .gform_wrapper .gfield_error input,
.ing-form .gform_wrapper .gfield_error textarea {
    border-color: var(--naranja, #FD4028) !important;
}
.ing-form .gform_wrapper .validation_message {
    font-size: var(--fsize--1, 0.875rem) !important;
    color: var(--naranja, #FD4028) !important;
    margin-top: 4px;
}
.ing-form .gform_wrapper .gform_validation_errors { border-radius: 14px; }

/*--------------------------------------------------------------
# Gracias — tarjeta
--------------------------------------------------------------*/

.ing-gracias__card {
    border: 1px solid rgba(84, 19, 43, 0.10);
    box-shadow: 0 18px 50px rgba(84, 19, 43, 0.06);
}

/*--------------------------------------------------------------
# WordPress Core Resets (block editor)
--------------------------------------------------------------*/

.wp-site-blocks { padding: 0 !important; }
.wp-block-post-content { margin: 0 !important; }
.is-layout-flow > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width: 768px) {
    .ing-multiverso__card.is-active,
    .ing-multiverso__card.is-static { flex-direction: column; }
    .ing-multiverso__card-img-wrap { flex: none; width: 100%; }
}