/* Smiley Affiliate System Styles */

:root {
    --smiley-red: #ff0000;
    --smiley-green: #33cc33;
    --smiley-yellow: #fbbf24;
    --smiley-dark: #1a202c;
    --smiley-gray: #4a5568;
    --smiley-light-gray: #f7fafc;
}

/* Register Form */
.smiley-affiliate-register {
    max-width: 700px;
    margin: 40px auto;
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.smiley-message {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.smiley-success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-left: 4px solid var(--smiley-green);
    
}

.smiley-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-left: 4px solid var(--smiley-red);
}

.smiley-message h3 {
    margin: 0 0 10px 0;
    color: var(--smiley-dark);
}

.smiley-message p {
    margin: 0;
    color: var(--smiley-gray);
}

.smiley-form {
    margin-top: 20px;
}

.smiley-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.smiley-form-group {
    display: flex;
    flex-direction: column;
}

.smiley-form-group label {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--smiley-dark);
    font-size: 14px;
}

.smiley-form-group input {
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s;
}

.smiley-form-group input:focus {
    outline: none;
    border-color: var(--smiley-red);
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
}

.smiley-form-submit {
    margin-top: 30px;
    text-align: center;
}

.smiley-btn-primary {
    background: linear-gradient(135deg, var(--smiley-red) 0%, #ff3333 100%);
    color: white;
    padding: 16px 40px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}

.smiley-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
}

.smiley-btn-secondary {
    background: var(--smiley-gray);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.smiley-btn-secondary:hover {
    background: var(--smiley-dark);
}

.smiley-form-note {
    margin-top: 20px;
    font-size: 13px;
    color: var(--smiley-gray);
    text-align: center;
}

/* Dashboard */
.smiley-affiliate-dashboard {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.smiley-dashboard-header {
    text-align: center;
    margin-bottom: 40px;
}

.smiley-dashboard-header h2 {
    font-size: 32px;
    margin: 0 0 10px 0;
    color: var(--smiley-dark);
}

.smiley-dashboard-header p {
    font-size: 16px;
    color: var(--smiley-gray);
}

.smiley-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.smiley-stat-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.3s;
}

.smiley-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.smiley-stat-card .stat-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.smiley-stat-card .stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--smiley-dark);
    margin-bottom: 8px;
}

.smiley-stat-card .stat-label {
    font-size: 14px;
    color: var(--smiley-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.smiley-stat-card.pending {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.smiley-stat-card.success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.smiley-stat-card.info {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

/* Referral Section */
.smiley-referral-section {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: 40px;
}

.smiley-referral-section h3 {
    margin: 0 0 20px 0;
    color: var(--smiley-dark);
}

.smiley-referral-link {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.smiley-referral-link input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    background: var(--smiley-light-gray);
}

.smiley-share-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.smiley-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    color: white;
}

.smiley-share-btn span {
    font-size: 20px;
}

.smiley-share-btn.whatsapp {
    background: #25D366;
}

.smiley-share-btn.whatsapp:hover {
    background: #1ea952;
}

.smiley-share-btn.facebook {
    background: #1877F2;
}

.smiley-share-btn.facebook:hover {
    background: #145dbf;
}

.smiley-share-btn.instagram {
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}

.smiley-share-btn.instagram:hover {
    opacity: 0.9;
}

/* Sales Table */
.smiley-sales-table {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.smiley-sales-table h3 {
    margin: 0 0 20px 0;
    color: var(--smiley-dark);
}

.smiley-table {
    width: 100%;
    border-collapse: collapse;
}

.smiley-table thead {
    background: var(--smiley-light-gray);
}

.smiley-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--smiley-dark);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.smiley-table td {
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    color: var(--smiley-gray);
}

.smiley-table tbody tr:hover {
    background: var(--smiley-light-gray);
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.paid {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

/* Responsive */
@media (max-width: 768px) {
    .smiley-form-row {
        grid-template-columns: 1fr;
    }
    
    .smiley-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .smiley-share-buttons {
        grid-template-columns: 1fr;
    }
    
    .smiley-referral-link {
        flex-direction: column;
    }
    
    .smiley-table {
        font-size: 14px;
    }
    
    .smiley-table th,
    .smiley-table td {
        padding: 8px;
    }
}
/* ========================================
   SMILEY AFILIADOS — Hero, Precios, Demos, Footer
   Poppins · Paleta marca: #33cc33 / #ff0000 / #fbbf24
   ======================================== */

/* ---------- HERO ---------- */
.smiley-afil-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #1a202c;
}

.smiley-afil-hero-video {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.smiley-afil-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}

.smiley-afil-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 760px;
    padding: 40px 24px;
}

.smiley-afil-hero-content h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 18px;
    line-height: 1.25;
}

.smiley-afil-hero-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #f1f5f9;
    margin: 0 0 32px;
    line-height: 1.5;
}

.smiley-afil-hero-cta {
    display: inline-block;
    background: #33cc33;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 17px;
    padding: 16px 40px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s;
}

.smiley-afil-hero-cta:hover {
    background: #fbbf24;
    color: #1a202c;
    transform: translateY(-2px);
}

/* ---------- PRECIOS ---------- */
.smiley-afil-precios {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px;
    text-align: center;
}

.smiley-afil-precios h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 10px;
}

.smiley-afil-precios-sub {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #4a5568;
    margin: 0 0 40px;
}

.smiley-afil-precios-grupo {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a202c;
    text-align: left;
    margin: 36px 0 6px;
}

.smiley-afil-precios-sub-chica {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #4a5568;
    text-align: left;
    margin: 0 0 18px;
}

.smiley-afil-precios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.smiley-afil-precios-grid-single {
    grid-template-columns: minmax(260px, 360px);
    justify-content: flex-start;
}

.smiley-afil-precio-mensual {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #4a5568;
    margin: -4px 0 10px;
}

.smiley-afil-plan-card {
    position: relative;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px 24px;
}

.smiley-afil-plan-card.destacado {
    border-color: #33cc33;
    box-shadow: 0 8px 30px rgba(51,204,51,0.18);
    transform: scale(1.04);
}

.smiley-afil-badge {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: #33cc33;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 50px;
}

.smiley-afil-plan-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a202c;
    margin: 8px 0 16px;
}

.smiley-afil-precio {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 8px;
}

.smiley-afil-comision {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #166534;
    background: #f0fdf4;
    border-radius: 8px;
    padding: 8px 12px;
}

.smiley-afil-incluye {
    list-style: none;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #e5e7eb;
    text-align: left;
}

.smiley-afil-incluye li {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.smiley-afil-incluye li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #33cc33;
    font-weight: 700;
}

.smiley-afil-precio-pendiente {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #92400e;
    background: #fffbeb;
    border-radius: 8px;
    padding: 10px 12px;
}

/* ---------- DEMOS ---------- */
.smiley-afil-demos {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 24px 60px;
    text-align: center;
}

.smiley-afil-demos h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 10px;
}

.smiley-afil-demos-sub {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #4a5568;
    margin: 0 0 32px;
}

.smiley-afil-demos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.smiley-afil-demo-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 24px;
    text-align: left;
    text-decoration: none;
    transition: all 0.25s;
}

.smiley-afil-demo-card:hover {
    border-color: #33cc33;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

.smiley-afil-demo-tag {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #166534;
    background: #f0fdf4;
    padding: 4px 10px;
    border-radius: 50px;
    margin-bottom: 10px;
}

.smiley-afil-demo-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 10px;
}

.smiley-afil-demo-link {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ff0000;
}

/* ---------- FOOTER ---------- */
.smiley-afil-footer {
    text-align: center;
    padding: 28px 24px;
    background: #1a202c;
}

.smiley-afil-footer p {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .smiley-afil-hero-content h1 { font-size: 28px; }
    .smiley-afil-hero-content p  { font-size: 15px; }
    .smiley-afil-precios-grid { grid-template-columns: 1fr; }
    .smiley-afil-plan-card.destacado { transform: none; }
}

/* ========================================
   NICHOS — grid 2 grandes (Propiedades/Alojamiento) + 3 chicas
   ======================================== */
.smiley-afil-nichos {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px 20px;
    text-align: center;
}

.smiley-afil-nichos h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 10px;
}

.smiley-afil-nichos-fila {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin-top: 28px;
}

.smiley-afil-nicho-card {
    flex: 0 0 330px;
    width: 330px;
    min-height: 400px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.smiley-afil-nicho-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.1);
    border-color: #33cc33;
}

/* Propiedades y Alojamiento con borde verde fijo (son los productos maduros) */
.smiley-afil-nicho-propiedades,
.smiley-afil-nicho-alojamiento {
    border-color: #33cc33;
}

.smiley-afil-nicho-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 10px;
    align-self: flex-start;
}

.smiley-afil-nicho-icono {
    font-size: 32px;
    margin-bottom: 8px;
}

.smiley-afil-nicho-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 8px;
}

.smiley-afil-nicho-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    color: #4a5568;
    line-height: 1.5;
    margin: 0 0 14px;
}

.smiley-afil-nicho-label {
    font-family: 'Poppins', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #94a3b8;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.smiley-afil-nicho-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.smiley-afil-nicho-tags span {
    font-family: 'Poppins', sans-serif;
    font-size: 11.5px;
    color: #334155;
    background: #f1f5f9;
    border-radius: 50px;
    padding: 4px 10px;
}

.smiley-afil-nicho-setup {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #222222;
}

.smiley-afil-nicho-setup small { font-size: 11px; font-weight: 500; color: #94a3b8; }

.smiley-afil-nicho-comision {
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    color: #166534;
    padding: 8px 0;
    border-top: 1px solid #f1f5f9;
    margin-bottom: 8px;
}

.smiley-afil-nicho-diferenciador {
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    color: #4a5568;
    font-style: italic;
    margin: 0 0 14px;
}

.smiley-afil-nicho-demo {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    color: #166534;
    background: #f0fdf4;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    text-decoration: none;
}

.smiley-afil-nicho-demo:hover { background: #dcfce7; }

.smiley-afil-nicho-cta {
    display: block;
    text-align: center;
    margin-top: auto;
    padding-top: 14px;
    background: #ff0000;
    color: #fff !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    border-radius: 8px;
    padding: 12px;
    text-decoration: none;
    margin-top: 14px;
}

.smiley-afil-nicho-cta:hover { background: #fbbf24; color: #1a202c !important; }

/* ========================================
   CÓMO FUNCIONA
   ======================================== */
.smiley-afil-como {
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 24px;
    text-align: center;
}

.smiley-afil-como h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 36px;
}

.smiley-afil-como-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.smiley-afil-como-paso {
    position: relative;
    text-align: left;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px 22px 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.smiley-afil-como-paso:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 14px 34px rgba(51,204,51,0.16);
    border-color: #33cc33;
}

.smiley-afil-como-icono {
    font-size: 30px;
    margin-bottom: 10px;
    transition: transform 0.25s ease;
}

.smiley-afil-como-paso:hover .smiley-afil-como-icono {
    transform: scale(1.15) rotate(-4deg);
}

.smiley-afil-como-num {
    position: absolute;
    top: -14px; right: -14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #1a202c;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.smiley-afil-como-paso h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 6px;
}

.smiley-afil-como-paso p {
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    color: #4a5568;
    line-height: 1.5;
    margin: 0;
}

/* ========================================
   CALCULADORA — doble contenedor (consistente con Calculadora Huésped)
   ======================================== */
.smiley-afil-calc-section {
    padding: 50px 24px;
}

.smiley-afil-calc-frame {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 20px solid #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.13);
    overflow: hidden;
}

.smiley-afil-calc-wrap {
    padding: 28px 28px 32px;
    text-align: center;
}

.smiley-afil-calc-wrap h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 8px;
}

.smiley-afil-calc-card {
    background: #f8fafc;
    border-radius: 14px;
    padding: 20px;
    margin-top: 20px;
    text-align: left;
}

.smiley-afil-calc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.smiley-afil-calc-row label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #1a202c;
    font-weight: 600;
}

.smiley-afil-calc-row label span {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: #94a3b8;
}

.smiley-afil-calc-input {
    width: 64px;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    text-align: center;
}

.smiley-afil-calc-resultado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #33cc33;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
    transition: transform 0.15s ease;
}

.smiley-afil-calc-resultado span {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #166534;
}

.smiley-afil-calc-resultado strong {
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #15803d;
}

@keyframes smileyAfilPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

.smiley-afil-calc-resultado.smiley-afil-pulse {
    animation: smileyAfilPulse 0.3s ease;
}

.smiley-afil-calc-input:focus {
    outline: none;
    border-color: #33cc33;
    box-shadow: 0 0 0 3px rgba(51,204,51,0.15);
}

.smiley-afil-calc-nota {
    font-family: 'Poppins', sans-serif;
    font-size: 11.5px;
    color: #94a3b8;
    margin: 12px 0 0;
}

/* ========================================
   FAQ
   ======================================== */
.smiley-afil-faq-section {
    padding: 50px 24px 70px;
}

.smiley-afil-faq-frame {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 20px solid #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.13);
    overflow: hidden;
}

.smiley-afil-faq {
    padding: 28px 28px 32px;
}

.smiley-afil-faq h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #222222;
    text-align: center;
    margin: 0 0 30px;
}

.smiley-afil-faq-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.smiley-afil-faq-item:hover {
    border-color: #33cc33;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.smiley-afil-faq-item[open] {
    border-color: #33cc33;
}

.smiley-afil-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1a202c;
    cursor: pointer;
    list-style: none;
}

.smiley-afil-faq-item summary::-webkit-details-marker { display: none; }

.smiley-afil-faq-chevron {
    flex: 0 0 auto;
    color: #33cc33;
    font-size: 14px;
    transition: transform 0.25s ease;
}

.smiley-afil-faq-item[open] .smiley-afil-faq-chevron {
    transform: rotate(180deg);
}

.smiley-afil-faq-item p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #4a5568;
    line-height: 1.6;
    margin: 12px 0 0;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 900px) {
    .smiley-afil-como-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .smiley-afil-nicho-card { flex: 0 0 100%; width: 100%; max-width: 360px; min-height: 0; }
    .smiley-afil-como-grid { grid-template-columns: 1fr; }
    .smiley-afil-calc-frame { border-width: 12px; }
}


/* ========================================================================
   v2.0 — Diseño claro en cuadrantes
   Paleta de las landings Smiley: fondo claro, verde #2d6a4f, rojo #a13d2b,
   hover ámbar #fbbf24. El azul oscuro (#1a202c) queda SOLO en el footer.
   Los fondos de sección usan box-shadow + clip-path para ocupar todo el
   ancho aunque el tema (Blocksy) limite el contenedor.
   ======================================================================== */
:root {
    --afil-verde:#2d6a4f; --afil-verde-osc:#1f4d39; --afil-verde-claro:#e8f3ec;
    --afil-rojo:#a13d2b;  --afil-rojo-claro:#fbefeb;
    --afil-ambar:#fbbf24;
    --afil-txt:#222222;   --afil-muted:#5b6470;
    --afil-fondo:#ffffff; --afil-fondo2:#f6f8f7; --afil-borde:#e3e8e5;
    --afil-footer:#1a202c;
}

/* ---------- Fondos de sección (alternan blanco / gris muy claro) ---------- */
.smiley-afil-ps, .smiley-afil-nichos, .smiley-afil-como, .smiley-afil-pago, .smiley-afil-comis,
.smiley-afil-precios, .smiley-afil-demos, .smiley-afil-casos, .smiley-afil-garantias,
.smiley-afil-calc-section, .smiley-afil-faq-section { position: relative; clip-path: inset(0 -100vmax); }

.smiley-afil-ps          { background: var(--afil-fondo);  box-shadow: 0 0 0 100vmax var(--afil-fondo); }
.smiley-afil-nichos      { background: var(--afil-fondo2); box-shadow: 0 0 0 100vmax var(--afil-fondo2); }
.smiley-afil-como        { background: var(--afil-fondo);  box-shadow: 0 0 0 100vmax var(--afil-fondo); }
.smiley-afil-pago        { background: var(--afil-fondo2); box-shadow: 0 0 0 100vmax var(--afil-fondo2); }
.smiley-afil-calc-section{ background: var(--afil-fondo);  box-shadow: 0 0 0 100vmax var(--afil-fondo); }
.smiley-afil-comis       { background: var(--afil-fondo2); box-shadow: 0 0 0 100vmax var(--afil-fondo2); }
.smiley-afil-precios     { background: var(--afil-fondo);  box-shadow: 0 0 0 100vmax var(--afil-fondo); }
.smiley-afil-demos       { background: var(--afil-fondo2); box-shadow: 0 0 0 100vmax var(--afil-fondo2); }
.smiley-afil-faq-section { background: var(--afil-fondo);  box-shadow: 0 0 0 100vmax var(--afil-fondo); }
.smiley-afil-garantias   { background: var(--afil-fondo2); box-shadow: 0 0 0 100vmax var(--afil-fondo2); }

/* Títulos: gris carbón + línea de acento verde→rojo */
.smiley-afil-nichos h2, .smiley-afil-como h2, .smiley-afil-pago h2, .smiley-afil-comis h2,
.smiley-afil-precios h2, .smiley-afil-demos h2, .smiley-afil-casos h2, .smiley-afil-garantias h3 {
    color: var(--afil-txt); letter-spacing: .02em; font-family: 'Poppins', sans-serif;
}
.smiley-afil-nichos h2::after, .smiley-afil-como h2::after, .smiley-afil-pago h2::after, .smiley-afil-comis h2::after,
.smiley-afil-precios h2::after, .smiley-afil-demos h2::after, .smiley-afil-casos h2::after {
    content: ""; display: block; width: 64px; height: 4px; border-radius: 4px; margin: 14px auto 0;
    background: linear-gradient(90deg, var(--afil-verde), var(--afil-rojo));
}
.smiley-afil-precios-sub, .smiley-afil-demos-sub { color: var(--afil-muted); }

/* ---------- Hero (el video lleva overlay; sin video, verde de marca) ---------- */
.smiley-afil-hero { background: linear-gradient(135deg, #2d6a4f, #3f8f6b); }
.smiley-afil-hero-cta { background: var(--afil-verde); color: #fff; position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.smiley-afil-hero-cta::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-20deg); animation: afilBrillo 3.4s ease-in-out infinite; }
.smiley-afil-hero-cta:hover { background: var(--afil-ambar); color: #222; transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 30px rgba(251,191,36,.5); }
@keyframes afilBrillo { 0%{left:-60%} 55%,100%{left:130%} }

/* ---------- Cuadrante base ---------- */
.smiley-afil-nicho-card, .smiley-afil-como-paso, .smiley-afil-faq-item, .smiley-afil-calc-card,
.smiley-afil-demo-card, .smiley-afil-ps-card, .smiley-afil-pago-item, .smiley-afil-tier, .smiley-afil-plan,
.smiley-afil-doc, .smiley-afil-garantias-card, .smiley-afil-grupo {
    background: #fff; border: 1px solid var(--afil-borde); border-radius: 18px;
    box-shadow: 0 6px 20px rgba(34,34,34,.06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.smiley-afil-nicho-card:hover, .smiley-afil-como-paso:hover, .smiley-afil-demo-card:hover, .smiley-afil-ps-card:hover,
.smiley-afil-pago-item:hover, .smiley-afil-tier:hover, .smiley-afil-plan:hover, .smiley-afil-doc:hover,
.smiley-afil-garantias-card:hover, .smiley-afil-faq-item:hover {
    transform: translateY(-6px); border-color: var(--afil-verde); box-shadow: 0 16px 36px rgba(45,106,79,.20);
}
.smiley-afil-nicho-card { border-top: 5px solid var(--afil-verde); }
.smiley-afil-nicho-card.smiley-afil-nicho-corretaje { border-top-color: var(--afil-rojo); }
.smiley-afil-nicho-card.smiley-afil-nicho-corretaje:hover { border-color: var(--afil-rojo); box-shadow: 0 16px 36px rgba(161,61,43,.2); }
.smiley-afil-nicho-badge { background: var(--afil-rojo); color: #fff; }
.smiley-afil-comision, .smiley-afil-nicho-comision { background: var(--afil-verde-claro); color: var(--afil-verde-osc); border-radius: 10px; }
.smiley-afil-nicho-cta { background: var(--afil-verde); color: #fff; transition: background .3s ease, color .3s ease, transform .3s ease; }
.smiley-afil-nicho-cta:hover { background: var(--afil-ambar); color: #222; transform: translateY(-2px); }
.smiley-afil-como-num { background: var(--afil-verde) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(45,106,79,.35); }
.smiley-afil-como-icono { transition: transform .35s ease; }
.smiley-afil-como-paso:hover .smiley-afil-como-icono { transform: scale(1.18) rotate(-6deg); }
.smiley-afil-demo-card h3 { color: var(--afil-txt); }
.smiley-afil-demo-tag { background: var(--afil-verde-claro); color: var(--afil-verde-osc); }
.smiley-afil-demo-link { color: var(--afil-rojo); font-weight: 600; transition: letter-spacing .25s ease; }
.smiley-afil-demo-card:hover .smiley-afil-demo-link { letter-spacing: .05em; }

/* ---------- Formulario: selector de documento ---------- */
.smiley-form-group select { width: 100%; padding: 12px 14px; border: 2px solid #e5e7eb; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 15px; background: #fff; transition: border-color .25s ease, box-shadow .25s ease; }
.smiley-form-group select:focus { outline: none; border-color: var(--afil-verde); box-shadow: 0 0 0 4px rgba(45,106,79,.18); }
.smiley-form-doc { margin: 4px 0 16px; }
.smiley-form-doc small { display: block; margin-top: 6px; color: var(--afil-muted); font-size: 12.5px; }

/* ---------- Prueba social ---------- */
.smiley-afil-ps { max-width: 1000px; margin: 0 auto; padding: 38px 24px; }
.smiley-afil-ps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.smiley-afil-ps-card { padding: 22px 12px; text-align: center; border-top: 4px solid var(--afil-verde); }
.smiley-afil-ps-card strong { display: block; font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 700; color: var(--afil-verde); line-height: 1.1; }
.smiley-afil-ps-card span { display: block; font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--afil-muted); margin-top: 6px; }

/* ---------- Cómo y cuándo se paga ---------- */
.smiley-afil-pago, .smiley-afil-casos, .smiley-afil-comis, .smiley-afil-precios { max-width: 1100px; margin: 0 auto; padding: 56px 24px; text-align: center; }
.smiley-afil-pago h2, .smiley-afil-casos h2, .smiley-afil-comis h2, .smiley-afil-precios h2 { font-size: 30px; font-weight: 700; margin: 0 0 10px; }
.smiley-afil-pago-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
.smiley-afil-pago-item { text-align: left; padding: 24px 20px; }
.smiley-afil-pago-item.destacado { border: 2px solid var(--afil-verde); background: var(--afil-verde-claro); animation: afilLatido 2.8s ease-in-out infinite; }
@keyframes afilLatido { 0%,100%{ box-shadow: 0 0 0 0 rgba(45,106,79,.35);} 50%{ box-shadow: 0 0 0 12px rgba(45,106,79,0);} }
.smiley-afil-pago-dia { display: inline-block; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--afil-verde-osc); background: var(--afil-verde-claro); border-radius: 20px; padding: 4px 12px; margin-bottom: 12px; }
.smiley-afil-pago-item.destacado .smiley-afil-pago-dia { background: var(--afil-verde); color: #fff; }
.smiley-afil-pago-item h3 { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; color: var(--afil-txt); margin: 0 0 6px; }
.smiley-afil-pago-item p { font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--afil-muted); line-height: 1.55; margin: 0; }

/* ---------- Todos los planes ---------- */
.smiley-afil-grupo { text-align: left; padding: 26px 24px; margin-top: 28px; }
.smiley-afil-grupo:hover { transform: none; box-shadow: 0 6px 20px rgba(34,34,34,.06); border-color: var(--afil-borde); }
.smiley-afil-grupo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 18px; }
.smiley-afil-grupo-head h3 { font-family: 'Poppins', sans-serif; font-size: 21px; font-weight: 700; color: var(--afil-txt); margin: 0; }
.smiley-afil-grupo-head span { font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--afil-rojo); font-weight: 600; }
.smiley-afil-grupo-sub { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: var(--afil-muted); margin: 24px 0 12px; }
.smiley-afil-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.smiley-afil-tiers-una { grid-template-columns: minmax(0, 340px); }
.smiley-afil-tier { position: relative; padding: 24px 18px 20px; text-align: center; background: var(--afil-fondo2); }
.smiley-afil-tier.is-activo { background: var(--afil-verde-claro); border: 2px solid var(--afil-verde); }
.smiley-afil-tier-insignia { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--afil-rojo); color: #fff; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 700; border-radius: 20px; padding: 4px 12px; box-shadow: 0 4px 12px rgba(161,61,43,.3); }
.smiley-afil-tier-nombre { display: block; font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; color: var(--afil-txt); }
.smiley-afil-tier-rango { display: block; font-family: 'Poppins', sans-serif; font-size: 12.5px; color: var(--afil-muted); margin: 2px 0 12px; }
.smiley-afil-tier-precio { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 700; color: var(--afil-txt); line-height: 1.1; }
.smiley-afil-tier-precio small { font-size: 12px; font-weight: 500; color: var(--afil-muted); margin-left: 3px; }
.smiley-afil-tier-gana { margin: 12px 0 8px; padding: 9px 10px; border-radius: 10px; background: var(--afil-verde); color: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; transition: background .3s ease, color .3s ease; }
.smiley-afil-tier-gana strong { font-size: 18px; font-weight: 700; }
.smiley-afil-tier:hover .smiley-afil-tier-gana, .smiley-afil-plan:hover .smiley-afil-tier-gana { background: var(--afil-ambar); color: #222; }
.smiley-afil-tier-mensual { font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--afil-muted); }
.smiley-afil-planes-sup { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.smiley-afil-plan { position: relative; padding: 26px 22px 22px; text-align: left; }
.smiley-afil-plan.is-destacado { border: 2px solid var(--afil-rojo); background: var(--afil-rojo-claro); }
.smiley-afil-plan.is-destacado:hover { border-color: var(--afil-rojo); box-shadow: 0 16px 36px rgba(161,61,43,.22); }
.smiley-afil-plan h4 { font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 700; color: var(--afil-txt); margin: 0 0 8px; }
.smiley-afil-plan .smiley-afil-tier-gana { display: inline-block; }
.smiley-afil-plan-despues { font-family: 'Poppins', sans-serif; font-size: 12.5px; color: var(--afil-rojo); margin: 10px 0 0; line-height: 1.5; }
.smiley-afil-incluye { list-style: none; margin: 16px 0 0; padding: 0; }
.smiley-afil-incluye li { position: relative; padding-left: 24px; margin-bottom: 8px; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: #3a424a; line-height: 1.5; }
.smiley-afil-incluye li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--afil-verde); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.smiley-afil-grupo-incluye .smiley-afil-incluye { margin-top: 0; columns: 2; column-gap: 28px; }

/* ---------- Casos (opcional, no se usa por defecto) ---------- */
.smiley-afil-casos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 30px; }
.smiley-afil-caso-card { text-align: left; background: #fff; border: 1px solid var(--afil-borde); border-radius: 18px; padding: 26px 24px; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.smiley-afil-caso-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(45,106,79,.2); border-color: var(--afil-verde); }
.smiley-afil-caso-icono { font-size: 30px; margin-bottom: 8px; }
.smiley-afil-caso-card h3 { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; color: var(--afil-txt); margin: 0 0 8px; }
.smiley-afil-caso-card p { font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--afil-muted); line-height: 1.6; margin: 0 0 16px; flex: 1; }
.smiley-afil-caso-gana { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--afil-verde-claro); border-radius: 10px; padding: 12px 16px; }
.smiley-afil-caso-gana span { font-family: 'Poppins', sans-serif; font-size: 12.5px; color: var(--afil-muted); }
.smiley-afil-caso-gana strong { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 700; color: var(--afil-verde); }

/* ---------- Comisiones: boleta vs factura ---------- */
.smiley-afil-comis-tabla-wrap { overflow-x: auto; margin-top: 30px; border-radius: 18px; border: 1px solid var(--afil-borde); background: #fff; box-shadow: 0 6px 20px rgba(34,34,34,.06); }
.smiley-afil-comis-tabla { width: 100%; border-collapse: collapse; font-family: 'Poppins', sans-serif; font-size: 14px; }
.smiley-afil-comis-tabla th { background: var(--afil-fondo2); color: var(--afil-txt); font-weight: 600; font-size: 13px; padding: 15px 16px; text-align: right; white-space: nowrap; border-bottom: 2px solid var(--afil-borde); }
.smiley-afil-comis-tabla th:first-child, .smiley-afil-comis-tabla td:first-child { text-align: left; }
.smiley-afil-comis-tabla td { padding: 14px 16px; text-align: right; color: var(--afil-txt); border-top: 1px solid var(--afil-borde); white-space: nowrap; transition: background .2s ease; }
.smiley-afil-comis-tabla tbody tr:hover td { background: #fbfcfb; }
.smiley-afil-comis-tabla small { display: block; color: #8a929b; font-size: 11.5px; margin-top: 2px; }
.smiley-afil-comis-tabla th.col-boleta { background: var(--afil-rojo-claro); color: var(--afil-rojo); }
.smiley-afil-comis-tabla th.col-factura { background: var(--afil-verde-claro); color: var(--afil-verde-osc); }
.smiley-afil-comis-tabla td.col-boleta { background: #fdf7f5; color: var(--afil-rojo); }
.smiley-afil-comis-tabla td.col-factura { background: #f3faf6; color: var(--afil-verde-osc); }
.smiley-afil-comis-nota { font-family: 'Poppins', sans-serif; font-size: 12.5px; color: var(--afil-muted); margin: 16px 0 0; }
.smiley-afil-comis-sub { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700; color: var(--afil-txt); margin: 46px 0 22px; }
.smiley-afil-doc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align: left; }
.smiley-afil-doc { padding: 26px 24px; }
.smiley-afil-doc-boleta  { border-top: 5px solid var(--afil-rojo); }
.smiley-afil-doc-factura { border-top: 5px solid var(--afil-verde); }
.smiley-afil-doc-boleta:hover  { border-color: var(--afil-rojo); box-shadow: 0 16px 36px rgba(161,61,43,.2); }
.smiley-afil-doc-tag { display: inline-block; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; color: #fff; border-radius: 20px; padding: 5px 14px; margin-bottom: 14px; }
.smiley-afil-doc-boleta .smiley-afil-doc-tag  { background: var(--afil-rojo); }
.smiley-afil-doc-factura .smiley-afil-doc-tag { background: var(--afil-verde); }
.smiley-afil-doc ul { margin: 0 0 18px; padding-left: 20px; }
.smiley-afil-doc li { font-family: 'Poppins', sans-serif; font-size: 14px; color: #3a424a; line-height: 1.6; margin-bottom: 8px; }
.smiley-afil-doc-ejemplo { background: var(--afil-fondo2); border-radius: 12px; padding: 14px 18px; }
.smiley-afil-doc-ejemplo .fila { display: flex; justify-content: space-between; gap: 12px; font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--afil-txt); padding: 8px 0; border-bottom: 1px solid var(--afil-borde); }
.smiley-afil-doc-ejemplo .fila.menos strong { color: var(--afil-rojo); }
.smiley-afil-doc-ejemplo .fila.total { border-bottom: 0; font-weight: 700; }
.smiley-afil-doc-ejemplo .fila.total strong { color: var(--afil-verde); font-size: 18px; }

/* ---------- Garantías: cuadrante ---------- */
.smiley-afil-garantias { max-width: 1000px; margin: 0 auto; padding: 36px 24px; }
.smiley-afil-garantias-card { padding: 30px 28px; text-align: center; border-top: 5px solid var(--afil-verde); }
.smiley-afil-garantias-card h3 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700; margin: 0 0 20px; }
.smiley-afil-garantias-card ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.smiley-afil-garantias-card li { display: flex; align-items: center; gap: 10px; text-align: left; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: var(--afil-txt); background: var(--afil-fondo2); border-radius: 12px; padding: 12px 14px; transition: transform .25s ease, background .25s ease; }
.smiley-afil-garantias-card li:hover { transform: translateX(4px); background: var(--afil-verde-claro); }
.smiley-afil-garantias-card .chk { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--afil-verde); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }

/* ---------- WhatsApp flotante ---------- */
.smiley-afil-wsp { position: fixed; right: 20px; bottom: 20px; z-index: 9999; width: 60px; height: 60px; border-radius: 50%; background: #25d366; box-shadow: 0 6px 20px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; transition: transform .25s ease; animation: afilPulso 2.4s ease-out infinite; }
.smiley-afil-wsp:hover { transform: scale(1.12) rotate(-6deg); }
.smiley-afil-wsp svg { width: 31px; height: 31px; }
.smiley-afil-wsp-tip { position: absolute; right: 72px; white-space: nowrap; background: #222; color: #fff; font-family: 'Poppins', sans-serif; font-size: 13px; padding: 8px 14px; border-radius: 8px; opacity: 0; pointer-events: none; transform: translateX(6px); transition: opacity .2s ease, transform .2s ease; }
.smiley-afil-wsp:hover .smiley-afil-wsp-tip { opacity: 1; transform: none; }
@keyframes afilPulso { 0%{ box-shadow: 0 6px 20px rgba(0,0,0,.3), 0 0 0 0 rgba(37,211,102,.55);} 70%,100%{ box-shadow: 0 6px 20px rgba(0,0,0,.3), 0 0 0 18px rgba(37,211,102,0);} }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .smiley-afil-ps-grid, .smiley-afil-pago-grid { grid-template-columns: 1fr 1fr; }
    .smiley-afil-doc-cols, .smiley-afil-planes-sup { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .smiley-afil-tiers { grid-template-columns: 1fr; }
    .smiley-afil-tiers-una { grid-template-columns: 1fr; }
    .smiley-afil-grupo-incluye .smiley-afil-incluye { columns: 1; }
}
@media (max-width: 640px) {
    .smiley-afil-casos-grid { grid-template-columns: 1fr; }
    .smiley-afil-caso-gana { flex-direction: column; align-items: flex-start; }
    .smiley-afil-wsp-tip { display: none; }
}
@media (max-width: 480px) {
    .smiley-afil-pago-grid, .smiley-afil-ps-grid { grid-template-columns: 1fr; }
}

/* Accesibilidad: sin animaciones si el visitante lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .smiley-afil-hero-cta::after, .smiley-afil-pago-item.destacado, .smiley-afil-wsp { animation: none; }
    .smiley-afil-nicho-card, .smiley-afil-como-paso, .smiley-afil-demo-card, .smiley-afil-ps-card, .smiley-afil-pago-item,
    .smiley-afil-tier, .smiley-afil-plan, .smiley-afil-doc, .smiley-afil-garantias-card { transition: none; }
}


/* ========================================================================
   v2.1 — Hero compacto, nichos 2×3, calculadora / FAQ / formulario en
   cuadrantes de color suave, footer completo
   ======================================================================== */

/* ---------- Hero: texto corto, a la izquierda, con el CTA (como los portales) ---------- */
.smiley-afil-hero { min-height: 480px; align-items: flex-end; justify-content: center; }
.smiley-afil-hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.12) 100%); }
.smiley-afil-hero-content { text-align: left; max-width: 1100px; width: 100%; margin: 0 auto; padding: 40px 24px 56px; box-sizing: border-box; }
.smiley-afil-hero-content h1 { font-size: 34px; line-height: 1.2; max-width: 560px; margin: 0 0 12px; }
.smiley-afil-hero-content p { font-size: 16px; line-height: 1.5; max-width: 480px; margin: 0 0 24px; }
.smiley-afil-hero-cta { padding: 14px 30px; font-size: 16px; border-radius: 8px; }
@media (max-width: 640px) {
    .smiley-afil-hero { min-height: 420px; }
    .smiley-afil-hero-content { padding: 32px 20px 40px; }
    .smiley-afil-hero-content h1 { font-size: 26px; }
    .smiley-afil-hero-content p { font-size: 15px; }
}

/* ---------- Nichos: 3 columnas, 2 filas ---------- */
.smiley-afil-nichos { max-width: 1200px; }
.smiley-afil-nichos-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; max-width: 1150px; margin: 0 auto 22px; }
.smiley-afil-nichos-fila:first-of-type { margin-top: 32px; }
.smiley-afil-nichos-fila .smiley-afil-nicho-card { width: auto; max-width: none; min-width: 0; margin: 0; }

/* ---------- Calculadora: cuadrante verde suave ---------- */
.smiley-afil-calc-frame { background: var(--afil-verde-claro); border: 20px solid var(--afil-verde-claro); outline: 1px solid #cfe5d8; box-shadow: 0 10px 30px rgba(45,106,79,.12); transition: transform .3s ease, box-shadow .3s ease; }
.smiley-afil-calc-frame:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(45,106,79,.22); }
.smiley-afil-calc-card { background: #fff; transition: box-shadow .3s ease; }
.smiley-afil-calc-frame:hover .smiley-afil-calc-card { box-shadow: 0 6px 18px rgba(45,106,79,.15); }
.smiley-afil-calc-resultado { background: var(--afil-verde); color: #fff; }

/* ---------- FAQ: cuadrante ámbar suave ---------- */
.smiley-afil-faq-frame { background: #fff7e0; border: 20px solid #fff7e0; outline: 1px solid #f3dfa2; box-shadow: 0 10px 30px rgba(251,191,36,.18); transition: transform .3s ease, box-shadow .3s ease; }
.smiley-afil-faq-frame:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(251,191,36,.30); }
.smiley-afil-faq-item { background: #fff; border-color: #f3dfa2; }
.smiley-afil-faq-item:hover, .smiley-afil-faq-item[open] { border-color: var(--afil-ambar); box-shadow: 0 8px 22px rgba(251,191,36,.28); transform: none; }

/* ---------- Formulario: título + cuadrante rosa suave ---------- */
.smiley-affiliate-register { max-width: 700px; margin: 40px auto; padding: 0 24px; background: transparent; box-shadow: none; border-radius: 0; box-sizing: border-box; }
.smiley-afil-form-frame { background: var(--afil-rojo-claro); border: 20px solid var(--afil-rojo-claro); outline: 1px solid #f1d5cd; border-radius: 20px; box-shadow: 0 10px 30px rgba(161,61,43,.12); transition: transform .3s ease, box-shadow .3s ease; }
.smiley-afil-form-frame:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(161,61,43,.22); }
.smiley-afil-form-titulo { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 700; color: var(--afil-txt); text-align: center; margin: 4px 0 6px; }
.smiley-afil-form-titulo::after { content: ""; display: block; width: 64px; height: 4px; border-radius: 4px; margin: 12px auto 0; background: linear-gradient(90deg, var(--afil-verde), var(--afil-rojo)); }
.smiley-afil-form-sub { font-family: 'Poppins', sans-serif; font-size: 14.5px; color: var(--afil-muted); text-align: center; margin: 12px 0 8px; }
.smiley-afil-form-frame .smiley-form-group input, .smiley-afil-form-frame .smiley-form-group select { background: #fff; }
.smiley-afil-form-frame .smiley-form-group input:focus { border-color: var(--afil-verde); box-shadow: 0 0 0 4px rgba(45,106,79,.18); outline: none; }
.smiley-btn-primary { background: var(--afil-verde); box-shadow: 0 6px 18px rgba(45,106,79,.35); width: 100%; transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.smiley-btn-primary:hover { background: var(--afil-ambar); color: #222; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(251,191,36,.45); }

/* ---------- Footer: mismo estilo y alto compacto que el de los portales ---------- */
.smiley-afil-footer { position: relative; clip-path: inset(0 -100vmax); background: #10151c; box-shadow: 0 0 0 100vmax #10151c; border: 0; color: #d9d0c2; padding: 44px 24px 26px; text-align: left; margin-top: 40px; font-family: 'Poppins', sans-serif; font-size: .88rem; }
.smiley-afil-footer::before { content: none; }
.smiley-afil-ftr-grid { max-width: 1200px; margin: 0 auto 30px; display: grid; grid-template-columns: 220px repeat(3, 1fr); gap: 40px; align-items: start; }
.smiley-afil-ftr-brandrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.smiley-afil-ftr-logo { height: 25px; width: auto; max-height: 25px; display: block; flex-shrink: 0; margin: 0; }
.smiley-afil-ftr-wordmark { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1.15rem; color: #2d6a4f; }
.smiley-afil-ftr-wordmark em { font-style: normal; color: #a13d2b; }
.smiley-afil-ftr-nombre { display: block; font-family: 'Poppins', sans-serif; font-size: 1.15rem; font-weight: 500; letter-spacing: 2px; color: #f6f1e7; margin-bottom: 10px; }
.smiley-afil-ftr-tagline { font-size: .85rem; color: #d9d0c2; margin: 0 0 18px; line-height: 1.5; max-width: 200px; }
.smiley-afil-ftr-redes { display: flex; gap: 12px; flex-wrap: wrap; }
.smiley-afil-ftr-redes a { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(246,241,231,.18); color: #d9d0c2; transition: color .2s ease, border-color .2s ease; }
.smiley-afil-ftr-redes a:hover { color: #e8b360; border-color: #e8b360; background: transparent; transform: none; }
.smiley-afil-ftr-redes svg { width: 16px; height: 16px; }
.smiley-afil-ftr-col h4 { font-family: 'Poppins', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #e8b360; margin: 0 0 14px; }
.smiley-afil-ftr-col ul { list-style: none; margin: 0; padding: 0; }
.smiley-afil-ftr-col li { margin: 0; }
.smiley-afil-ftr-col a { display: block; font-size: .88rem; color: #d9d0c2; text-decoration: none; margin-bottom: 9px; padding: 0; transition: color .15s ease; }
.smiley-afil-ftr-col a:hover { color: #e8b360; padding-left: 0; }
.smiley-afil-ftr-bottom { max-width: 1200px; margin: 0 auto; padding: 18px 0 0; border-top: 1px solid rgba(246,241,231,.1); text-align: center; }
.smiley-afil-ftr-bottom p { font-size: .8rem; color: #d9d0c2; margin: 0; }
@media (max-width: 900px) {
    .smiley-afil-ftr-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .smiley-afil-ftr-marca { grid-column: 1 / -1; text-align: center; }
    .smiley-afil-ftr-brandrow { justify-content: center; }
    .smiley-afil-ftr-tagline { max-width: none; }
    .smiley-afil-ftr-redes { justify-content: center; }
}
@media (max-width: 640px) {
    .smiley-afil-footer { padding: 36px 20px 22px; }
    .smiley-afil-ftr-grid { grid-template-columns: 1fr; gap: 22px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .smiley-afil-calc-frame, .smiley-afil-faq-frame, .smiley-afil-form-frame, .smiley-afil-ftr-redes a { transition: none; }
}


/* ========================================================================
   v2.2 — Ajustes de color
   ======================================================================== */
/* Calculadora: el resultado va en verde de marca, con texto claro */
.smiley-afil-calc-resultado { background: #2d6a4f; border-color: #2d6a4f; }
.smiley-afil-calc-resultado span { color: #e8f3ec; }
.smiley-afil-calc-resultado strong { color: #ffffff; }

/* Botones: verde de marca, hover ámbar. Se refuerza para ganarle al azul del tema. */
.smiley-affiliate-register .smiley-btn-primary,
.smiley-affiliate-register button[type="submit"].smiley-btn-primary,
.smiley-btn-secondary {
    background: #2d6a4f !important; color: #ffffff !important; border: 0 !important;
}
.smiley-affiliate-register .smiley-btn-primary:hover,
.smiley-affiliate-register button[type="submit"].smiley-btn-primary:hover,
.smiley-btn-secondary:hover {
    background: #fbbf24 !important; color: #222222 !important;
}


/* ========================================================================
   v2.3 — Calculadora, FAQ y formulario con el mismo lenguaje que las
   tarjetas (fondo blanco + línea de color de marca). Sin fondos tintados.
   ======================================================================== */
/* Calculadora: un solo color al centro y borde destacado con los colores de marca */
.smiley-afil-calc-frame {
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, #2d6a4f 0%, #2d6a4f 45%, #a13d2b 100%) border-box;
    border: 3px solid transparent; outline: 0; border-radius: 20px; padding: 20px;
    box-shadow: 0 6px 20px rgba(34,34,34,.06); transition: transform .3s ease, box-shadow .3s ease;
}
.smiley-afil-calc-frame:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(45,106,79,.22); }
.smiley-afil-calc-card, .smiley-afil-calc-frame:hover .smiley-afil-calc-card { background: transparent; border: 0; box-shadow: none; }

/* FAQ: tarjeta blanca con línea terracota arriba */
.smiley-afil-faq-frame {
    background: #fff; border: 1px solid var(--afil-borde); border-top: 5px solid var(--afil-rojo); outline: 0;
    border-radius: 18px; padding: 20px; box-shadow: 0 6px 20px rgba(34,34,34,.06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.smiley-afil-faq-frame:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(161,61,43,.20); }
.smiley-afil-faq-item { background: #fff; border-color: var(--afil-borde); }
.smiley-afil-faq-item:hover, .smiley-afil-faq-item[open] { border-color: var(--afil-rojo); box-shadow: 0 8px 22px rgba(161,61,43,.15); }

/* Formulario: tarjeta blanca con línea verde arriba */
.smiley-afil-form-frame {
    background: #fff; border: 1px solid var(--afil-borde); border-top: 5px solid var(--afil-verde); outline: 0;
    border-radius: 18px; padding: 24px 20px; box-shadow: 0 6px 20px rgba(34,34,34,.06);
    transition: transform .3s ease, box-shadow .3s ease;
}
.smiley-afil-form-frame:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(45,106,79,.20); }
.smiley-afil-form-frame .smiley-form-group input, .smiley-afil-form-frame .smiley-form-group select { background: #fff; }

/* Selector de documento: que no se corte el texto */
.smiley-form-group select { height: auto; min-height: 46px; line-height: 1.4; padding: 10px 14px; box-sizing: border-box; font-size: 14px; }

/* v2.5 — enlaces legales */
.smiley-afil-ftr-bottom a { color: #d9d0c2; text-decoration: underline; text-underline-offset: 2px; transition: color .15s ease; }
.smiley-afil-ftr-bottom a:hover { color: #e8b360; }
.smiley-afil-form-frame .smiley-form-group a { color: #2d6a4f; font-weight: 600; }
.smiley-afil-form-frame .smiley-form-group a:hover { color: #a13d2b; }

/* v2.5.1 — video del hero: llena el hero y deja visible la parte alta (rostro) al recortar */
.smiley-afil-hero-video { object-fit: cover; object-position: center 30%; }


/* ========================================================================
   v2.5.2 — Hero como el de los portales: más alto, texto pegado a la izquierda
   ======================================================================== */
.smiley-afil-hero { height: calc(88vh - 100px); min-height: 560px; max-height: 860px; justify-content: flex-start; align-items: flex-end; }
.smiley-afil-hero-video { object-fit: cover; object-position: center 8%; }
.smiley-afil-hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.16) 55%, rgba(0,0,0,0) 100%), linear-gradient(180deg, rgba(10,12,16,.02) 0%, rgba(10,10,10,.42) 100%); }
.smiley-afil-hero-content { width: auto; max-width: 680px; margin: 0 0 40px 0; padding: 0 clamp(20px, 5vw, 64px); text-align: left; box-sizing: border-box; }
.smiley-afil-hero-content h1 { font-size: clamp(2rem, 3.6vw, 3rem) !important; line-height: 1.12 !important; letter-spacing: -.01em; max-width: 640px; margin: 0 0 14px !important; color: #fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.smiley-afil-hero-content p { font-size: 1.1rem !important; line-height: 1.55 !important; max-width: 480px; margin: 0 0 24px !important; color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
@media (max-width: 760px) {
    .smiley-afil-hero { height: calc(78vh - 80px); min-height: 500px; }
    .smiley-afil-hero-video { object-position: 72% 8%; }
    .smiley-afil-hero-content { margin-bottom: 28px; }
}


/* ========================================================================
   v2.6 — Hero equilibrado, campos de calculadora con hover, responsive
   ======================================================================== */

/* ---------- Hero (escritorio) ---------- */
.smiley-afil-hero { height: calc(82vh - 100px); min-height: 520px; max-height: 820px; }   /* deja asomar la siguiente sección */
.smiley-afil-hero-content { max-width: 720px; }
.smiley-afil-hero-content h1 { font-size: clamp(1.9rem, 3.2vw, 2.7rem) !important; max-width: 700px; text-wrap: balance; }
.smiley-afil-hero-content p { text-wrap: pretty; }
.smiley-afil-hero-content h1 .smiley-afil-hero-resalte { color: #e8b360 !important; }

/* ---------- Footer: slogan con el color de los portales ---------- */
.smiley-afil-footer .smiley-afil-ftr-tagline { color: #d9d0c2 !important; }

/* ---------- Calculadora: campos con el mismo hover que el FAQ ---------- */
.smiley-afil-calc-row { background: #fff; border: 1px solid var(--afil-borde); border-radius: 12px; padding: 10px 14px; transition: border-color .3s ease, box-shadow .3s ease; }
.smiley-afil-calc-row:hover, .smiley-afil-calc-row:focus-within { border-color: var(--afil-rojo); box-shadow: 0 8px 22px rgba(161,61,43,.15); }
.smiley-afil-calc-input { border-color: var(--afil-borde); transition: border-color .25s ease, box-shadow .25s ease; }
.smiley-afil-calc-input:hover, .smiley-afil-calc-input:focus { border-color: var(--afil-rojo); box-shadow: 0 0 0 3px rgba(161,61,43,.14); outline: none; }

/* ---------- Responsive: nada debe ensanchar la página ---------- */
/* El tema puede poner los shortcodes en una columna que crece con su contenido:
   con min-width:0 cada sección se queda dentro del ancho de la pantalla. */
.smiley-afil-ps, .smiley-afil-nichos, .smiley-afil-como, .smiley-afil-pago, .smiley-afil-comis,
.smiley-afil-precios, .smiley-afil-demos, .smiley-afil-casos, .smiley-afil-garantias,
.smiley-afil-calc-section, .smiley-afil-faq-section, .smiley-affiliate-register, .smiley-afil-footer {
    min-width: 0; max-width: 100%; box-sizing: border-box;
}
.smiley-afil-ps-grid, .smiley-afil-pago-grid, .smiley-afil-tiers, .smiley-afil-planes-sup, .smiley-afil-casos-grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.smiley-afil-ps-grid, .smiley-afil-pago-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.smiley-afil-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.smiley-afil-planes-sup, .smiley-afil-casos-grid, .smiley-afil-doc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.smiley-afil-nichos-fila { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.smiley-afil-comis-tabla-wrap { max-width: 100%; width: 100%; }

@media (max-width: 900px) {
    .smiley-afil-ps-grid, .smiley-afil-pago-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .smiley-afil-planes-sup, .smiley-afil-doc-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .smiley-afil-pago, .smiley-afil-casos, .smiley-afil-comis, .smiley-afil-precios, .smiley-afil-nichos { padding: 40px 16px; }
    .smiley-afil-nichos h2, .smiley-afil-comis h2, .smiley-afil-precios h2, .smiley-afil-pago h2 { font-size: 24px; }
    .smiley-afil-tiers, .smiley-afil-nichos-fila { grid-template-columns: minmax(0, 1fr); }
    .smiley-afil-grupo { padding: 20px 16px; }
    .smiley-afil-doc { padding: 20px 16px; }
    .smiley-afil-doc-ejemplo .fila { flex-wrap: wrap; }

    /* Tabla de comisiones -> una tarjeta por plan (sin scroll horizontal) */
    .smiley-afil-comis-tabla-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .smiley-afil-comis-tabla, .smiley-afil-comis-tabla tbody, .smiley-afil-comis-tabla tr, .smiley-afil-comis-tabla td { display: block; width: 100%; box-sizing: border-box; }
    .smiley-afil-comis-tabla thead { display: none; }
    .smiley-afil-comis-tabla tr { background: #fff; border: 1px solid var(--afil-borde); border-top: 5px solid var(--afil-verde); border-radius: 16px; padding: 12px 16px; margin-bottom: 14px; box-shadow: 0 6px 20px rgba(34,34,34,.06); text-align: left; }
    .smiley-afil-comis-tabla td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; text-align: right; padding: 9px 0; border-top: 1px solid var(--afil-borde); white-space: normal; background: transparent !important; }
    .smiley-afil-comis-tabla td::before { content: attr(data-label); font-weight: 600; font-size: 12.5px; color: var(--afil-muted); text-align: left; }
    .smiley-afil-comis-tabla td.td-plan { border-top: 0; justify-content: flex-start; font-size: 15px; padding-top: 2px; }
    .smiley-afil-comis-tabla td.td-plan::before { display: none; }
    .smiley-afil-comis-tabla td.col-boleta::before { color: var(--afil-rojo); }
    .smiley-afil-comis-tabla td.col-factura::before { color: var(--afil-verde-osc); }
    .smiley-afil-comis-tabla td small { flex-basis: 100%; text-align: right; margin-top: 0; }
}
@media (max-width: 480px) {
    .smiley-afil-ps-grid, .smiley-afil-pago-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ========================================================================
   v2.7 — Footer: logo del header, redes y contacto con color; calculadora en verde
   ======================================================================== */
.smiley-afil-ftr-logopill { display: inline-block; background: #f6f1e7; border-radius: 10px; padding: 6px 12px; margin-bottom: 14px; line-height: 0; }
.smiley-afil-ftr-logo-full { height: 34px; width: auto; max-width: 180px; display: block; object-fit: contain; }
.smiley-afil-ftr-wordmark { color: #f6f1e7; font-weight: 600; letter-spacing: 1px; }
.smiley-afil-ftr-redes { margin-top: 2px; }
.smiley-afil-ftr-redes svg { width: 18px; height: 18px; }
.smiley-afil-ftr-col a .smiley-afil-ftr-ico { width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px; flex-shrink: 0; }
.smiley-afil-ftr-col a { display: flex; align-items: center; }
.smiley-afil-ftr-col a .ico-mail { color: #e8b360; }
.smiley-afil-ftr-col a .ico-wsp  { color: #25d366; }

/* Calculadora: resaltes en verde (hover y foco) */
.smiley-afil-calc-row:hover, .smiley-afil-calc-row:focus-within { border-color: var(--afil-verde); box-shadow: 0 8px 22px rgba(45,106,79,.18); }
.smiley-afil-calc-input:hover, .smiley-afil-calc-input:focus { border-color: var(--afil-verde); box-shadow: 0 0 0 3px rgba(45,106,79,.16); outline: none; }


/* v2.7.1 — Footer sin pastilla: logo claro directo sobre el fondo oscuro */
.smiley-afil-ftr-logofull { display: inline-block; margin-bottom: 14px; line-height: 0; background: none; padding: 0; }
.smiley-afil-ftr-logo-full { height: 36px; width: auto; max-width: 200px; display: block; object-fit: contain; }
.smiley-afil-ftr-wordmark { font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', 'Poppins', sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: 1.5px; color: #ffffff; text-transform: uppercase; line-height: 1; }
.smiley-afil-ftr-brandrow { gap: 10px; }


/* ========================================================================
   v2.8 — Footer: columna Legal, WhatsApp dorado, eslogan más cerca del logo
   ======================================================================== */
.smiley-afil-ftr-grid { grid-template-columns: 220px repeat(4, minmax(0, 1fr)); gap: 32px; }
.smiley-afil-ftr-col a { overflow-wrap: anywhere; }
.smiley-afil-ftr-col a .ico-wsp { color: #e8b360; }
.smiley-afil-ftr-logofull { margin-bottom: 4px; }
.smiley-afil-ftr-brandrow { margin-bottom: 4px; }
.smiley-afil-footer .smiley-afil-ftr-tagline { margin: 0 0 14px !important; line-height: 1.4; }
.smiley-afil-ftr-redes { margin-top: 0; }
@media (max-width: 1100px) { .smiley-afil-ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .smiley-afil-ftr-marca { grid-column: 1 / -1; } }
@media (max-width: 640px)  { .smiley-afil-ftr-grid { grid-template-columns: minmax(0, 1fr); } }


/* ========================================================================
   v2.8.1 — Mismo ancho para las secciones, tarjetas de pago = Cómo funciona,
   calculadora / FAQ / formulario con el estilo de tarjeta (línea arriba + borde en hover)
   ======================================================================== */
/* El ancho máximo había quedado anulado por la regla anti-desborde: se restablece */
.smiley-afil-como, .smiley-afil-pago, .smiley-afil-comis, .smiley-afil-precios, .smiley-afil-casos {
    width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto;
}
/* Tarjetas de "Cómo y cuándo se paga": mismas medidas que las de "Cómo funciona" */
.smiley-afil-pago-grid { gap: 24px; }
.smiley-afil-pago-item { padding: 28px 22px 24px; border: 2px solid #e5e7eb; border-radius: 16px; }
.smiley-afil-pago-item.destacado { border: 2px solid var(--afil-verde); }
.smiley-afil-pago-item:hover { transform: translateY(-6px) scale(1.02); }

/* Calculadora, FAQ y formulario: como la tarjeta Boleta/Factura */
.smiley-afil-calc-frame, .smiley-afil-faq-frame, .smiley-afil-form-frame {
    --c: var(--afil-verde); --c-sombra: rgba(45,106,79,.20);
    background: #fff; border: 1px solid var(--afil-borde); border-top: 5px solid var(--c);
    border-radius: 18px; outline: 0; padding: 24px 20px;
    box-shadow: 0 6px 20px rgba(34,34,34,.06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.smiley-afil-faq-frame { --c: var(--afil-rojo); --c-sombra: rgba(161,61,43,.20); }
.smiley-afil-calc-frame:hover, .smiley-afil-faq-frame:hover, .smiley-afil-form-frame:hover {
    transform: translateY(-6px); border-color: var(--c); box-shadow: 0 16px 36px var(--c-sombra);
}

/* Footer: el correo no se parte en dos líneas */
.smiley-afil-ftr-grid { grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(0, 1fr) minmax(235px, 1.35fr) minmax(0, 1fr); gap: 28px; }
.smiley-afil-ftr-col a[href^="mailto"] { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 1100px) { .smiley-afil-ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .smiley-afil-ftr-grid { grid-template-columns: minmax(0, 1fr); } .smiley-afil-ftr-col a[href^="mailto"] { white-space: normal; overflow-wrap: anywhere; } }


/* ========================================================================
   v2.8.2 — Fondos que separan las secciones (blanco / crema), FAQ en verde
   Crema = el mismo tono cálido del header y de los portales.
   ======================================================================== */
:root { --afil-fondo: #ffffff; --afil-fondo2: #f3eee3; --afil-borde: #e6dfd0; }

/* Secciones: blanco y crema se alternan (nichos, pago, comisiones, demos = crema) */
.smiley-afil-garantias { background: var(--afil-fondo); box-shadow: 0 0 0 100vmax var(--afil-fondo); }

/* Formulario de registro: franja crema a todo el ancho (así separa FAQ de Garantías) */
.smiley-affiliate-register {
    position: relative; clip-path: inset(0 -100vmax);
    background: var(--afil-fondo2); box-shadow: 0 0 0 100vmax var(--afil-fondo2);
    margin: 0 auto; padding: 56px 24px; max-width: 700px;
}

/* FAQ: verde, igual que las demás tarjetas */
.smiley-afil-faq-frame { --c: var(--afil-verde); --c-sombra: rgba(45,106,79,.20); }
.smiley-afil-faq-item:hover, .smiley-afil-faq-item[open] { border-color: var(--afil-verde); box-shadow: 0 8px 22px rgba(45,106,79,.15); }


/* ========================================================================
   v2.9 — Un solo registro para todos los portales
   ======================================================================== */
.smiley-afil-nicho-incluido { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--afil-borde); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--afil-verde); text-align: left; }
.smiley-afil-nicho-incluido span { flex: 0 0 20px; height: 20px; border-radius: 50%; background: var(--afil-verde); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.smiley-afil-nichos-cta { margin: 36px auto 0; max-width: 680px; text-align: center; }
.smiley-afil-nichos-cta p { font-family: 'Poppins', sans-serif; font-size: 1.05rem; font-weight: 500; color: var(--afil-txt); margin: 0 0 16px; }
.smiley-afil-nichos-cta-btn { display: inline-block; padding: 15px 36px; border-radius: 10px; background: var(--afil-verde); color: #fff !important; font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; text-decoration: none; box-shadow: 0 8px 22px rgba(45,106,79,.30); transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.smiley-afil-nichos-cta-btn:hover { background: var(--afil-ambar); color: #222 !important; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(251,191,36,.45); }
@media (max-width: 640px) { .smiley-afil-nichos-cta-btn { display: block; padding: 15px 20px; } }


/* ========================================================================
   v2.9.1 — Tarjetas de nichos sin botón: pie propio y alturas parejas
   ======================================================================== */
.smiley-afil-nichos-fila .smiley-afil-nicho-card { min-height: 0; overflow: hidden; }
/* El pie queda siempre al fondo de la tarjeta, a todo el ancho, como cierre de la tarjeta */
.smiley-afil-nicho-incluido {
    margin: auto -24px -24px; padding: 13px 24px;
    background: var(--afil-verde-claro); border-top: 1px solid #cfe5d8;
    font-size: 13px; font-weight: 600; color: var(--afil-verde-osc);
    transition: background .3s ease;
}
.smiley-afil-nicho-card > *:not(.smiley-afil-nicho-incluido):last-of-type { margin-bottom: 18px; }
.smiley-afil-nicho-card:hover .smiley-afil-nicho-incluido { background: #dcefe3; }
.smiley-afil-nicho-card.smiley-afil-nicho-corretaje .smiley-afil-nicho-incluido { background: var(--afil-rojo-claro); border-top-color: #f1d5cd; color: var(--afil-rojo); }
.smiley-afil-nicho-card.smiley-afil-nicho-corretaje .smiley-afil-nicho-incluido span { background: var(--afil-rojo); }
.smiley-afil-nicho-card.smiley-afil-nicho-corretaje:hover .smiley-afil-nicho-incluido { background: #f8e3dd; }

/* v2.9.2 — enlaces a los precios de cada portal */
.smiley-afil-comis-links { margin-top: 6px; }
.smiley-afil-comis-links a { color: var(--afil-verde); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; transition: color .2s ease; }
.smiley-afil-comis-links a:hover { color: var(--afil-rojo); }

/* ========================================
   v2.10 — Planes (Pro/Plus/Premium) y calculadora rediseñada
   ======================================== */
.smiley-afil-precios .smiley-afil-planes-una { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-left: auto; margin-right: auto; }
.smiley-afil-precios .smiley-afil-planes-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .smiley-afil-precios .smiley-afil-planes-tres { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-left: auto; margin-right: auto; } }
.smiley-afil-directo-nota { max-width: 760px; margin: 8px auto 0; padding: 16px 20px; border-radius: 14px; background: #fff8e6; border: 1px solid #f3dca6; font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 1.6; color: #5b4a1f; text-align: left; }
.smiley-afil-directo-nota strong { display: block; margin-bottom: 2px; color: #3d3213; }

/* Calculadora: filas con ícono, selector − n + y resultado destacado */
.smiley-afil-calc-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 10px; border-bottom: 0; }
.smiley-afil-calc-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--afil-verde-claro, #e8f3ec); display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.smiley-afil-calc-row label { font-size: 15px; line-height: 1.3; }
.smiley-afil-calc-row label span { margin-top: 2px; font-size: 12.5px; color: #64748b; }
.smiley-afil-calc-step { display: inline-flex; align-items: center; gap: 6px; }
.smiley-afil-calc-btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #cfe5d8; background: #fff; color: #2d6a4f; font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .15s ease, color .15s ease, transform .1s ease, border-color .15s ease; }
.smiley-afil-calc-btn:hover { background: #2d6a4f; color: #fff; border-color: #2d6a4f; }
.smiley-afil-calc-btn:active { transform: scale(.92); }
.smiley-afil-calc-input { width: 48px; padding: 6px 0; border: 0 !important; background: transparent; font-size: 20px; font-weight: 700; color: #1a202c; -moz-appearance: textfield; appearance: textfield; box-shadow: none !important; }
.smiley-afil-calc-input::-webkit-outer-spin-button, .smiley-afil-calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.smiley-afil-calc-resultado { margin-top: 18px; padding: 24px 20px; border-radius: 16px; background: linear-gradient(135deg, #2d6a4f 0%, #1f4d39 100%) !important; border: 0 !important; box-shadow: 0 10px 24px rgba(45,106,79,.28); }
.smiley-afil-calc-resultado strong { font-size: 44px; line-height: 1.1; letter-spacing: -.5px; color: #fff !important; }
.smiley-afil-calc-resultado span { color: #cfe5d8 !important; }
.smiley-afil-calc-resultado em { font-style: normal; font-family: 'Poppins', sans-serif; font-size: 13px; color: #e8f3ec; opacity: .9; }
@media (max-width: 480px) {
  .smiley-afil-calc-row { grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; }
  .smiley-afil-calc-ico { width: 40px; height: 40px; font-size: 20px; }
  .smiley-afil-calc-step { grid-column: 1 / -1; justify-content: flex-end; }
  .smiley-afil-calc-resultado strong { font-size: 36px; }
}

/* ========================================
   v2.10.1 — 5 tarjetas de nichos: mismo ancho y alto (2 arriba centradas + 3 abajo)
   ======================================== */
.smiley-afil-nichos-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 22px; max-width: 1150px; margin: 32px auto 22px; }
.smiley-afil-nichos-grid .smiley-afil-nicho-card { grid-column: span 2; width: auto; max-width: none; min-width: 0; min-height: 0; margin: 0; flex: none; }
.smiley-afil-nichos-grid .smiley-afil-nicho-card:nth-child(1) { grid-column: 2 / span 2; }
.smiley-afil-nichos-grid .smiley-afil-nicho-card:nth-child(2) { grid-column: 4 / span 2; }
@media (max-width: 900px) {
  .smiley-afil-nichos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smiley-afil-nichos-grid .smiley-afil-nicho-card, .smiley-afil-nichos-grid .smiley-afil-nicho-card:nth-child(1), .smiley-afil-nichos-grid .smiley-afil-nicho-card:nth-child(2) { grid-column: auto; }
  .smiley-afil-nichos-grid .smiley-afil-nicho-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 11px); justify-self: center; }
}
@media (max-width: 640px) {
  .smiley-afil-nichos-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; max-width: 440px; }
  .smiley-afil-nichos-grid .smiley-afil-nicho-card:last-child:nth-child(odd) { width: auto; grid-column: auto; justify-self: stretch; }
}
/* Línea de confianza sobre los botones de registro */
.smiley-afil-confianza { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #2d6a4f; margin: 0 0 14px !important; }
.smiley-afil-hero-content p.smiley-afil-nichos-grid .smiley-afil-nicho-card { box-sizing: border-box; }
@media (max-width: 900px) and (min-width: 641px) {
  .smiley-afil-nichos-grid .smiley-afil-nicho-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - 22px) / 2) !important; max-width: none !important; justify-self: center; }
}

/* v2.10.2 — Tarjetas de nichos: sin cortes en hover, menos padding, pie recortado por las esquinas redondeadas */
.smiley-afil-nichos-grid { padding: 8px 0 14px; margin-bottom: 14px; }
.smiley-afil-nichos-grid .smiley-afil-nicho-card { overflow: hidden; padding: 18px 20px 0; }
.smiley-afil-nichos-grid .smiley-afil-nicho-card > *:not(.smiley-afil-nicho-incluido):last-of-type { margin-bottom: 14px; }
.smiley-afil-nichos-grid .smiley-afil-nicho-incluido { margin: auto -20px 0; padding: 11px 20px; border-radius: 0; }
.smiley-afil-nichos-grid .smiley-afil-nicho-card:hover { transform: translateY(-4px); }