/* Agente virtual: página base con el contenido confirmado por el usuario (2026-11-03). */
.agente-virtual-page { background: var(--dark, #0b0d0b); }
:where(.agente-virtual-page main) :is(h1, h2, h3) { font-family: Manrope, Arial, sans-serif; letter-spacing: -.04em; margin: 0; }
.av-hero { background: radial-gradient(circle at 74% 30%, var(--palette-panel, #171d17) 0, var(--dark, #0b0d0b) 52%); color: var(--paper, #f6f3eb); padding: 150px 0 96px; }
.av-hero-inner > * { max-width: 880px; }
.av-hero .section-label, .av-flow .section-label { color: var(--lime, #c7f45b); }
.av-hero h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.06; margin: 18px 0 24px; font-weight: 700; }
.av-hero h1 em, .av-close h2 em { font-style: normal; color: var(--lime, #c7f45b); }
.av-hero-inner > .av-lead, .av-hero-inner > .av-note { max-width: 680px; }
.av-lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--palette-light-muted, #c9d0bf); margin: 0 0 32px; }
.av-actions { margin: 0 0 22px; }
.av-note { font-size: 14px; line-height: 1.5; color: var(--palette-light-muted, #c9d0bf); max-width: 680px; margin: 0; }
.av-flow { background: var(--dark, #0b0d0b); color: var(--paper, #f6f3eb); padding: 96px 0; border-top: 1px solid #343b30; }
.av-flow h2, .av-compare h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; font-weight: 700; margin: 14px 0 44px; max-width: 760px; }
.av-compare { background: var(--paper, #f6f3eb); color: #111611; padding: 96px 0; }
.av-compare .section-label { color: var(--palette-accent-text, #48622e); }
.av-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 28px; }
.av-card { background: #fffdf8; border: 1px solid var(--palette-border, #c8cdbd); border-radius: 22px; padding: 32px; }
.av-card-main { background: var(--dark, #0b0d0b); color: var(--paper, #f6f3eb); border-color: #343b30; }
.av-tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--palette-accent-text, #48622e); margin: 0 0 14px; }
.av-card-main .av-tag { color: var(--lime, #c7f45b); }
.av-card h3 { font-size: 26px; line-height: 1.15; margin: 0 0 14px; }
.av-card p:not(.av-tag) { font-size: 16px; line-height: 1.55; margin: 0; color: var(--palette-muted, #596152); }
.av-card-main p:not(.av-tag) { color: var(--palette-light-muted, #c9d0bf); }
.av-compare .av-note { color: var(--palette-muted, #596152); }
.av-note-dark { color: var(--palette-light-muted, #c9d0bf); }
.av-close { background: var(--cream, #eeeae0); color: #111611; padding: 88px 0; text-align: center; }
.av-close h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12; font-weight: 700; margin: 0 0 14px; }
.av-close p { color: var(--palette-muted, #596152); font-size: 17px; margin: 0 0 28px; }
.av-close .av-actions { margin: 0; }
@media (max-width: 700px) {
  .av-hero { padding: 120px 0 64px; }
  .av-flow, .av-compare, .av-close { padding: 64px 0; }
  .av-cards { grid-template-columns: 1fr; }
  .av-card { padding: 24px; }
  .av-hero .button, .av-close .button { width: 100%; box-sizing: border-box; }
}

/* Hero del agente virtual (addon 2): texto a la izquierda y espacio reservado para el video a la derecha. 2026-11-05 */
.avh-hero { background: radial-gradient(circle at 78% 38%, #182519 0, var(--dark,#0b0d0b) 58%); color: var(--paper,#f6f3eb); padding: 104px 0 72px; box-sizing: border-box; }
.avh-grid { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 56px; align-items: center; }
.avh-label { color: var(--lime,#c7f45b); margin: 0 0 18px; letter-spacing: .14em; text-transform: uppercase; }
.avh-copy h1 { font: 700 54px/1.04 Manrope, Arial, sans-serif; letter-spacing: -.045em; margin: 0 0 20px; }
.avh-copy h1 em { font-style: normal; color: var(--lime,#c7f45b); }
.avh-lead { font: 400 19px/1.5 'DM Sans', Arial, sans-serif; color: #d9ddd2; margin: 0 0 30px; max-width: 470px; }
.avh-actions { margin: 0 0 18px; }
.avh-actions .button { font-size: 15px; padding: 17px 24px; }
.avh-terms { margin: 0 0 4px; font: 500 14px/1.5 'DM Sans', Arial, sans-serif; color: #e3e6dc; }
.avh-note { margin: 0; font: 400 13px/1.5 'DM Sans', Arial, sans-serif; color: #b4bcab; }
.avh-demo { margin: 0; }

/* Una columna bajo 1200 px (con dos columnas el título necesita ≥1176 px para no partirse en 4 líneas): etiqueta → título → apoyo → demostración → CTA → condiciones + nota */
@media (max-width: 1199px) {
  .avh-grid { grid-template-columns: 1fr; gap: 0; }
  .avh-copy { display: contents; }
  .avh-label { order: 1; }
  .avh-copy h1 { order: 2; max-width: 760px; }
  .avh-lead { order: 3; max-width: 600px; margin-bottom: 28px; }
  .avh-demo { order: 4; max-width: 760px; }
  .avh-close { order: 5; margin-top: 28px; }
}
/* Móvil: tamaños propios */
@media (max-width: 700px) {
  .avh-hero { padding: 86px 0 40px; }
  .avh-label { font-size: 11px; margin-bottom: 14px; }
  .avh-copy h1 { font-size: 36px; margin-bottom: 14px; }
  .avh-lead { font-size: 17px; margin-bottom: 22px; }
  .avh-close { margin-top: 22px; }
  .avh-actions .button { display: flex; width: 100%; justify-content: center; gap: 14px; }
}

/* v2: espacio reservado para el futuro video, en la paleta del sitio. */
.avh-video-box { position: relative; aspect-ratio: 16 / 9; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; border-radius: 18px; border: 1px solid #3a4a35; background: radial-gradient(circle at 50% 42%, #2a4223 0, #172617 48%, #101a10 100%); box-shadow: 0 30px 70px rgba(0,0,0,.35); color: var(--paper,#f6f3eb); text-align: center; }
.avh-play { display: grid; place-items: center; width: 104px; height: 104px; margin-bottom: 18px; border-radius: 50%; background: var(--lime,#c7f45b); box-shadow: 0 0 0 10px rgba(199,244,91,.16); }
.avh-play svg { width: 44px; height: 44px; margin-left: 6px; fill: #0b0d0b; }
.avh-video-title { margin: 0; font: 700 30px/1.15 Manrope, Arial, sans-serif; letter-spacing: -.03em; }
.avh-video-sub { margin: 0; font: 400 18px/1.4 'DM Sans', Arial, sans-serif; color: #c9d0bf; }
@media (max-width: 700px) {
  .avh-video-box { border-radius: 14px; padding: 16px; }
  .avh-play { width: 64px; height: 64px; margin-bottom: 10px; box-shadow: 0 0 0 7px rgba(199,244,91,.16); }
  .avh-play svg { width: 28px; height: 28px; margin-left: 4px; }
  .avh-video-title { font-size: 20px; }
  .avh-video-sub { font-size: 14px; }
}

/* «Cómo conversa» en móvil: filas numeradas compactas en lugar de tarjetas. */
@media (max-width: 700px) {
}

/* Sección 2 «Cómo conversa»: demostración de conversación y resumen organizado (mockup aprobado 2026-11-06). Todo acotado a .av-flow. */
.av-flow { --av-cream:#f6efe4; --av-user:#d8f1b4; --av-bar:#0f1f1b; --av-summary:#ecece8; --av-ink:#1b1f1b; --av-muted:#4a524a; --av-gold:#f2a900; --av-amber:#ffb81c; }
.av-flow .av-flow-shell { display:flow-root; }
.av-flow .av-flow-logo { display:block; width:clamp(190px,18vw,250px); height:auto; margin:0 auto 26px; }
.av-flow h2 { margin:10px 0 28px; max-width:none; }
.av-demo { border:1px solid #2c3a34; border-radius:22px; overflow:hidden; background:var(--av-bar); color:var(--av-ink); }
.av-demo-bar { margin:0; padding:12px 24px; background:var(--av-bar); color:#f6f3eb; font:700 clamp(18px,1.5vw,22px)/1.3 Manrope,Arial,sans-serif; letter-spacing:-.02em; }
.av-demo-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:10px; padding:0 10px 10px; }
.av-chats { display:contents; }
.av-chat-col { min-width:0; background:var(--av-cream); border-radius:14px; overflow:hidden; }
.av-col-title { margin:0; padding:10px 18px; background:var(--av-bar); color:#f6f3eb; font:700 clamp(18px,1.5vw,22px)/1.3 Manrope,Arial,sans-serif; letter-spacing:-.02em; }
.av-msgs { display:flex; flex-direction:column; gap:12px; padding:16px 16px 18px; }
.av-msg { margin:0; max-width:86%; padding:8px 12px 9px; border-radius:12px; font-size:clamp(15px,1.1vw,16px); line-height:1.4; color:var(--av-ink); box-shadow:0 1px 1px rgba(0,0,0,.08); }
.av-msg b { display:block; font-weight:800; }
.av-msg-user { align-self:flex-end; background:var(--av-user); border-top-right-radius:4px; }
.av-msg-bot { align-self:flex-start; background:#fff; border-top-left-radius:4px; }
.av-products { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.av-product { display:flex; flex-direction:column; min-width:0; padding:10px 12px 12px; background:#fff; border-radius:12px; color:var(--av-ink); }
.av-product img { display:block; width:100%; height:auto; aspect-ratio:270 / 350; max-height:210px; object-fit:contain; background:#fff; }
.av-product h4 { margin:6px 0 0; font:800 clamp(16px,1.25vw,18px)/1.25 Manrope,Arial,sans-serif; letter-spacing:-.02em; }
.av-product-meta { margin:2px 0 0; font-size:14px; line-height:1.4; color:var(--av-muted); }
.av-rating { display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin:4px 0 0; font-size:14px; line-height:1.4; }
.av-stars { --av-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.5 5.6 6.1.6-4.6 4.1 1.3 6-5.3-3.1-5.3 3.1 1.3-6L1.4 7.7l6.1-.6z'/%3E%3C/svg%3E"); display:inline-block; width:85px; height:17px; flex:0 0 85px; background:linear-gradient(90deg,var(--av-gold) 90%,#d9d4c6 90%); -webkit-mask:var(--av-star) 0 0/17px 17px repeat-x; mask:var(--av-star) 0 0/17px 17px repeat-x; }
.av-price { margin:4px 0 8px; font:800 clamp(20px,1.6vw,23px)/1.2 Manrope,Arial,sans-serif; letter-spacing:-.02em; }
.av-pick { display:block; margin-top:auto; padding:8px 10px; border:2px solid #9cc83a; border-radius:10px; background:#f3fbdc; text-align:center; font:800 16px/1.3 Manrope,Arial,sans-serif; }
.av-fiction { margin:-4px 0 0; font-size:13px; line-height:1.4; color:var(--av-muted); }
.av-summary { min-width:0; background:var(--av-summary); color:var(--av-ink); border-radius:14px; padding:18px 18px 20px; }
.av-summary h3 { margin:0 0 14px; font:800 clamp(20px,1.7vw,24px)/1.2 Manrope,Arial,sans-serif; letter-spacing:-.025em; }
.av-chosen { display:grid; grid-template-columns:72px minmax(0,1fr); gap:6px 14px; align-items:center; padding:14px 16px; background:#fff; border-radius:12px; }
.av-chosen img { grid-row:1; width:72px; height:auto; aspect-ratio:270 / 350; object-fit:contain; }
.av-chosen-name { text-wrap:balance; margin:0; font:800 clamp(16px,1.3vw,19px)/1.3 Manrope,Arial,sans-serif; letter-spacing:-.015em; }
.av-chosen-detail { margin:2px 0 0; font-size:15px; line-height:1.4; color:var(--av-muted); }
.av-qty { grid-column:1 / -1; margin:6px 0 0; padding-top:10px; border-top:1px solid #e3e3dc; font-size:clamp(16px,1.25vw,18px); line-height:1.4; }
.av-facts { margin:16px 0 0; display:grid; gap:10px; }
.av-facts > div { display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); column-gap:14px; }
.av-facts dt { font-weight:700; color:var(--av-muted); font-size:15px; line-height:1.4; }
.av-facts dd { margin:0; font-size:16px; line-height:1.4; overflow-wrap:anywhere; }
.av-subtotal { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; margin:22px 0 10px; font:800 clamp(17px,1.4vw,20px)/1.3 Manrope,Arial,sans-serif; }
.av-subtotal strong { font-size:clamp(26px,2.3vw,34px); letter-spacing:-.03em; }
.av-status { display:inline-block; margin:0 0 10px; padding:5px 14px; border-radius:10px; background:var(--av-amber); color:#2a1d00; font:800 16px/1.3 Manrope,Arial,sans-serif; }
.av-confirm { margin:0; font-size:15px; line-height:1.45; color:var(--av-muted); }
.av-demo-note { margin:18px 0 0; text-align:center; font-size:14px; line-height:1.5; color:var(--palette-light-muted,#c9d0bf); }
@media (min-width:701px) and (max-width:1100px) {
 .av-demo-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .av-summary { grid-column:1 / -1; }
}
@media (max-width:700px) {
 .av-flow .av-flow-logo { width:min(200px,60%); margin-bottom:20px; }
 .av-flow h2 { margin-bottom:22px; }
 .av-demo { border-radius:18px; }
 .av-demo-bar { padding:11px 16px; font-size:18px; }
 .av-demo-grid { display:block; padding:0 8px 8px; }
 .av-chats { display:block; background:var(--av-cream); border-radius:14px; overflow:hidden; }
 .av-chat-col { border-radius:0; }
 .av-col-title { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
 .av-msgs { padding:14px 12px 4px; }
 .av-chat-col + .av-chat-col .av-msgs { padding-top:12px; padding-bottom:16px; }
 .av-msg { max-width:88%; }
 .av-products { gap:8px; }
 .av-product { padding:8px 8px 10px; }
 .av-product img { max-height:190px; }
 .av-summary { margin-top:8px; padding:16px 14px 18px; }
 .av-chosen { padding:12px; }
 .av-facts > div { grid-template-columns:1fr; row-gap:0; }
}
@media (max-width:360px) {
 .av-rating span:last-child { font-size:13px; }
 .av-pick { font-size:15px; padding:7px 6px; }
}

/* Hero: acentos rosados degradados para distinguir al agente MIA GO. Tonos medidos en «CONECTA» del logo oficial (#FF4484 a #FF95BA) y del logo MIA Go (#FF3D7F a #FF9CC0). */
.avh-hero .avh-label span, .avh-hero .avh-copy h1 em { color: #ff6b9f; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
 .avh-hero .avh-label span, .avh-hero .avh-copy h1 em { background-image: linear-gradient(90deg, #ff4484 0%, #ff95ba 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}
.avh-hero .avh-label { display: flex; align-items: center; flex-wrap: wrap; gap: 0; font-size: 15px; line-height: 1.3; }
.avh-hero .avh-label-logo { display: block; width: auto; height: 20px; flex: 0 0 auto; }
.avh-hero .avh-label span { margin-left: 12px; padding-top: 0; white-space: nowrap; }
@media (max-width: 700px) { .avh-hero .avh-label { font-size: 13px; } .avh-hero .avh-label-logo { height: 18px; } }
@media (max-width: 400px) { .avh-hero .avh-label { font-size: 11px; letter-spacing: .08em; flex-wrap: nowrap; } .avh-hero .avh-label-logo { height: 16px; } }

.avh-hero .avh-label span::before { content: ""; display: inline-block; width: 1px; height: 16px; margin-right: 12px; vertical-align: -3px; background: #ff6b9f; -webkit-text-fill-color: initial; }
@media (max-width: 400px) { .avh-hero .avh-label span { margin-left: 8px; } .avh-hero .avh-label span::before { height: 13px; margin-right: 8px; vertical-align: -2px; } }
/* Cómo conversa: envoltorios neutros fuera de desktop (móvil y tablet no cambian) */
.av-flow-head,.av-reply,.av-sum-a,.av-sum-b,.av-sum-c { display:contents; }
/* Cómo conversa: composición desktop (>=1101px) */
@media (min-width:1101px) {
 .av-flow { padding:72px 0; }
 .av-flow .av-flow-head { display:flex; align-items:center; gap:16px; margin:0 0 10px; }
 .av-flow .av-flow-logo { width:150px; margin:0; flex:0 0 auto; }
 .av-flow .av-flow-head .section-label { margin:0; padding-left:16px; border-left:1px solid rgba(199,244,91,.45); line-height:1.2; }
 .av-flow h2 { margin:0 0 18px; }
 .av-msgs { gap:8px; padding:12px 14px 14px; }
 .av-msg { padding:6px 12px 7px; }
 /* Respuesta del agente + catálogo como un solo mensaje */
 .av-reply { display:flex; flex-direction:column; align-self:stretch; background:#fff; border-radius:12px; border-top-left-radius:4px; box-shadow:0 1px 1px rgba(0,0,0,.08); padding:6px 12px 2px; }
 .av-reply .av-msg-bot { max-width:none; padding:0 0 8px; background:transparent; box-shadow:none; border-radius:0; }
 .av-products { grid-template-columns:1fr; gap:0; }
 .av-reply .av-product { background:transparent; border-radius:0; border-top:1px solid #e9e4d8; padding:10px 0 12px; }
 .av-product { display:grid; grid-template-columns:88px minmax(0,1fr) auto; column-gap:14px; align-items:center; }
 .av-product img { grid-column:1; grid-row:1 / 5; width:88px; max-height:none; align-self:center; }
 .av-product h4 { grid-column:2 / 4; grid-row:1; margin:0; }
 .av-product .av-product-meta { grid-column:2 / 4; grid-row:2; }
 .av-product .av-rating { grid-column:2 / 4; grid-row:3; flex-wrap:nowrap; }
 .av-product .av-price { grid-column:2; grid-row:4; margin:4px 0 0; }
 .av-product .av-pick { grid-column:3; grid-row:4; margin:4px 0 0; padding:6px 22px; }
 /* Resumen: producto arriba, datos al centro, cierre del pedido abajo */
 .av-summary { display:flex; flex-direction:column; padding:0 0 22px; overflow:hidden; }
 /* Título en la misma banda que los títulos de los chats (mismo alto: 1.3 de interlínea + 2x10px) */
 .av-summary h3 { display:block; flex:0 0 auto; box-sizing:border-box; height:calc(clamp(18px,1.5vw,22px) * 1.3 + 20px); margin:0 0 22px; padding:10px 18px; background:var(--av-bar); color:#f6f3eb; font:700 clamp(18px,1.5vw,22px)/1.3 Manrope,Arial,sans-serif; letter-spacing:-.02em; }
 .av-sum-a,.av-sum-b,.av-sum-c { display:block; }
 /* Un solo conjunto (producto, entrega, pago) centrado en el cuerpo plomo: márgenes automáticos arriba y abajo, 22px entre grupos */
 .av-sum-a { margin:auto 18px 0; }
 .av-sum-b { margin:22px 18px 0; }
 .av-sum-c { margin:22px 18px auto; }
 .av-sum-b .av-facts { margin:0; }
 .av-sum-c .av-subtotal { margin:0 0 10px; }
}
/* «MIA GO» del título del resumen: degradado rosado del hero. Fondo claro (móvil/tablet): mismos matices en tono más profundo para mantener contraste; desktop sobre cabecera oscura: tonos del hero. */
.av-summary h3 .av-grad { color:#d4145a; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
 .av-summary h3 .av-grad { background-image:linear-gradient(90deg,#d4145a 0%,#e0457f 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
}
@media (min-width:1101px) {
 .av-summary h3 .av-grad { color:#ff6b9f; }
 @supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .av-summary h3 .av-grad { background-image:linear-gradient(90deg,#ff4484 0%,#ff95ba 100%); color:transparent; }
 }
}