/* centrala-gratuita.css — Styles for /centrala-telefonica-gratuita/ */

/* Breadcrumb */
.breadcrumb { padding: var(--space-4) 0; font-size: var(--fs-sm); color: var(--color-gray-500); }
.breadcrumb a { color: var(--color-primary-light); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .breadcrumb-separator { margin: 0 var(--space-2); }

/* Hero Free variant */
.hero--free { padding: var(--space-20) 0 var(--space-16); background: linear-gradient(145deg, #0f172a 0%, #1e3a5f 35%, #1a365d 65%, #2d3748 100%); color: var(--color-white); position: relative; overflow: hidden; }
.hero--free .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }
.hero--free .eyebrow { color: var(--color-accent); margin-bottom: var(--space-4); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: 0.05em; text-transform: uppercase; }
.hero--free h1 { color: var(--color-white); margin-bottom: var(--space-6); font-size: var(--fs-5xl); line-height: var(--lh-tight); }
.hero--free .hero-description { color: rgba(255,255,255,0.8); font-size: var(--fs-lg); margin-bottom: var(--space-8); line-height: var(--lh-relaxed); }
.hero--free .hero-ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.hero--free .hero-checklist { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.hero--free .hero-checklist li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: rgba(255,255,255,0.85); }
.hero--free .hero-checklist svg { fill: var(--color-accent); flex-shrink: 0; }

/* Hero pricing card */
.hero-pricing-card { background: rgba(255,255,255,0.05); border: 2px solid var(--color-accent); border-radius: var(--radius-xl); padding: var(--space-8); backdrop-filter: blur(10px); }
.hero-pricing-card .pricing-badge { display: inline-block; background: var(--color-accent); color: var(--color-gray-900); font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); margin-bottom: var(--space-4); text-transform: uppercase; }
.hero-pricing-card .pricing-amount { font-size: var(--fs-6xl); font-weight: var(--fw-extrabold); color: var(--color-white); line-height: 1; }
.hero-pricing-card .pricing-period { font-size: var(--fs-sm); color: rgba(255,255,255,0.7); margin-bottom: var(--space-6); }
.hero-pricing-card .pricing-features { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.hero-pricing-card .pricing-features li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; font-size: var(--fs-sm); color: rgba(255,255,255,0.9); border-bottom: 1px solid rgba(255,255,255,0.1); }
.hero-pricing-card .pricing-features li:last-child { border-bottom: none; }
.hero-pricing-card .pricing-features svg { fill: var(--color-accent); flex-shrink: 0; }

@media (max-width: 768px) {
  .hero--free .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero--free .hero-ctas { justify-content: center; }
  .hero--free .hero-checklist { justify-content: center; }
}

/* Plan Details Grid */
.plan-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 768px) { .plan-details-grid { grid-template-columns: 1fr; } }

/* Feature Detail Card */
.feature-detail-card { background: var(--color-white); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-sm); border: 1px solid var(--color-gray-200); transition: all var(--transition-base); }
.feature-detail-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.feature-detail-card .card-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--color-gray-100); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.feature-detail-card .card-icon svg { width: 24px; height: 24px; fill: var(--color-primary-light); }
.feature-detail-card h3 { margin-bottom: var(--space-3); font-size: var(--fs-xl); color: var(--color-gray-800); }
.feature-detail-card p { font-size: var(--fs-base); color: var(--color-gray-600); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }

/* Highlighted full-width card */
.feature-detail-card--highlighted { grid-column: 1 / -1; border-color: var(--color-accent); border-width: 2px; background: linear-gradient(135deg, var(--color-white) 0%, #f0fdf9 100%); }

/* Quick Answer box */
.quick-answer { margin-top: var(--space-4); padding: var(--space-4) var(--space-6); border-left: 4px solid var(--color-accent); background: var(--color-gray-50); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.quick-answer strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-gray-800); margin-bottom: var(--space-2); }
.quick-answer p { font-size: var(--fs-sm); color: var(--color-gray-600); margin: 0; line-height: var(--lh-relaxed); }

/* Feature Note */
.feature-note { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-gray-50); border-left: 3px solid var(--color-primary-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-sm); color: var(--color-gray-600); }

/* IVR Flow diagram */
.ivr-flow { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.ivr-flow .ivr-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); min-width: 120px; text-align: center; }
.ivr-flow .ivr-step .step-number { width: 28px; height: 28px; border-radius: 50%; background: var(--color-accent); color: var(--color-white); font-size: var(--fs-xs); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; }
.ivr-flow .ivr-step span:last-child { font-size: var(--fs-xs); color: var(--color-gray-700); font-weight: var(--fw-medium); }
.ivr-flow .ivr-arrow { color: var(--color-gray-400); font-size: var(--fs-xl); }
@media (max-width: 600px) { .ivr-flow { flex-direction: column; } .ivr-flow .ivr-arrow { transform: rotate(90deg); } }

/* Section Contract */
.section-contract { background: var(--color-primary); color: var(--color-white); padding: var(--space-20) 0; }
.section-contract h2 { color: var(--color-white); }
.section-contract p { color: rgba(255,255,255,0.85); font-size: var(--fs-lg); line-height: var(--lh-relaxed); }
.section-contract .contract-icon { width: 64px; height: 64px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-6); }
.section-contract .contract-icon svg { width: 32px; height: 32px; fill: var(--color-accent); }

/* Audience Grid */
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 768px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-card { background: var(--color-white); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-sm); border: 1px solid var(--color-gray-200); transition: all var(--transition-base); }
.audience-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.audience-card .card-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--color-gray-100); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.audience-card .card-icon svg { width: 24px; height: 24px; fill: var(--color-primary-light); }
.audience-card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); color: var(--color-gray-800); }
.audience-card p { font-size: var(--fs-sm); color: var(--color-gray-600); line-height: var(--lh-relaxed); }

/* Limits Table */
.limits-table { width: 100%; border-collapse: collapse; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.limits-table thead { background: var(--color-gray-800); color: var(--color-white); }
.limits-table th { padding: var(--space-4) var(--space-6); text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.limits-table td { padding: var(--space-4) var(--space-6); font-size: var(--fs-sm); color: var(--color-gray-700); border-bottom: 1px solid var(--color-gray-100); }
.limits-table tbody tr:nth-child(even) { background: var(--color-gray-50); }
.limits-table tbody tr:hover { background: var(--color-gray-100); }
@media (max-width: 768px) { .limits-table { font-size: var(--fs-xs); } .limits-table th, .limits-table td { padding: var(--space-3); } }

/* Steps List (timeline) */
.steps-list { list-style: none; padding: 0; margin: 0; position: relative; max-width: 700px; margin: 0 auto; }
.steps-list::before { content: ''; position: absolute; left: 32px; top: 0; bottom: 0; width: 3px; background: var(--color-gray-200); border-radius: 2px; }
.step-item { display: flex; gap: var(--space-6); padding: var(--space-8) 0; position: relative; }
.step-item .step-number { width: 64px; height: 64px; min-width: 64px; border-radius: 50%; background: var(--color-primary); color: var(--color-white); font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.step-item .step-content h3 { font-size: var(--fs-xl); color: var(--color-gray-800); margin-bottom: var(--space-2); }
.step-item .step-content p { font-size: var(--fs-base); color: var(--color-gray-600); line-height: var(--lh-relaxed); }

/* Final CTA Green */
.section-final-cta--green { background: linear-gradient(135deg, var(--color-accent) 0%, #00a87e 100%); padding: var(--space-20) 0; color: var(--color-white); text-align: center; }
.section-final-cta--green h2 { color: var(--color-white); margin-bottom: var(--space-4); }
.section-final-cta--green p { color: rgba(255,255,255,0.9); font-size: var(--fs-lg); margin-bottom: var(--space-8); }
.section-final-cta--green .contact-info { margin-top: var(--space-6); font-size: var(--fs-base); color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.section-final-cta--green .contact-info svg { fill: var(--color-white); }

/* White button variant */
.btn--white { background: var(--color-white); color: var(--color-primary); font-weight: var(--fw-semibold); border: none; }
.btn--white:hover { background: var(--color-gray-100); transform: translateY(-2px); box-shadow: var(--shadow-lg); }