/* FUENTES: Importamos Montserrat (Marca) e Inter (Lectura) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Montserrat:wght@500;600;700;800;900&display=swap');

/* VARIABLES DE MARCA - SEO CONTENIDOS */
:root {
    --font-brand: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Paleta extraída de las imágenes */
    --color-primary: #0693e3;
    /* Azul Marca */
    --color-secondary: #7c71a5;
    /* Morado */
    --color-accent: #DC2626;
    /* Rosado/Rojo */
    --color-brand-green: #22c55e;
    /* Verde Marca */

    --bg-light: #F8FAFC;
    /* Fondo muy claro */
    --text-dark: #7e7e7e;
    --text-medium: #b4b4b4;
    /* Gris para títulos (Extraído de la web) */
    --text-body: #334155;
    /* Gris oscuro para lectura */
}

/* RESET Y BASES */
html {
    scroll-behavior: smooth;
}

/* Mayor especificidad para sobrescribir Tailwind sin !important */
html body {
    font-family: var(--font-body);
    color: var(--text-body);
    background-color: #FFFFFF;
    line-height: 1.6;
    font-size: 17px;
    /* Tamaño base aumentado (normal es ~16px) */
}

/* TIPOGRAFÍA DE MARCA */
h1,
h2,
h3,
h4,
h5,
h6,
.font-brand {
    font-family: var(--font-brand);
    color: var(--text-dark);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-medium {
    font-family: var(--font-brand);
    color: var(--text-dark);
}

/* Tamaños de títulos - Mayor especificidad para sobrescribir Tailwind */
html body h1 {
    font-size: 3.5rem;
}

/* ~56px */
html body h2 {
    font-size: 2.8rem;
    line-height: 1.2;
    /* Reducido para títulos multilínea */
}

/* ~45px */
html body h3 {
    font-size: 1.75rem;
}

/* ~28px */
html body h4 {
    font-size: 1.5rem;
}

/* ~24px */
html body h5 {
    font-size: 1.25rem;
}

/* ~20px */
html body h6 {
    font-size: 1.1rem;
}

/* ~18px */

/* CLASES DE UTILIDAD PERSONALIZADAS */

/* Gradiente de Texto (El efecto "IA" de tu logo) */
.text-gradient-brand {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-green {
    background: linear-gradient(135deg, var(--color-brand-green) 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-red {
    background: linear-gradient(135deg, var(--color-accent) 0%, #ef4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Botones Estilo SEO Contenidos */
/* Botones Estilo SEO Contenidos */
.btn-primary {
    position: relative;
    background: transparent;
    border: 2px solid transparent;
    color: white;
    font-family: var(--font-brand);
    font-weight: 900;
    transition: all 0.3s ease;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-clip: padding-box;
    box-shadow: 0 4px 15px rgba(6, 147, 227, 0.35);
    /* Glow azulado por defecto */
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    /* Covers the border area */
    background: linear-gradient(to right, #0693e3, #7c71a5, #DC2626);
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 1;
    border-radius: 9999px;
    /* Gradiente visible por defecto */
}

.btn-primary:hover {
    color: #7e7e7e;
    border-color: #7e7e7e;
    box-shadow: none;
    transform: translateY(-2px);
}

.btn-primary:hover::before {
    opacity: 0;
}

/* Cards limpias con hover suave */
.card-clean {
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    transition: all 0.3s ease;
    /* Prepare for background-clip trick if needed, or just standard */
}

.card-clean:hover {
    border: 1px solid transparent;
    background-image: linear-gradient(white, white), linear-gradient(to right, #0693e3, #7c71a5, #DC2626);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

/* Acordeón (Módulos) */
details summary {
    list-style: none;
    cursor: pointer;
}

details summary::-webkit-details-marker {
    display: none;
}

/* Accordion Animation */
details[open] summary~* {
    animation: details-show 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes details-show {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Blue Accordion Theme */
.details-blue {
    transition: all 0.3s ease;
}

.text-gradient-blue {
    background: linear-gradient(135deg, var(--color-primary) 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-yellow {
    background: linear-gradient(135deg, #fcb900 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-brand-yellow {
    color: #fcb900;
}

/* Accordion Animation Wrapper */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-content.open {
    grid-template-rows: 1fr;
}

.accordion-inner {
    overflow: hidden;
}

.details-blue[open] {
    border-color: var(--color-primary);
    box-shadow: 0 10px 40px -10px rgba(6, 147, 227, 0.15);
}

.details-blue summary {
    transition: background-color 0.2s, border-color 0.2s;
    border-bottom: 1px solid transparent;
}

.details-blue summary:hover {
    background-color: #F8FAFC;
}

.details-blue[open] summary {
    background-color: #F0F9FF;
    /* Light Blue 50 */
    color: var(--color-primary);
    border-bottom: 1px solid #F1F5F9;
}


/* Helper class for icon boxes inside summary if needed to change color */
/* Helper class for icon boxes inside summary if needed to change color */
.details-blue[open] summary .icon-box {
    background-color: var(--color-primary);
    color: white;
}

/* Red Accordion Theme */
.details-red {
    transition: all 0.3s ease;
}

.details-red summary {
    transition: background-color 0.2s, border-color 0.2s;
    border-bottom: 1px solid transparent;
}

.details-red summary:hover {
    background-color: #FEF2F2;
    /* Red 50 */
}

.details-red[open] {
    border-color: var(--color-accent);
    /* Brand Red */
    box-shadow: 0 10px 40px -10px rgba(244, 91, 81, 0.15);
}

.details-red[open] summary {
    background-color: #FEF2F2;
    color: var(--color-accent);
    border-bottom: 1px solid #FEE2E2;
    /* Red 100 */
}

.details-red[open] summary .icon-box {
    background-color: var(--color-accent);
    color: white;
}

/* Green Utilities */
.text-gradient-green {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Card Hover Green */
.card-hover-green {
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.card-hover-green:hover {
    border-color: #22c55e;
    box-shadow: 0 10px 40px -10px rgba(34, 197, 94, 0.15);
    transform: translateY(-5px);
}

/* Card Hover Red/Blue (Generic Pattern) */
.card-hover-red {
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.card-hover-red:hover {
    border-color: #DC2626;
    box-shadow: 0 10px 40px -10px rgba(244, 91, 81, 0.15);
}

.text-brand-blue {
    color: var(--color-primary);
}

.text-brand-red {
    color: var(--color-accent);
}

/* Chips de Características con Hover */
.feature-chip {
    transition: all 0.3s ease;
    position: relative;
}

.feature-chip:hover {
    border-color: var(--color-primary);
}

.feature-chip:hover i {
    color: var(--color-primary) !important;
}

/* Botón Flotante de WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
    animation: bounce 2s infinite;
}

.whatsapp-float a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
}

.whatsapp-float a:hover {
    background: #128C7E;
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

.whatsapp-float i {
    color: #ffffff;
    font-size: 40px;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* Cronómetro: interacciones en tonos rojos */
#cronometro {
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, background-color 0.18s;
}

#cronometro:hover,
#cronometro:active {
    box-shadow: 0 10px 30px rgba(244, 91, 81, 0.12);
    background-color: #fff5f5;
}

#cronometro:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(244, 91, 81, 0.12);
}

/* Video Interaction Overlay */ .video-container  {
         position:  relative;
         width:  100%;
     
}

  .video-overlay  {
         position:  absolute;
         top:  0;
         left:  0;
         width:  100%;
         height:  100%;
         z-index:  20;
         background:  transparent;
         cursor:  pointer;
         display:  flex;
         align-items:  center;
         justify-content:  center;
         transition:  opacity 0.5s ease;
     
}

  .video-overlay.hidden  {
         opacity:  0;
         pointer-events:  none;
     
}

  .unmute-hint  {
         background:  rgba(0,  0,  0,  0.7);
         color:  white;
         padding:  12px 24px;
         border-radius:  99px;
         font-weight:  bold;
         font-size:  14px;
         backdrop-filter:  blur(4px);
         border:  1px solid rgba(255,  255,  255,  0.2);
         display:  flex;
         align-items:  center;
         gap:  8px;
         animation:  pulse-slow 2s infinite;
     
}

  @keyframes pulse-slow  {

         0%,
     100%  {
         transform:  scale(1);
         opacity:  0.9;
         
    }

         50%  {
         transform:  scale(1.05);
         opacity:  1;
         
    }

     
}