:root{
  --bg:#172f3e; /* azul marino marca */
  --card:#12313b;
  --muted:rgba(255,255,255,0.8);
  --accent:#e3d043; /* amarillo marca */
  --accent-2:#d1c23f;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --max-width:1100px;
}
*{box-sizing:border-box}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
.body,body{font-family:Poppins,Inter,system-ui,-apple-system,'Segoe UI',Roberto,Arial;margin:0;background:linear-gradient(180deg,var(--bg) 0%, #0f2b36 100%);color:#ffffff;line-height:1.45}
.container{max-width:var(--max-width);margin:0 auto;padding:28px}
.hero{background:linear-gradient(90deg, rgba(96,165,250,0.08), rgba(110,231,183,0.04));padding:18px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.hero-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{flex:1;display:flex;align-items:center;justify-content:center;gap:16px;max-width:820px}
.brand-left{display:flex;align-items:center;gap:12px;justify-content:center}
.meta{min-width:220px;text-align:right}
.brand{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-left{display:flex;align-items:center;gap:12px}
.brand h1{margin:0;font-size:30px;font-weight:700;letter-spacing:0.6px}
.brand .tag{color:var(--muted);margin-top:4px;font-size:16px;font-weight:600;letter-spacing:0.3px}
.brand .tag{color:var(--muted);margin-top:6px;font-size:13px}
.logo{height:80px;width:auto;border-radius:8px}
.profile{height:84px;width:84px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.06)}
.meta p{margin:0;color:var(--muted)}

/* Phone highlight in header */
.meta .phone{color:var(--accent);font-weight:700;text-decoration:none}
.meta .phone:hover{text-decoration:underline}

/* Rallita amarilla decorativa bajo el título */
.brand-underline{height:6px;width:100%;max-width:420px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:8px;margin-top:10px;margin-left:auto;margin-right:auto;display:block}

@media(max-width:520px){
  .brand-underline{max-width:260px;height:5px;margin-top:8px}
}

.card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));padding:18px;border-radius:12px;margin-bottom:12px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 18px rgba(0,0,0,0.4)}
.grid .price-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.price{padding:12px 16px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.02);display:flex;justify-content:space-between;align-items:center}
.price h3{margin:0;font-size:15px;font-weight:600}
.price .amount{font-weight:700;font-size:18px;color:var(--accent)}

/* Asegurar que cualquier precio en listas o resúmenes aparezca en amarillo */
.combos strong,
.center-summary p strong,
.price .amount,
.center-summary .total strong,
.price-list .price .amount{color:var(--accent)}

.combos ul{margin:8px 0 12px 18px}

.details ul{margin-left:18px}
.web-options{display:grid;grid-template-columns:1fr;gap:10px}

.center-contact{padding:18px}
.center-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;justify-items:center}
.center-conditions ul{margin-left:18px}
.center-summary .selector label{display:flex;justify-content:space-between;align-items:center;margin:8px 0;padding:6px 8px;border-radius:8px}
.center-summary .total{font-size:18px;color:var(--accent);margin-top:8px}

/* Caja de resumen rápido para mantener el contenido dentro */
.summary-box{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.summary-box .price-range{margin:6px 0;font-size:15px}
.summary-box .payment-terms{margin:6px 0;color:var(--muted);font-size:14px}

/* Nueva sección de condiciones colocada después de main */
.conditions{margin-top:12px}
.conditions ul{margin-left:18px}

/* Ajustes para evitar overflow del texto y mantener los strong en amarillo */
.summary-box strong{color:var(--accent)}

.payment-terms{margin-top:10px;color:var(--muted);font-size:15px}
.payment-terms strong{color:var(--accent)}


/* precio inline (listas y textos) */
.price-inline{color:var(--accent);font-weight:700}

@media(max-width:899px){
  .center-grid{grid-template-columns:1fr}
}

.validity{margin-top:12px;padding:12px;border-left:4px solid var(--accent);background:rgba(255,255,255,0.01);color:var(--muted)}
.validity strong{color:var(--accent);font-weight:700}

/* estilos para inputs de cantidad y select en la calculadora */
.selector input[type="number"],[type="number"]{padding:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff}
.selector select{padding:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff}
/* Mejora de legibilidad al desplegar opciones: en foco mostramos fondo claro y texto oscuro */
.selector select:focus{background:#ffffff;color:#111;border-color:rgba(0,0,0,0.08);outline:none}
/* Forzar opciones legibles (la apariencia puede depender del navegador) */
.selector select option{background:#ffffff;color:#111}
/* En algunos navegadores móviles el color del option hereda; asegurar contraste */
.selector select::-ms-expand{display:inline-block}
.center-selector hr{border:none;border-top:1px solid rgba(255,255,255,0.04);margin:8px 0}

.extras ul{margin-left:18px}

/* Estilos para la sección summary-left (movida a la izquierda) */
.summary-left{
  display:block;
  margin: 0 0 18px 0;
  padding: 14px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.04);
}
.summary-left .selector label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:6px 4px;
}
.summary-left .selector h4{font-size:18px;margin:0 0 8px 0}
.summary-left .cta{justify-content:center}
.summary-left .price-inline{
  color: var(--accent);
  font-weight:700;
}
.summary-left .total{
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  padding:8px 10px;
  border-radius:8px;
  margin-top:10px;
  display:inline-block;
}
.summary-left .cta{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap}
.summary-left .cta .button{padding:12px 18px;border-radius:10px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,0.35);text-decoration:none}
.summary-left .cta .button.whatsapp{background:linear-gradient(90deg,#25D366,#1DA851);color:#fff;border:none}
.summary-left .cta .button.mail{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--bg);border:none}
.summary-left .cta .button:focus{outline:3px solid rgba(255,212,0,0.12)}

@media(max-width:899px){
  .summary-left .cta{flex-direction:column}
  .summary-left .cta .button{width:100%}
}
/* Botón WhatsApp: verde suave con icono emoji */
.button.whatsapp{background:linear-gradient(90deg,#25D366,#1DA851);color:#fff;border:none;font-weight:700}
.button.whatsapp:hover{filter:brightness(0.95)}
/* Botón mail: amarillo con texto oscuro */
.button.mail{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--bg);border:none;font-weight:700}
.button.mail:hover{filter:brightness(0.98)}

.sticky{position:sticky;top:20px}
.contact .cta .button{padding:12px 16px}

/* mejoras en móvil */
@media(max-width:520px){
  .container{padding:16px}
  .brand h1{font-size:20px}
  .price .amount{font-size:18px}
  .logo{height:64px}
  .profile{height:64px;width:64px}
    .brand .tag{font-size:14px}
}
.contact .cta{display:flex;gap:10px;margin-top:12px}
.button{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;color:var(--bg);background:var(--accent)}
.button.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--bg);font-weight:700}

.footer{padding:18px 0;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted);text-align:center}

/* Social links block */
.social-links{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:10px}
.social{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,0.02);text-decoration:none}
.social svg{display:block}
.social:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,0.3)}

/* Web link with visible text */
.web-link{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.02)}
.web-link .web-text{color:var(--muted);font-weight:600}
.web-link svg{width:20px;height:20px}
.web-link:hover{box-shadow:0 10px 24px rgba(0,0,0,0.35);transform:translateY(-3px)}
.footer-logo{height:46px;width:auto;display:block;margin:0 8px}
.social-links{gap:12px}
.small-web .small-footer-logo{height:38px;width:auto;display:block;border-radius:6px}
.small-web{display:inline-flex;align-items:center;justify-content:center;padding:6px;background:rgba(255,255,255,0.01);border-radius:8px}
.profile-footer-img{height:40px;width:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.04)}

/* footer layout: left web, center socials, right web */
.footer-row{display:flex;align-items:center;justify-content:center;gap:8px;max-width:980px;margin:12px auto}
.social-center{display:flex;gap:12px;align-items:center;justify-content:center}
.ig-center svg path { fill: #E1306C; }
.web-left,.web-right{flex:0 0 auto}

@media(min-width:900px){
  .hero-inner{padding:0 0}
  main{display:block}
  .web-options{grid-template-columns:1fr 1fr}
}

@media(max-width:899px){
  .hero-inner{flex-direction:column;align-items:flex-start}
  .sticky{position:static}
}

@media(max-width:899px){
  .center-grid{grid-template-columns:1fr}
  .summary-box{margin-bottom:8px}
}

/* pequeños detalles visuales */
h2{margin-top:0}
p,li{color:var(--muted)}
h3,h4{color:var(--accent)}
p,li{color:var(--muted)}

/* Títulos y textos en blanco; los precios se resaltan en amarillo */
h3,h4{color:#ffffff}
p,li{color:var(--muted)}

/* Asegurar que los títulos dentro de las tarjetas de precio sean blancos */
.price h3{color:#ffffff}
p,li{color:var(--muted)}

.benefits{display:block;text-align:center}
.benefits h3{margin-bottom:10px}
.benefit-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px;align-items:stretch;max-width:820px;width:100%;justify-items:center}
.benefit-list .b{display:flex;align-items:center;justify-content:center;min-height:110px;padding:14px 16px;border-radius:10px;background:rgba(255,255,255,0.03);text-align:center;color:#ffffff;font-weight:600;font-size:15px;line-height:1.25;border:1px solid rgba(255,255,255,0.04)}

.combos-inline{margin-top:8px}
.combos-inline label{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.combos-inline h4{margin:6px 0;color:#fff}

/* Sección central de features (centrada y visible) */
.center-features{margin:18px 0}
.center-features-inner{display:flex;gap:12px;justify-content:center;align-items:stretch;max-width:880px;margin:0 auto}
.center-features .feature{flex:1;padding:18px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));text-align:center;font-weight:700;border:1px solid rgba(255,255,255,0.04)}
@media(max-width:899px){
  .center-features-inner{flex-direction:column}
  .center-features .feature{width:100%}
}

/* Calculadora central grande (estilo verde) */
.calculator-center{background:linear-gradient(180deg, rgba(10,50,40,0.6), rgba(10,60,45,0.5));border-radius:14px;padding:18px;margin:12px 0;border:1px solid rgba(0,0,0,0.2)}
.calculator-inner{max-width:980px;margin:0 auto;color:#fff}
.calculator-inner h3{margin:0 0 6px 0;font-size:20px}
.calculator-inner .sub{color:rgba(255,255,255,0.85);margin-bottom:10px}
.calculator-grid{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.calc-options label{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.02);margin-bottom:8px}
.calc-controls{background:rgba(0,0,0,0.06);padding:12px;border-radius:10px}
.calc-controls .qty-row,.calc-controls .select-row{margin-bottom:10px}
.calc-controls .total{font-size:20px;color:var(--accent);margin-top:8px}
.calc-cta{display:flex;gap:10px;margin-top:12px;justify-content:center}
.calc-cta .button{padding:12px 18px;border-radius:10px;font-weight:800}

@media(max-width:899px){
  .calculator-grid{grid-template-columns:1fr}
  .calculator-inner{padding:8px}
}

/* Tabs */
.tabs{background:transparent;padding:8px 0}
.tab-buttons{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.tab-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}
.tab-btn.active{background:linear-gradient(90deg,#1e8f5a,#1da851);border-color:transparent}
.tab-panel{display:block}
.tab-panel.hidden{display:none}
.total-row{margin-top:12px;text-align:center;font-size:18px;color:var(--accent)}
.calc-cta .button.whatsapp{background:linear-gradient(90deg,#25D366,#1DA851);color:#fff;border:none}
.calc-cta .button.mail{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--bg);border:none}

/* Price tabs styles */
.price-tabs{max-width:980px;margin:12px auto}
.price-tab-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.price-tab-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:8px 12px;border-radius:8px;cursor:pointer}
.price-tab-btn.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.price-tab-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.price-tab-panel.hidden{display:none}
.price-tab-panel .price{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));}

@media(max-width:900px){
  .benefit-list{grid-template-columns:1fr}
  .benefit-list .b{min-height:80px;padding:10px 12px;font-size:14px}
}

/* Mostrar secciones principales de forma plana (sin tarjetas) para un look más limpio */
.prices.card,
.details.card,
.extras.card,
.conditions.card{background:transparent;border:none;box-shadow:none;padding:6px 0;margin-bottom:6px}

/* Countdown Timer Styles */
.countdown-wrap {
  text-align: center;
  margin-top: 12px;
}
.countdown-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  text-align: center;
}
.countdown {
  display: flex;
  justify-content: center;
  gap: 8px;
  background: rgba(0,0,0,0.1);
  padding: 8px 12px;
  border-radius: 10px;
}
.cd-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
}
.cd-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}
.cd-unit {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
}

/* Top countdown */
.countdown-wrap-top {

}

.countdown-wrap-top .countdown {
  gap: 6px;
  padding: 0;
  background: none;
}

.countdown-wrap-top .cd-num {
  font-size: 18px;
}

.countdown-wrap-top .cd-unit {
  font-size: 9px;
}

/* Validity text */
.validity-text {
  margin-top: 12px;
  padding: 12px;
  border-left: 4px solid var(--accent);
  background: rgba(255,255,255,0.01);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.validity-text strong {
  color: var(--accent);
  font-weight: 700;
}

.fa-linkedin {
    color: #0077b5;
}