/* ============================================================
   HAUSLINE — Mi cuenta. Misma identidad de la tienda (styles.css):
   crema + negro, Jost / Cormorant Garamond, verde SOLO en estados
   activos. Mobile-first.
   ============================================================ */
:root{
  --bg:#FCFBF9; --bg-2:#F4F1EB; --card:#FFFFFF; --card-2:#F6F4F0;
  --borde:#E7E3DC; --borde-fuerte:#D8D2C8;
  --texto:#171310; --texto-2:#6B655C; --texto-3:#9C958A;
  --verde:#178A4C; --verde-bg:#E8F5EC; --rojo:#C0392B; --rojo-bg:#FBECEA;
  --foto-bg:#F1EFEA;
  --radio:14px; --radio-sm:10px;
  --font:'Jost','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sombra:0 1px 2px rgba(23,19,16,.04),0 10px 30px -18px rgba(23,19,16,.18);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--texto); font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ min-height:100vh; min-height:100dvh; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
::selection{ background:var(--texto); color:#fff; }
[hidden]{ display:none !important; }

/* Encabezado */
.cta-hd{ position:sticky; top:0; z-index:20; background:rgba(252,251,249,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--borde); }
.cta-hd-in{ max-width:760px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:14px 18px; }
.cta-logo{ grid-column:2; font-size:21px; font-weight:600; letter-spacing:.42em; text-indent:.42em; text-decoration:none; text-transform:uppercase; }
.cta-hd-izq{ justify-self:start; } .cta-hd-der{ justify-self:end; display:flex; gap:4px; }
.cta-ico{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:999px; border:0; background:none; color:var(--texto); cursor:pointer; text-decoration:none; }
.cta-ico:hover{ background:rgba(23,19,16,.06); }
.cta-ico svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:520px){ .cta-logo{ font-size:17px; letter-spacing:.3em; text-indent:.3em; } }

.cta-page{ max-width:760px; margin:0 auto; padding:26px 18px 90px; }
.cta-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--texto-3); margin:0; }
.cta-h1{ font-family:var(--serif); font-weight:600; font-size:38px; line-height:1.05; letter-spacing:-.01em; margin:8px 0 0; }
.cta-sub{ color:var(--texto-2); font-size:15px; line-height:1.55; margin:10px 0 0; }
@media(max-width:520px){ .cta-h1{ font-size:32px; } }

/* Tarjetas */
.cta-card{ background:var(--card); border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra); }
.cta-card + .cta-card{ margin-top:12px; }
.cta-pad{ padding:18px; }
.cta-sec{ margin-top:22px; }
.cta-sec-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; font-size:15px; font-weight:600; }

/* Botones */
.cta-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; width:100%; padding:0 20px; border:1px solid var(--texto); border-radius:var(--radio-sm); background:var(--texto); color:#fff; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:transform .15s, opacity .15s; }
.cta-btn:hover{ transform:translateY(-1px); } .cta-btn:active{ transform:none; }
.cta-btn:disabled{ opacity:.55; cursor:default; transform:none; }
.cta-btn.linea{ background:transparent; color:var(--texto); border-color:var(--borde-fuerte); }
.cta-btn.linea:hover{ border-color:var(--texto); }
.cta-btn.auto{ width:auto; }
.cta-link{ background:none; border:0; padding:0; color:var(--texto); font-size:13.5px; font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--borde-fuerte); cursor:pointer; }
.cta-link:hover{ text-decoration-color:var(--texto); }

/* Formularios */
.cta-tabs{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--borde); margin-bottom:20px; }
.cta-tab{ background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:12px 0; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3); cursor:pointer; }
.cta-tab.on{ color:var(--texto); border-bottom-color:var(--texto); }
.cta-field{ display:block; margin-top:14px; }
.cta-field:first-child{ margin-top:0; }
.cta-field > span{ display:block; font-size:12.5px; font-weight:500; color:var(--texto-2); margin-bottom:6px; }
.cta-input{ width:100%; border:1px solid var(--borde-fuerte); border-radius:var(--radio-sm); background:#fff; padding:13px 14px; font-size:16px; font-family:var(--font); color:var(--texto); outline:none; transition:border-color .15s, box-shadow .15s; }
.cta-input:focus{ border-color:var(--texto); box-shadow:0 0 0 3px rgba(23,19,16,.07); }
.cta-pass{ position:relative; }
.cta-pass .cta-input{ padding-right:48px; }
.cta-pass button{ position:absolute; right:4px; top:50%; transform:translateY(-50%); }
.cta-nota{ font-size:12px; color:var(--texto-3); line-height:1.5; margin:8px 0 0; }
.cta-msg{ border-radius:var(--radio-sm); padding:12px 14px; font-size:13.5px; line-height:1.5; margin-bottom:16px; }
.cta-msg.ok{ background:var(--verde-bg); color:#14532d; }
.cta-msg.err{ background:var(--rojo-bg); color:#7f1d1d; }

/* Filtros */
.cta-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:18px -18px 0; padding:0 18px 2px; }
.cta-chips::-webkit-scrollbar{ display:none; }
.cta-chip{ flex:none; border:1px solid var(--borde); background:#fff; border-radius:999px; padding:9px 16px; font-size:13px; font-weight:500; color:var(--texto-2); cursor:pointer; }
.cta-chip.on{ background:var(--texto); border-color:var(--texto); color:#fff; }

/* Lista de pedidos */
.cta-pedido{ display:flex; align-items:center; gap:14px; padding:14px; text-decoration:none; transition:transform .15s; }
.cta-pedido:hover{ transform:translateY(-1px); }
.cta-foto{ flex:none; width:78px; height:78px; border-radius:12px; overflow:hidden; background:var(--foto-bg); display:grid; place-items:center; color:var(--texto-3); }
.cta-foto img{ width:100%; height:100%; object-fit:cover; }
.cta-foto svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.4; }
.cta-pedido-info{ min-width:0; flex:1; }
.cta-cod{ font-size:14px; font-weight:600; letter-spacing:.04em; }
.cta-prod{ display:block; font-size:13px; color:var(--texto-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.cta-ver{ font-size:12px; color:var(--texto-2); white-space:nowrap; }
.cta-estado{ display:inline-flex; align-items:center; gap:7px; margin-top:7px; font-size:12.5px; font-weight:600; color:var(--verde); }
.cta-estado i{ width:8px; height:8px; border-radius:999px; background:currentColor; }
.cta-estado.cancelado{ color:var(--rojo); }
.cta-estado.espera{ color:#B26A00; }
.cta-estado.revision{ color:#2458C6; }
.cta-encargo{ margin-bottom:10px; border-left:3px solid #E9B44C; }
.cta-alerta-vence{ margin-top:12px; padding:10px 12px; border-radius:var(--radio-sm); background:var(--rojo-bg); border:1px solid #F0C9C3; color:var(--rojo); font-size:13px; font-weight:600; line-height:1.45; }
.cta-vacio{ text-align:center; padding:34px 20px; }
.cta-vacio p{ margin:0; }
.cta-skel{ height:106px; border-radius:var(--radio); background:linear-gradient(90deg,var(--card-2),#fff,var(--card-2)); background-size:200% 100%; animation:cta-skel 1.2s linear infinite; }
.cta-skel + .cta-skel{ margin-top:12px; }
@keyframes cta-skel{ to{ background-position:-200% 0; } }

/* Detalle */
.cta-back{ display:inline-flex; align-items:center; gap:6px; color:var(--texto-2); font-size:13px; font-weight:500; text-decoration:none; }
.cta-back:hover{ color:var(--texto); }
.cta-kv{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--borde); font-size:14px; color:var(--texto-2); }
.cta-kv:first-child{ border-top:0; padding-top:0; }
.cta-kv b{ color:var(--texto); font-weight:600; text-align:right; }
.cta-pasos{ list-style:none; margin:0; padding:0; }
.cta-paso{ position:relative; display:flex; align-items:center; gap:12px; padding:8px 0; font-size:14.5px; color:var(--texto-3); }
.cta-paso::before{ content:""; position:absolute; left:10px; top:-6px; height:14px; width:2px; background:var(--borde); }
.cta-paso:first-child::before{ display:none; }
.cta-paso .n{ flex:none; width:22px; height:22px; border-radius:999px; border:1.5px solid var(--borde-fuerte); background:#fff; display:grid; place-items:center; font-size:11px; }
.cta-paso.hecho{ color:var(--texto); }
.cta-paso.hecho .n{ background:var(--texto); border-color:var(--texto); color:#fff; }
.cta-paso.hecho::before,.cta-paso.actual::before{ background:var(--texto); }
.cta-paso.actual{ color:var(--texto); font-weight:600; }
.cta-paso.actual .n{ border-color:var(--verde); background:var(--verde-bg); box-shadow:0 0 0 4px rgba(23,138,76,.12); }
.cta-paso.actual .n::after{ content:""; width:8px; height:8px; border-radius:999px; background:var(--verde); }
.cta-hist{ list-style:none; margin:0; padding:0; }
.cta-hist li{ display:grid; grid-template-columns:92px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--borde); font-size:14px; }
.cta-hist li:first-child{ border-top:0; padding-top:0; }
.cta-hist time{ color:var(--texto-3); font-size:13px; }
.cta-hist small{ display:block; color:var(--texto-2); font-size:12.5px; margin-top:2px; line-height:1.45; }
.cta-fotos{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cta-fotos a{ aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--foto-bg); }
.cta-fotos img{ width:100%; height:100%; object-fit:cover; }
.cta-guia{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-weight:600; letter-spacing:.04em; }
.cta-item{ display:flex; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--borde); }
.cta-item:first-child{ border-top:0; padding-top:0; }
.cta-item .cta-foto{ width:64px; height:64px; }

/* Toast */
.cta-toast{ position:fixed; left:50%; bottom:24px; z-index:99; transform:translate(-50%,16px); opacity:0; max-width:calc(100% - 32px); background:var(--texto); color:#fff; border-radius:12px; padding:13px 18px; font-size:14px; box-shadow:0 12px 30px -12px rgba(0,0,0,.4); transition:.25s; }
.cta-toast.on{ opacity:1; transform:translate(-50%,0); }
.cta-toast.es-error{ background:var(--rojo); }
.cta-spin{ display:inline-block; width:26px; height:26px; border-radius:999px; border:2.5px solid var(--borde); border-top-color:var(--texto); animation:cta-spin .8s linear infinite; }
@keyframes cta-spin{ to{ transform:rotate(360deg); } }
.cta-centro{ display:grid; place-items:center; padding:70px 0; }
@media(prefers-reduced-motion:reduce){ .cta-skel,.cta-spin{ animation:none; } }

/* ---------------- Fase 2: panel completo ---------------- */
body.con-nav .cta-page{ padding-bottom:110px; }
.cta-nav{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:rgba(255,255,255,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--borde); padding-bottom:env(safe-area-inset-bottom); }
.cta-nav-in{ max-width:760px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.cta-nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 0 8px; font-size:11px; color:var(--texto-3); text-decoration:none; }
.cta-nav a.on{ color:var(--texto); font-weight:600; }
.cta-nav svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cta-nav svg.lleno{ fill:currentColor; }

.cta-hero{ display:flex; align-items:center; gap:14px; padding:18px 16px; border-radius:var(--radio); background:var(--texto); color:#fff; text-decoration:none; box-shadow:0 18px 40px -24px rgba(0,0,0,.6); }
.cta-hero svg{ flex:none; width:32px; height:32px; fill:none; stroke:#fff; stroke-width:1.3; }
.cta-hero-sep{ align-self:stretch; width:1px; background:rgba(255,255,255,.22); }
.cta-hero-t{ min-width:0; flex:1; }
.cta-hero-t small{ display:block; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.cta-hero-t b{ display:block; font-size:16px; font-weight:600; margin-top:3px; }
.cta-hero-t span{ display:block; font-size:12.5px; color:rgba(255,255,255,.65); margin-top:2px; }
.cta-hero-t span.verde{ color:#86efac; }
.cta-hero-btn{ flex:none; border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:7px 12px; font-size:11.5px; font-weight:500; white-space:nowrap; }

.cta-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.cta-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:96px; padding:10px 4px; border:1px solid var(--borde); border-radius:var(--radio); background:#fff; text-decoration:none; text-align:center; font-size:12px; line-height:1.25; color:var(--texto-2); transition:transform .15s; }
.cta-tile:hover{ transform:translateY(-1px); }
.cta-tile svg{ width:25px; height:25px; fill:none; stroke:var(--texto); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

.cta-mini{ margin-top:10px; }
.cta-mini-riel{ position:relative; height:2px; margin:0 5px; background:var(--borde); }
.cta-mini-riel i{ position:absolute; left:0; top:0; bottom:0; background:var(--verde); }
.cta-mini-pasos{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:-5px; font-size:10.5px; color:var(--texto-3); }
.cta-mini-pasos span{ display:flex; flex-direction:column; gap:6px; }
.cta-mini-pasos span:nth-child(2){ align-items:center; } .cta-mini-pasos span:nth-child(3){ align-items:flex-end; }
.cta-mini-pasos i{ width:9px; height:9px; border-radius:999px; background:var(--borde-fuerte); }
.cta-mini-pasos .on{ color:var(--verde); font-weight:600; } .cta-mini-pasos .on i{ background:var(--verde); }

.cta-club{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--radio); background:var(--bg-2); text-decoration:none; margin-top:16px; }
.cta-club svg{ flex:none; width:28px; height:28px; fill:none; stroke:var(--texto); stroke-width:1.3; }

.cta-filas > * + *{ border-top:1px solid var(--borde); }
.cta-fila{ display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; background:#fff; border:0; text-align:left; text-decoration:none; color:var(--texto); cursor:pointer; font-size:14px; font-family:inherit; }
.cta-fila:hover{ background:#FBFAF7; }
.cta-fila svg{ flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.cta-fila .t{ min-width:0; flex:1; }
.cta-fila .t small{ display:block; font-size:13px; color:var(--texto-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.cta-fila .flecha{ width:16px; height:16px; color:var(--texto-3); }
.cta-fila.peligro{ color:var(--rojo); font-weight:500; }
.cta-card.cta-filas{ overflow:hidden; }

.cta-avatar{ flex:none; width:96px; height:96px; border-radius:999px; overflow:hidden; background:#EAE7E1; display:grid; place-items:center; color:#A8A197; }
.cta-avatar img{ width:100%; height:100%; object-fit:cover; }
.cta-avatar svg{ width:46px; height:46px; fill:none; stroke:currentColor; stroke-width:1.2; }
.cta-pill{ display:inline-flex; border-radius:999px; background:var(--bg-2); padding:4px 10px; font-size:11px; font-weight:500; color:var(--texto-2); }
.cta-opcion{ display:flex; align-items:flex-start; gap:12px; width:100%; padding:14px; border:1px solid var(--borde); border-radius:var(--radio-sm); background:#fff; text-align:left; cursor:pointer; font-size:14px; color:var(--texto); font-family:inherit; }
.cta-opcion + .cta-opcion{ margin-top:8px; }
.cta-opcion.on{ border-color:var(--texto); box-shadow:0 0 0 1px var(--texto); }
.cta-opcion .radio{ flex:none; width:18px; height:18px; border-radius:999px; border:1.5px solid var(--borde-fuerte); margin-top:1px; }
.cta-opcion.on .radio{ border:6px solid var(--texto); }
.cta-botones{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cta-btn.chico{ min-height:42px; font-size:12px; letter-spacing:.08em; }
.cta-select{ appearance:none; -webkit-appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B655C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right:36px; }
.cta-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cta-grid2 .cta-field{ margin-top:14px; }
.cta-check{ display:flex; align-items:center; gap:10px; margin-top:16px; font-size:14px; cursor:pointer; }
.cta-check input{ width:18px; height:18px; accent-color:var(--texto); }

/* Mapa */
.cta-mapa{ position:relative; overflow:hidden; height:130px; border-radius:12px; border:1px solid var(--borde); background:#ECEAE4; touch-action:pan-y; user-select:none; }
.cta-mapa.interactivo{ height:210px; cursor:grab; touch-action:none; }
.cta-mapa.arrastrando{ cursor:grabbing; }
.cta-mapa-t{ position:absolute; inset:0; filter:grayscale(1) contrast(.92) brightness(1.04); }
.cta-mapa-t img{ position:absolute; width:256px; height:256px; max-width:none; pointer-events:none; }
.cta-mapa-pin{ position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-100%); filter:drop-shadow(0 4px 6px rgba(0,0,0,.3)); pointer-events:none; }
.cta-mapa-vacio{ display:none; position:absolute; inset:0; z-index:2; place-items:center; font-size:12px; color:var(--texto-2); background:rgba(252,251,249,.65); }
.cta-mapa.sin-ubicacion .cta-mapa-vacio{ display:grid; }
.cta-mapa.sin-ubicacion .cta-mapa-pin{ display:none; }
.cta-mapa-a{ position:absolute; left:6px; bottom:3px; z-index:2; font-size:9px; color:rgba(0,0,0,.45); }
.cta-mapa-z{ position:absolute; right:8px; top:8px; z-index:3; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--borde-fuerte); border-radius:9px; background:#fff; }
.cta-mapa-z button{ width:34px; height:34px; border:0; background:#fff; font-size:18px; cursor:pointer; color:var(--texto); }
.cta-mapa-z button + button{ border-top:1px solid var(--borde); }
.cta-mapa-btn{ position:absolute; right:10px; bottom:10px; z-index:3; border:1px solid var(--borde-fuerte); border-radius:999px; background:#fff; padding:6px 12px; font-size:12px; font-weight:500; text-decoration:none; color:var(--texto); box-shadow:0 4px 14px -6px rgba(0,0,0,.25); }

/* Disponible para entrega */
.cta-listo{ display:flex; gap:14px; align-items:flex-start; }
.cta-listo-ic{ flex:none; width:46px; height:46px; border-radius:12px; background:var(--bg-2); display:grid; place-items:center; }
.cta-listo-ic svg{ width:24px; height:24px; fill:none; stroke:var(--texto); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.cta-dir{ border:1px solid var(--borde); border-radius:12px; overflow:hidden; background:#fff; }
.cta-dir .cta-mapa{ border:0; border-top:1px solid var(--borde); border-radius:0; }
.cta-nota-ok{ display:flex; gap:9px; align-items:flex-start; padding:11px 13px; border-radius:10px; background:var(--verde-bg); color:#14532d; font-size:13px; line-height:1.45; margin-top:14px; }

/* Hoja inferior */
.cta-hoja{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.cta-hoja-fondo{ position:absolute; inset:0; border:0; background:rgba(10,10,10,.42); animation:cta-fade .2s ease both; cursor:default; }
.cta-hoja-panel{ position:relative; width:100%; max-width:540px; max-height:88vh; overflow-y:auto; border-radius:22px 22px 0 0; background:var(--bg); padding:10px 18px calc(20px + env(safe-area-inset-bottom)); animation:cta-up .28s cubic-bezier(.22,1,.36,1) both; }
@media(min-width:640px){ .cta-hoja{ align-items:center; } .cta-hoja-panel{ border-radius:22px; } }
.cta-hoja-asa{ display:block; width:38px; height:4px; margin:0 auto 14px; border-radius:999px; background:var(--borde-fuerte); }
.cta-hoja-t{ margin:0 0 14px; font-size:18px; font-weight:600; }
@keyframes cta-fade{ from{ opacity:0; } }
@keyframes cta-up{ from{ transform:translateY(40px); opacity:0; } }

.cta-wa-badge{ display:inline-grid; place-items:center; width:58px; height:58px; border-radius:999px; background:#25D366; color:#fff; box-shadow:0 12px 28px -12px rgba(37,211,102,.7); }
.cta-wa-badge svg{ width:28px; height:28px; fill:currentColor; }
.cta-wa{ overflow:hidden; border-radius:14px; border:1px solid var(--borde); margin-top:16px; }
.cta-wa-h{ display:flex; align-items:center; gap:10px; background:#075E54; color:#fff; padding:10px 12px; }
.cta-wa-h b{ display:block; font-size:13.5px; } .cta-wa-h small{ display:block; font-size:10.5px; opacity:.75; }
.cta-wa-av{ width:32px; height:32px; border-radius:999px; background:#fff; color:#111; display:grid; place-items:center; font-weight:700; font-size:13px; }
.cta-wa-b{ display:flex; justify-content:flex-end; background:#ECE5DD; padding:14px 10px; }
.cta-wa-msg{ position:relative; max-width:88%; white-space:pre-line; border-radius:12px 3px 12px 12px; background:#DCF8C6; padding:9px 11px 18px; font-size:12.5px; line-height:1.45; color:#111; margin:0; }
.cta-wa-msg small{ position:absolute; right:8px; bottom:4px; font-size:10px; color:#34B7F1; }
.cta-btn-wa{ background:#25D366; border-color:#25D366; letter-spacing:.06em; }
.cta-btn-wa svg{ width:18px; height:18px; fill:currentColor; }

.cta-fav{ display:flex; gap:14px; padding:12px; }
.cta-fav .cta-foto{ width:96px; height:96px; }
.cta-fav-cora{ flex:none; width:36px; height:36px; border:0; background:none; cursor:pointer; color:var(--texto); display:grid; place-items:center; margin:-6px -6px 0 0; }
.cta-fav-cora svg{ width:20px; height:20px; fill:currentColor; stroke:currentColor; stroke-width:1.5; }
.cta-btn-borde{ display:inline-flex; align-items:center; border:1px solid var(--borde-fuerte); border-radius:999px; padding:8px 16px; font-size:12.5px; font-weight:500; text-decoration:none; color:var(--texto); background:#fff; cursor:pointer; font-family:inherit; }
.cta-btn-borde:hover{ border-color:var(--texto); }
@media(max-width:380px){ .cta-tiles{ gap:6px; } .cta-tile{ font-size:11px; } }

/* Fotos de control de calidad y visor */
.cta-fotos button{ aspect-ratio:1; border:0; padding:0; border-radius:10px; overflow:hidden; background:var(--foto-bg); cursor:zoom-in; }
.cta-fotos button img{ width:100%; height:100%; object-fit:cover; }
.cta-fotos-mini{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.cta-fotos-mini button{ width:52px; height:52px; border:0; padding:0; border-radius:8px; overflow:hidden; background:var(--foto-bg); cursor:zoom-in; }
.cta-fotos-mini button img{ width:100%; height:100%; object-fit:cover; }
.cta-grupo-fotos + .cta-grupo-fotos{ margin-top:18px; padding-top:16px; border-top:1px solid var(--borde); }
.cta-item-estado{ display:inline-flex; align-items:center; gap:6px; margin-top:5px; font-size:11.5px; font-weight:600; color:var(--texto-2); background:var(--bg-2); border-radius:999px; padding:3px 9px; }
.cta-item-estado.ok{ color:var(--verde); background:var(--verde-bg); }
.cta-aviso-juntos{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin-top:12px; border-radius:12px; background:var(--bg-2); font-size:13px; line-height:1.5; color:var(--texto-2); }
.cta-aviso-juntos b{ color:var(--texto); font-weight:600; }
.cta-visor{ position:fixed; inset:0; z-index:80; background:rgba(10,10,10,.94); display:flex; align-items:center; justify-content:center; animation:cta-fade .2s ease both; }
.cta-visor figure{ margin:0; max-width:min(92vw,900px); text-align:center; }
.cta-visor img{ max-width:100%; max-height:80vh; border-radius:10px; margin:0 auto; }
.cta-visor figcaption{ margin-top:12px; color:rgba(255,255,255,.75); font-size:13px; }
.cta-visor-x{ position:absolute; top:max(14px,env(safe-area-inset-top)); right:14px; width:44px; height:44px; border:0; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-size:18px; cursor:pointer; }
.cta-visor-n{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.cta-visor-n.prev{ left:10px; } .cta-visor-n.next{ right:10px; }

/* ── Tiempos del pedido: preparación aprox. y aviso de demora (2026-10-04) ── */
.cta-tiempo{ border-color:var(--borde); }
.cta-tiempo-t{ margin:0 0 8px; font-weight:600; font-size:15px; }
.cta-tiempo-fila{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--borde); font-size:13.5px; color:var(--texto-2); }
.cta-tiempo-fila b{ color:var(--texto); font-weight:600; white-space:nowrap; }
.cta-demora{ border-color:#f0c36d; background:#fff7e6; }
.cta-demora-t{ margin:0; font-weight:600; color:#6b4a0c; }
.cta-demora .cta-nota{ color:#6b4a0c; }

/* Foto del pedido: el producto se ve completo y centrado (antes se recortaba). */
.cta-foto{ background:#f4f2ee; }
.cta-foto img{ object-fit:contain; transition:transform .25s ease; }

/* Barrita de progreso con más aire (antes la línea, los puntos y el texto quedaban encima). */
.cta-mini{ margin-top:14px; }
.cta-mini-riel{ height:3px; margin:0 6px; border-radius:99px; }
.cta-mini-riel i{ border-radius:99px; }
.cta-mini-pasos{ margin-top:-6.5px; font-size:11px; }
.cta-mini-pasos span{ gap:9px; }
.cta-mini-pasos i{ width:10px; height:10px; box-shadow:0 0 0 3px var(--card, #fff); }

/* Vitrina de productos (Mi cuenta): banner que pasa solo, toque para ver el producto. */
.cta-vitrina{ margin-top:28px; }
.cta-vitrina-h{ display:flex; justify-content:space-between; align-items:baseline; margin:0 0 10px; }
.cta-vitrina-h b{ font-weight:600; font-size:16px; }
.cta-vitrina-h a{ font-size:13px; color:var(--texto-2); text-decoration:none; }
.cta-vitrina-viewport{ overflow:hidden; margin:0 -20px; padding:2px 20px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.cta-vitrina-pista{ display:flex; gap:12px; width:max-content; animation:cta-vitrina var(--dur,60s) linear infinite; }
.cta-vitrina-viewport:hover .cta-vitrina-pista, .cta-vitrina-viewport:active .cta-vitrina-pista{ animation-play-state:paused; }
@keyframes cta-vitrina{ to{ transform:translateX(-50%); } }
.cta-vitrina-item{ flex:none; width:138px; text-decoration:none; color:inherit; }
.cta-vitrina-foto{ position:relative; display:block; width:138px; height:138px; border-radius:14px; overflow:hidden; background:#f4f2ee; border:1px solid var(--borde); }
.cta-vitrina-foto img{ width:100%; height:100%; object-fit:contain; }
.cta-vitrina-item small{ display:block; margin-top:7px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cta-vitrina-item > span:not(.cta-vitrina-foto){ display:block; margin-top:2px; font-size:12.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cta-vitrina-item b{ display:block; margin-top:3px; font-size:13px; font-weight:600; }
/* Etiqueta sobre la foto (Inmediata / Llega pronto / Nuevo): siempre arriba a la izquierda y encima de la foto. */
.cta-vitrina-foto .cta-vitrina-tag{ position:absolute; top:8px; left:8px; z-index:2; display:inline-block; max-width:calc(100% - 16px); margin:0; padding:3px 8px; border-radius:99px; background:#171310; color:#fff; font-size:9px; line-height:1.4; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.cta-vitrina-foto .cta-vitrina-tag.es-inmediata{ background:#15803d; }
.cta-vitrina-foto .cta-vitrina-tag.es-pronto{ background:#b45309; }
@media (prefers-reduced-motion: reduce){ .cta-vitrina-pista{ animation:none; } .cta-vitrina-viewport{ overflow-x:auto; } }

/* Cupón vigente en Mi cuenta */
.cta-cupon{ display:flex; align-items:center; gap:14px; border:1.5px dashed #c9b88f; background:#fffaf0; }
.cta-cupon-ic{ flex:none; display:grid; place-items:center; width:64px; height:64px; border-radius:14px; background:#171310; color:#fff; font-weight:700; font-size:19px; line-height:1; text-align:center; }
.cta-cupon-ic small{ display:block; font-size:10px; letter-spacing:.12em; margin-top:2px; opacity:.8; }
.cta-cupon-t{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.cta-cupon-t b{ font-weight:600; font-size:14.5px; }
.cta-cupon-t span{ font-size:12px; color:var(--texto-3); }
.cta-cupon-t code{ align-self:flex-start; margin-top:3px; padding:3px 8px; border-radius:6px; background:#fff; border:1px solid var(--borde); font-size:13px; letter-spacing:.06em; cursor:copy; }
.cta-cupon .cta-btn{ flex:none; padding:10px 16px; }
/* Encuesta de 1 toque */
.cta-encuesta-t{ margin:0; font-weight:600; font-size:15px; }
.cta-encuesta-est{ display:flex; gap:6px; }
.cta-encuesta-est a{ flex:1; display:grid; place-items:center; height:46px; border-radius:12px; border:1px solid var(--borde); font-size:24px; color:#c9a227; text-decoration:none; background:#fff; transition:transform .12s, background .12s; }
.cta-encuesta-est a:hover{ background:#fff7e0; transform:translateY(-1px); }
/* Bajaron de precio */
.cta-baja{ display:flex; align-items:baseline; gap:8px; padding:9px 0; border-top:1px solid var(--borde); text-decoration:none; color:inherit; font-size:13.5px; }
.cta-baja:first-of-type{ margin-top:8px; }
.cta-baja span{ min-width:0; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cta-baja s{ color:var(--texto-3); font-size:12px; }
.cta-baja b{ color:#15803d; font-weight:700; }
.cta-baja-tag{ display:inline-block; margin-left:6px; padding:2px 7px; border-radius:99px; background:#dcfce7; color:#15803d; font-size:10.5px; font-weight:700; vertical-align:middle; }
/* Las tarjetas de extras no se salen en teléfonos angostos */
.cta-extras{ display:grid; gap:12px; margin-top:14px; }
.cta-extras > *, .cta-cupon, .cta-encuesta, .cta-bajas{ min-width:0; }
.cta-encuesta-est a{ min-width:0; }
@media (max-width:420px){
  .cta-cupon{ flex-wrap:wrap; gap:12px; }
  .cta-cupon-t{ flex-basis:calc(100% - 80px); }
  .cta-cupon .cta-btn{ flex:1 1 100%; text-align:center; }
  .cta-encuesta-est{ gap:5px; }
  .cta-encuesta-est a{ height:42px; font-size:21px; }
}