/* Estilos de la página de Cartia (los usan index.html y en/index.html). */
:root {
  --frambuesa: #D81D47; /* la de la marca es #E8264F; esta pasa el contraste 4.5:1 con letra chica */ --frambuesa-osc: #C41A40; --ciruela: #1F1420; --ciruela-2: #2C1D2E; --crema: #FFF4EC; --crema-2: #FBE7DA; --durazno: #FFB38A; --blanco: #FFFFFF;
  --gris: #6E5F69; --linea: rgba(31, 20, 32, .1);
  --letra: 'Chillax', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ancho: 1200px; --orilla: clamp(16px, 4.5vw, 48px);
  --resorte: cubic-bezier(.16, 1, .3, 1); --suave: cubic-bezier(.32, .72, 0, 1); --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --sombra: 0 34px 70px -30px rgba(31, 20, 32, .45), 0 10px 26px -14px rgba(31, 20, 32, .25);
}
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--crema); color: var(--ciruela); font-family: var(--letra); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, a, [role="button"] { touch-action: manipulation; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #3A66FF; outline-offset: 3px; border-radius: 8px; }
.env { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--orilla); }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; }
/* Pulido (lanzar-sitio a-pulido): párrafos sin palabras solas al final, selección, barra y acentos con la paleta. */
p, li, summary, figcaption, dd { text-wrap: pretty; }
::selection { background: var(--durazno); color: var(--ciruela); }
html { scrollbar-color: var(--ciruela) var(--crema-2); accent-color: var(--frambuesa); caret-color: var(--frambuesa); }
/* Áreas de toque de al menos 44 px en el celular, sin cambiar cómo se ven (lanzar-sitio a-accesibilidad). */
.isla-logo { display: inline-flex; align-items: center; min-height: 44px; }
.idiomas a, .pie a { position: relative; }
.idiomas a::after { content: ""; position: absolute; inset: -8px -5px; }
.pie a::after { content: ""; position: absolute; inset: -11px -4px; }
.mm-mas::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.bt { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 8px 0 26px; border-radius: 999px; font: 600 17.5px/1 var(--letra); text-decoration: none; border: 0; cursor: pointer; user-select: none; -webkit-user-select: none; transition: transform .2s var(--resorte), background-color .2s, box-shadow .3s var(--resorte); }
.bt:active { transform: scale(.97); }
.bt .bola { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: transform .4s var(--rebote); }
.bt .bola .ic { width: 19px; height: 19px; stroke-width: 2.1; }
.bt--ciruela { background: var(--ciruela); color: var(--crema); box-shadow: 0 12px 26px -14px rgba(31, 20, 32, .8); }
.bt--ciruela .bola { background: var(--durazno); color: var(--ciruela); }
.bt--crema { background: var(--crema); color: var(--ciruela); box-shadow: 0 12px 26px -14px rgba(31, 20, 32, .5); }
.bt--crema .bola { background: var(--frambuesa); color: var(--crema); }
.bt--frambuesa { background: var(--frambuesa); color: var(--blanco); box-shadow: 0 12px 26px -14px rgba(196, 26, 64, .8); }
.bt--frambuesa .bola { background: var(--ciruela); color: var(--durazno); }
.bt--linea { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; padding: 0 26px; }
@media (hover: hover) and (pointer: fine) {
  .bt:hover .bola { transform: translate(3px, -2px) rotate(-8deg) scale(1.08); }
  .bt--linea:hover { background: rgba(255, 244, 236, .12); }
}
.ojo { color: var(--frambuesa); }

/* Barra flotante */
.isla { position: fixed; z-index: 30; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(var(--ancho), calc(100% - 24px)); }
.isla-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 22px; border-radius: 999px; background: rgba(255, 244, 236, .82); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 0 0 1px rgba(31, 20, 32, .06), 0 12px 32px -18px rgba(31, 20, 32, .4); }
.isla-logo img { height: 28px; width: auto; }
.isla nav { display: flex; align-items: center; gap: 4px; }
.isla nav a.ln { padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 16px; color: var(--gris); transition: color .2s, background-color .2s; }
@media (hover: hover) and (pointer: fine) { .isla nav a.ln:hover { color: var(--ciruela); background: rgba(31, 20, 32, .06); } }
.isla .bt { min-height: 44px; font-size: 15.5px; padding-left: 18px; gap: 10px; }
.isla .bt .bola { width: 30px; height: 30px; }
.hamb { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ciruela); cursor: pointer; position: relative; }
.hamb i { position: absolute; left: 14px; width: 18px; height: 2px; border-radius: 2px; background: var(--crema); transition: transform .45s var(--resorte); }
.hamb i:first-child { top: 18px; } .hamb i:last-child { top: 26px; }
.menu-abierto .hamb i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-abierto .hamb i:last-child { transform: translateY(-4px) rotate(-45deg); }
.cortina { position: fixed; inset: 0; z-index: 29; background: rgba(232, 38, 79, .97); color: var(--crema); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: calc(110px + env(safe-area-inset-top)) var(--orilla) 40px; display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .4s var(--suave); }
.cortina a { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; text-decoration: none; padding: 6px 0; opacity: 0; transform: translateY(40px); transition: transform .6s var(--resorte), opacity .5s; }
.cortina .bt { margin-top: 24px; align-self: flex-start; font-size: 17px; letter-spacing: 0; }
.menu-abierto .cortina { opacity: 1; pointer-events: auto; }
.menu-abierto .cortina a { opacity: 1; transform: none; }
.menu-abierto .cortina a:nth-child(2) { transition-delay: .05s; } .menu-abierto .cortina a:nth-child(3) { transition-delay: .1s; }
.menu-abierto .cortina a:nth-child(4) { transition-delay: .15s; } .menu-abierto .cortina a:nth-child(5) { transition-delay: .2s; }

/* Portada frambuesa */
.portada { position: relative; overflow: hidden; isolation: isolate; background: var(--frambuesa); color: var(--crema); padding: calc(120px + env(safe-area-inset-top)) 0 clamp(20px, 3vw, 40px); }
.portada-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.portada h1 { margin-top: 0; font-size: clamp(54px, 7vw, 100px); line-height: .92; letter-spacing: -0.035em; }
.portada h1 .ojo { color: var(--ciruela); position: relative; white-space: nowrap; }
.portada h1 .ojo svg { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .32em; overflow: visible; }
.portada .baja { margin-top: 28px; max-width: 30em; font-size: clamp(18px, 1.7vw, 20.5px); color: var(--crema); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.letra-chica { margin-top: 18px; font-size: 15.5px; color: var(--crema); }
.letra-chica b { color: var(--crema); }
.escena { position: relative; min-height: 640px; }
.plato { position: absolute; z-index: -1; width: 600px; height: 600px; right: -70px; top: 10px; pointer-events: none; }
.aro { position: absolute; z-index: -1; border-radius: 50%; border: 2.5px dashed rgba(255, 244, 236, .35); pointer-events: none; }
.aro--1 { width: 240px; height: 240px; left: -60px; top: 30px; }
.simbolo-f { position: absolute; z-index: -1; width: 380px; left: -150px; bottom: -110px; opacity: .1; transform: rotate(-14deg); pointer-events: none; }
.bolita { position: absolute; z-index: -1; border-radius: 50%; background: var(--durazno); pointer-events: none; }
.bolita--1 { width: 26px; height: 26px; left: 18%; top: 8%; } .bolita--2 { width: 14px; height: 14px; right: 8%; bottom: 14%; } .bolita--3 { width: 40px; height: 40px; left: 6%; bottom: 22%; background: var(--ciruela); }
.cel { width: 240px; border-radius: 46px; padding: 6px; background: rgba(31, 20, 32, .16); box-shadow: var(--sombra); }
.cel-in { position: relative; border-radius: 40px; overflow: hidden; border: 9px solid var(--ciruela); background: var(--ciruela); }
.cel-in::before { content: ""; position: absolute; z-index: 2; top: 7px; left: 50%; width: 34%; height: 18px; border-radius: 12px; transform: translateX(-50%); background: var(--ciruela); }
.cel-in img { aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.escena .cel { position: absolute; right: 70px; top: 0; transform: rotate(-5deg); }
.tarjetita { position: absolute; width: 230px; border-radius: 22px; overflow: hidden; box-shadow: var(--sombra); }
.tarjetita img { border-radius: 22px; }
.escena .tarjetita { left: 10px; top: 140px; transform: rotate(9deg); }
.sticker { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--durazno); color: var(--ciruela); font-weight: 700; font-size: 16px; transform: rotate(-7deg); box-shadow: 0 14px 30px -14px rgba(31, 20, 32, .55); }
.sticker .ic { width: 20px; height: 20px; stroke-width: 2; }
.escena .sticker { left: 40px; top: 70px; }
.aviso { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 20px; background: rgba(255, 255, 255, .94); color: var(--ciruela); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 40px -18px rgba(31, 20, 32, .55); font-size: 14.5px; line-height: 1.3; min-width: 236px; }
.aviso .pic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.aviso .pic .ic { width: 21px; height: 21px; }
.aviso b { display: block; font-weight: 600; }
.aviso small { color: var(--gris); font-size: 13px; }
.pic--fr { background: #FFE1E7; color: var(--frambuesa); } .pic--du { background: #FFE9DC; color: #B4521F; } .pic--ci { background: var(--ciruela); color: var(--durazno); } .pic--ve { background: #DDF3E6; color: #1F8A55; }
.aviso--1 { right: -6px; top: 120px; } .aviso--2 { left: 0; bottom: 60px; } .aviso--3 { right: 20px; bottom: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .aviso { animation: llega 12s var(--resorte) infinite both; }
  .aviso--2 { animation-delay: 4s; } .aviso--3 { animation-delay: 8s; }
  @keyframes llega { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 4%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); } }
  .escena .cel { animation: flota 9s ease-in-out infinite; } .escena .tarjetita { animation: flota2 10s ease-in-out infinite; }
  @keyframes flota { 50% { transform: rotate(-5deg) translateY(-10px); } } @keyframes flota2 { 50% { transform: rotate(9deg) translateY(8px); } }
  .sticker { animation: late 4s var(--suave) infinite; } @keyframes late { 50% { transform: rotate(-4deg) scale(1.04); } }
  .plato { animation: gira 60s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } }
}

/* Franja */
.franja { background: var(--ciruela); color: var(--crema); padding: 26px 0 28px; overflow: hidden; }
.franja p.t { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--durazno); margin-bottom: 14px; }
.fila { display: flex; width: max-content; white-space: nowrap; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.fila + .fila { margin-top: 6px; color: rgba(255, 244, 236, .45); }
.fila span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; }
.fila span::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--frambuesa); -webkit-mask: radial-gradient(circle at 100% 0, #0000 42%, #000 44%); mask: radial-gradient(circle at 100% 0, #0000 42%, #000 44%); }
@media (prefers-reduced-motion: no-preference) {
  .fila { animation: corre 46s linear infinite; } .fila + .fila { animation-direction: reverse; animation-duration: 54s; }
  @keyframes corre { to { transform: translateX(-50%); } }
}

.seccion { padding: clamp(84px, 11vw, 150px) 0; }
.blanca { background: var(--blanco); }
.cab { max-width: 780px; }
.cab--centro { margin: 0 auto; text-align: center; }
.titulo { margin-top: 0; font-size: clamp(40px, 5.6vw, 72px); line-height: .98; letter-spacing: -0.035em; }
.entrada { margin-top: 20px; font-size: clamp(18px, 1.6vw, 20px); color: var(--gris); max-width: 36em; }
.cab--centro .entrada { margin-left: auto; margin-right: auto; }

/* Pasos */
.pasos { margin-top: clamp(56px, 7vw, 96px); display: grid; gap: clamp(72px, 9vw, 128px); }
.paso { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.paso:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.paso:nth-child(even) .paso-txt { order: 2; }
.num b { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--frambuesa); color: var(--crema); font-size: 25px; font-weight: 700; transform: rotate(-8deg); box-shadow: 0 10px 20px -10px rgba(196, 26, 64, .9); }
.paso h3 { margin-top: 22px; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.04; letter-spacing: -0.03em; }
.paso p { margin-top: 14px; color: var(--gris); max-width: 27em; }
.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 17px; }
.checks li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--frambuesa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23FFF4EC' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.tablero { position: relative; padding: clamp(30px, 5vw, 60px) clamp(20px, 4vw, 40px); border-radius: 40px; background: var(--crema-2); overflow: hidden; isolation: isolate; display: flex; justify-content: center; align-items: center; gap: 18px; min-height: 420px; }
.tablero .forma { position: absolute; z-index: -1; pointer-events: none; }
.tablero .forma--a { width: 360px; right: -90px; bottom: -120px; }
.tablero .forma--b { width: 300px; left: -80px; top: -90px; }
.tablero .cel { position: relative; width: min(260px, 62%); transform: rotate(-3deg); }
.tablero .cel + .cel { width: min(230px, 54%); transform: rotate(4deg) translateY(30px); }
.tablero .tarjetita { position: relative; width: min(280px, 70%); transform: rotate(-4deg); }
.tablero .tarjetita + .tarjetita { position: absolute; width: min(220px, 48%); right: 8%; bottom: 10%; transform: rotate(8deg); }
.marco { border-radius: 26px; padding: 7px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--linea); width: 100%; }
.marco-in { border-radius: 20px; overflow: hidden; background: var(--blanco); box-shadow: 0 24px 50px -28px rgba(31, 20, 32, .4); }

/* Ponle tu estilo (muestra interactiva) */
#estilo { overflow: hidden; }
.estilo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.controles { margin-top: 34px; display: grid; gap: 26px; }
.control p { font-size: 15px; font-weight: 600; color: var(--gris); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px; background: var(--crema-2); font-weight: 600; font-size: 16px; user-select: none; -webkit-user-select: none; transition: background-color .2s, color .2s, transform .2s var(--resorte); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--ciruela); color: var(--crema); }
.colores { display: flex; flex-wrap: wrap; gap: 10px; }
.color { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(31, 20, 32, .12); transition: transform .3s var(--rebote), box-shadow .2s; }
.color[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--crema), 0 0 0 5.5px var(--ciruela); transform: scale(1.05); }
.color:active { transform: scale(.92); }
.letras .chip { font-size: 17px; }
.estilo-nota { margin-top: 26px; font-size: 15px; color: var(--gris); }
.muestra { position: relative; justify-self: center; }
.muestra .cel { width: 320px; transform: rotate(2deg); }
.muestra .forma { position: absolute; z-index: -1; width: 460px; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
/* El menú del cliente rehecho (los mismos colores que calcula el sistema) */
.mm { --cab: #15171C; --cab-t: #fff; --cab-sub: #C6CBD4; --pill: #FFD23F; --pill-t: #15171C; --precio: #FFD23F; --precio-t: #15171C; --boton: #15171C; --boton-t: #fff; --cuenta: #FFD23F; --cuenta-t: #15171C;
  font-family: Manrope, system-ui, sans-serif; background: #F2F3F5; color: #15171C; aspect-ratio: 390 / 760; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.mm-cab { background: var(--cab); color: var(--cab-t); padding: 44px 18px 34px; position: relative; transition: background-color .45s var(--suave), color .45s; }
.mm-mesa { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--pill); color: var(--pill-t); font-size: 11.5px; font-weight: 800; transition: background-color .45s, color .45s; }
.mm-nombre { margin-top: 14px; font-size: 34px; line-height: 1; transition: font-family .1s; }
.mm-sub { margin-top: 8px; font-size: 12.5px; color: var(--cab-sub); max-width: 22em; }
.mm-cats { display: flex; gap: 6px; padding: 14px 14px 4px; margin-top: -18px; position: relative; }
.mm-cats span { padding: 8px 12px; border-radius: 999px; background: #fff; font-size: 11.5px; font-weight: 700; box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .2); white-space: nowrap; }
.mm-tit { padding: 14px 16px 8px; font-size: 18px; text-transform: uppercase; letter-spacing: .01em; }
.mm-lista { margin: 0 12px; border-radius: 16px; background: #fff; overflow: hidden; }
.mm-p { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 10px; padding: 12px; border-bottom: 1px solid #ECEEF1; }
.mm-p b { display: block; font-size: 13.5px; font-weight: 700; }
.mm-p small { display: block; margin-top: 3px; font-size: 11px; color: #6B7280; line-height: 1.35; }
.mm-precio { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 7px; background: var(--precio); color: var(--precio-t); font-size: 12px; font-weight: 800; transition: background-color .45s, color .45s; }
.mm-foto { position: relative; }
.mm-foto img { width: 86px; height: 86px; border-radius: 12px; object-fit: cover; }
.mm-mas { position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--boton); color: var(--boton-t); display: grid; place-items: center; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 0 0 3px #fff; transition: background-color .45s, transform .25s var(--rebote); }
.mm-mas:active { transform: scale(.88); }
.mm-barra { margin-top: auto; padding: 12px; background: linear-gradient(180deg, rgba(242, 243, 245, 0), #F2F3F5 30%); }
.mm-barra button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 0; background: var(--boton); color: var(--boton-t); font: 700 14px Manrope, sans-serif; cursor: pointer; transition: background-color .45s; }
.mm-barra .n { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--cuenta); color: var(--cuenta-t); display: grid; place-items: center; font-size: 12px; }
.mm-listo { position: absolute; inset: auto 12px 12px; padding: 16px; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); transform: translateY(130%); transition: transform .6s var(--resorte); }
.mm-listo b { display: block; font-size: 16px; }
.mm-listo small { color: #6B7280; font-size: 12px; }
.mm.enviado .mm-listo { transform: none; }

/* Así le llega a tu equipo (oscuro, con movimiento) */
.oscuro { background: var(--ciruela); color: var(--crema); position: relative; overflow: hidden; isolation: isolate; }
.oscuro .entrada { color: #CDBFC8; }
.equipo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.tablilla { border-radius: 34px; padding: 8px; background: rgba(255, 244, 236, .06); box-shadow: inset 0 0 0 1px rgba(255, 244, 236, .1); }
.tablilla-in { border-radius: 28px; background: #FBFBFC; color: #15171C; padding: 22px; font-family: 'Inter Tight', Manrope, system-ui, sans-serif; min-height: 430px; display: flex; flex-direction: column; gap: 12px; }
.tablilla-in h3 { font-family: Manrope, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: baseline; }
.tablilla-in h3 small { font-size: 12.5px; font-weight: 600; color: #6B7280; letter-spacing: 0; }
.qr-p { border-radius: 18px; background: #EEF3FF; box-shadow: inset 0 0 0 1px #D7E1FB; padding: 14px; font-family: Manrope, sans-serif; transition: opacity .5s var(--suave), transform .6s var(--resorte), background-color .4s; }
.qr-p header { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.qr-p header b { font-weight: 800; }
.qr-p header small { display: block; color: #6B7280; font-size: 12px; }
.qr-p ul { list-style: none; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: #fff; display: grid; gap: 5px; font-size: 13.5px; }
.qr-p ul em { font-style: normal; display: block; color: #6B7280; font-size: 12px; }
.qr-p .bts { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.qr-p .bts span { padding: 10px; border-radius: 11px; text-align: center; font-size: 13px; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1.5px #15171C; }
.qr-p .bts span + span { background: #15171C; color: #fff; box-shadow: none; transition: background-color .3s; }
.qr-p.aceptado { background: #E7F6EE; box-shadow: inset 0 0 0 1px #BFE6CF; }
.qr-p.aceptado .bts span + span { background: #1F8A55; }
.js .qr-p.fuera, .js .llamada.fuera { opacity: 0; transform: translateY(14px) scale(.98); }
.llamada { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 16px; padding: 12px 14px; background: #FFF6D6; font-family: Manrope, sans-serif; font-size: 14px; transition: opacity .5s var(--suave), transform .6s var(--resorte); }
.llamada b { font-weight: 800; }
.llamada span.bt-y { padding: 8px 14px; border-radius: 10px; background: #15171C; color: #fff; font-weight: 700; font-size: 12.5px; }
.mesitas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.mesitas span { border-radius: 12px; padding: 10px; background: #fff; box-shadow: inset 0 0 0 1px #E5E7EB; font-family: Manrope, sans-serif; font-size: 12px; color: #6B7280; }
.mesitas span b { display: block; font-size: 20px; color: #15171C; font-weight: 800; }
.mesitas span.oc { background: #FFF6D6; box-shadow: inset 0 0 0 1.5px #F2C94C; }
.mesitas span.qr { background: #EEF3FF; box-shadow: inset 0 0 0 1.5px #9DB4F5; }

/* Todo lo que hace */
.rejilla { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tj { border-radius: 28px; padding: 6px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--linea); }
.tj-in { height: 100%; border-radius: 22px; padding: 24px 22px 26px; background: var(--blanco); display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(31, 20, 32, .04); }
.tj .ic-c { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: #FFE1E7; color: var(--frambuesa); transform: rotate(-6deg); }
.tj:nth-child(3n+2) .ic-c { background: #FFE9DC; color: #B4521F; transform: rotate(5deg); }
.tj:nth-child(3n) .ic-c { background: var(--ciruela); color: var(--durazno); transform: rotate(-3deg); }
.tj .ic { width: 28px; height: 28px; stroke-width: 1.6; }
.tj h3 { margin-top: 20px; font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; }
.tj p { margin-top: 8px; font-size: 16px; color: var(--gris); line-height: 1.5; }
.pronto { align-self: flex-start; margin-top: auto; padding-top: 14px; }
.pronto span { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--ciruela); color: var(--durazno); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tj--pronto { background: transparent; box-shadow: none; }
.tj--pronto .tj-in { background: transparent; box-shadow: none; border: 2px dashed rgba(31, 20, 32, .18); }
.tj--fr .tj-in { background: var(--frambuesa); color: var(--crema); }
.tj--fr p { color: var(--crema); }
.tj.tj--fr .ic-c { background: var(--crema); color: var(--frambuesa); }
.tj--pide { text-decoration: none; transition: transform .3s var(--resorte); }
.tj--pide .pronto span { background: var(--crema); color: var(--frambuesa); }
.tj--pide:active { transform: scale(.98); }
.tj--pide { grid-column: span 3; }
@media (max-width: 1060px) { .tj--pide { grid-column: span 2; } }

/* Calculadora */
.calcu { margin-top: clamp(40px, 5vw, 60px); border-radius: 38px; padding: 8px; background: var(--crema-2); }
.calcu-in { border-radius: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.perillas { padding: clamp(24px, 4vw, 44px); display: grid; gap: 30px; align-content: center; }
.perilla label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 600; font-size: 16.5px; }
.perilla label output { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.perilla input { margin-top: 14px; width: 100%; -webkit-appearance: none; appearance: none; height: 32px; background: transparent; cursor: pointer; font-size: 16px; }
.perilla input::-webkit-slider-runnable-track { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--frambuesa) var(--p, 30%), rgba(31, 20, 32, .14) var(--p, 30%)); }
.perilla input::-moz-range-track { height: 10px; border-radius: 10px; background: rgba(31, 20, 32, .14); }
.perilla input::-moz-range-progress { height: 10px; border-radius: 10px; background: var(--frambuesa); }
.perilla input::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -11px; border-radius: 50%; background: var(--crema); border: 5px solid var(--frambuesa); box-shadow: 0 6px 14px -4px rgba(196, 26, 64, .6); }
.perilla input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--crema); border: 5px solid var(--frambuesa); }
.resultado { border-radius: 30px; background: var(--blanco); padding: clamp(24px, 4vw, 44px); box-shadow: 0 20px 50px -30px rgba(31, 20, 32, .4); }
.resultado .grande { font-size: clamp(54px, 6.4vw, 86px); font-weight: 700; line-height: .95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--frambuesa); }
.resultado .sub { margin-top: 10px; font-size: 18.5px; font-weight: 600; }
.comparo { margin-top: 26px; display: grid; gap: 10px; }
.comparo div { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 15px; }
.comparo i { height: 12px; border-radius: 12px; background: var(--crema); overflow: hidden; }
.comparo i::after { content: ""; display: block; height: 100%; border-radius: 12px; transform-origin: left; transform: scaleX(var(--v, 1)); transition: transform .8s var(--resorte); background: var(--frambuesa); }
.comparo div + div i::after { background: var(--ciruela); }
.comparo b { font-variant-numeric: tabular-nums; }
.resultado .cuenta { margin-top: 22px; font-size: 15.5px; color: var(--gris); }
.aclara { margin-top: 18px; font-size: 14px; color: var(--gris); max-width: 54em; }

/* Precios */
.interruptor { margin: 34px auto 0; display: flex; width: max-content; padding: 5px; border-radius: 999px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); position: relative; }
.interruptor button { position: relative; z-index: 1; border: 0; background: none; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; user-select: none; -webkit-user-select: none; transition: color .3s; }
.interruptor button[aria-pressed="true"] { color: var(--crema); }
.interruptor .ficha { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; border-radius: 999px; background: var(--ciruela); transition: transform .5s var(--resorte), width .5s var(--resorte); }
.interruptor em { font-style: normal; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--durazno); color: var(--ciruela); }
.fundador { margin: 22px auto 0; width: max-content; max-width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--ciruela); color: var(--crema); font-size: 15.5px; transform: rotate(-1.5deg); }
.fundador b { color: var(--durazno); }
.fundador span.s { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--frambuesa); flex: none; }
.fundador .ic { width: 18px; height: 18px; color: var(--crema); }
.planes { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { border-radius: 36px; padding: 8px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--linea); position: relative; }
.plan-in { height: 100%; border-radius: 30px; padding: clamp(26px, 3vw, 36px); background: var(--blanco); display: flex; flex-direction: column; }
.plan h3 { font-size: 24px; letter-spacing: -0.02em; }
.plan .para { margin-top: 6px; color: var(--gris); font-size: 16px; min-height: 3em; }
.cifra { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.cifra b { font-size: clamp(50px, 4.8vw, 66px); line-height: 1; letter-spacing: -0.04em; }
.cifra span { color: var(--gris); font-weight: 500; }
.instala { margin-top: 10px; display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 15px; color: var(--gris); }
.instala b { color: var(--ciruela); font-weight: 600; }
.ahorro { margin-top: 6px; min-height: 24px; font-size: 15px; font-weight: 600; color: var(--frambuesa); }
.plan ul { list-style: none; margin: 22px 0 30px; padding: 0; display: grid; gap: 11px; }
.plan li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 16px; color: var(--gris); }
.plan li::before { content: ""; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: #FFE1E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23E8264F' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.plan .bt { margin-top: auto; align-self: stretch; justify-content: space-between; }
.plan--fr { background: rgba(232, 38, 79, .16); transform: translateY(-10px); }
.plan--fr .plan-in { background: var(--frambuesa); color: var(--crema); }
.plan--fr .para, .plan--fr .cifra span, .plan--fr li, .plan--fr .instala { color: var(--crema); }
.plan--fr .instala b { color: var(--crema); }
.plan--fr .ahorro { color: var(--durazno); }
.plan--fr li::before { background-color: rgba(255, 244, 236, .2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23FFF4EC' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan--ci .plan-in { background: var(--ciruela); color: var(--crema); }
.plan--ci .para, .plan--ci .cifra span, .plan--ci li, .plan--ci .instala { color: #CDBFC8; }
.plan--ci .instala b { color: var(--crema); }
.plan .sin-inst b { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--durazno); color: var(--ciruela); font-size: 14px; transform: rotate(-2deg); }
.plan--ci .ahorro { color: var(--durazno); }
.plan--ci li::before { background-color: rgba(255, 179, 138, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23FFB38A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan--ci .rz { height: 20px; width: auto; margin-top: 10px; align-self: flex-start; }
.insignia { position: absolute; top: -14px; left: 36px; padding: 7px 15px; border-radius: 999px; background: var(--ciruela); color: var(--durazno); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-3deg); }
.extra-c { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.caja-b { border-radius: 32px; padding: 7px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--linea); }
.caja-b-in { height: 100%; border-radius: 26px; background: var(--blanco); padding: clamp(24px, 3.4vw, 34px); }
.caja-b h3 { font-size: 22px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.caja-b h3 img { width: 36px; height: 36px; border-radius: 10px; }
.caja-b p { margin-top: 8px; color: var(--gris); font-size: 16px; }
.fid-lista { margin-top: 16px; display: grid; gap: 8px; }
.fid-lista div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--crema); font-size: 16px; font-variant-numeric: tabular-nums; }
.fid-lista b { font-size: 20px; letter-spacing: -0.02em; }
.fid-lista s { color: var(--gris); font-size: 14px; margin-right: 6px; }
.confianza { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.confianza div { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 22px; background: var(--blanco); font-size: 15px; line-height: 1.4; }
.confianza .ic { width: 22px; height: 22px; color: var(--frambuesa); margin-top: 1px; }
.confianza b { display: block; font-size: 15.5px; font-weight: 600; }
.confianza span { color: var(--gris); }

/* Preguntas */
.preguntas { margin: clamp(36px, 4vw, 52px) auto 0; max-width: 860px; display: grid; gap: 10px; }
.preguntas details { border-radius: 24px; background: var(--crema); transition: background-color .3s; }
.preguntas details[open] { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea), 0 18px 40px -30px rgba(31, 20, 32, .4); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 22px; font-size: 18.5px; font-weight: 600; user-select: none; -webkit-user-select: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--blanco); position: relative; transition: transform .45s var(--rebote), background-color .3s; }
.preguntas summary i::before, .preguntas summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: var(--ciruela); transform: translate(-50%, -50%); }
.preguntas summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.preguntas details[open] summary i { transform: rotate(135deg); background: var(--frambuesa); }
.preguntas details[open] summary i::before, .preguntas details[open] summary i::after { background: var(--crema); }
.preguntas details p { padding: 0 22px 22px; color: var(--gris); max-width: 42em; font-size: 17px; }

/* Cierre */
.cierre { padding: clamp(20px, 3vw, 40px) 0 clamp(84px, 10vw, 130px); background: var(--blanco); }
.cierre-c { position: relative; overflow: hidden; isolation: isolate; border-radius: 44px; background: var(--frambuesa); color: var(--crema); padding: clamp(36px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.cierre-c h2 { font-size: clamp(44px, 6vw, 84px); line-height: .94; letter-spacing: -0.035em; }
.cierre-c h2 .ojo { color: var(--ciruela); }
.cierre-txt p { margin-top: 18px; font-size: 19.5px; max-width: 26em; color: var(--crema); }
.cierre-c .acciones { margin-top: 30px; }
.cierre-c .aro { width: 320px; height: 320px; left: -90px; bottom: -140px; }
.cierre-c .simbolo-f { left: auto; right: -80px; top: -60px; bottom: auto; width: 300px; transform: rotate(16deg); }
.demo-m { position: relative; justify-self: center; width: min(310px, 100%); }
.demo-m .tag { position: absolute; z-index: 3; top: -18px; right: -12px; transform: rotate(6deg); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--durazno); color: var(--ciruela); font-size: 14.5px; font-weight: 700; box-shadow: 0 12px 26px -12px rgba(31, 20, 32, .6); }
.demo-m .cel { width: 100%; transform: rotate(-3deg); }
.demo-m .mm { aspect-ratio: 390 / 760; }
.demo-m .mm-cab { padding: 40px 18px 30px; }
.dudas { margin-top: 16px; border-radius: 36px; background: var(--ciruela); color: var(--crema); padding: clamp(28px, 4vw, 44px) clamp(28px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.dudas h2 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.035em; }
.dudas p { margin-top: 6px; color: #CDBFC8; font-size: 16.5px; }
.pie { padding: 44px 0 calc(48px + env(safe-area-inset-bottom)); background: var(--blanco); border-top: 1px solid var(--linea); color: var(--gris); font-size: 15.5px; }
.pie .env { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; }
.pie img { height: 28px; width: auto; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pie a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pie a:hover { color: var(--ciruela); } }

.ayuda { position: fixed; z-index: 20; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--ciruela); color: var(--crema); text-decoration: none; font-weight: 600; font-size: 15.5px; box-shadow: 0 16px 34px -14px rgba(31, 20, 32, .7); transition: transform .3s var(--resorte); }
.ayuda .bola { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--durazno); color: var(--ciruela); }
.ayuda .bola .ic { width: 19px; height: 19px; }
.ayuda:active { transform: scale(.96); }
.barra-fija { display: none; }

.js .rv { opacity: 0; transform: translateY(30px); filter: blur(6px); transition: opacity .9s var(--resorte), transform 1s var(--resorte), filter .9s var(--resorte); }
.js .rv.on { opacity: 1; transform: none; filter: none; }
.js .rv.d1 { transition-delay: .08s; } .js .rv.d2 { transition-delay: .16s; } .js .rv.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; filter: none; transition: none; } html { scroll-behavior: auto; } }

@media (max-width: 1060px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planes { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
  .plan--fr { transform: none; }
  .confianza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .escena .cel { right: 20px; }
}
@media (max-width: 900px) {
  .isla nav a.ln, .isla nav .bt { display: none; }
  .hamb { display: block; }
  .portada-grid { grid-template-columns: minmax(0, 1fr); }
  .escena { min-height: 560px; margin-top: 20px; }
  .escena .cel { right: 8%; }
  .plato { width: 480px; height: 480px; right: -90px; }
  .paso, .paso:nth-child(even), .estilo, .equipo { grid-template-columns: minmax(0, 1fr); }
  .paso:nth-child(even) .paso-txt { order: 0; }
  .calcu-in { grid-template-columns: minmax(0, 1fr); }
  .extra-c { grid-template-columns: minmax(0, 1fr); }
  .cierre-c { grid-template-columns: minmax(0, 1fr); }
  .demo-m { margin: 10px 0 10px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .isla-in { padding-left: 18px; }
  .isla-logo img { height: 25px; }
  .portada h1 { font-size: clamp(46px, 12.6vw, 64px); line-height: .96; }
  .acciones .bt { flex: 1 1 100%; justify-content: space-between; }
  .acciones .bt--linea { justify-content: center; }
  .escena { min-height: 470px; }
  .escena .cel { width: 190px; right: 2%; border-radius: 38px; padding: 5px; }
  .escena .cel-in { border-width: 7px; border-radius: 33px; }
  .escena .cel-in::before { height: 13px; top: 5px; }
  .escena .tarjetita { width: 160px; left: 0; top: 96px; border-radius: 16px; }
  .escena .tarjetita img { border-radius: 16px; }
  .escena .sticker { left: 0; top: 40px; font-size: 14px; padding: 10px 14px; }
  .aviso { min-width: 0; font-size: 13px; padding: 10px 12px 10px 10px; }
  .aviso .pic { width: 34px; height: 34px; border-radius: 11px; }
  .aviso--1 { right: auto; left: 8%; top: auto; bottom: 6px; } .aviso--2, .aviso--3 { display: none; }
  .fila { font-size: 19px; }
  .tablero { min-height: 0; padding: 32px 16px; border-radius: 32px; }
  .muestra .cel { width: 290px; }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tj { border-radius: 22px; padding: 4px; }
  .tj-in { border-radius: 18px; padding: 16px 14px 18px; }
  .tj .ic-c { width: 44px; height: 44px; border-radius: 14px; }
  .tj .ic { width: 23px; height: 23px; }
  .tj h3 { margin-top: 14px; font-size: 16.5px; }
  .tj p { font-size: 14px; line-height: 1.45; }
  .tj--pide { grid-column: span 2; }
  .comparo div { grid-template-columns: 120px minmax(0, 1fr) auto; font-size: 14px; }
  .confianza { grid-template-columns: minmax(0, 1fr); }
  .fundador { border-radius: 24px; transform: none; }
  .mesitas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mesitas span:nth-child(4) { display: none; }
  .ayuda { display: none; }
  .barra-fija { display: flex; position: fixed; z-index: 25; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); gap: 8px; padding: 8px; border-radius: 999px; background: rgba(31, 20, 32, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 40px -16px rgba(31, 20, 32, .7); transform: translateY(140%); transition: transform .5s var(--resorte); }
  .barra-fija.ver { transform: none; }
  .barra-fija .bt { flex: 1; min-height: 50px; justify-content: space-between; font-size: 16.5px; }
  .barra-fija .chat { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 244, 236, .12); color: var(--crema); }
  .barra-fija .chat .ic { width: 22px; height: 22px; }
  .pie { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* Español / inglés, y México / Estados Unidos (pais.js pone moneda-mxn o moneda-usd, y venta-abierta) */
.idiomas { display: inline-flex; align-items: center; padding: 3px; margin-right: 4px; border-radius: 999px; background: rgba(31, 20, 32, .07); }
.idiomas a, .idiomas > span { padding: 8px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-decoration: none; color: var(--gris); line-height: 1; }
.idiomas > span[aria-current] { background: var(--ciruela); color: var(--crema); }
@media (hover: hover) and (pointer: fine) { .idiomas a:hover { color: var(--ciruela); } }
.solo-us, .pronto-us, .caja-pronto { display: none; }
.instala.solo-us { display: none; } /* gana al display: block de .instala en celular */
.moneda-usd .solo-mx { display: none; }
.moneda-usd.venta-abierta .solo-us { display: revert; }
.moneda-usd:not(.venta-abierta) .con-precio { display: none; }
.moneda-usd:not(.venta-abierta) .pronto-us { display: revert; }
.moneda-usd:not(.venta-abierta) .caja-pronto { display: grid; }
.caja-pronto { margin: 36px auto 0; max-width: 820px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: clamp(24px, 4vw, 36px); border-radius: 34px; background: var(--frambuesa); color: var(--crema); box-shadow: 0 24px 50px -30px rgba(196, 26, 64, .7); }
.caja-pronto .bandera { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--crema); color: var(--frambuesa); transform: rotate(-6deg); }
.caja-pronto .bandera .ic { width: 28px; height: 28px; }
.caja-pronto h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.025em; }
.caja-pronto p { margin-top: 8px; color: rgba(255, 244, 236, .88); font-size: 16.5px; }
.tj--pide-ancha { grid-column: 1 / -1; }
@media (max-width: 640px) { .caja-pronto { grid-template-columns: minmax(0, 1fr); } .caja-pronto .bt { justify-content: space-between; } .idiomas a, .idiomas > span { padding: 8px 9px; } }

/* ===== Versión propia (que no se parezca a Fidelo), 27 de octubre de 2026 ===== */

/* ¿Cómo funciona?: hojas de carta que se deslizan */
.cab-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.flechas { display: flex; gap: 10px; flex: none; }
.flecha { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--ciruela); color: var(--crema); transition: transform .3s var(--rebote), opacity .2s; }
.flecha:first-child .ic { transform: rotate(180deg); }
.flecha:active { transform: scale(.92); }
.flecha[disabled] { opacity: .3; cursor: default; }
.flecha .ic { width: 22px; height: 22px; stroke-width: 2; }
.hojas { margin-top: clamp(36px, 5vw, 56px); display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: 10px max(var(--orilla), calc((100vw - var(--ancho)) / 2 + var(--orilla))) 30px; scroll-padding: 0 max(var(--orilla), calc((100vw - var(--ancho)) / 2 + var(--orilla))); scrollbar-width: none; }
.hojas::-webkit-scrollbar { display: none; }
.hojas:focus-visible { outline: 3px solid #3A66FF; outline-offset: -3px; }
.hoja { flex: 0 0 min(940px, 86vw); scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 48px); align-items: center; min-height: 540px; padding: clamp(28px, 4vw, 52px); border-radius: 44px; position: relative; overflow: hidden; isolation: isolate;
  -webkit-mask: radial-gradient(circle at calc(100% - 6px) 6px, #0000 54px, #000 55px); mask: radial-gradient(circle at calc(100% - 6px) 6px, #0000 54px, #000 55px); }
.hoja--blanca { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.hoja--frambuesa { background: var(--frambuesa); color: var(--crema); }
.hoja--durazno { background: var(--durazno); }
.hoja--ciruela { background: var(--ciruela); color: var(--crema); }
.hoja-num { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; font-size: 26px; font-weight: 700; background: var(--frambuesa); color: var(--crema); transform: rotate(-8deg); }
.hoja--frambuesa .hoja-num { background: var(--crema); color: var(--frambuesa); }
.hoja--durazno .hoja-num { background: var(--ciruela); color: var(--durazno); }
.hoja--ciruela .hoja-num { background: var(--durazno); color: var(--ciruela); }
.hoja h3 { margin-top: 22px; font-size: clamp(28px, 3vw, 42px); line-height: 1.04; letter-spacing: -0.03em; }
.hoja-txt > p { margin-top: 14px; opacity: .82; max-width: 26em; }
.hoja--frambuesa .checks li::before, .hoja--ciruela .checks li::before { background-color: var(--crema); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23E8264F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hoja--durazno .checks li::before { background-color: var(--ciruela); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23FFB38A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hoja-img { position: relative; display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 420px; }
.hoja-img .cel { position: relative; width: min(220px, 48%); padding: 5px; border-radius: 40px; }
.hoja-img .cel-in { border-width: 7px; border-radius: 35px; }
.hoja-img .cel:first-child { transform: rotate(-4deg) translateY(-12px); }
.hoja-img .cel + .cel { transform: rotate(5deg) translateY(22px); }
.hoja-img--tarjetas .tarjetita { position: relative; width: min(250px, 56%); transform: rotate(-6deg); }
.hoja-img--tarjetas .tarjetita + .tarjetita { width: min(210px, 46%); transform: rotate(7deg) translate(-26px, 34px); }
.hoja-img--pc .marco { transform: rotate(-2deg); background: rgba(255, 244, 236, .1); box-shadow: none; }
.puntos { display: flex; gap: 8px; justify-content: center; }
.puntos i { width: 10px; height: 10px; border-radius: 10px; background: rgba(31, 20, 32, .18); transition: width .4s var(--resorte), background-color .3s; }
.puntos i.on { width: 30px; background: var(--frambuesa); }

/* Cada restaurante, su menú: tres celulares en abanico y los tipos de restaurante */
.abanico { position: relative; display: flex; justify-content: center; align-items: flex-end; margin-top: clamp(40px, 5vw, 64px); height: 560px; }
.abanico .cel { position: absolute; bottom: 0; width: 270px; transition: transform .6s var(--resorte); }
.abanico .cel--izq { transform: translateX(-250px) rotate(-9deg) scale(.88); transform-origin: bottom center; z-index: 1; }
.abanico .cel--der { transform: translateX(250px) rotate(9deg) scale(.88); transform-origin: bottom center; z-index: 1; }
.abanico .cel--centro { z-index: 2; width: 290px; }
.abanico .mm { aspect-ratio: 390 / 780; }
.abanico .mm.cambia .mm-cab, .abanico .mm.cambia .mm-lista { animation: entraMm .55s var(--resorte) both; }
@keyframes entraMm { from { opacity: .3; transform: translateY(10px); } }
.tipos { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tipos .chip { font-size: 17px; padding: 12px 22px; }
.estilo-nota { text-align: center; }

/* La carta de Cartia: lo que trae, como un menú */
#todo { background: var(--blanco); }
.carta-c { position: relative; max-width: 1080px; margin: 0 auto; border-radius: 44px; background: var(--crema); padding: clamp(30px, 5vw, 70px); box-shadow: inset 0 0 0 2px var(--frambuesa), inset 0 0 0 10px var(--crema), inset 0 0 0 11px rgba(232, 38, 79, .35); }
.carta-cab { text-align: center; }
.carta-cab img { margin: 0 auto; }
.carta-cab .titulo { margin-top: 16px; }
.carta-cab .entrada { margin: 12px auto 0; }
.carta-cols { margin-top: clamp(30px, 4vw, 50px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.carta-sec h3 { font-size: 15px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--frambuesa); padding-bottom: 12px; border-bottom: 2px solid var(--frambuesa); }
.platillo { padding: 16px 0 0; }
.platillo p { display: flex; align-items: baseline; gap: 8px; }
.platillo b { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.puntitos { flex: 1; min-width: 16px; border-bottom: 2px dotted rgba(31, 20, 32, .3); transform: translateY(-4px); }
.platillo em { flex: none; font-style: normal; font-size: 13px; font-weight: 600; color: var(--frambuesa); }
.platillo--pronto em { padding: 3px 10px; border-radius: 999px; background: var(--ciruela); color: var(--durazno); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
.platillo--pronto b { opacity: .7; }
.platillo small { display: block; margin-top: 4px; font-size: 15px; color: var(--gris); line-height: 1.45; }
.carta-pie { margin-top: clamp(30px, 4vw, 44px); padding-top: 22px; border-top: 2px dotted rgba(31, 20, 32, .25); text-align: center; color: var(--gris); }
.carta-pie a { font-weight: 700; color: var(--frambuesa); }

/* Precios: los tres juntos y una tabla para comparar */
.plan .para { min-height: 3em; }
.plan .bt { margin-top: 22px; }
.compara { margin-top: 18px; border-radius: 32px; background: rgba(255, 255, 255, .55); padding: 8px; box-shadow: inset 0 0 0 1px var(--linea); }
.compara table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--blanco); border-radius: 26px; overflow: hidden; font-size: 15.5px; }
.compara caption { text-align: left; padding: 16px 18px 6px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--frambuesa); }
.compara th, .compara td { padding: 13px 16px; border-bottom: 1px solid var(--linea); }
.compara thead th { font-size: 14.5px; font-weight: 700; text-align: center; }
.compara thead th:nth-child(3) { background: var(--frambuesa); color: var(--crema); }
.compara thead th:nth-child(4) { background: var(--ciruela); color: var(--crema); }
.compara tbody th { text-align: left; font-weight: 500; color: var(--gris); }
.compara td { text-align: center; width: 17%; }
.compara td:nth-child(3) { background: rgba(232, 38, 79, .05); }
.compara tr:last-child th, .compara tr:last-child td { border-bottom: 0; }
.si, .no { display: inline-block; width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; }
.si { background: var(--frambuesa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23FFF4EC' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.no { width: 14px; height: 2px; border-radius: 2px; background: rgba(31, 20, 32, .22); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.confianza { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.confianza > div { background: none; padding: 6px 0; }

@media (max-width: 1060px) {
  .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 10px; }
  .plan--fr { transform: none; }
}
@media (max-width: 900px) {
  .hoja { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hoja-img { min-height: 340px; }
  .abanico { height: 470px; }
  .abanico .cel { width: 230px; }
  .abanico .cel--centro { width: 250px; }
  .abanico .cel--izq { transform: translateX(-170px) rotate(-9deg) scale(.82); }
  .abanico .cel--der { transform: translateX(170px) rotate(9deg) scale(.82); }
  .carta-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cab-fila { display: block; }
  .flechas { margin-top: 20px; }
  .flecha { width: 50px; height: 50px; }
  .hojas { gap: 12px; padding-bottom: 22px; }
  .hoja { flex-basis: 88vw; border-radius: 34px; padding: 26px 20px 20px; -webkit-mask: radial-gradient(circle at calc(100% - 4px) 4px, #0000 40px, #000 41px); mask: radial-gradient(circle at calc(100% - 4px) 4px, #0000 40px, #000 41px); }
  .hoja-num { width: 50px; height: 50px; font-size: 21px; }
  .hoja h3 { margin-top: 16px; }
  .hoja .checks li { font-size: 15.5px; }
  .hoja-img { min-height: 300px; }
  .hoja-img .cel { width: 46%; padding: 4px; border-radius: 30px; }
  .hoja-img .cel-in { border-width: 5px; border-radius: 26px; }
  .hoja-img .cel-in::before { height: 10px; top: 4px; }
  .abanico { height: 430px; }
  .abanico .cel--izq, .abanico .cel--der { display: none; }
  .abanico .cel--centro { width: 230px; }
  .tipos .chip { font-size: 15.5px; padding: 10px 16px; }
  .carta-c { border-radius: 34px; padding: 28px 18px; box-shadow: inset 0 0 0 2px var(--frambuesa), inset 0 0 0 7px var(--crema), inset 0 0 0 8px rgba(232, 38, 79, .35); }
  .platillo b { font-size: 16.5px; }
  .platillo small { font-size: 14px; }
  .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .plan { border-radius: 22px; padding: 4px; }
  .plan-in { border-radius: 18px; padding: 16px 10px 12px; }
  .plan h3 { font-size: 14.5px; line-height: 1.15; min-height: 2.3em; }
  .plan .para, .plan .rz { display: none; }
  .cifra { margin-top: 10px; flex-direction: column; gap: 0; }
  .cifra b { font-size: 29px; }
  .cifra span { font-size: 12.5px; }
  .instala { margin-top: 6px; font-size: 11px; line-height: 1.3; display: block; }
  .instala b { display: block; font-size: 13px; }
  .plan .sin-inst b { font-size: 11px; padding: 4px 8px; }
  .ahorro { font-size: 11px; min-height: 0; }
  .plan .bt { margin-top: 12px; min-height: 44px; padding: 0 6px 0 12px; font-size: 13px; gap: 4px; }
  .plan .bt .bola { width: 28px; height: 28px; }
  .plan .bt .bola .ic { width: 15px; height: 15px; }
  .insignia { left: 50%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; font-size: 9.5px; padding: 5px 9px; top: -12px; }
  .compara { border-radius: 24px; padding: 4px; }
  .compara table { font-size: 13px; border-radius: 20px; }
  .compara th, .compara td { padding: 10px 6px; }
  .compara tbody th { padding-left: 12px; }
  .compara thead th { font-size: 11px; line-height: 1.2; }
  .compara td { width: 15%; }
  .si { width: 20px; height: 20px; background-size: 13px; }
  .confianza { justify-content: flex-start; flex-direction: column; gap: 4px; }
}

.mm > * { flex-shrink: 0; }
.mm .mm-barra { position: absolute; left: 0; right: 0; bottom: 0; }
@media (max-width: 640px) { .plan .bt { justify-content: center; padding: 0 8px; } .plan .bt .bola { display: none; } }
.abanico .mm { aspect-ratio: 390 / 820; }
.abanico .mm-cab { padding: 34px 16px 28px; }
.abanico .mm-nombre { font-size: 26px !important; }
@media (max-width: 640px) { .abanico .mm-sub { display: none; } .abanico .mm-nombre { font-size: 23px !important; } }