/* ==========================================================================
   Estrategias.us - Main Stylesheet
   ========================================================================== */

/* ==========================================================================
   Skip Link (Accessibility)
   ========================================================================== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #301BA6;
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: bold;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #FF5967;
    outline-offset: 2px;
}

/* ==========================================================================
   Spinning Animation
   ========================================================================== */
.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

.glyphicon-left {
    margin-right: 7px;
}

/* ==========================================================================
   Nunito Sans Font Face
   ========================================================================== */
/* vietnamese */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v2/iJ4p9wO0GDKJ-D5teKuZqr6up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v2/iJ4p9wO0GDKJ-D5teKuZqiYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v2/iJ4p9wO0GDKJ-D5teKuZqo4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* ==========================================================================
   Base Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    font-family: 'Nunito Sans', sans-serif;
}

p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
}

body {
    background-color: #C03040;
    color: #fff;
}

/* ==========================================================================
   Layout Sections
   ========================================================================== */
.fondo-cabecera {
    background: url(../images/fondo-ver.webp) #1a1a1a top center repeat-x;
    background-attachment: fixed;
}

.contenido-cabecera {
    margin-bottom: 0px;
    padding: 0px 0px 25px 0px;
}

.logo {
    background-image: url(../images/logo.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 84px;
    width: 377px;
    margin: 10px auto 15px auto;
}

.tels {}

.whatsapp {
    background-image: url(../images/what2.webp);
    z-index: 999;
}

.ani {
    background: url(../images/fondo4.webp) top center repeat #fff;
}

.contenido-ani {
    padding: 0px 0px 0px 0px;
}

.fondo-cuerpo2 {
    background: url(../images/fondo-ver.webp) #1a1a1a top center repeat;
    padding-top: 60px;
}

.fondo-cuerpo {
    background: #C03040 top center repeat;
}

.contenido-cuerpo {
    padding: 100px 0px 90px 0px;
}

#formulario {
    padding: 20px 15px 20px 15px;
    border-radius: 8px;
}

/* Color utility classes */
.rojo { background-color: #F00; color: #FFF; }
.amarillo { background-color: #FF0; color: #000; }
.azul { background-color: #00F; color: #FFF; }
.verde { background-color: #0C0; color: #FFF; }

/* ==========================================================================
   Video Container (Responsive YouTube)
   ========================================================================== */
#contenedor-video {
    position: relative;
    padding-bottom: 52.20%;
    padding-top: 20px;
    height: 0;
    overflow: hidden;
    display: block;
}

#contenedor-video iframe,
#contenedor object,
#contenedor embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Additional Sections
   ========================================================================== */
.fondo-imagenes {
    background: url(../images/fondo3.webp) #fff top center repeat-x;
    padding: 50px 0px 30px 0px;
}

.fondo-politicas {
    background: url(../images/fondo4.webp) #4688F4;
}

.contenido-politicas {
    padding: 30px 0px 30px 0px;
    color: #F5BDBA;
}

.ver {
    background: url(../images/fondo-ver.webp) #1a1a1a;
}

.contenido-ver {
    padding: 80px 0px 80px 0px;
}

.fondo-copyright {
    background: url("../images/fondo-cuerpo.webp") #F1EDF8 center;
    color: #fff;
    background-size: contain;
}

.contenido-copyright {
    padding: 70px 0px 0px 0px;
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */
/* Bottom margins */
.bottom0 { margin-bottom: 0px; }
.bottom5 { margin-bottom: 5px; }
.bottom10 { margin-bottom: 10px; }
.bottom15 { margin-bottom: 15px; }
.bottom20 { margin-bottom: 20px; }
.bottom25 { margin-bottom: 25px; }
.bottom30 { margin-bottom: 30px; }
.bottom35 { margin-bottom: 35px; }

/* Top margins */
.top0 { margin-top: 0px; }
.top5 { margin-top: 5px; }
.top10 { margin-top: 10px; }
.top15 { margin-top: 15px; }
.top20 { margin-top: 20px; }
.top25 { margin-top: 25px; }
.top30 { margin-top: 30px; }
.top35 { margin-top: 35px; }

/* Left margins */
.left10 { margin-left: 10px; }
.left15 { margin-left: 15px; }
.left35 { margin-left: 35px; }
.left45 { margin-left: 45px; }

/* Padding utilities */
.paddingleftright { padding: 0 20px; }
.paddingtop { padding-top: 20px; }
.paddingbottom { padding-bottom: 20px; }

/* ==========================================================================
   Form Elements
   ========================================================================== */
form .with-errors,
.form-group .with-errors,
.has-error .with-errors {
    font-weight: bold;
    color: #FFF;
    background-color: red;
    margin-top: -3px;
}

.boton-enviar,
button.boton-enviar,
input.boton-enviar {
    background-color: #4CE04C;
    color: #000;
    opacity: 1;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */
@media screen and (max-width: 700px) {
    body h2,
    section h2 { font-size: 30px; }
    body h3,
    section h3 { font-size: 20px; }
    body .top,
    main .top { margin-top: 35px; }
}

/* ==========================================================================
   Horizontal Rule
   ========================================================================== */
hr.style1 {
    border-top: 1px solid #8c8b8b;
}

/* ==========================================================================
   Carousel (Bootstrap 5) - CLS Fix
   ========================================================================== */
.carousel {
    margin: 10px auto;
    padding: 0 10px;
}

/* Fixed aspect ratio to prevent CLS - images are ~550x337 (1.63:1) */
.carousel-item {
    aspect-ratio: 550 / 337;
    overflow: hidden;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Legacy .item selector for backwards compatibility */
.carousel .item {
    color: #999;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    min-height: 290px;
}

.carousel .item .img-box {
    width: 135px;
    height: 135px;
    margin: 0 auto;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 50%;
}

.carousel .img-box img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}

.carousel .testimonial {
    padding: 30px 0 10px;
}

.carousel .overview {
    font-style: italic;
}

.carousel .overview b {
    text-transform: uppercase;
    color: #7AA641;
}

.carousel .carousel-control {
    width: 40px;
    height: 40px;
    margin-top: -15px;
    top: 23%;
    background: none;
}

.carousel-control i {
    font-size: 68px;
    line-height: 42px;
    display: inline-block;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000;
}

.carousel .carousel-indicators {
    bottom: -40px;
}

.carousel-indicators li,
.carousel-indicators li.active {
    width: 10px;
    height: 10px;
    margin: 1px 3px;
    border-radius: 50%;
}

.carousel-indicators li {
    background: #999;
    border-color: transparent;
    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);
}

.carousel-indicators li.active {
    background: #555;
    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Lists
   ========================================================================== */
.lista {
    text-align: left;
    display: inline-block;
    margin-left: -10px;
    color: #000;
    margin-top: 10px;
}

.lista a {
    text-decoration: underline;
    color: #301BA6;
}

.lista a:hover {
    color: #C03040;
}

/* ==========================================================================
   Legacy Classes (from original main.css)
   ========================================================================== */
.cabecera {
    position: relative;
    background-color: black;
    margin-bottom: 40px;
    padding: 30px 0;
    padding-top: 60px;
    padding-bottom: 60px;
}

.datos {}

/* ==========================================================================
   Utility Classes - Replacing Inline Styles
   ========================================================================== */

/* Brand Colors */
.text-brand-red { color: #C03040; }
.text-brand-blue { color: #301BA6; }
.text-brand-purple { color: #C870E9; }
.text-brand-yellow { color: #ff0; }

/* Links */
.link-white { text-decoration: none; color: #fff; font-weight: bold; }
.link-white:hover { color: #ccc; }

/* Typography - Dancing Script accent */
.text-script { font-family: 'Dancing Script', cursive; font-size: 22px; }

/* Section titles */
.section-title-lg { font-size: 35px; }
.section-title-md { font-size: 30px; }

/* Fixed position elements */
.fixed-bottom-left-lg { position: fixed; bottom: 13px; left: 15px; border-radius: 5px; padding: 7px 8px; }
.fixed-bottom-left-sm { position: fixed; bottom: 5px; left: 5px; border-radius: 5px; padding: 4px 5px; }

/* Margins */
.mt-70 { margin-top: 70px; }
.mt-90 { margin-top: 90px; }

/* Paddings */
.py-section { padding: 90px 0 80px 0; }
.pb-section { padding-bottom: 70px; }

/* ==========================================================================
   Typography - Replacing Inline Styles
   ========================================================================== */

/* Main title (H1) */
.title-main {
    font-size: 28px;
    font-weight: bold;
    color: #C03040;
    margin-bottom: 15px;
}

/* Subtitle gray */
.subtitle-gray {
    font-size: 16px;
    color: #666;
}

/* Hero title large */
.title-hero {
    font-size: 45px;
    color: #C03040;
    margin-top: 90px;
}

/* Section titles */
.title-section-yellow {
    color: #fff;
    font-size: 35px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.title-section-blue {
    font-size: 35px;
    color: #301BA6;
}

.title-section-blue-md {
    font-size: 25px;
    color: #301BA6;
}

.title-section-red {
    font-size: 35px;
    color: #C03040;
}

/* Call to action yellow */
.cta-yellow {
    margin-top: 10px;
    margin-bottom: 15px;
    color: #FF0;
}

/* Text with 18px font */
.text-body-lg {
    color: #333333;
    font-size: 18px;
}

/* Text colors */
.text-dark { color: #333333; }
.text-gray { color: #333; }

/* Highlighted text */
.text-highlight {
    margin-bottom: 25px;
    color: #C03040;
    font-size: 18px;
}

.text-highlight-sm {
    color: #C03040;
    font-size: 18px;
}

/* List styles */
.list-styled {
    font-size: 19px;
    text-align: left;
    margin-top: 18px;
    margin-left: -20px;
    color: #C03040;
}

/* Footer text */
.footer-links {
    color: #000;
    font-size: 18px;
}

/* Fixed WhatsApp buttons */
.whatsapp-fixed-lg {
    position: fixed;
    bottom: 13px;
    left: 15px;
    border-radius: 5px;
    padding: 7px 8px;
}

.whatsapp-fixed-sm {
    position: fixed;
    bottom: 5px;
    left: 5px;
    border-radius: 5px;
    padding: 4px 5px;
}

.telegram-fixed {
    position: fixed;
    bottom: 20px;
    left: 120px;
    z-index: 1000;
}

/* Section backgrounds */
.bg-white { background-color: #fff; }

/* ==========================================================================
   Stripe Buy Buttons - CLS Fix
   Reserve space to prevent layout shift when buttons load
   ========================================================================== */
stripe-buy-button {
    display: block;
    min-height: 48px;
    min-width: 200px;
}