/* Summa Envíos · Estilos Unificados (UI/UX) v3.1 */
:root{
  --bg:#0b1220;
  --panel:#0e172a;
  --txt:#e6e9ef;
  --muted:#a6b0c3;
  --primary:#4fb06d;
  --accent:#6ca8ff;
  --card:#111a2f;
  --border:rgba(255,255,255,.08);
  --focus-ring:rgba(108,168,255,.5);
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --transition:all .2s ease-in-out;
  --bg-translucent:rgba(10,15,28,.6);
  --success:#7ee787;
  --danger:#ff9aa2;
}

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  margin:0;background:linear-gradient(180deg,#0a0f1c,#0c1730 60%,#0a0f1c);
  color:var(--txt);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--txt)}
a:focus-visible{outline:0;box-shadow:0 0 0 3px var(--focus-ring);border-radius:6px}
h1,h2,h3{margin:0;line-height:1.2;font-weight:700;text-rendering:optimizeLegibility}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Utilities */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}
.lead{font-size:1.15rem;color:var(--muted);max-width:65ch;margin:0 auto 1.5rem}
.muted{color:var(--muted)}
/* listas compactas globales */
.mini{color:var(--muted);padding-left:1.1rem;margin:.25rem 0}
.mini li{margin:.3rem 0}

/* Anchor offset para títulos con header sticky */
[id]{scroll-margin-top:90px}

/* --- Header --- */
.site-header{
  position:sticky;top:0;z-index:50;background:var(--bg-translucent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border)
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt);font-weight:800}
.brand img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.burger{all:unset;display:grid;gap:5px;cursor:pointer;padding:8px;border-radius:8px}
.burger span{width:24px;height:2px;background:var(--txt);border-radius:999px;transition:transform .3s ease,opacity .3s ease}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav{
  position:fixed;left:0;right:0;top:64px;height:calc(100dvh - 64px);
  background:rgba(10,15,28,.98);border-top:1px solid var(--border);
  display:flex;flex-direction:column;padding:24px;transform:translateY(-100%);
  opacity:0;visibility:hidden;transition:transform .3s ease,opacity .3s ease,visibility .3s;overflow:auto
}
.nav.is-open{transform:translateY(0);opacity:1;visibility:visible}
.nav a{padding:12px;border-radius:8px;font-weight:500;color:var(--txt)}
.nav a:hover{background-color:var(--border)}
.nav a:focus-visible{outline:0;box-shadow:0 0 0 3px var(--focus-ring)}
.nav a.btn{margin-top:16px;background:var(--primary);color:#04120a;text-align:center;font-weight:700}
.nav a.btn:hover{background:#63c884}

/* --- Hero --- */
.hero{padding:clamp(40px,10vh,80px) 0;text-align:center}
.hero .container{display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(32px,6vw,52px);margin-bottom:16px}
.hero .accent{color:var(--accent)}
.hero p{color:var(--muted);margin:0 0 16px;max-width:60ch;font-size:clamp(16px,2.5vw,18px)}

/* --- Buttons --- */
.btn{
  display:inline-block;padding:12px 24px;border-radius:999px;background:#1a2440;color:var(--txt);
  border:1px solid var(--border);font-weight:600;cursor:pointer;transition:var(--transition);outline:0;will-change:transform,box-shadow
}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.2);border-color:rgba(255,255,255,.2)}
.btn:focus-visible{box-shadow:0 0 0 3px var(--focus-ring)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--primary);color:#04120a;font-weight:800;border-color:var(--primary)}
.btn.primary:hover{background:#63c884;border-color:#63c884}
.btn.ghost{background:transparent}
.btn:disabled{background-color:rgba(0,0,0,.2);opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}

/* --- Sections & Cards --- */
.panel{padding:clamp(40px,8vh,70px) 0}
.panel.alt{background:radial-gradient(1200px 600px at 10% -10%, rgba(79,176,109,.08), transparent)}
h2{margin-bottom:24px;font-size:clamp(24px,5vw,32px)}
.grid-3,.grid-4{display:grid;gap:16px}
.grid-4{grid-template-columns:1fr}
.cards{padding:30px 0}
.card{
  background:linear-gradient(180deg,#0c1530,#0b142a);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.2);transition:var(--transition)
}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2);box-shadow:var(--shadow)}
.card h3{margin-bottom:8px;display:flex;align-items:center;gap:8px;font-size:1.05rem}
.card .price{margin:.25rem 0 .5rem;color:var(--txt)}
.card .price strong{font-size:1.25rem}

/* --- Forms --- */
.form{display:grid;gap:16px;max-width:650px}
.form.inline{grid-template-columns:1fr auto;gap:12px;align-items:end}
.row{display:grid;gap:16px}
.form-group label{display:grid;gap:8px;font-weight:600;font-size:.92rem}
input,select,textarea{
  background:#0d152b;border:1px solid var(--border);color:var(--txt);padding:14px;border-radius:var(--radius);
  outline:0;font-size:1rem;transition:var(--transition);width:100%
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
::placeholder{color:var(--muted);opacity:.8}
input[type="number"]{-moz-appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
select{
  appearance:none;-webkit-appearance:none;background-color:#0d152b;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a6b0c3' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px
}
input:disabled,select:disabled,textarea:disabled{background-color:rgba(0,0,0,.2);opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}
.note{color:var(--muted);font-size:.9rem;margin-top:8px}
.note.ok{color:var(--success)}
.note.err{color:var(--danger)}
.quote-result{margin-top:24px;padding:16px;border:1px dashed var(--border);border-radius:12px;background:#0c142a}

/* --- FAQ / Details --- */
details{border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,#0c1530,#0b142a);margin-bottom:12px;transition:var(--transition);overflow:hidden}
details[open]{box-shadow:var(--shadow);border-color:rgba(255,255,255,.2)}
summary{padding:16px;font-weight:600;cursor:pointer;list-style:none;position:relative;padding-right:40px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--muted);transition:transform .2s ease}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-content{padding:0 16px 16px;border-top:1px solid var(--border);color:var(--muted)}

/* --- Footer --- */
.site-footer{border-top:1px solid var(--border);padding:32px 0;color:var(--muted);text-align:center}
.site-footer .container{display:flex;flex-direction:column;gap:8px}
.legal a{color:var(--muted)}
.legal a:hover{color:var(--txt)}

/* --- Content pages (Términos, Privacidad, etc.) --- */
.text-page-hero{text-align:left;padding:clamp(2rem,5vh,3rem) 0}
.page-layout{display:flex;flex-direction:column;gap:1.5rem}
.page-content section:not(:last-child){padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border)}
.page-content h2{font-size:1.5rem;margin-bottom:.75rem;color:var(--primary)}
.sidebar-title{font-size:1.1rem;margin-bottom:.75rem;font-weight:600}
.toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.toc-list a{color:var(--muted);font-size:.9rem;padding:4px 8px;border-radius:6px}
.toc-list a:hover{color:var(--txt);background-color:var(--border)}
.toc-list a[aria-current="page"]{color:var(--primary);font-weight:600}

/* Specific components */
.quick-nav{margin-bottom:2.5rem;padding:.75rem 1.5rem;border-left:4px solid var(--primary)}
.quick-nav ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1rem}
.quick-nav a{font-weight:500;color:var(--txt);transition:color .2s}
.quick-nav a:hover{color:var(--primary);text-decoration:underline}

.process-timeline{position:relative;display:flex;flex-direction:column;gap:2rem}
.process-timeline::before{content:'';position:absolute;top:1.5rem;bottom:1.5rem;left:1.5rem;width:2px;background-color:var(--border);transform:translateX(-50%)}
.process-step{display:flex;gap:1.5rem;align-items:flex-start;position:relative}
.process-icon{flex-shrink:0;width:3rem;height:3rem;display:grid;place-items:center;border-radius:50%;background-color:var(--primary);color:#04120a;font-weight:800;z-index:1;border:4px solid var(--panel)}
.process-icon svg{width:1.5rem;height:1.5rem}
.process-content{flex-grow:1;padding-top:.5rem}
.process-content h2{margin-top:0}

.options-grid{margin-top:1rem;gap:1rem}
.options-grid .card{padding:1rem}

.callout{background-color:rgba(108,168,255,.08);border-left:4px solid var(--accent);padding:24px;border-radius:var(--radius);margin-top:2rem}
.callout .cta{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.75rem}

.icon-list{list-style:none;padding-left:0}
.icon-list li{padding-left:1.75rem;position:relative;margin-bottom:.75rem}
.icon-list li::before{position:absolute;left:0;top:2px;font-size:1rem}
#prohibidos .icon-list li::before{content:'❌'}
#restringidos .icon-list li::before{content:'⚠️'}
#consejos .icon-list li::before{content:'✅'}

/* --- Media queries --- */
@media (min-width:800px){
  .burger{display:none}
  .nav{position:static;height:auto;flex-direction:row;align-items:center;background:transparent;backdrop-filter:none;border:0;gap:12px;padding:0;transform:none;opacity:1;visibility:visible;overflow:visible}
  .nav a{padding:8px 12px}
  .nav a.btn{margin-top:0}
  .grid-3{grid-template-columns:repeat(3,1fr);gap:24px}
  .grid-4{grid-template-columns:repeat(4,1fr);gap:24px}
  .row{grid-template-columns:repeat(2,1fr)}
  .site-footer .container{flex-direction:row;justify-content:space-between}
}
@media (min-width:992px){
  .page-layout{display:grid;grid-template-columns:240px 1fr;gap:2.5rem;align-items:flex-start}
  .page-sidebar{position:sticky;top:100px}
}

/* Reduced motion preference */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
}
/* Estilos sugeridos para el grupo de checkbox de seguro */
.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #f9fafb;
  margin-bottom: 1rem;
}

.checkbox-group input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.2em;
}

.checkbox-group label {
  font-size: 0.95rem;
  line-height: 1.5;
}

.checkbox-group label small {
  display: block;
  opacity: 0.8;
  margin-top: 4px;
}

/* ===== HERO — botones grandes, mejor jerarquía ===== */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 500px; height: 500px;
  pointer-events: none;
  filter: blur(60px);
  opacity: .25;
  transform: translate3d(0,0,0);
}
.hero::before {
  background: radial-gradient(40% 40% at 50% 50%, rgba(108,168,255,.25), transparent 60%);
  top: -140px; right: -180px;
}
.hero::after {
  background: radial-gradient(40% 40% at 50% 50%, rgba(79,176,109,.25), transparent 60%);
  top: 40px; right: -80px;
}

.hero h1 {
  letter-spacing: -0.2px;
  font-weight: 900;
}

.hero-cta {
  --btn-h: 54px;
  --btn-r: 999px;
  --bd: var(--border);
}
.btn.btn-lg {
  min-height: var(--btn-h);
  padding: 14px 22px;
  font-size: 1.05rem;
  border-radius: var(--btn-r);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
  border: 1px solid var(--bd);
  transform: translateZ(0); /* evita jitter en hover */
}
.btn.btn-lg .icon { font-size: 1.15em; line-height: 0; }

.hero-primary {
  background: linear-gradient(180deg, #60c07c, #4fb06d);
  color: #04120a;
  border-color: rgba(0,0,0,.0);
  box-shadow: 0 14px 30px rgba(79,176,109,.28);
}
.hero-primary:hover { filter: brightness(1.03); transform: translateY(-2px); }

.hero-outline {
  background: rgba(255,255,255,.04);
  border-color: var(--border);
}
.hero-outline:hover { background: rgba(255,255,255,.07); transform: translateY(-2px); }

/* ===== COTIZADOR — tarjeta, inputs y resultado ===== */
#cotizar .container {
  display: grid;
  gap: 1rem;
}

/* Caja del formulario como tarjeta */
#quote-form {
  background: linear-gradient(180deg, #0c1530, #0b142a);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(16px, 3vw, 24px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Inputs alineados y cómodos */
#quote-form .row {
  grid-template-columns: 1fr;
}
#quote-form .form-group label {
  color: var(--muted);
}
#quote-form input,
#quote-form select {
  background: #0b142a;
  border-color: rgba(255,255,255,.12);
}
#quote-form input:hover,
#quote-form select:hover { border-color: rgba(255,255,255,.18); }
#quote-form input:focus,
#quote-form select:focus { border-color: var(--accent); }

/* Nota de seguro obligatorio */
#cotizar .note {
  background: rgba(108,168,255,.08);
  border-left: 4px solid var(--accent);
  padding: 10px 12px;
  border-radius: 12px;
}

/* Botón de calcular más protagónico */
#quote-form .btn.primary {
  width: 100%;
  min-height: 50px;
  font-size: 1.02rem;
  box-shadow: 0 10px 24px rgba(79,176,109,.25);
}

/* ===== Resultado del cotizador ===== */
.quote-result {
  background: linear-gradient(180deg, #0a1430, #0a1127);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 26px rgba(0,0,0,.2);
}
.quote-result.success { border-color: rgba(79,176,109,.35); }
.quote-result.error   { border-color: rgba(255,154,162,.55); }

/* Total destacado arriba */
.quote-result .total-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.quote-result .total-line span {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .2px;
}
.quote-result .total-line strong {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 900;
}

/* Desglose en 2 columnas responsivas (dt/dd) */
.breakdown-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: center;
  margin: 0;
}
.breakdown-list dt {
  color: var(--txt);
  font-weight: 600;
}
.breakdown-list dd {
  margin: 0;
  color: var(--txt);
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: .98;
}

/* Notas */
.quote-result .notes {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: .95rem;
}

/* ===== Ajustes de accesibilidad y estados ===== */
input.is-invalid {
  border-color: rgba(255,154,162,.8) !important;
  box-shadow: 0 0 0 3px rgba(255,154,162,.25) !important;
}

/* ===== Desktop tweaks ===== */
@media (min-width: 800px) {
  #quote-form .row {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-cta { justify-content: center; }
  .hero-cta .btn.btn-lg { min-width: 220px; }
}