:root{
  /* Paleta EVIA — Negro + Dorado.
     --oro-marca = dorado decorativo del logo (no usar en texto: contraste bajo).
     --accent    = dorado oscuro para texto/botones sobre blanco (contraste 4.6:1 ✓). */
  --lavanda:#F0DFA0; --oro-marca:#D4AF37; --carbon:#1C1A18; --nube:#FAF8F2;

  --ground:#FAF8F2; --surface:#FFFFFF; --surface-2:#F0E9D4;
  --ink:#1C1A18; --ink-2:#554838; --ink-3:#8A7A68; --line:#E0D4B8; --line-2:#C8B98A;
  --accent:#8B6914; --accent-ink:#FFFFFF; --accent-soft:#F5E8C0;
  --oro:#9A7B26; --oro-soft:#F7EDCC;
  --verde:#2F6F52; --verde-soft:#E2EFE8;
  --ambar:#96610F; --ambar-soft:#F8ECD8;
  --rojo:#A5342A; --rojo-soft:#F8E3E0;
  --shadow:0 1px 2px rgba(28,26,24,.04), 0 10px 28px -20px rgba(28,26,24,.35);
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#17150E; --surface:#201E16; --surface-2:#2A2820;
    --ink:#F5EED8; --ink-2:#C4A96A; --ink-3:#8A7A50; --line:#2E2C22; --line-2:#403E2E;
    --accent:#D4AF37; --accent-ink:#1A1500; --accent-soft:#2E2A08;
    --oro:#D4AF37; --oro-soft:#2A2508;
    --verde:#74C398; --verde-soft:#1C3329;
    --ambar:#E0A94E; --ambar-soft:#372A17;
    --rojo:#EC8175; --rojo-soft:#3A211E;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -20px rgba(0,0,0,.9);
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Archivo","Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:600; text-wrap:balance}
p{margin:0}
img{max-width:100%; display:block}

/* barra */
.barra{border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:20}
.barra-in{max-width:1180px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.marca{display:inline-flex; align-items:center; gap:8px}
.marca-texto{font-family:"Playfair Display",Georgia,serif; font-size:22px; font-weight:600; letter-spacing:-.01em}
.marca-texto .m1{color:var(--ink)}
.marca-texto .m2{color:var(--oro)}
.marca-texto.chica{font-size:16px}
.marca-logo{height:48px; width:auto}
.marca-logo.chica{height:32px}
.menu{display:flex; gap:4px; flex:1; flex-wrap:wrap}
.menu a{padding:7px 12px; border-radius:7px; font-size:14px; color:var(--ink-2)}
.menu a:hover{background:var(--surface-2); color:var(--ink)}
.menu a.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
.barra-der{display:flex; align-items:center; gap:8px}
.quien{font-size:13px; color:var(--ink-3)}
.en-linea{display:inline}

.hoja{max-width:1180px; margin:0 auto; padding:28px 20px 80px}
.hoja.angosta{max-width:560px}
.hoja.media{max-width:860px}
.pie{max-width:1180px; margin:0 auto; padding:20px; color:var(--ink-3); font-size:12.5px; border-top:1px solid var(--line)}

/* tipografia */
.titulo{font-family:"Playfair Display",Georgia,serif; font-size:clamp(26px,4vw,38px); line-height:1.08; letter-spacing:-.015em}
.titulo em{font-style:italic; color:var(--accent)}
.sub{color:var(--ink-2); margin-top:8px; max-width:62ch}
.eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
h2.seccion{font-family:"Playfair Display",Georgia,serif; font-size:22px; margin:32px 0 14px}
.nota{font-size:12.5px; color:var(--ink-3)}

/* piezas */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.acciones{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.entre{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}

.campo{display:flex; flex-direction:column; gap:5px; min-width:0}
.campo > span{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
input,select,textarea{
  font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:7px; padding:9px 11px; width:100%;
}
textarea{resize:vertical; line-height:1.45}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
input[type=file]{padding:7px; background:var(--surface-2)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.btn{
  display:inline-block; font:inherit; font-size:14px; font-weight:500; cursor:pointer;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-2);
  border-radius:7px; padding:9px 15px; text-align:center;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.pri{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.pri:hover{filter:brightness(1.08); color:var(--accent-ink)}
.btn.min{padding:6px 11px; font-size:13px}
.btn.ancho{width:100%; padding:12px}
.btn.borra{border-color:transparent; color:var(--ink-3); padding:5px 9px; font-size:12.5px}
.btn.borra:hover{color:var(--rojo); border-color:var(--rojo)}

.chip{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 10px;
  font-size:11.5px; font-weight:600; background:var(--surface-2); color:var(--ink-2)}
.chip.ok{background:var(--verde-soft); color:var(--verde)}
.chip.warn{background:var(--ambar-soft); color:var(--ambar)}
.chip.mal{background:var(--rojo-soft); color:var(--rojo)}
.chip.acc{background:var(--accent-soft); color:var(--accent)}

.aviso{border-radius:8px; padding:11px 14px; margin-bottom:16px; font-size:14px}
.aviso.error{background:var(--rojo-soft); color:var(--rojo)}
.aviso.ok{background:var(--verde-soft); color:var(--verde)}
.aviso.info{background:var(--ambar-soft); color:var(--ambar)}

.estrellas{color:var(--oro); letter-spacing:1px}
.estrellas .apagadas{color:var(--line-2)}

/* filtros */
.filtros{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); align-items:end;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:22px}

/* vitrina */
.vitrina{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .12s, border-color .12s}
.pcard:hover{transform:translateY(-2px); border-color:var(--accent)}
.pcard-img{aspect-ratio:4/3; background:var(--surface-2); overflow:hidden}
.pcard-img img{width:100%; height:100%; object-fit:cover}
.sin-foto{width:100%; height:100%; display:grid; place-items:center; color:var(--ink-3); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; background:var(--surface-2)}
.pcard-cuerpo{padding:13px 15px 15px; display:flex; flex-direction:column; gap:5px; flex:1}
.pcard-cat{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600}
.pcard b{font-size:16px}
.pcard-lema{font-size:13px; color:var(--ink-2); flex:1}
.pcard-pie{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px}
.precio{font-weight:600; font-variant-numeric:tabular-nums}
.precio small{font-weight:400; color:var(--ink-3)}

/* favoritos: el corazón va encima de la tarjeta, no adentro (un enlace no puede llevar un formulario) */
.pcard-env{position:relative; display:flex; scroll-margin-top:96px}
.pcard-env>.pcard{flex:1}
.fav-form{position:absolute; top:10px; right:10px; margin:0; transition:transform .12s}
.pcard-env:hover .fav-form{transform:translateY(-2px)}
.fav{width:40px; height:40px; padding:0; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .12s, color .12s, border-color .12s}
.fav:hover{color:var(--rojo); border-color:var(--rojo); transform:scale(1.07)}
.fav.on{color:var(--rojo); background:var(--rojo-soft); border-color:var(--rojo-soft)}
.fav-corazon{font-size:21px; line-height:1}
.fav:focus-visible, .fav-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fav-ficha{margin:0}
.fav-btn{display:inline-flex; align-items:center; gap:8px}
.fav-btn .fav-corazon{font-size:18px}
.fav-btn.on{color:var(--rojo); border-color:var(--rojo)}
@media (prefers-reduced-motion:reduce){ .pcard-env:hover .fav-form, .fav:hover{transform:none} }
.fav-giro{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* comparar lado a lado: una columna por proveedor, la de las etiquetas se queda fija al deslizar */
.cmp-env{margin-top:16px}
.cmp th, .cmp td{vertical-align:top; min-width:210px}
.cmp .cmp-eje{position:sticky; left:0; z-index:1; min-width:130px; width:130px; white-space:normal;
  background:var(--surface-2); border-right:1px solid var(--line)}
.cmp thead th.cmp-col{text-transform:none; letter-spacing:0; font-size:15px; font-weight:400; color:var(--ink);
  white-space:normal; padding:14px 13px}
.cmp .cmp-elegida{background:var(--accent-soft)}
.cmp-liga{display:block; margin-top:4px; font-size:12.5px; color:var(--accent)}
.cmp-liga:hover{text-decoration:underline}
.cmp-precio{display:block; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums}
.cmp-bien,.cmp-mal{font-size:12.5px; font-weight:600}
.cmp-bien{color:var(--verde)}
.cmp-mal{color:var(--rojo)}
.cmp-dif{font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.cmp-nada{color:var(--ink-3)}
.cmp-abrir{margin:12px 0 4px}

/* mis clientes: el embudo es una fila de columnas que se desliza de lado */
.embudo{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr); gap:12px;
  overflow-x:auto; padding-bottom:8px}
.embudo-col{background:var(--surface-2); border-radius:var(--r); padding:10px; display:flex;
  flex-direction:column; gap:8px; min-height:140px}
.embudo-col>header{display:flex; flex-direction:column; gap:1px; padding:2px 4px 6px}
.embudo-col>header b{font-size:13px}
.embudo-vacio{padding:4px}
.pros{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 11px;
  display:flex; flex-direction:column; gap:3px; box-shadow:var(--shadow)}
.pros-nombre{font-weight:600; color:var(--ink)}
.pros-nombre:hover{color:var(--accent)}
.pros-monto{font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums}
.pros-seg{font-size:12px; color:var(--ink-2)}
.pros-seg.warn{color:var(--ambar); font-weight:600}
.pros-seg.mal{color:var(--rojo); font-weight:600}
.pros form{margin-top:6px}
.pendientes{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.pasos-embudo{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px}
.pasos-embudo form{margin:0}
.paso-e{font:inherit; font-size:12.5px; border:1px solid var(--line-2); background:var(--surface);
  color:var(--ink-2); border-radius:999px; padding:5px 12px; cursor:pointer}
.paso-e:hover{border-color:var(--accent); color:var(--accent)}
.paso-e.hecho{background:var(--accent-soft); border-color:transparent; color:var(--accent)}
.paso-e.aqui{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; cursor:default}
.paso-e:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.cliente-cols{align-items:start}
.historial{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.historial li{border-left:2px solid var(--line-2); padding:2px 0 2px 12px; font-size:14px}
.historial li.sistema{color:var(--ink-3); font-size:13px}
.historial .cuando{display:block; font-size:11.5px; color:var(--ink-3)}
.cliente-ev{margin-top:14px}

/* invitación: el editor dentro del evento */
.inv-liga{margin-top:14px; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:13px}
.plantillas{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; margin-top:10px}
.plantilla{position:relative; display:flex; flex-direction:column; gap:6px; cursor:pointer}
.plantilla input{position:absolute; opacity:0; width:1px; height:1px}
.plantilla-muestra{height:84px; display:flex; align-items:center; justify-content:center; gap:10px;
  border:2px solid var(--line); border-radius:10px; background:var(--p-fondo); color:var(--p-tinta);
  font-family:"Playfair Display",Georgia,serif; font-size:26px}
.plantilla-muestra i{width:16px; height:16px; border-radius:50%; background:var(--p-acento)}
.plantilla:hover .plantilla-muestra{border-color:var(--line-2)}
.plantilla input:checked + .plantilla-muestra{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.plantilla input:focus-visible + .plantilla-muestra{outline:2px solid var(--accent); outline-offset:2px}
.plantilla-n{font-size:12.5px; text-align:center; color:var(--ink-2)}
.inv-minis{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0}
.inv-mini{width:112px}
.inv-mini img{width:112px; height:84px; object-fit:cover; border-radius:8px}
.inv-mini form{margin-top:4px}

/* paquetes en la ficha */
.paquetes{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.paquete{display:flex; flex-direction:column; gap:6px; padding:18px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.paquete.elegido{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.paquete h3{font-size:17px}
.paquete-precio{font-family:"Playfair Display",Georgia,serif; font-size:26px; font-variant-numeric:tabular-nums}
.paquete-precio small{font-family:"Archivo","Segoe UI",sans-serif; font-size:12.5px; color:var(--ink-3)}
.paquete-incluye{flex:1; margin:4px 0 0; padding-left:18px; font-size:13.5px; color:var(--ink-2)}
.paquete .btn{align-self:flex-start; margin-top:8px}

/* contratos: el documento es de papel, blanco en claro y en oscuro */
.contrato-cols{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:22px; align-items:start}
@media (max-width:920px){ .contrato-cols{grid-template-columns:1fr} }
.contrato{padding:44px 48px; background:#FFFFFF; color:#221F1B; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); font-family:Georgia,"Times New Roman",serif; font-size:15px; line-height:1.65}
.contrato h1{margin:6px 0 2px; font-family:"Playfair Display",Georgia,serif; font-size:27px; color:#221F1B}
.contrato h2{margin:28px 0 10px; padding-bottom:6px; border-bottom:1px solid #E7E1D8; font-family:"Archivo","Segoe UI",sans-serif;
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#6B6358}
.contrato-folio, .contrato-fecha, .contrato-nota{margin:0; font-family:"Archivo","Segoe UI",sans-serif; font-size:12.5px; color:#6B6358}
.contrato-folio{letter-spacing:.08em; text-transform:uppercase}
.contrato-partes{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.contrato-k{display:block; font-family:"Archivo","Segoe UI",sans-serif; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:#8A8176}
.contrato-partes p{margin-top:2px; font-size:14px; color:#4A443D}
.contrato-datos{display:grid; grid-template-columns:120px 1fr; gap:6px 14px; margin:0}
.contrato-datos dt{color:#6B6358}
.contrato-datos dd{margin:0}
.contrato-lista{margin:6px 0 0; padding-left:20px}
.contrato-pagos{width:100%; border-collapse:collapse; font-size:15px}
.contrato-pagos td{padding:8px 0; background:transparent; border-bottom:1px solid #E7E1D8; color:#221F1B}
.contrato-pagos td:last-child{text-align:right; font-variant-numeric:tabular-nums}
.contrato-pagos tr:last-child td{border-bottom:0; font-weight:700}
.contrato-nota{margin-top:10px}
.contrato-clausulas{margin:0; padding-left:20px}
.contrato-clausulas li{margin-bottom:8px}
.contrato-firmas{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:60px}
.contrato-firmas span{display:block; margin-bottom:6px; border-top:1px solid #221F1B}
.contrato-firmas p{margin:0; font-family:"Archivo","Segoe UI",sans-serif; font-size:12px; color:#6B6358}
@media (max-width:600px){
  .contrato{padding:26px 20px}
  .contrato-partes, .contrato-firmas{grid-template-columns:1fr}
}
@media print{
  .contrato-panel, .no-imprimir{display:none !important}
  .contrato-cols{display:block}
  .contrato{padding:0; border:0; box-shadow:none}
}

/* varias membresías en Mi cuenta */
.membresia + .membresia{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}

/* el equipo: permisos como casillas grandes */
.permisos{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px}
.permiso{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; cursor:pointer}
.permiso:hover{border-color:var(--line-2)}
.permiso:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.permiso input{width:auto; margin-top:3px; accent-color:var(--accent)}
.permiso b{display:block; font-size:14px}
.permiso small{display:block; margin-top:2px; font-size:12px; color:var(--ink-3)}
.quien small{font-size:11.5px; color:var(--ink-3)}

/* el candadito de un boton que todavia no trae su nivel */
.con-candado{font-size:12px; opacity:.75}

/* la IA organizadora */
.hallazgos{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.hallazgo{display:grid; grid-template-columns:130px 1fr; gap:10px; align-items:baseline; font-size:14px}
.hallazgo a{color:var(--accent); border-bottom:1px solid var(--line-2)}
@media (max-width:560px){ .hallazgo{grid-template-columns:1fr; gap:4px} }
.ia-texto{margin-top:12px; font-size:14.5px}
.ia-texto .lista:empty{display:none}
.ia-texto p{margin-top:8px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media print{
  .cmp-pie,.cmp-nota,.chips,a.btn.min{display:none !important}
  .cmp-env{overflow:visible; border-color:#ccc}
  .cmp .cmp-eje{position:static}
}

/* ficha */
.hero{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; align-items:start}
@media (max-width:820px){ .hero{grid-template-columns:1fr} }
.hero-foto{aspect-ratio:16/10; border-radius:var(--r); overflow:hidden; background:var(--surface-2); border:1px solid var(--line)}
.hero-foto img{width:100%; height:100%; object-fit:cover}
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; margin-top:10px}
.gal{position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2)}
.gal img{width:100%; height:100%; object-fit:cover}
.gal form{position:absolute; top:4px; right:4px}
.gal .marca-portada{position:absolute; bottom:4px; left:4px; background:var(--accent); color:var(--accent-ink);
  font-size:10px; padding:2px 6px; border-radius:99px; font-weight:600}
.gal .btn{padding:2px 7px; font-size:11px; background:rgba(0,0,0,.55); color:#fff; border-color:transparent}

.dato{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.dato:last-child{border-bottom:0}
.dato b{font-weight:600; text-align:right}
.dato span{color:var(--ink-2)}

.msg{border:1px solid var(--line); border-radius:10px; padding:11px 14px; margin-bottom:10px; background:var(--surface)}
.msg.prov{background:var(--accent-soft); border-color:transparent}
.msg .quien-msg{font-size:12px; color:var(--ink-3); margin-bottom:3px}

.tabla-env{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:14px}
th{text-align:left; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; padding:11px 13px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:10px 13px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 17px;
  display:flex; flex-direction:column; gap:3px; box-shadow:var(--shadow)}
.tile .k{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.tile .v{font-family:"Playfair Display",Georgia,serif; font-size:27px; font-variant-numeric:tabular-nums}
.tile .d{font-size:12.5px; color:var(--ink-2)}

.vacio{background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--r);
  padding:34px 24px; text-align:center; color:var(--ink-2)}

.puertas{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:22px}
.puerta{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px}
.puerta b{font-size:17px}
.puerta p{font-size:13.5px; color:var(--ink-2); flex:1}

@media (prefers-reduced-motion:reduce){ .pcard:hover{transform:none} }

/* ===================================================== dentro de un evento */
.ev-cab{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.cuenta{text-align:right}
.cuenta .n{font-family:"Playfair Display",Georgia,serif; font-size:40px; line-height:1;
  color:var(--accent); font-variant-numeric:tabular-nums}
.cuenta .l{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600}

.subnav{display:flex; gap:2px; overflow-x:auto; margin:18px 0 4px; padding-bottom:2px;
  border-bottom:1px solid var(--line)}
.subnav a{display:flex; align-items:baseline; gap:7px; padding:9px 13px 11px; white-space:nowrap;
  color:var(--ink-2); border-bottom:2px solid transparent; border-radius:6px 6px 0 0; font-size:14px}
.subnav a:hover{background:var(--surface-2); color:var(--ink)}
.subnav a.on{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}
.subnav .num{font-family:"Playfair Display",Georgia,serif; font-size:12px; color:var(--ink-3)}
.subnav a.on .num{color:var(--accent)}

/* rubros y cotizaciones */
.rubro{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow)}
.rubro-cab{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:13px 16px; border-bottom:1px solid var(--line)}
.rubro-cab h3{flex:1 1 180px; font-size:15.5px}
.cifras{display:flex; gap:16px; font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; flex-wrap:wrap}
.cifras b{color:var(--ink); font-weight:600}
.rubro-cuerpo{padding:4px 16px}
.coti{padding:14px 0; border-bottom:1px dashed var(--line); display:flex; flex-direction:column; gap:10px}
.coti:last-child{border-bottom:0}
.coti.elegida{background:var(--accent-soft); border-radius:8px; padding:14px 12px; margin:8px -12px}
.coti-l1{display:grid; gap:10px; grid-template-columns:minmax(150px,1.4fr) minmax(140px,1fr) 150px 90px 80px; align-items:end}
.coti-l2{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
@media (max-width:760px){ .coti-l1{grid-template-columns:1fr 1fr} }

/* cronograma */
.crono{display:flex; flex-direction:column}
.crono-fila{display:grid; grid-template-columns:66px 12px 1fr; gap:12px; align-items:start;
  padding:11px 0; border-bottom:1px solid var(--line)}
.crono-fila:last-child{border-bottom:0}
.crono-h{font-family:"Playfair Display",Georgia,serif; font-size:16px; font-variant-numeric:tabular-nums; padding-top:1px}
.crono-eje{position:relative; align-self:stretch; display:flex; justify-content:center}
.crono-eje::before{content:""; width:1px; background:var(--line-2); position:absolute; top:0; bottom:-11px}
.crono-eje::after{content:""; width:9px; height:9px; border-radius:50%; background:var(--surface);
  border:2px solid var(--line-2); position:relative; top:5px}
.crono-fila.hito .crono-h{color:var(--accent)}
.crono-fila.hito .crono-eje::after{border-color:var(--accent); background:var(--accent)}
.crono-t{display:flex; flex-direction:column; gap:3px; min-width:0}
.crono-t b{font-weight:600; font-size:14.5px}
.crono-t small{color:var(--ink-2); font-size:12.5px}
td.hora{font-family:"Playfair Display",Georgia,serif; font-size:15px}

/* mesas */
.mesas{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.mesa{border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--surface)}
.mesa b{display:block; font-size:13px}
.mesa .ocu{font-family:"Playfair Display",Georgia,serif; font-size:22px; font-variant-numeric:tabular-nums; display:block}
.mesa.lleno{border-color:var(--ambar)}
.mesa.exceso{border-color:var(--rojo); background:var(--rojo-soft)}

/* listas con casilla */
.check{display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px}
.check:last-child{border-bottom:0}
.check input[type=checkbox]{width:16px; height:16px; margin:3px 0 0; flex:none; accent-color:var(--accent)}
.check span{flex:1}
.check.hecho span{color:var(--ink-3); text-decoration:line-through}

.mes .mes-cab{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-bottom:4px;
  border-bottom:2px solid var(--accent); margin-bottom:6px}
.mes-cab .m{font-family:"Playfair Display",Georgia,serif; font-size:17px; text-transform:capitalize; white-space:nowrap}
.mes-cab .r{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; white-space:nowrap}
.card.plano{box-shadow:none}

ul.lista{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px;
  font-size:13.5px; color:var(--ink-2)}
ul.lista li::marker{color:var(--accent)}
details > summary{cursor:pointer; list-style:none; padding:11px 16px; font-size:12.5px;
  font-weight:600; color:var(--accent); display:flex; align-items:center; gap:7px}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"+"; font-family:"Playfair Display",Georgia,serif; font-size:15px; line-height:1}
details[open] > summary::before{content:"–"}
details > ul.lista, details > div{padding:0 16px 16px}

table input[type=text],table input[type=number],table input[type=date],table input[type=time],table select{
  padding:6px 8px; border-color:transparent; background:transparent}
table input:hover,table select:hover{border-color:var(--line-2)}
table input[type=number]{text-align:right; min-width:64px}
/* Que los campos de las tablas no se encojan hasta volverse ilegibles.
   La tabla ya se desliza de lado cuando no cabe. */
table input[type=text]{min-width:150px}
table input[type=date],table input[type=time]{min-width:120px}
table select{min-width:120px}
table input[type=checkbox]{width:auto; accent-color:var(--accent)}

@media print{
  .barra,.subnav,.acciones,.pie,form button{display:none !important}
  body{background:#fff}
  .card{box-shadow:none; border-color:#ccc}
}


/* ------------------------------------------------------------------ marca EVIA */
.lema{font-family:"Playfair Display",Georgia,serif; font-size:19px; margin-top:10px; letter-spacing:.01em}
.lema .uno{color:var(--accent)}
.lema .dos{color:var(--ink)}
.lema .tres{color:var(--oro)}

.pie{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.lema-pie{color:var(--ink-3)}

/* Un destello discreto arriba de la página, con los colores del logo. */
.barra{
  background:
    linear-gradient(90deg, var(--lavanda), var(--oro-marca) 55%, var(--lavanda)) top/100% 3px no-repeat,
    var(--surface);
}
.titulo em{font-style:italic; color:var(--accent)}
.estrellas{color:var(--oro)}
.chip.acc{background:var(--accent-soft); color:var(--accent)}

/* Campo trampa para robots: invisible para las personas. */
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.card.destacada{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--shadow)}
.solicitud{border:1px solid var(--line); border-radius:var(--r); padding:16px; background:var(--surface);
  margin-bottom:12px; box-shadow:var(--shadow)}
.solicitud.nueva{border-color:var(--accent)}
.solicitud-cab{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.solicitud-cab b{font-size:16px}
.solicitud-datos{display:flex; gap:16px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-2);
  margin:8px 0; padding:8px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.solicitud-datos b{color:var(--ink)}

/* El selector de archivos no tiene por que estirarse a todo lo ancho. */
input[type=file]{max-width:360px}

/* --- domicilio por codigo postal --- */
.con-boton{display:flex; gap:8px; align-items:flex-end}
.con-boton .campo{flex:1}
.con-boton .btn{margin-bottom:12px}

.hallazgo{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin:4px 0 6px}
.hallazgo .k{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}

select.lista-larga{height:auto; padding:6px}
select.lista-larga option{padding:5px 7px; border-radius:5px}

.casillas-caja{max-height:260px; overflow-y:auto; border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; background:var(--surface-2);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:2px 14px}
.casilla{display:flex; align-items:center; gap:8px; padding:5px 2px; font-size:14px;
  color:var(--ink-2); cursor:pointer}
.casilla:hover{color:var(--ink)}
.casilla input{width:16px; height:16px; margin:0; flex:none; accent-color:var(--accent)}
.sucursal{padding:12px 0; border-bottom:1px solid var(--line)}
.sucursal:last-child{border-bottom:0}
.sucursal p{margin-top:5px; color:var(--ink-2); font-size:14px}

/* --- mapas --- */
.mapa{height:340px; border-radius:12px; border:1px solid var(--line); overflow:hidden;
  background:var(--surface-2); z-index:0}
.mapa-chico{height:260px}
.mapa-falla{display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); font-size:14px}
.pin{display:block; width:22px; height:22px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); background:var(--accent);
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pin-pri{background:var(--oro-marca)}
.leaflet-container{font:inherit; background:var(--surface-2)}
.leaflet-popup-content{font-size:14px; line-height:1.45; color:#2B2B33}
.leaflet-popup-content b{color:#2B2B33}

/* --- niveles --- */
.chip-plan{display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:999px;
  padding:3px 11px; font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--ink-2);
  text-transform:uppercase}
.chip-plan:hover{border-color:var(--accent); color:var(--accent)}
.chip-plan.acc{background:var(--oro-soft); border-color:transparent; color:var(--oro)}
.pie-liga{color:var(--ink-3); border-bottom:1px solid var(--line-2)}
.pie-liga:hover{color:var(--accent); border-color:var(--accent)}

/* Pestanas de verdad: un solo renglon, las tres a la vista. Antes eran tres
   tarjetones apilados y en el telefono parecian tres botones sueltos. */
.pestanas{display:flex; gap:4px; margin-top:22px; padding:4px;
  background:var(--surface-2); border-radius:12px}
.pestana{flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center;
  gap:7px; padding:10px 8px; border-radius:9px; font-size:14px; font-weight:600;
  color:var(--ink-2); text-align:center; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.pestana:hover{color:var(--ink)}
.pestana.on{background:var(--surface); color:var(--accent); box-shadow:var(--shadow)}
.pestana-n{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:19px; height:19px; border-radius:50%; background:var(--line-2); color:var(--surface);
  font-size:11px; font-weight:700}
.pestana.on .pestana-n{background:var(--accent); color:var(--accent-ink)}

.pestana-cab{display:flex; flex-direction:column-reverse; gap:3px; margin-top:24px}
.pestana-cab h2{font-family:"Playfair Display",Georgia,serif; font-size:25px; line-height:1.15}

/* Atras y siguiente, para pasearse por los tres publicos. */
.pasar{display:flex; gap:10px; margin-top:26px}
.pasar-hueco{flex:1}
.pasar .btn{flex:1; display:flex; align-items:center; gap:10px; padding:12px 15px; text-align:left}
.pasar-d{justify-content:flex-end; text-align:right}
.pasar .f{font-size:17px; color:var(--accent); flex:none}
.pasar .t{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.pasar .t small{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600}

.planes{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:20px}
.plan{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 20px 20px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.plan.destacado{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--shadow)}
.plan.mio{border-color:var(--oro-marca)}
.plan-cinta{position:absolute; top:-10px; left:20px; background:var(--accent); color:var(--accent-ink);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  padding:3px 10px; border-radius:999px}
.plan h3{font-family:"Playfair Display",Georgia,serif; font-size:21px; font-weight:600}

.plan-lema{color:var(--ink-2); font-size:13.5px; margin-top:6px}
.plan-lista{list-style:none; margin-top:6px; padding-left:0; display:flex;
  flex-direction:column; gap:7px; flex:1}
.plan-lista li{font-size:13.5px; color:var(--ink-2); padding-left:18px; position:relative}
.plan-lista li::before{content:""; position:absolute; left:2px; top:7px; width:7px; height:7px;
  border-radius:50%; background:var(--accent)}
.plan-lista li b{color:var(--ink)}
.plan-pie{margin-top:16px}

.tabla-planes td:first-child{max-width:340px}
.tabla-planes td:first-child .nota{margin-top:3px}
.tabla-planes .celda-si{color:var(--ink); font-weight:600}
.tabla-planes .celda-no{color:var(--line-2)}
.tabla-planes tr.pronto td:first-child b{color:var(--ink-2)}

.candado{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface-2);
  padding:18px 20px; margin:14px 0}
.candado-txt{flex:1 1 260px}
.candado-txt b{display:block; font-size:16px; margin-top:3px}
.candado-txt p{font-size:13.5px; color:var(--ink-2); margin-top:5px}
.candado-txt .nota{margin-top:6px}
.candado-txt .nota b{display:inline; font-size:inherit; color:var(--accent)}

.medidores{display:flex; flex-direction:column; gap:12px; margin-top:16px;
  border-top:1px solid var(--line); padding-top:16px}
.medidor-cab{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--ink-2)}
.medidor-cab b{font-variant-numeric:tabular-nums; color:var(--ink)}
.medidor-barra{height:6px; border-radius:999px; background:var(--surface-2); margin-top:5px; overflow:hidden}
.medidor-barra span{display:block; height:100%; background:var(--accent); border-radius:999px}
.medidor.lleno .medidor-barra span{background:var(--ambar)}
.medidor.lleno .medidor-cab b{color:var(--ambar)}
.medidor .nota{margin-top:6px}
.medidor .nota a{color:var(--accent); border-bottom:1px solid var(--line-2)}

.fila-plan{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.fila-plan select{width:auto; min-width:132px; flex:0 1 auto}
.fila-plan input[type=number]{width:82px}
.nivel-nota{margin-top:10px}
.nivel-nota a{color:var(--accent); border-bottom:1px solid var(--line-2)}
.pcard-dest{color:var(--oro); background:var(--oro-soft); border-radius:999px; padding:1px 7px;
  font-size:9.5px; letter-spacing:.1em; margin-left:4px}
.marca-pronto{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ambar);
  background:var(--ambar-soft); border-radius:999px; padding:1px 7px; margin-left:4px}

/* --- entrar con Google o Apple --- */
.sociales{display:flex; flex-direction:column; gap:9px; margin-bottom:18px}
.btn.social{justify-content:center; padding:11px 14px; font-size:14.5px; gap:9px; width:100%}
.social-g{font-family:"Playfair Display",Georgia,serif; font-weight:700; font-size:16px;
  color:var(--accent); line-height:1}
.social-a{font-size:16px; line-height:1; color:var(--ink)}
.o-bien{display:flex; align-items:center; gap:12px; color:var(--ink-3); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px}
.o-bien::before, .o-bien::after{content:""; height:1px; background:var(--line); flex:1}

/* --- bienvenida (cuando el directorio esta cerrado) --- */
.portada{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:34px 30px; box-shadow:var(--shadow)}
.portada .titulo{font-size:clamp(30px,5vw,44px)}
.portada .lema{margin-top:12px}
.pastillas{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.pastilla{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
  border-radius:999px; padding:5px 12px; font-size:13px; color:var(--ink-2); background:var(--surface)}
.pastilla b{font-variant-numeric:tabular-nums; color:var(--accent)}

/* --- precio de apertura --- */


.aviso-texto{margin-top:9px; font-size:13.5px; color:var(--ink-2); line-height:1.5}
.codigo{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; letter-spacing:.04em}

/* --- pantallas por pasos --- */
.pasos{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.pasos-puntos{display:flex; gap:5px}
.paso{width:22px; height:4px; border-radius:999px; background:var(--line-2)}
.paso.ahora{background:var(--accent)}
.paso.hecho{background:var(--accent-soft)}
.pasos-txt{font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600}
.elegido{display:inline-flex; align-items:center; gap:10px; background:var(--accent-soft);
  border-radius:999px; padding:6px 8px 6px 14px; font-size:13px; color:var(--accent); font-weight:600}
.elegido a{font-size:12px; font-weight:400; color:var(--accent); background:var(--surface);
  border-radius:999px; padding:3px 10px}
.elegido a:hover{background:var(--surface-2)}
.puerta .chip.acc{align-self:flex-start}

/* --- desplegable grande, para lo que no cabe en una pantalla --- */
details.desplegable{border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  box-shadow:var(--shadow); overflow:hidden}
details.desplegable > summary{padding:16px 18px; font-size:15px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:10px; letter-spacing:0; text-transform:none}
details.desplegable > summary::before{content:"+"; color:var(--accent); font-size:19px; width:16px}
details.desplegable[open] > summary::before{content:"–"}
details.desplegable[open] > summary{border-bottom:1px solid var(--line)}
details.desplegable > div{padding:16px 18px 18px}
details.desplegable + details.desplegable{margin-top:10px}
details.desplegable > summary .resumen{margin-left:auto; font-size:12.5px; font-weight:400;
  color:var(--ink-3); text-align:right}
details.desplegable.mes > summary{gap:10px; flex-wrap:wrap}
details.desplegable.mes > summary .m{font-family:"Playfair Display",Georgia,serif; font-size:17px;
  text-transform:capitalize; white-space:nowrap; font-weight:600}
details.desplegable.mes > summary .r{font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600}
details.desplegable.mes > div{padding:6px 18px 14px}
details.desplegable.rubro > summary{flex-wrap:wrap; gap:8px 12px}
details.desplegable.rubro > summary .rubro-n{font-size:15.5px}
details.desplegable.rubro > summary .rubro-r{font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600}
details.desplegable.rubro > summary .cifras{margin-left:auto; font-weight:400}
details.desplegable.rubro > div{padding:0 18px 10px}

/* --------------------------------------------------------------- celular */
/*
 * En un telefono el menu se partia en cuatro renglones y se comia un tercio
 * de la primera pantalla EN TODAS las paginas. Aqui queda en un solo renglon
 * que se desliza con el dedo, como las pestanas de adentro del evento.
 */
@media (max-width:700px){
  .barra-in{padding:9px 14px; gap:10px; row-gap:8px}
  .marca-texto{font-size:19px}
  .marca-logo{height:36px}

  .menu{order:3; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; gap:2px;
    margin:0 -14px; padding:2px 14px; scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .menu::-webkit-scrollbar{display:none}
  .menu a{white-space:nowrap; padding:6px 11px}

  .barra-der{margin-left:auto; gap:6px}
  .quien{display:none}          /* su nombre ya lo sabe; ocupa lugar de mas */

  .hoja{padding:20px 14px 60px}
  h2.seccion{margin:26px 0 12px; font-size:20px}
  .card{padding:16px}
  .portada{padding:24px 18px}

  /* Los botones grandes se agarran mejor con el pulgar. */
  .btn{padding:10px 14px}
  .acciones .btn.pri{flex:1 1 auto; justify-content:center}

  /* Los recuadros de numeros caben de dos en dos; de uno en uno se hacen
     una torre y hay que bajarle para ver cuatro cifras. */
  .grid.g3, .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .tile{padding:12px 13px}
  .tile .v{font-size:23px}
  .tile .k{font-size:10px; letter-spacing:.08em}
  .tile .d{font-size:11.5px}

  /* Las puertas del registro, mas compactas. */
  .puertas{gap:10px}
  .puerta{padding:16px}
  .puerta p{font-size:13px}

  /* El boton de cada nivel, de lado a lado: es LA accion de esa tarjeta. */
  .plan-pie .btn{width:100%; justify-content:center; padding:12px}

  /* En pantalla chica las pestanas se aprietan pero siguen las tres a la vista. */
  .pestanas{gap:2px; padding:3px}
  .pestana{font-size:12.5px; padding:9px 4px; gap:5px}
  .pestana-n{width:17px; height:17px; font-size:10px}
  .pasar .t small{display:none}
  .banda-oferta{padding:12px 14px; gap:12px}
  .banda-pct{font-size:26px}
}

/* La pastilla de las puertas no se estira de lado a lado: parecia un campo
   de texto vacio en lugar de un boton. */
.puerta .chip{align-self:flex-start}

/* --- el precio, con su descuento --- */
.plan-precio{margin-top:10px; display:flex; flex-direction:column; gap:2px;
  font-family:"Playfair Display",Georgia,serif; font-size:30px; line-height:1.1;
  color:var(--ink)}

.precio-arriba{display:flex; align-items:center; gap:9px}
.plan-antes{font-size:16px; color:var(--ink-3); text-decoration:line-through;
  font-variant-numeric:tabular-nums; line-height:1}
.plan-ahorro{background:var(--oro-marca); color:#2B2B33; border-radius:999px;
  padding:3px 9px; font-size:12px; font-weight:700; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; line-height:1.3}

.precio-hoy{font-family:"Playfair Display",Georgia,serif; font-size:clamp(40px,11vw,52px);
  line-height:1; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; display:flex; align-items:baseline; gap:3px}
.precio-hoy .mes{font-family:"Archivo",system-ui,sans-serif; font-size:14px; font-weight:400;
  color:var(--ink-3); letter-spacing:0}

.plan-ahorras{font-size:13.5px; font-weight:600; color:var(--oro); margin-top:6px}
.plan-letra{font-size:12.5px; color:var(--ink-3); margin-top:4px; line-height:1.45}

/* --- la banda de la oferta --- */
.banda-oferta{display:flex; align-items:center; gap:14px; margin-top:22px;
  background:var(--oro-soft); border:1px solid var(--oro-marca); border-radius:var(--r);
  padding:14px 18px}
.banda-pct{font-family:"Playfair Display",Georgia,serif; font-size:30px; line-height:1;
  font-weight:700; color:var(--oro); font-variant-numeric:tabular-nums; flex:none}
.banda-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.banda-txt b{font-size:15px; color:var(--oro)}
.banda-txt span{font-size:13px; color:var(--ink-2)}

/* --- la app en el telefono --- */
.descarga{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.descarga-icono{border-radius:18px; flex:none; box-shadow:var(--shadow)}
.descarga-txt{flex:1 1 240px; min-width:0}
.pasos-lista{margin-top:12px; padding-left:20px; display:flex; flex-direction:column; gap:9px;
  font-size:14px; color:var(--ink-2)}
.pasos-lista li{padding-left:4px}
.pasos-lista li::marker{color:var(--accent); font-weight:700}
.pasos-lista b{color:var(--ink)}

/* --- el recordatorio de los niveles ---

   Se descuelga de la barra de arriba, del mismo lado donde vive el chip del
   nivel, y con su misma forma: se lee como si el menu se estirara tantito,
   no como un anuncio pegado encima. Mas grande que el chip, porque este si
   tiene que verse. No tapa nada y no hay que cerrarlo. */
.flota-env{position:absolute; top:100%; left:0; right:0;
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; justify-content:flex-end; pointer-events:none}
.flota{pointer-events:auto; gap:14px; padding:11px 16px 11px 20px;
  border-radius:0 0 var(--r) var(--r); text-transform:none; letter-spacing:0;
  max-width:min(360px,calc(100vw - 40px));
  box-shadow:0 8px 22px -10px rgba(43,43,51,.45);
  animation:flota-baja .5s cubic-bezier(.2,.8,.3,1) both; animation-delay:.7s}
.flota:hover{background:var(--oro-marca); color:var(--carbon)}
.flota:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.flota-txt{display:flex; flex-direction:column; gap:1px; min-width:0; text-align:left}
.flota-txt b{font-size:13.5px; line-height:1.3; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.flota-txt em{font-style:normal; font-size:12px; opacity:.85; font-weight:600}
.flota-ico{flex:none; font-size:22px; line-height:1; opacity:.7}

/* Baja desde atras de la barra, como si se desprendiera de ella. */
@keyframes flota-baja{
  from{opacity:0; transform:translateY(-100%)}
  to{opacity:1; transform:none}
}

/* En telefono NO cuelga: ahi taparia el titulo de la pantalla. Se acomoda
   debajo del menu, como un renglon mas de la barra, y empuja el contenido. */
@media (max-width:620px){
  .flota-env{position:static; padding:0 14px 12px}
  .flota{max-width:none; flex:1; border-radius:var(--r); padding:10px 14px}
  .flota-txt b{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .flota{animation:none}
}
@media print{
  .flota-env{display:none}
}

/* --- hilera de chips que sirven de filtro --- */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.chips .chip{text-decoration:none}
.chips .chip:hover{background:var(--line); color:var(--ink)}
.chips .chip.acc:hover{background:var(--accent); color:var(--accent-ink)}

/* --- texto largo de leer: aviso de privacidad, terminos ---

   Renglon corto y alto de linea generoso. Un aviso legal que no se puede
   leer es igual de inutil que no tenerlo. */
.parrafo{margin-top:12px; max-width:66ch; line-height:1.75; color:var(--ink-2); font-size:15px}
.parrafo b, .lista b{color:var(--ink)}
.parrafo a, .lista a{color:var(--accent); border-bottom:1px solid var(--line-2)}
.parrafo a:hover, .lista a:hover{border-color:var(--accent)}
.lista{max-width:66ch}

/* --- la ficha con candado: lo que ve quien no tiene cuenta al abrir una tarjeta --- */
.ficha-cerrada{display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:26px; align-items:center}
.ficha-cerrada-foto img, .ficha-cerrada-foto .sin-foto{display:block; width:100%; aspect-ratio:4/3;
  object-fit:cover; border-radius:var(--r)}
.ficha-cerrada-foto .sin-foto{display:grid; place-items:center; background:var(--surface-2); color:var(--ink-3)}
@media (max-width:620px){
  .ficha-cerrada{grid-template-columns:1fr; gap:16px}
}

/* --- el inicio: una sola pregunta ---

   Minimo a proposito. Columna angosta y centrada, la pregunta grande, tres
   respuestas que se tocan con el pulgar, y nada mas encima. Los proveedores
   van abajo, separados por una linea, para que no compitan con la pregunta. */
.inicio{max-width:620px; margin:28px auto 0; text-align:center}
.inicio-lema{display:flex; justify-content:center}
.inicio .titulo{margin-top:10px; text-wrap:balance}
.inicio .sub{margin:10px auto 0; max-width:46ch}
.respuestas{display:flex; flex-direction:column; gap:12px; margin-top:30px; text-align:left}
.respuesta{display:flex; align-items:center; gap:16px; padding:18px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); color:var(--ink); transition:border-color .15s, transform .15s}
.respuesta:hover{border-color:var(--accent); transform:translateY(-1px)}
.respuesta:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.respuesta-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.respuesta-txt b{font-size:17px; color:var(--ink)}
.respuesta-txt span{font-size:14px; color:var(--ink-2)}
.respuesta-flecha{flex:none; font-size:24px; line-height:1; color:var(--accent)}
.inicio-pie{margin-top:20px; font-size:14px; color:var(--ink-3)}
.inicio-pie a{color:var(--accent); font-weight:600}
.escaparate{margin-top:64px; padding-top:34px; border-top:1px solid var(--line)}
.escaparate-cab{text-align:center; margin-bottom:22px}
@media (prefers-reduced-motion:reduce){
  .respuesta{transition:none}
  .respuesta:hover{transform:none}
}

/* el atajo del panel para mandarle el resumen al cliente */
.para-cliente{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}