/* ==========================================================================
   GLOBAL CSS - INDUPOLI | Polímeros Industriales
   Child Theme: Hello Elementor Child

   ÍNDICE:
   1.  Variables CSS (:root) — Paleta, tipografía, espaciado, gradientes
   2.  Reset y base
   3.  Tipografía global
   4.  Contenedores / Layout
   5.  Botones
   6.  Cards
   7.  Secciones
   8.  Formularios
   9.  Utilidades
   10. WhatsApp flotante
   11. Accesibilidad
   12. Elementor overrides
   13. Responsive (mobile-first)

   Fuente de verdad de colores: design/brand/PALETA_OFICIAL.md
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES CSS (:root)
   Paleta oficial INDUPOLI — extraída de PALETA_OFICIAL.md
   ========================================================================== */

:root {
    /* --- Colores principales — Verde Limón INDUPOLI --- */
    --ip-verde-limon: #DAF640;
    --ip-verde-limon-rgb: 218, 246, 64;
    --ip-verde-limon-digital: #D4FF00;
    --ip-verde-limon-digital-rgb: 212, 255, 0;

    /* --- Colores oscuros — Teales INDUPOLI --- */
    --ip-verde-profundo: #00232A;
    --ip-verde-profundo-rgb: 0, 35, 42;
    --ip-teal: #0D4D4D;
    --ip-teal-rgb: 13, 77, 77;
    --ip-verde-medio: #1A6666;
    --ip-verde-medio-rgb: 26, 102, 102;
    --ip-verde-noche: #0A3333;
    --ip-verde-noche-rgb: 10, 51, 51;

    /* --- Aliases semánticos --- */
    --ip-primary: var(--ip-verde-limon);
    --ip-primary-rgb: var(--ip-verde-limon-rgb);
    --ip-primary-dark: var(--ip-verde-profundo);
    --ip-primary-light: var(--ip-verde-limon-digital);
    --ip-secondary: var(--ip-teal);
    --ip-secondary-light: var(--ip-verde-medio);
    --ip-accent: var(--ip-verde-limon);
    --ip-accent-rgb: var(--ip-verde-limon-rgb);
    --ip-accent-dark: var(--ip-teal);

    /* --- Neutros --- */
    --ip-white: #FFFFFF;
    --ip-gris-claro: #E8E8E8;
    --ip-gris-texto: #666666;
    --ip-gris-meta: #999999;

    /* --- Fondos --- */
    --ip-bg-white: #FFFFFF;
    --ip-bg-light: #E8E8E8;
    --ip-bg-dark: var(--ip-verde-profundo);
    --ip-bg-card: #FFFFFF;

    /* --- Textos --- */
    --ip-text-dark: #00232A;
    --ip-text-gray: #666666;
    --ip-text-light: #999999;
    --ip-text-white: #FFFFFF;
    --ip-text-muted: #999999;

    /* --- Funcionales --- */
    --ip-success: var(--ip-verde-medio);
    --ip-warning: var(--ip-verde-limon);
    --ip-error: #E85454;
    --ip-error-rgb: 232, 84, 84;
    --ip-info: var(--ip-teal);

    /* --- Bordes --- */
    --ip-border: rgba(255, 255, 255, 0.15);
    --ip-border-solid: #E8E8E8;
    --ip-border-dark: #00232A;
    --ip-border-subtle: rgba(255, 255, 255, 0.15);

    /* --- Footer dark theme --- */
    --ip-bg-footer: var(--ip-verde-profundo);
    --ip-bg-footer-dark: var(--ip-verde-noche);
    --ip-bg-mid: var(--ip-teal);
    --ip-bg-deep: var(--ip-verde-profundo);
    --ip-surface: var(--ip-verde-noche);

    /* --- Utilidades --- */
    --ip-input-bg: rgba(255, 255, 255, 0.08);
    --ip-glow-primary: rgba(218, 246, 64, 0.35);
    --ip-primary-hover-bg: rgba(218, 246, 64, 0.08);
    --ip-focus-ring: 0 0 0 3px rgba(218, 246, 64, 0.2);

    /* --- Gradientes --- */
    --ip-gradient-primary: linear-gradient(135deg, #DAF640 0%, #D4FF00 100%);
    --ip-gradient-dark: linear-gradient(180deg, #00232A 0%, #0D4D4D 100%);
    --ip-gradient-hero: linear-gradient(180deg, rgba(0,35,42,0.5) 0%, rgba(0,35,42,0.7) 50%, rgba(0,35,42,0.9) 100%);
    --ip-gradient-teal: linear-gradient(135deg, #0D4D4D 0%, #1A6666 100%);
    --ip-gradient-cta: linear-gradient(135deg, #DAF640 0%, #D4FF00 100%);
    --ip-gradient-light: linear-gradient(180deg, #FFFFFF 0%, #E8E8E8 50%, #FFFFFF 100%);

    /* --- Transiciones --- */
    --ip-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --ip-transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --ip-transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    --ip-transition-base: 300ms ease;

    /* --- Tipografía --- */
    --ip-font-display: 'Montserrat', system-ui, sans-serif;
    --ip-font-heading: 'Montserrat', system-ui, sans-serif;
    --ip-font-body: 'Open Sans', system-ui, -apple-system, sans-serif;
    --ip-font-primary: var(--ip-font-heading);
    --ip-font-secondary: var(--ip-font-body);

    /* Tamaños de fuente */
    --ip-text-hero: 3.75rem;
    --ip-text-hero-mobile: 2.5rem;
    --ip-text-section: 2.25rem;
    --ip-text-section-mobile: 1.5rem;
    --ip-text-subsection: 1.75rem;
    --ip-text-card-title: 1.125rem;
    --ip-text-body-large: 1.125rem;
    --ip-text-body: 1rem;
    --ip-text-small: 0.875rem;
    --ip-text-tiny: 0.75rem;

    /* Pesos de fuente */
    --ip-weight-regular: 400;
    --ip-weight-medium: 500;
    --ip-weight-semibold: 600;
    --ip-weight-bold: 700;
    --ip-weight-extrabold: 800;

    /* Alturas de línea */
    --ip-leading-heading: 1.2;
    --ip-leading-body: 1.6;
    --ip-leading-tight: 1.1;
    --ip-leading-relaxed: 1.8;

    /* Letter spacing */
    --ip-tracking-tight: -0.025em;
    --ip-tracking-normal: 0;
    --ip-tracking-wide: 0.025em;
    --ip-tracking-wider: 0.05em;
    --ip-tracking-widest: 0.1em;

    /* --- Espaciado --- */
    --ip-space-section-y: 80px;
    --ip-space-section-x: 30px;
    --ip-space-section-sm-y: 50px;
    --ip-space-card: 24px;
    --ip-space-gap: 20px;
    --ip-space-btn-y: 14px;
    --ip-space-btn-x: 28px;

    /* --- Bordes redondeados --- */
    --ip-radius-sm: 8px;
    --ip-radius-md: 12px;
    --ip-radius-lg: 16px;
    --ip-radius-xl: 24px;
    --ip-radius-2xl: 32px;
    --ip-radius-full: 50%;
    --ip-radius-pill: 9999px;

    /* --- Sombras --- */
    --ip-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --ip-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
    --ip-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --ip-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.12);
    --ip-shadow-dramatic: 0 20px 60px rgba(0, 0, 0, 0.18);
    --ip-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* --- Anchos de contenido --- */
    --ip-width-narrow: 800px;
    --ip-width-default: 1000px;
    --ip-width-wide: 1140px;
    --ip-width-full: 1200px;
    --ip-width-max: 1400px;
}


/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}

/* Prevenir overflow horizontal global */
body,
html {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Contener widgets que generan overflow (carruseles, sliders) */
.elementor-section,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget-container {
    max-width: 100%;
}

/* Carrusel de logos: contener track */
[class*="logo-carousel__viewport"],
[class*="logo-carousel"] {
    overflow: hidden !important;
}

/* Testimonios Swiper: contener slides */
.swiper {
    overflow: hidden !important;
}

/* Menú móvil: no afectar scroll width */
[class*="mobile-menu__panel"] {
    overflow: hidden;
}

body,
body.elementor-default,
body.elementor-page {
    font-family: var(--ip-font-body);
    font-size: var(--ip-text-body);
    font-weight: var(--ip-weight-regular);
    line-height: var(--ip-leading-body);
    color: var(--ip-text-dark);
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================================
   3. TIPOGRAFÍA GLOBAL
   Fuente de verdad: design/brand/TIPOGRAFIA.md
   Montserrat (títulos) + Open Sans (cuerpo)
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ip-font-heading);
    color: var(--ip-text-dark);
    line-height: var(--ip-leading-heading);
    letter-spacing: var(--ip-tracking-tight);
    margin-bottom: 0.5em;
}

h1 {
    font-size: 48px;
    font-weight: var(--ip-weight-extrabold);
    line-height: 56px;
}

h2 {
    font-size: 38px;
    font-weight: var(--ip-weight-bold);
    line-height: 46px;
}

h3 {
    font-size: 24px;
    font-weight: var(--ip-weight-semibold);
    line-height: 32px;
}

h4 {
    font-size: 20px;
    font-weight: var(--ip-weight-semibold);
    line-height: 28px;
}

h5 {
    font-size: 18px;
    font-weight: var(--ip-weight-semibold);
    line-height: 26px;
}

h6 {
    font-size: 16px;
    font-weight: var(--ip-weight-bold);
    line-height: 24px;
    text-transform: uppercase;
    letter-spacing: var(--ip-tracking-wide);
}

p {
    font-family: var(--ip-font-body);
    font-size: 16px;
    font-weight: var(--ip-weight-regular);
    line-height: 26px;
    color: var(--ip-gris-texto);
    margin-bottom: 1em;
    max-width: 680px;
}

/* Subtítulos de sección */
.ip-subtitle {
    font-family: var(--ip-font-body);
    font-size: 20px;
    font-weight: var(--ip-weight-regular);
    line-height: 32px;
    color: var(--ip-gris-texto);
}

/* Etiquetas (sobre secciones, categorías) */
.ip-label {
    font-family: var(--ip-font-body);
    font-size: 14px;
    font-weight: var(--ip-weight-bold);
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--ip-verde-limon);
}

/* Texto pequeño (captions, metadatos) */
.ip-small {
    font-family: var(--ip-font-body);
    font-size: 14px;
    font-weight: var(--ip-weight-regular);
    line-height: 22px;
    color: var(--ip-gris-meta);
}

/* Texto sobre fondos oscuros */
.ip-on-dark h1,
.ip-on-dark h2,
.ip-on-dark h3,
.ip-on-dark h4,
.ip-on-dark h5,
.ip-on-dark h6 {
    color: var(--ip-white);
}

.ip-on-dark p,
.ip-on-dark .ip-subtitle {
    color: var(--ip-gris-claro);
}

.ip-on-dark .ip-small {
    color: var(--ip-gris-claro);
}


/* ==========================================================================
   4. CONTENEDORES / LAYOUT
   ========================================================================== */

.ip-container {
    width: 100%;
    max-width: var(--ip-width-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ip-space-section-x);
    padding-right: var(--ip-space-section-x);
}

.ip-container--narrow {
    max-width: var(--ip-width-narrow);
}

.ip-container--wide {
    max-width: var(--ip-width-full);
}

.ip-container--max {
    max-width: var(--ip-width-max);
}

/* Grid genérico */
.ip-grid {
    display: grid;
    gap: var(--ip-space-gap);
}

.ip-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.ip-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.ip-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Flexbox helpers */
.ip-flex {
    display: flex;
    gap: var(--ip-space-gap);
}

.ip-flex--center {
    align-items: center;
    justify-content: center;
}

.ip-flex--between {
    align-items: center;
    justify-content: space-between;
}

.ip-flex--col {
    flex-direction: column;
}


/* ==========================================================================
   5. BOTONES
   Regla: texto sobre verde limón siempre en Verde Profundo (#00232A)
   ========================================================================== */

.ip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ip-font-body);
    font-size: 16px;
    font-weight: var(--ip-weight-bold);
    line-height: 20px;
    padding: var(--ip-space-btn-y) var(--ip-space-btn-x);
    border: 2px solid transparent;
    border-radius: var(--ip-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--ip-transition-fast);
    white-space: nowrap;
}

/* Primario: fondo verde limón, texto verde profundo */
.ip-btn--primary {
    background: var(--ip-verde-limon);
    color: var(--ip-verde-profundo);
    border-color: var(--ip-verde-limon);
}

.ip-btn--primary:hover {
    background: var(--ip-verde-limon-digital);
    border-color: var(--ip-verde-limon-digital);
    box-shadow: 0 4px 15px var(--ip-glow-primary);
    transform: translateY(-1px);
}

.ip-btn--primary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Secundario: fondo teal, texto blanco */
.ip-btn--secondary {
    background: var(--ip-teal);
    color: var(--ip-white);
    border-color: var(--ip-teal);
}

.ip-btn--secondary:hover {
    background: var(--ip-verde-medio);
    border-color: var(--ip-verde-medio);
}

/* Outline: borde verde limón, fondo transparente */
.ip-btn--outline {
    background: transparent;
    color: var(--ip-verde-limon);
    border-color: var(--ip-verde-limon);
}

.ip-btn--outline:hover {
    background: var(--ip-primary-hover-bg);
}

/* Outline sobre fondo claro */
.ip-btn--outline-dark {
    background: transparent;
    color: var(--ip-verde-profundo);
    border-color: var(--ip-verde-profundo);
}

.ip-btn--outline-dark:hover {
    background: var(--ip-verde-profundo);
    color: var(--ip-white);
}

/* Ghost: sin borde, solo texto */
.ip-btn--ghost {
    background: transparent;
    color: var(--ip-verde-limon);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.ip-btn--ghost:hover {
    color: var(--ip-verde-limon-digital);
}

/* Tamaños */
.ip-btn--sm {
    font-size: 14px;
    padding: 10px 20px;
}

.ip-btn--lg {
    font-size: 18px;
    padding: 18px 36px;
}

/* Botón de ancho completo */
.ip-btn--full {
    width: 100%;
}

/* Ícono dentro de botón */
.ip-btn i,
.ip-btn svg {
    font-size: 1em;
    width: 1em;
    height: 1em;
}


/* ==========================================================================
   6. CARDS
   Variantes: servicio, producto, equipo, testimonio, stat
   ========================================================================== */

.ip-card {
    background: var(--ip-bg-card);
    border-radius: var(--ip-radius-md);
    padding: var(--ip-space-card);
    box-shadow: var(--ip-shadow-card);
    transition: all var(--ip-transition-fast);
    overflow: hidden;
}

.ip-card:hover {
    box-shadow: var(--ip-shadow-card-hover);
    transform: translateY(-4px);
}

/* Card de servicio: ícono + título + descripción + enlace */
.ip-card--servicio {
    text-align: center;
    padding: 32px 24px;
}

.ip-card--servicio .ip-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(218, 246, 64, 0.1);
    border-radius: var(--ip-radius-full);
    color: var(--ip-verde-limon);
    font-size: 28px;
}

.ip-card--servicio .ip-card__title {
    font-family: var(--ip-font-heading);
    font-size: 18px;
    font-weight: var(--ip-weight-bold);
    margin-bottom: 12px;
    color: var(--ip-text-dark);
}

.ip-card--servicio .ip-card__text {
    font-size: 14px;
    line-height: 22px;
    color: var(--ip-gris-texto);
    margin-bottom: 16px;
}

.ip-card--servicio .ip-card__link {
    font-size: 14px;
    font-weight: var(--ip-weight-bold);
    color: var(--ip-verde-limon);
    text-decoration: none;
    transition: color var(--ip-transition-fast);
}

.ip-card--servicio .ip-card__link:hover {
    color: var(--ip-verde-limon-digital);
}

/* Card sobre fondo oscuro */
.ip-card--dark {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ip-border);
}

.ip-card--dark:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(218, 246, 64, 0.3);
}

.ip-card--dark .ip-card__title {
    color: var(--ip-white);
}

.ip-card--dark .ip-card__text {
    color: var(--ip-gris-claro);
}

/* Card de producto: imagen + info */
.ip-card--producto .ip-card__img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--ip-radius-sm) var(--ip-radius-sm) 0 0;
    margin: calc(var(--ip-space-card) * -1);
    margin-bottom: 16px;
    width: calc(100% + var(--ip-space-card) * 2);
}

.ip-card--producto .ip-card__category {
    font-size: 12px;
    font-weight: var(--ip-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ip-verde-medio);
    margin-bottom: 8px;
}

/* Card de equipo: foto circular + nombre + cargo */
.ip-card--equipo {
    text-align: center;
    padding: 32px 24px;
}

.ip-card--equipo .ip-card__avatar {
    width: 120px;
    height: 120px;
    border-radius: var(--ip-radius-full);
    object-fit: cover;
    margin: 0 auto 16px;
    border: 3px solid var(--ip-verde-limon);
}

.ip-card--equipo .ip-card__name {
    font-family: var(--ip-font-heading);
    font-size: 18px;
    font-weight: var(--ip-weight-bold);
    color: var(--ip-text-dark);
    margin-bottom: 4px;
}

.ip-card--equipo .ip-card__role {
    font-size: 14px;
    color: var(--ip-verde-medio);
    font-weight: var(--ip-weight-semibold);
}

/* Card de testimonio: cita + autor */
.ip-card--testimonio {
    padding: 32px;
    border-left: 4px solid var(--ip-verde-limon);
}

.ip-card--testimonio .ip-card__quote {
    font-size: 18px;
    font-style: italic;
    line-height: 28px;
    color: var(--ip-text-dark);
    margin-bottom: 16px;
}

.ip-card--testimonio .ip-card__author {
    font-size: 14px;
    font-weight: var(--ip-weight-bold);
    color: var(--ip-text-dark);
}

.ip-card--testimonio .ip-card__company {
    font-size: 13px;
    color: var(--ip-gris-meta);
}

/* Card de estadística / cifra de impacto */
.ip-card--stat {
    text-align: center;
    padding: 24px 16px;
    background: transparent;
    box-shadow: none;
}

.ip-card--stat:hover {
    transform: none;
    box-shadow: none;
}

.ip-card--stat .ip-card__number {
    font-family: var(--ip-font-heading);
    font-size: 48px;
    font-weight: var(--ip-weight-extrabold);
    color: var(--ip-verde-limon);
    line-height: 1;
    margin-bottom: 8px;
}

.ip-card--stat .ip-card__stat-label {
    font-size: 14px;
    font-weight: var(--ip-weight-semibold);
    color: var(--ip-white);
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ==========================================================================
   7. SECCIONES
   Fondos alternados según regla 60/30/10
   ========================================================================== */

.ip-section {
    padding: var(--ip-space-section-y) 0;
}

/* Fondo oscuro: Verde Profundo (60%) */
.ip-section--dark {
    background-color: var(--ip-verde-profundo);
    color: var(--ip-white);
}

/* Fondo teal (30%) */
.ip-section--teal {
    background-color: var(--ip-teal);
    color: var(--ip-white);
}

/* Fondo verde medio */
.ip-section--verde-medio {
    background-color: var(--ip-verde-medio);
    color: var(--ip-white);
}

/* Fondo claro: blanco (60%) */
.ip-section--light {
    background-color: var(--ip-white);
    color: var(--ip-text-dark);
}

/* Fondo gris muy suave (alternancia) */
.ip-section--gray {
    background-color: #F5F5F5;
    color: var(--ip-text-dark);
}

/* Degradado hero: Verde Profundo → Teal → Verde Medio */
.ip-section--gradient {
    background: linear-gradient(135deg, #00232A 0%, #0D4D4D 50%, #1A6666 100%);
    color: var(--ip-white);
}

/* Hero con imagen de fondo y overlay */
.ip-section--hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ip-section--hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ip-gradient-hero);
    z-index: 1;
}

.ip-section--hero > * {
    position: relative;
    z-index: 2;
}

/* Encabezado de sección estándar */
.ip-section__header {
    text-align: center;
    margin-bottom: 48px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.ip-section__header .ip-label {
    margin-bottom: 12px;
    display: block;
}

.ip-section__header h2 {
    margin-bottom: 16px;
}

.ip-section__header p {
    margin-left: auto;
    margin-right: auto;
}

/* Separador decorativo (línea verde limón) */
.ip-divider {
    width: 60px;
    height: 3px;
    background: var(--ip-verde-limon);
    margin: 0 auto 24px;
    border: none;
}

.ip-divider--left {
    margin-left: 0;
}


/* ==========================================================================
   8. FORMULARIOS
   Estilo para formularios de cotización y contacto
   ========================================================================== */

.ip-form-group {
    margin-bottom: 20px;
}

.ip-form-label {
    display: block;
    font-family: var(--ip-font-body);
    font-size: 14px;
    font-weight: var(--ip-weight-semibold);
    color: var(--ip-text-dark);
    margin-bottom: 6px;
}

.ip-form-input,
.ip-form-textarea,
.ip-form-select {
    width: 100%;
    font-family: var(--ip-font-body);
    font-size: 16px;
    padding: 12px 16px;
    border: 1px solid var(--ip-border-solid);
    border-radius: var(--ip-radius-sm);
    background: var(--ip-white);
    color: var(--ip-text-dark);
    transition: border-color var(--ip-transition-fast), box-shadow var(--ip-transition-fast);
}

.ip-form-input:focus,
.ip-form-textarea:focus,
.ip-form-select:focus {
    outline: none;
    border-color: var(--ip-verde-limon);
    box-shadow: var(--ip-focus-ring);
}

.ip-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.ip-form-input::placeholder,
.ip-form-textarea::placeholder {
    color: var(--ip-gris-meta);
}

/* Inputs sobre fondo oscuro */
.ip-on-dark .ip-form-input,
.ip-on-dark .ip-form-textarea,
.ip-on-dark .ip-form-select {
    background: var(--ip-input-bg);
    border-color: var(--ip-border);
    color: var(--ip-white);
}

.ip-on-dark .ip-form-label {
    color: var(--ip-gris-claro);
}

/* Estado de error */
.ip-form-input--error {
    border-color: var(--ip-error);
}

.ip-form-error {
    font-size: 13px;
    color: var(--ip-error);
    margin-top: 4px;
}

/* File upload */
.ip-form-file {
    padding: 24px;
    border: 2px dashed var(--ip-border-solid);
    border-radius: var(--ip-radius-sm);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--ip-transition-fast);
}

.ip-form-file:hover {
    border-color: var(--ip-verde-limon);
}

/* Fila de campos en línea */
.ip-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}


/* ==========================================================================
   9. UTILIDADES
   ========================================================================== */

/* Alineación de texto */
.ip-text-center { text-align: center; }
.ip-text-left   { text-align: left; }
.ip-text-right  { text-align: right; }

/* Visibilidad */
.ip-hidden  { display: none !important; }
.ip-visible { display: block !important; }

/* Solo para lectores de pantalla */
.ip-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Márgenes verticales */
.ip-mt-0  { margin-top: 0; }
.ip-mt-sm { margin-top: 16px; }
.ip-mt-md { margin-top: 32px; }
.ip-mt-lg { margin-top: 48px; }
.ip-mt-xl { margin-top: 64px; }

.ip-mb-0  { margin-bottom: 0; }
.ip-mb-sm { margin-bottom: 16px; }
.ip-mb-md { margin-bottom: 32px; }
.ip-mb-lg { margin-bottom: 48px; }
.ip-mb-xl { margin-bottom: 64px; }

/* Texto en color acento */
.ip-text-accent {
    color: var(--ip-verde-limon);
}

/* Fondo con overlay oscuro (para imágenes) */
.ip-overlay {
    position: relative;
}

.ip-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 35, 42, 0.6);
    pointer-events: none;
}

/* Max width para párrafos centrados */
.ip-prose {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   10. WHATSAPP FLOTANTE
   Botón fijo en la esquina inferior derecha
   ========================================================================== */

.ip-whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: var(--ip-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    transition: transform var(--ip-transition-fast), box-shadow var(--ip-transition-fast);
    text-decoration: none;
}

.ip-whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.ip-whatsapp-float svg,
.ip-whatsapp-float i {
    color: #FFFFFF;
    font-size: 28px;
    width: 28px;
    height: 28px;
}

/* Tooltip al hacer hover */
.ip-whatsapp-float::before {
    content: attr(data-tooltip);
    position: absolute;
    right: 72px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--ip-verde-profundo);
    color: var(--ip-white);
    font-family: var(--ip-font-body);
    font-size: 14px;
    font-weight: var(--ip-weight-semibold);
    padding: 8px 16px;
    border-radius: var(--ip-radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ip-transition-fast);
}

.ip-whatsapp-float:hover::before {
    opacity: 1;
}


/* ==========================================================================
   11. ACCESIBILIDAD
   WCAG AA mínimo: contraste 4.5:1 (normal), 3:1 (grande)
   ========================================================================== */

/* Skip link para navegación por teclado */
.ip-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10000;
    padding: 12px 24px;
    background: var(--ip-verde-limon);
    color: var(--ip-verde-profundo);
    font-weight: var(--ip-weight-bold);
    border-radius: 0 0 var(--ip-radius-sm) var(--ip-radius-sm);
    text-decoration: none;
    transition: top var(--ip-transition-fast);
}

.ip-skip-link:focus {
    top: 0;
}

/* Focus visible mejorado */
*:focus-visible {
    outline: 3px solid var(--ip-verde-limon);
    outline-offset: 2px;
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Preferencia de alto contraste */
@media (prefers-contrast: high) {
    :root {
        --ip-border-solid: #000000;
        --ip-gris-texto: #333333;
    }
}


/* ==========================================================================
   12. EFECTOS VISUALES PREMIUM
   Glassmorphism, parallax, gradientes, hover effects, animaciones
   ========================================================================== */

/* --- Glassmorphism: efecto vidrio sobre fondos oscuros --- */
.ip-glassmorphism {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ip-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.ip-glassmorphism--strong {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.ip-glassmorphism--subtle {
    background: rgba(13, 77, 77, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(218, 246, 64, 0.08);
}

/* --- Parallax CSS: fondo con efecto de profundidad --- */
.ip-parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@supports (-webkit-touch-callout: none) {
    /* iOS no soporta background-attachment: fixed; fallback */
    .ip-parallax {
        background-attachment: scroll;
    }
}

/* --- Texto con gradiente: verde limon a verde limon digital --- */
.ip-gradient-text {
    background: linear-gradient(135deg,
        var(--ip-verde-limon) 0%,
        var(--ip-verde-limon-digital) 50%,
        var(--ip-verde-limon) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ip-gradient-text--animated {
    animation: ip-gradient-shift 3s ease infinite;
}

@keyframes ip-gradient-shift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 200% center; }
}

/* --- Texto con gradiente oscuro: verde profundo a teal --- */
.ip-gradient-text--dark {
    background: linear-gradient(135deg,
        var(--ip-verde-profundo) 0%,
        var(--ip-teal) 50%,
        var(--ip-verde-medio) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Hover: elevacion con sombra --- */
.ip-hover-lift {
    transition: transform var(--ip-transition-fast),
                box-shadow var(--ip-transition-fast);
}

.ip-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--ip-shadow-elevated);
}

/* --- Hover: glow verde limon --- */
.ip-hover-glow {
    transition: box-shadow var(--ip-transition-fast),
                border-color var(--ip-transition-fast);
}

.ip-hover-glow:hover {
    box-shadow: 0 0 20px rgba(var(--ip-verde-limon-rgb), 0.3),
                0 0 40px rgba(var(--ip-verde-limon-rgb), 0.15);
    border-color: rgba(var(--ip-verde-limon-rgb), 0.5);
}

/* --- Hover: escala suave --- */
.ip-hover-scale {
    transition: transform var(--ip-transition-fast);
}

.ip-hover-scale:hover {
    transform: scale(1.03);
}

/* --- Hover: tilt 3D sutil --- */
.ip-hover-tilt {
    transition: transform var(--ip-transition-fast);
    transform-style: preserve-3d;
    perspective: 800px;
}

.ip-hover-tilt:hover {
    transform: perspective(800px) rotateX(2deg) rotateY(-2deg) scale(1.02);
}

/* --- Hover: reveal de borde inferior --- */
.ip-hover-border-reveal {
    position: relative;
}

.ip-hover-border-reveal::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--ip-verde-limon);
    border-radius: 2px;
    transition: width var(--ip-transition-smooth),
                left var(--ip-transition-smooth);
}

.ip-hover-border-reveal:hover::after {
    width: 100%;
    left: 0;
}

/* --- Linea decorativa animada --- */
.ip-line-decoration {
    position: relative;
    overflow: hidden;
}

.ip-line-decoration::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--ip-verde-limon) 50%,
        transparent 100%);
    animation: ip-line-slide 3s ease-in-out infinite;
}

@keyframes ip-line-slide {
    0%   { left: -100%; }
    100% { left: 100%; }
}

/* Variante: linea inferior */
.ip-line-decoration--bottom::before {
    top: auto;
    bottom: 0;
}

/* Variante: linea lateral izquierda */
.ip-line-decoration--left::before {
    top: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--ip-verde-limon) 50%,
        transparent 100%);
    animation: ip-line-slide-vertical 3s ease-in-out infinite;
}

@keyframes ip-line-slide-vertical {
    0%   { top: -100%; }
    100% { top: 100%; }
}

/* --- Animacion de entrada: fade in --- */
.ip-fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ip-fade-in.ip-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variantes de direccion */
.ip-fade-in--left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ip-fade-in--left.ip-visible {
    opacity: 1;
    transform: translateX(0);
}

.ip-fade-in--right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ip-fade-in--right.ip-visible {
    opacity: 1;
    transform: translateX(0);
}

.ip-fade-in--scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ip-fade-in--scale.ip-visible {
    opacity: 1;
    transform: scale(1);
}

/* Delays para animaciones escalonadas */
.ip-delay-1 { transition-delay: 0.1s; }
.ip-delay-2 { transition-delay: 0.2s; }
.ip-delay-3 { transition-delay: 0.3s; }
.ip-delay-4 { transition-delay: 0.4s; }
.ip-delay-5 { transition-delay: 0.5s; }

/* --- Fondo con gradiente animado --- */
.ip-gradient-bg {
    background: linear-gradient(135deg,
        var(--ip-verde-profundo) 0%,
        var(--ip-teal) 25%,
        var(--ip-verde-medio) 50%,
        var(--ip-teal) 75%,
        var(--ip-verde-profundo) 100%);
    background-size: 400% 400%;
    animation: ip-gradient-flow 8s ease infinite;
}

@keyframes ip-gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    25%      { background-position: 50% 0%; }
    50%      { background-position: 100% 50%; }
    75%      { background-position: 50% 100%; }
}

/* --- Pulso verde limon (para CTAs destacados) --- */
.ip-pulse {
    animation: ip-pulse-glow 2s ease-in-out infinite;
}

@keyframes ip-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--ip-verde-limon-rgb), 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(var(--ip-verde-limon-rgb), 0);
    }
}

/* --- Separador con efecto gradiente animado --- */
.ip-divider--animated {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg,
        var(--ip-verde-limon) 0%,
        var(--ip-verde-limon-digital) 50%,
        var(--ip-verde-limon) 100%);
    background-size: 200% auto;
    border: none;
    border-radius: 2px;
    animation: ip-gradient-shift 2s ease infinite;
}

/* --- Fondo con patron sutil (textura industrial) --- */
.ip-pattern-dots {
    position: relative;
}

.ip-pattern-dots::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        rgba(var(--ip-verde-limon-rgb), 0.07) 1px,
        transparent 1px
    );
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

.ip-pattern-dots > * {
    position: relative;
    z-index: 1;
}

/* --- Borde con gradiente --- */
.ip-border-gradient {
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.ip-border-gradient::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg,
        var(--ip-verde-limon) 0%,
        var(--ip-teal) 50%,
        var(--ip-verde-limon) 100%);
    z-index: -1;
}

/* --- Card glass premium (glassmorphism + efectos) --- */
.ip-card--glass {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ip-radius-lg);
    padding: var(--ip-space-card);
    transition: all var(--ip-transition-smooth);
    position: relative;
    overflow: hidden;
}

.ip-card--glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.04),
        transparent);
    transform: skewX(-15deg);
    transition: left 0.6s ease;
}

.ip-card--glass:hover::before {
    left: 125%;
}

.ip-card--glass:hover {
    border-color: rgba(var(--ip-verde-limon-rgb), 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                0 0 20px rgba(var(--ip-verde-limon-rgb), 0.08);
    transform: translateY(-4px);
}

/* --- Seccion con separador diagonal --- */
.ip-section--diagonal {
    position: relative;
    clip-path: polygon(0 0, 100% 4%, 100% 96%, 0 100%);
    padding-top: calc(var(--ip-space-section-y) + 40px);
    padding-bottom: calc(var(--ip-space-section-y) + 40px);
}

/* --- Seccion con onda superior --- */
.ip-section--wave::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    background: inherit;
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 1;
}


/* ==========================================================================
   13. ELEMENTOR OVERRIDES
   Sobrescrituras para que Elementor respete el design system
   ========================================================================== */

/* Elementor usa .elementor-section para secciones */
.elementor-section.elementor-section-full_width > .elementor-container {
    max-width: 100%;
}

/* Forzar tipografía en widgets de Elementor */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--ip-font-heading);
}

.elementor-widget-text-editor {
    font-family: var(--ip-font-body);
}

/* Botones de Elementor heredan el estilo */
.elementor-button {
    font-family: var(--ip-font-body) !important;
    font-weight: var(--ip-weight-bold) !important;
    border-radius: var(--ip-radius-sm) !important;
    transition: all var(--ip-transition-fast) !important;
}

/* Evitar que Elementor ponga max-width innecesario */
.elementor-container {
    max-width: var(--ip-width-wide);
}


/* ==========================================================================
   13. RESPONSIVE
   Breakpoints: 1024px (tablet), 767px (mobile), 374px (small)
   Enfoque: desktop-first
   ========================================================================== */

/* --- Tablet (1024px) --- */
@media (max-width: 1024px) {
    :root {
        --ip-space-section-y: 60px;
        --ip-space-section-x: 24px;
    }

    h1 { font-size: 40px; line-height: 48px; }
    h2 { font-size: 32px; line-height: 40px; }

    .ip-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ip-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Mobile (767px) --- */
@media (max-width: 767px) {
    :root {
        --ip-space-section-y: 48px;
        --ip-space-section-x: 16px;
        --ip-space-card: 20px;
    }

    h1 { font-size: 32px; line-height: 40px; }
    h2 { font-size: 28px; line-height: 36px; }
    h3 { font-size: 20px; line-height: 28px; }

    .ip-subtitle { font-size: 18px; }
    .ip-label { font-size: 12px; }

    .ip-grid--2,
    .ip-grid--3,
    .ip-grid--4 {
        grid-template-columns: 1fr;
    }

    .ip-form-row {
        grid-template-columns: 1fr;
    }

    .ip-flex {
        flex-direction: column;
    }

    .ip-section--hero {
        min-height: 70vh;
    }

    .ip-card--stat .ip-card__number {
        font-size: 36px;
    }

    /* Botones full width en mobile */
    .ip-btn {
        width: 100%;
        justify-content: center;
    }

    /* WhatsApp más pequeño */
    .ip-whatsapp-float {
        width: 52px;
        height: 52px;
        bottom: 16px;
        right: 16px;
    }

    .ip-whatsapp-float::before {
        display: none;
    }
}

/* --- Small mobile (374px) --- */
@media (max-width: 374px) {
    h1 { font-size: 28px; line-height: 36px; }
    h2 { font-size: 24px; line-height: 32px; }

    .ip-btn--lg {
        font-size: 16px;
        padding: 14px 24px;
    }
}


/* ==========================================================================
   14. HERO MOBILE OVERRIDES
   Botones verde limón en mobile, scroll indicator oculto
   ========================================================================== */

@media (max-width: 767px) {
    /* Botón primario verde limón en mobile */
    [class*="ip-hero"] [class*="btn--primary"],
    .ip-hero__btn--primary {
        background: #DAF640 !important;
        color: #00232A !important;
        border-color: #DAF640 !important;
    }

    /* Botón secundario outline blanco */
    [class*="ip-hero"] [class*="btn--secondary"],
    .ip-hero__btn--secondary {
        background: transparent !important;
        color: #FFFFFF !important;
        border: 2px solid #FFFFFF !important;
    }

    /* Ocultar scroll indicator en mobile */
    [class*="ip-hero__scroll"] {
        display: none !important;
    }

    /* Hero botones full width en mobile */
    [class*="ip-hero"] [class*="buttons"] {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    [class*="ip-hero"] [class*="btn--primary"],
    [class*="ip-hero"] [class*="btn--secondary"] {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 16px 24px !important;
    }
}


/* ==========================================================================
   15. PREMIUM: TRANSFORMACION VISUAL
   Texturas, separadores, glassmorphism, glow, parallax, gradientes
   ========================================================================== */

/* -------------------------------------------------------------------
   15.1. TEXTURA INDUSTRIAL — Patron de puntos para secciones claras
   Evita el blanco plano sin textura ni degradado.
   ------------------------------------------------------------------- */

/* Secciones claras de Elementor: agregar textura de puntos industriales */
.elementor-section[data-settings] {
    position: relative;
}

/* Aplicar textura a wrappers de servicios (fondo claro) */
.ip-sc-wrapper {
    position: relative;
}

.ip-sc-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(0, 35, 42, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

.ip-sc-wrapper > * {
    position: relative;
    z-index: 1;
}

/* Textura hexagonal industrial para secciones con la clase */
.ip-texture-hex::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(30deg, rgba(0, 35, 42, 0.025) 12%, transparent 12.5%, transparent 87%, rgba(0, 35, 42, 0.025) 87.5%),
        linear-gradient(150deg, rgba(0, 35, 42, 0.025) 12%, transparent 12.5%, transparent 87%, rgba(0, 35, 42, 0.025) 87.5%),
        linear-gradient(30deg, rgba(0, 35, 42, 0.025) 12%, transparent 12.5%, transparent 87%, rgba(0, 35, 42, 0.025) 87.5%),
        linear-gradient(150deg, rgba(0, 35, 42, 0.025) 12%, transparent 12.5%, transparent 87%, rgba(0, 35, 42, 0.025) 87.5%),
        linear-gradient(60deg, rgba(0, 35, 42, 0.04) 25%, transparent 25.5%, transparent 75%, rgba(0, 35, 42, 0.04) 75%),
        linear-gradient(60deg, rgba(0, 35, 42, 0.04) 25%, transparent 25.5%, transparent 75%, rgba(0, 35, 42, 0.04) 75%);
    background-size: 40px 70px;
    background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
    pointer-events: none;
    z-index: 0;
}


/* -------------------------------------------------------------------
   15.2. SEPARADORES WAVE / DIAGONAL ENTRE SECCIONES
   Pseudo-elements en secciones Elementor para transiciones suaves.
   ------------------------------------------------------------------- */

/* Wave superior: para secciones oscuras despues de claras */
.ip-sg-wrapper,
.ip-pt-wrapper,
.ip-counter-section {
    position: relative;
}

/* Separador de onda SVG superior — secciones oscuras */
.ip-wave-top {
    position: relative;
}

.ip-wave-top::before {
    content: '';
    position: absolute;
    top: -59px;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,20 Q360,0 720,20 Q1080,40 1440,20 L1440,60 Z' fill='%2300232A'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

/* Wave inferior — secciones oscuras */
.ip-wave-bottom::after {
    content: '';
    position: absolute;
    bottom: -59px;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,40 Q360,60 720,40 Q1080,20 1440,40 L1440,0 Z' fill='%2300232A'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

/* Wave con teal */
.ip-wave-top--teal::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,20 Q360,0 720,20 Q1080,40 1440,20 L1440,60 Z' fill='%230D4D4D'/%3E%3C/svg%3E");
}

.ip-wave-bottom--teal::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,40 Q360,60 720,40 Q1080,20 1440,40 L1440,0 Z' fill='%230D4D4D'/%3E%3C/svg%3E");
}

/* Separador diagonal */
.ip-diagonal-top {
    position: relative;
}

.ip-diagonal-top::before {
    content: '';
    position: absolute;
    top: -39px;
    left: 0;
    width: 100%;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpolygon points='0,40 1440,0 1440,40' fill='%2300232A'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}


/* -------------------------------------------------------------------
   15.3. CARDS DE SERVICIOS — Fondo oscuro con acentos verde limon
   Cards #00232A con texto blanco y hover teal.
   ------------------------------------------------------------------- */

/* Borde izquierdo verde limon al hover */
.ip-sc-card:hover {
    border-left-color: var(--ip-verde-limon);
    box-shadow: var(--ip-shadow-elevated);
}

/* Icono con glow al hover */
.ip-sc-card:hover .ip-sc-icon {
    filter: drop-shadow(0 0 8px rgba(var(--ip-verde-limon-rgb), 0.5));
}


/* -------------------------------------------------------------------
   15.4. GLASSMORPHISM EN CARDS SOBRE FONDOS OSCUROS
   Sectores, contadores, y cualquier card sobre fondo oscuro/teal.
   ------------------------------------------------------------------- */

/* Sector cards — fondo oscuro solido con sutil glassmorphism */
.ip-sg-card {
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    transition: all var(--ip-transition-smooth),
                border-color var(--ip-transition-fast),
                box-shadow var(--ip-transition-fast);
}

.ip-sg-card:hover {
    background: #0D4D4D !important;
    border-color: #DAF640 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
                0 0 20px rgba(218, 246, 64, 0.15) !important;
}

/* Reflejo de luz al hover (shimmer) */
.ip-sg-card {
    position: relative;
    overflow: hidden;
}

.ip-sg-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.04),
        transparent
    );
    transform: skewX(-15deg);
    transition: left 0.6s ease;
    z-index: 0;
    pointer-events: none;
}

.ip-sg-card:hover::before {
    left: 125%;
}

.ip-sg-card > * {
    position: relative;
    z-index: 1;
}

/* Counter items — glassmorphism */
.ip-counter-item {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ip-radius-lg);
    padding: var(--ip-space-card);
    transition: all var(--ip-transition-smooth);
}

.ip-counter-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(var(--ip-verde-limon-rgb), 0.25);
    box-shadow: 0 0 24px rgba(var(--ip-verde-limon-rgb), 0.08);
}


/* -------------------------------------------------------------------
   15.5. GLOW EFFECTS — Verde limon que BRILLA
   Botones, iconos, links, CTAs.
   ------------------------------------------------------------------- */

/* Glow en botones primarios */
.ip-btn--primary:hover,
.ip-hero__btn--primary:hover,
.ip-cta-form__basico-submit:hover {
    box-shadow: 0 0 20px rgba(var(--ip-verde-limon-rgb), 0.45),
                0 0 40px rgba(var(--ip-verde-limon-rgb), 0.2),
                0 4px 15px rgba(var(--ip-verde-limon-rgb), 0.3) !important;
}

/* Glow en iconos de servicio al hover del card */
.ip-sc-card:hover .ip-sc-icon i,
.ip-sc-card:hover .ip-sc-icon svg {
    text-shadow: 0 0 12px rgba(var(--ip-verde-limon-rgb), 0.6);
    filter: drop-shadow(0 0 6px rgba(var(--ip-verde-limon-rgb), 0.5));
}

/* Glow en el numero del proceso al hover */
.ip-pt-step:hover .ip-pt-number {
    text-shadow: 0 0 16px rgba(var(--ip-verde-limon-rgb), 0.5);
}

/* Glow en counter numbers */
.ip-counter-number {
    text-shadow: 0 0 20px rgba(var(--ip-verde-limon-rgb), 0.3);
}

.ip-counter-item:hover .ip-counter-number {
    text-shadow: 0 0 30px rgba(var(--ip-verde-limon-rgb), 0.5),
                 0 0 60px rgba(var(--ip-verde-limon-rgb), 0.2);
}

/* Glow en links de la paleta de servicios */
.ip-sc-link:hover {
    text-shadow: 0 0 8px rgba(var(--ip-verde-limon-rgb), 0.4);
}


/* -------------------------------------------------------------------
   15.6. PARALLAX SUTIL EN FONDOS DE SECCION
   background-attachment: fixed para profundidad visual.
   ------------------------------------------------------------------- */

/* Secciones oscuras: fondo degradado con parallax */
.ip-sg-wrapper,
.ip-counter-section {
    background-attachment: fixed;
}

/* Fallback iOS (no soporta background-attachment: fixed) */
@supports (-webkit-touch-callout: none) {
    .ip-sg-wrapper,
    .ip-counter-section {
        background-attachment: scroll;
    }
}


/* -------------------------------------------------------------------
   15.7. TRANSICIONES ENTRE SECCIONES
   Degradados en bordes para flujo visual, no cortes abruptos.
   ------------------------------------------------------------------- */

/* Degradado superior: de transparente al color de la seccion */
.ip-sc-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(
        180deg,
        rgba(232, 232, 232, 0.3) 0%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* CTA — degradado superior sutil */
.ip-cta-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(
        180deg,
        rgba(0, 35, 42, 0.8) 0%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}


/* -------------------------------------------------------------------
   15.8. SECCIONES DE SERVICIOS — Fondo con textura
   Degradado diagonal sutil en lugar de blanco plano.
   ------------------------------------------------------------------- */

/* Fondo degradado sutil para wrapper de servicios */
.ip-sc-wrapper {
    background: linear-gradient(
        160deg,
        #FFFFFF 0%,
        #F7F8FA 30%,
        #F0F2F5 60%,
        #F7F8FA 100%
    );
}


/* -------------------------------------------------------------------
   15.9. PROCESO TIMELINE — Mejoras visuales
   Steps con glassmorphism, linea conectora con glow.
   ------------------------------------------------------------------- */

/* Steps del proceso con glassmorphism sutil */
.ip-pt-step {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ip-radius-lg);
    transition: all var(--ip-transition-smooth) !important;
}

.ip-pt-step:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(var(--ip-verde-limon-rgb), 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                0 0 16px rgba(var(--ip-verde-limon-rgb), 0.08);
}

/* Linea conectora con glow verde limon */
.ip-pt-connector {
    box-shadow: 0 0 8px rgba(var(--ip-verde-limon-rgb), 0.3);
}

/* Dots del connector con glow */
.ip-pt-connector-dot {
    box-shadow: 0 0 10px rgba(var(--ip-verde-limon-rgb), 0.5);
}

.ip-pt-connector-dot.ip-pt-dot-visible {
    box-shadow: 0 0 10px rgba(var(--ip-verde-limon-rgb), 0.5),
                0 0 20px rgba(var(--ip-verde-limon-rgb), 0.25);
}


/* -------------------------------------------------------------------
   15.10. CTA FORM — Mejoras premium
   Glassmorphism en la card del formulario, glow en submit.
   ------------------------------------------------------------------- */

/* Card del formulario con glassmorphism */
.ip-cta-form__card {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Beneficios: icono con glow */
.ip-cta-form__beneficio-icono {
    filter: drop-shadow(0 0 4px rgba(var(--ip-verde-limon-rgb), 0.4));
}

/* WhatsApp link glow */
.ip-cta-form__whatsapp:hover {
    text-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
}


/* -------------------------------------------------------------------
   15.11. FONDOS ALTERNATIVOS — Evitar monotonia
   Degradados sutiles para romper la secuencia oscuro-blanco-oscuro.
   ------------------------------------------------------------------- */

/* Seccion gris suave con degradado diagonal */
.ip-section--gray {
    background: linear-gradient(
        160deg,
        #F5F5F5 0%,
        #EDEFF2 40%,
        #F5F5F5 100%
    ) !important;
}

/* Para Elementor: fondo claro con textura en secciones internas */
.elementor-section.ip-bg-textured {
    position: relative;
    background: linear-gradient(
        160deg,
        #FFFFFF 0%,
        #F7F8FA 50%,
        #FFFFFF 100%
    );
}

.elementor-section.ip-bg-textured::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(13, 77, 77, 0.03) 1px,
        transparent 1px
    );
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
}


/* -------------------------------------------------------------------
   15.12. DECORACIONES GEOMETRICAS
   Elementos decorativos CSS-only que agregan personalidad.
   ------------------------------------------------------------------- */

/* Esquinas decorativas para secciones premium */
.ip-corner-decoration {
    position: relative;
}

.ip-corner-decoration::before,
.ip-corner-decoration::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid rgba(var(--ip-verde-limon-rgb), 0.15);
    pointer-events: none;
    z-index: 1;
}

.ip-corner-decoration::before {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
}

.ip-corner-decoration::after {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
}


/* -------------------------------------------------------------------
   15.13. ANIMACION DE LINEA LATERAL EN CARDS DE SERVICIO
   Linea verde limon que se dibuja de arriba a abajo al hacer hover.
   ------------------------------------------------------------------- */

.ip-sc-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(
        180deg,
        var(--ip-verde-limon) 0%,
        var(--ip-verde-limon-digital) 100%
    );
    transition: height var(--ip-transition-smooth);
    z-index: 2;
}

.ip-sc-card:hover::after {
    height: 100%;
}


/* -------------------------------------------------------------------
   15.14. HERO — Degradado animado de fondo
   Sutil movimiento en el overlay del hero.
   ------------------------------------------------------------------- */

.ip-hero__overlay {
    background: linear-gradient(
        135deg,
        rgba(0, 35, 42, 0.85) 0%,
        rgba(13, 77, 77, 0.7) 50%,
        rgba(0, 35, 42, 0.9) 100%
    ) !important;
    background-size: 200% 200% !important;
    animation: ip-hero-gradient 12s ease infinite;
}

@keyframes ip-hero-gradient {
    0%, 100% { background-position: 0% 50%; }
    33%      { background-position: 50% 0%; }
    66%      { background-position: 100% 50%; }
}


/* -------------------------------------------------------------------
   15.15. CONTADOR — Numeros con gradiente texto
   Los numeros grandes usan gradiente verde limon.
   ------------------------------------------------------------------- */

.ip-counter-number {
    background: linear-gradient(
        135deg,
        var(--ip-verde-limon) 0%,
        var(--ip-verde-limon-digital) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* -------------------------------------------------------------------
   15.16. RESPONSIVE — Ajustes para efectos premium
   ------------------------------------------------------------------- */

@media (max-width: 1024px) {
    /* Waves mas pequenas en tablet */
    .ip-wave-top::before,
    .ip-wave-bottom::after {
        height: 40px;
        top: -39px;
    }

    .ip-wave-bottom::after {
        bottom: -39px;
    }

    /* Esquinas decorativas mas pequenas */
    .ip-corner-decoration::before,
    .ip-corner-decoration::after {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 767px) {
    /* Desactivar parallax en mobile (mal soporte) */
    .ip-sg-wrapper,
    .ip-counter-section {
        background-attachment: scroll !important;
    }

    /* Waves mas sutiles */
    .ip-wave-top::before,
    .ip-wave-bottom::after {
        height: 30px;
        top: -29px;
    }

    .ip-wave-bottom::after {
        bottom: -29px;
    }

    /* Esquinas ocultas en mobile */
    .ip-corner-decoration::before,
    .ip-corner-decoration::after {
        display: none;
    }

    /* Glassmorphism simplificado en mobile */
    .ip-sg-card,
    .ip-counter-item,
    .ip-pt-step {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* Reducir glow en mobile (rendimiento) */
    .ip-counter-number {
        text-shadow: none;
    }
}


/* -------------------------------------------------------------------
   15.17. ACCESIBILIDAD — prefers-reduced-motion
   Desactiva animaciones de los efectos premium.
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ip-hero__overlay {
        animation: none !important;
    }

    .ip-sg-card::before {
        transition: none !important;
    }

    .ip-sc-card::after {
        transition: none !important;
    }

    .ip-pt-connector {
        box-shadow: none;
    }

    .ip-pt-connector-dot,
    .ip-pt-connector-dot.ip-pt-dot-visible {
        box-shadow: none;
    }
}


/* ==========================================================================
   16. BLOG SINGLE POST STYLES
   Estilos para la página individual de artículos del blog.
   Aplica la identidad INDUPOLI a los posts con tipografía, colores y
   espaciado coherentes con el resto del sitio.
   ========================================================================== */

/* --- 16.0. Hello Elementor structure mapping --- */
/* Hello Elementor usa .page-content en vez de .entry-content */

/* Header del post — título grande con acento */
/* padding-top compensa el header fijo (topbar ~32px + main ~64px = ~96px + espacio) */
.single-post .page-header {
    max-width: 800px;
    margin: 0 auto;
    padding: 120px 20px 0;
}

/* Fondo oscuro full-width detrás del título — usa body::before para evitar clipping */
.single-post body::before,
body.single-post::before {
    content: '';
    display: block;
    width: 100%;
    height: 350px;
    background: linear-gradient(180deg, var(--ip-verde-profundo) 0%, var(--ip-teal) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

body.single-post {
    position: relative;
}

/* Título del post en blanco sobre fondo oscuro */
.single-post .entry-title {
    color: #FFFFFF;
}

/* Contenido del artículo en card blanca */
.single-post .page-content {
    background: #FFFFFF;
    border-radius: var(--ip-radius-lg) var(--ip-radius-lg) 0 0;
    margin-top: 20px;
    padding-top: 48px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

.single-post .entry-title {
    font-family: var(--ip-font-heading);
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ip-verde-profundo);
    margin-bottom: 16px;
}

/* Meta info del post */
.single-post .page-header + .page-content::before,
.single-post .entry-meta {
    display: block;
    font-size: 14px;
    color: var(--ip-gris-meta);
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--ip-verde-limon);
}

/* Contenido principal del post — .page-content de Hello Elementor */
.single-post .page-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px 80px;
    font-family: var(--ip-font-body);
    font-size: 18px;
    line-height: 1.8;
    color: var(--ip-gris-texto);
}

.single-post .page-content h2 {
    font-family: var(--ip-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--ip-verde-profundo);
    margin: 48px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(218, 246, 64, 0.3);
}

.single-post .page-content h3 {
    font-family: var(--ip-font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--ip-teal);
    margin: 32px 0 12px;
}

.single-post .page-content h4 {
    font-family: var(--ip-font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--ip-verde-profundo);
    margin: 24px 0 8px;
}

.single-post .page-content p {
    margin-bottom: 20px;
    color: var(--ip-gris-texto);
}

.single-post .page-content ul,
.single-post .page-content ol {
    margin: 20px 0 20px 24px;
    color: var(--ip-gris-texto);
}

.single-post .page-content li {
    margin-bottom: 8px;
}

.single-post .page-content ul li::marker {
    color: var(--ip-verde-limon);
}

.single-post .page-content ol li::marker {
    color: var(--ip-teal);
    font-weight: 700;
}

.single-post .page-content a {
    color: var(--ip-teal);
    text-decoration: underline;
    text-decoration-color: var(--ip-verde-limon);
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.single-post .page-content a:hover {
    color: var(--ip-verde-profundo);
}

.single-post .page-content img {
    border-radius: var(--ip-radius-md);
    margin: 24px 0;
}

.single-post .page-content blockquote {
    border-left: 4px solid var(--ip-verde-limon);
    margin: 32px 0;
    padding: 20px 24px;
    background: rgba(218, 246, 64, 0.05);
    border-radius: 0 var(--ip-radius-sm) var(--ip-radius-sm) 0;
    font-style: italic;
    color: var(--ip-teal);
}

.single-post .page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
}

.single-post .page-content th {
    background: var(--ip-verde-profundo);
    color: #FFFFFF;
    padding: 12px 16px;
    text-align: left;
    font-family: var(--ip-font-heading);
    font-weight: 600;
}

.single-post .page-content td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ip-gris-claro);
}

.single-post .page-content strong {
    color: var(--ip-verde-profundo);
    font-weight: 600;
}

@media (max-width: 767px) {
    .single-post .page-header {
        padding: 32px 16px 0;
    }
    .single-post .page-content {
        font-size: 16px;
        padding: 24px 16px 60px;
    }
    .single-post .page-content h2 {
        font-size: 24px;
    }
}

/* --- 16.1. Contenedor del artículo --- */

.single-post .page-content,
.single-post .entry-content,
.single-post .post-content,
.single-post article {
    max-width: var(--ip-width-narrow);
    margin: 0 auto;
    padding: 40px 20px 80px;
    font-family: var(--ip-font-body);
    font-size: var(--ip-text-body-large);
    line-height: var(--ip-leading-relaxed);
    color: var(--ip-text-dark);
}

/* --- 16.2. Título del post --- */

.single-post .entry-title,
.single-post .page-header h1,
.single-post article > h1 {
    font-family: var(--ip-font-heading);
    font-size: clamp(28px, 5vw, 42px);
    font-weight: var(--ip-weight-extrabold);
    line-height: var(--ip-leading-heading);
    color: var(--ip-verde-profundo);
    margin-bottom: 16px;
    letter-spacing: var(--ip-tracking-tight);
}

/* --- 16.3. Meta info (fecha, autor, categoría) --- */

.single-post .entry-meta,
.single-post .post-meta {
    font-size: var(--ip-text-small);
    color: var(--ip-gris-meta);
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--ip-verde-limon);
    font-family: var(--ip-font-body);
}

.single-post .entry-meta a {
    color: var(--ip-teal);
    text-decoration: none;
    transition: color var(--ip-transition-fast);
}

.single-post .entry-meta a:hover {
    color: var(--ip-verde-profundo);
}

/* --- 16.4. Headings dentro del artículo --- */

.single-post .page-content h2,
.single-post .entry-content h2 {
    font-family: var(--ip-font-heading);
    font-size: var(--ip-text-subsection);
    font-weight: var(--ip-weight-bold);
    color: var(--ip-verde-profundo);
    margin: 48px 0 16px;
    line-height: var(--ip-leading-heading);
}

.single-post .page-content h3,
.single-post .entry-content h3 {
    font-family: var(--ip-font-heading);
    font-size: 1.375rem;
    font-weight: var(--ip-weight-semibold);
    color: var(--ip-teal);
    margin: 32px 0 12px;
    line-height: var(--ip-leading-heading);
}

.single-post .entry-content h4 {
    font-family: var(--ip-font-heading);
    font-size: var(--ip-text-body-large);
    font-weight: var(--ip-weight-semibold);
    color: var(--ip-verde-medio);
    margin: 24px 0 10px;
}

/* --- 16.5. Párrafos --- */

.single-post .entry-content p {
    margin-bottom: 20px;
    color: var(--ip-gris-texto);
}

/* --- 16.6. Listas --- */

.single-post .entry-content ul,
.single-post .entry-content ol {
    margin: 20px 0 20px 24px;
    color: var(--ip-gris-texto);
}

.single-post .entry-content li {
    margin-bottom: 8px;
    line-height: var(--ip-leading-body);
}

.single-post .entry-content ul li::marker {
    color: var(--ip-verde-limon);
}

.single-post .entry-content ol li::marker {
    color: var(--ip-teal);
    font-weight: var(--ip-weight-semibold);
}

/* --- 16.7. Links dentro del artículo --- */

.single-post .entry-content a {
    color: var(--ip-teal);
    text-decoration: underline;
    text-decoration-color: var(--ip-verde-limon);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    transition: color var(--ip-transition-fast);
}

.single-post .entry-content a:hover {
    color: var(--ip-verde-profundo);
}

/* --- 16.8. Imágenes --- */

.single-post .entry-content img {
    border-radius: var(--ip-radius-md);
    margin: 24px 0;
    max-width: 100%;
    height: auto;
}

.single-post .entry-content .wp-caption {
    max-width: 100%;
}

.single-post .entry-content figcaption,
.single-post .entry-content .wp-caption-text {
    font-size: var(--ip-text-small);
    color: var(--ip-gris-meta);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

/* --- 16.9. Blockquotes --- */

.single-post .entry-content blockquote {
    border-left: 4px solid var(--ip-verde-limon);
    margin: 32px 0;
    padding: 20px 24px;
    background: rgba(218, 246, 64, 0.05);
    border-radius: 0 var(--ip-radius-sm) var(--ip-radius-sm) 0;
    font-style: italic;
    color: var(--ip-teal);
}

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

/* --- 16.10. Tablas --- */

.single-post .entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    border-radius: var(--ip-radius-sm);
    overflow: hidden;
}

.single-post .entry-content th {
    background: var(--ip-verde-profundo);
    color: var(--ip-text-white);
    padding: 12px 16px;
    text-align: left;
    font-family: var(--ip-font-heading);
    font-weight: var(--ip-weight-semibold);
    font-size: var(--ip-text-small);
    text-transform: uppercase;
    letter-spacing: var(--ip-tracking-wide);
}

.single-post .entry-content td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ip-gris-claro);
    font-size: var(--ip-text-body);
}

.single-post .entry-content tr:last-child td {
    border-bottom: none;
}

.single-post .entry-content tr:hover td {
    background: rgba(218, 246, 64, 0.04);
}

/* --- 16.11. Código inline y bloques de código --- */

.single-post .entry-content code {
    background: rgba(13, 77, 77, 0.08);
    color: var(--ip-teal);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.single-post .entry-content pre {
    background: var(--ip-verde-profundo);
    color: var(--ip-verde-limon);
    padding: 24px;
    border-radius: var(--ip-radius-md);
    overflow-x: auto;
    margin: 24px 0;
    font-size: var(--ip-text-small);
    line-height: 1.6;
}

.single-post .entry-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* --- 16.12. Separadores --- */

.single-post .entry-content hr {
    border: none;
    height: 2px;
    background: var(--ip-gradient-primary);
    margin: 48px 0;
    border-radius: 1px;
}

/* --- 16.13. Navegación entre posts --- */

.single-post .post-navigation,
.single-post nav.navigation.post-navigation {
    max-width: var(--ip-width-narrow);
    margin: 0 auto;
    padding: 32px 20px;
    border-top: 1px solid var(--ip-gris-claro);
}

.single-post .post-navigation a {
    color: var(--ip-teal);
    text-decoration: none;
    font-family: var(--ip-font-heading);
    font-weight: var(--ip-weight-semibold);
    font-size: var(--ip-text-small);
    transition: color var(--ip-transition-fast);
}

.single-post .post-navigation a:hover {
    color: var(--ip-verde-profundo);
}

/* --- 16.14. Thumbnail / Imagen destacada --- */

.single-post .post-thumbnail,
.single-post .entry-header img {
    border-radius: var(--ip-radius-lg);
    margin-bottom: 32px;
    max-width: 100%;
    height: auto;
}

/* --- 16.15. Responsive — Blog single --- */

@media (max-width: 767px) {
    .single-post .entry-content,
    .single-post .post-content,
    .single-post article {
        font-size: var(--ip-text-body);
        padding: 24px 16px 60px;
    }

    .single-post .page-content h2,
.single-post .entry-content h2 {
        font-size: 1.5rem;
        margin: 36px 0 12px;
    }

    .single-post .page-content h3,
.single-post .entry-content h3 {
        font-size: 1.25rem;
    }

    .single-post .entry-content blockquote {
        margin: 24px 0;
        padding: 16px 20px;
    }

    .single-post .entry-content table {
        font-size: var(--ip-text-small);
    }

    .single-post .entry-content th,
    .single-post .entry-content td {
        padding: 8px 12px;
    }
}

/* ==========================================================================
   17. ANIMACIONES AVANZADAS Y EFECTOS MODERNOS
   ========================================================================== */

/* --- 17.1. Scroll-triggered fade-in para todas las secciones Elementor --- */
.elementor-top-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.elementor-top-section.ip-section-visible {
    opacity: 1;
    transform: translateY(0);
}

/* La primera sección (hero) siempre visible */
.elementor-top-section:first-child {
    opacity: 1;
    transform: none;
}

/* --- 17.2. Título con revelación progresiva --- */
@keyframes ip-title-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

.ip-title-animated {
    animation: ip-title-reveal 1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* --- 17.3. Underline animado en headings de sección --- */
.elementor-heading-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--ip-verde-limon);
    margin-top: 16px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.ip-section-visible .elementor-heading-title::after {
    transform: scaleX(1);
}

/* --- 17.4. Cards con entrada escalonada --- */
@keyframes ip-card-enter {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- 17.5. Botones con efecto ripple al click --- */
.ip-btn--primary,
[class*="btn--primary"] {
    position: relative;
    overflow: hidden;
}

.ip-btn--primary::after,
[class*="btn--primary"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.ip-btn--primary:active::after,
[class*="btn--primary"]:active::after {
    width: 300px;
    height: 300px;
}

/* --- 17.6. Smooth scroll para toda la página --- */
html {
    scroll-behavior: smooth;
}

/* --- 17.7. Hover zoom suave en imágenes de cards --- */
[class*="card"] img,
.ip-bg-image,
.ip-pg-image {
    transition: transform 0.5s cubic-bezier(0.25, 0, 0.25, 1);
}

[class*="card"]:hover img,
[class*="card"]:hover .ip-bg-image {
    transform: scale(1.05);
}

/* --- 17.8. Focus glow para accesibilidad --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--ip-verde-limon);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(218, 246, 64, 0.2);
}

/* --- 17.9. Prefers reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .elementor-top-section {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .elementor-heading-title::after {
        transform: scaleX(1) !important;
        transition: none !important;
    }
    .ip-btn--primary::after,
    [class*="btn--primary"]::after {
        display: none;
    }
    [class*="card"] img {
        transition: none !important;
    }
}


/* === FIX: Permitir que el carrusel de logos se anime === */
.elementor-widget-ip-logo-carousel .elementor-widget-container,
.elementor-widget-ip-logo-carousel .ip-logo-carousel__viewport,
.elementor-widget-ip-logo-carousel .ip-logo-carousel__track {
    max-width: none !important;
    overflow: visible !important;
}
.elementor-widget-ip-logo-carousel .ip-logo-carousel__viewport {
    overflow: hidden !important;
}



/* === OVERRIDE: Carrusel SIEMPRE animado (incluso con reduced-motion) === */
@media (prefers-reduced-motion: reduce) {
    .elementor-widget-ip-logo-carousel .ip-logo-carousel__track {
        animation: ip-scroll-left 45s linear infinite !important;
    }
}