/* =========================================================
   QREATOR — Landing page
   Solo maquetación (HTML + CSS). Sin JavaScript.
   ========================================================= */

/* ---------- Tokens ---------- */
/* Las fichas de esta pagina viven en theme.css, que App.razor enlaza siempre. Estaban
   aqui y en ocho hojas mas, con los mismos valores; ver el bloque «Fichas del diseno
   del dueno» alla. */

/* ---------- Reset ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--fuente-texto);
    color: var(--texto);
    background: var(--blanco);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulo);
    color: var(--tinta);
    margin: 0;
    line-height: 1.2;
}

p {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    display: block;
}

.contenedor {
    max-width: var(--contenedor);
    margin: 0 auto;
    padding: 0 28px;
}

.rojo {
    color: var(--rojo);
}

.eyebrow {
    font-family: var(--fuente-titulo);
    color: var(--rojo);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .10em;
    margin-bottom: 14px;
}

.titulo-seccion {
    font-size: 29px;
    font-weight: 600;
    text-align: center;
    letter-spacing: -.01em;
    margin-bottom: 34px;
}


    .btn--full {
    width: 100%;
}


    .btn--rojo:hover {
        background: var(--rojo-oscuro);
    }

.btn--ghost {
    background: #fff;
    color: var(--tinta);
    border-color: var(--linea);
}

    .btn--ghost:hover {
        border-color: #cfc8c4;
    }


.btn__play {
    width: 18px;
    height: 18px;
    color: var(--tinta);
}

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--fuente-titulo);
    font-size: 13.5px;
    color: var(--tinta);
}

    .enlace-flecha svg {
        width: 15px;
        height: 15px;
    }

    .enlace-flecha:hover {
        color: var(--rojo);
    }

/* ---------- Listas con check ---------- */
.lista-check li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 11px;
    font-size: 13.5px;
    color: var(--texto);
}

    .lista-check li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 3px;
        width: 16px;
        height: 16px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23F0301F'/%3E%3Cpath d='m7.2 12.3 3.2 3.2 6.4-6.9' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    }

.lista-check--sm li {
    font-size: 12.5px;
    margin-bottom: 8px;
    padding-left: 22px;
}

    .lista-check--sm li::before {
        width: 12px;
        height: 12px;
        top: 4px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 12.6 5.2 5.4L20 6.4' fill='none' stroke='%23F0301F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    }

/* =========================================================
   NAV
   ========================================================= */
.nav {
    background: #fff;
    border-bottom: 1px solid var(--linea-suave);
    position: relative;
    z-index: 20;
}

.nav__inner {
    max-width: var(--contenedor);
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 38px;
}

.nav__logo img {
    height: 56px;
    width: auto;
}

.nav__links {
    display: flex;
    gap: 26px;
    font-size: 13.5px;
    font-family: var(--fuente-titulo);
    color: #3D3D3D;
}

    .nav__links a:hover {
        color: var(--rojo);
    }

.nav__actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
    position: relative;
    overflow: hidden;
    /* >>> Sustituye esta imagen por la foto de fondo definitiva <<< */
    background-color: #D9CFC4;
    background-image: url("assets/hero-fondo.jpg");
    background-size: cover;
    background-position: center;
}

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 38%, rgba(255,255,255,.42) 60%, rgba(255,255,255,.10) 100%);
    }

.hero__inner {
    position: relative;
    max-width: var(--contenedor);
    margin: 0 auto;
    padding: 56px 28px 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.02fr);
    gap: 30px;
    align-items: center;
}

.hero__texto {
    padding: 20px 0 70px;
    max-width: 520px;
}

.hero__titulo {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.08;
}

.hero__subtitulo {
    font-family: var(--fuente-titulo);
    font-size: 24px;
    font-weight: 600;
    color: var(--tinta);
    margin-top: 12px;
    letter-spacing: -.015em;
}

.hero__parrafo {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.75;
    max-width: 44ch;
    color: #5B5B5B;
}

.hero__botones {
    display: flex;
    gap: 12px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.hero__badges {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 28px;
    font-size: 12.5px;
    color: #5B5B5B;
}

    .hero__badges li {
        display: flex;
        align-items: center;
        gap: 9px;
    }

.badge__ico {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #D8D2CE;
    display: grid;
    place-items: center;
    color: #6C6C6C;
    background: rgba(255,255,255,.6);
}

    .badge__ico svg {
        width: 14px;
        height: 14px;
    }

/* ---------- Mockups del hero ---------- */
.hero__visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 520px;
    padding-top: 34px;
}

/* Teléfono */
.telefono {
    position: relative;
    z-index: 3;
    width: 252px;
    background: #111;
    border-radius: 34px;
    padding: 9px;
    box-shadow: var(--sombra-lg);
    margin-right: 60px;
    margin-bottom: -2px;
}

.telefono__pantalla {
    background: #fff;
    border-radius: 27px;
    overflow: hidden;
    height: 478px;
    display: flex;
    flex-direction: column;
}

.tel__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px 4px;
    font-size: 9px;
    color: #333;
    font-weight: 600;
}

.tel__status-ico svg {
    width: 22px;
    height: 11px;
    color: #333;
}

.tel__topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 14px 10px;
    border-bottom: 1px solid var(--linea-suave);
}

    .tel__topbar strong {
        font-family: var(--fuente-titulo);
        font-size: 15px;
        color: var(--tinta);
    }

.tel__scroll {
    padding: 10px 12px 14px;
    overflow: hidden;
}

.tel__seccion {
    font-family: var(--fuente-titulo);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--tinta);
    margin: 8px 0 6px;
}

.tel__item {
    display: flex;
    gap: 9px;
    padding: 6px 0;
    border-bottom: 1px solid #F4F1EF;
}

.tel__foto {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
    background: #EADFD3 center/cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
/* Sustituye por fotos reales de los platillos si lo deseas */
.tel__foto--1 {
    background-color: #E7CFB2;
    background-image: url("assets/platillo-1.jpg");
}

.tel__foto--2 {
    background-color: #E3B9A6;
    background-image: url("assets/platillo-2.jpg");
}

.tel__foto--3 {
    background-color: #EDC7A4;
    background-image: url("assets/platillo-3.jpg");
}

.tel__foto--4 {
    background-color: #C99B79;
    background-image: url("assets/platillo-4.jpg");
}

.tel__foto--5 {
    background-color: #E9E4A9;
    background-image: url("assets/platillo-5.jpg");
}

.tel__txt {
    min-width: 0;
    flex: 1;
}

.tel__fila {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}

    .tel__fila b {
        font-size: 9.5px;
        color: var(--tinta);
        font-family: var(--fuente-titulo);
        font-weight: 600;
    }

.tel__precio {
    font-size: 9px;
    color: var(--tinta);
    font-weight: 600;
}

.tel__txt p {
    font-size: 7.8px;
    color: #8A8A8A;
    line-height: 1.45;
    margin-top: 2px;
}

/* Portamenús */
.tent {
    position: absolute;
    right: 0;
    bottom: 26px;
    z-index: 2;
    width: 230px;
}

.tent__cara {
    position: relative;
    background: #fff;
    border-radius: 14px 14px 6px 6px;
    padding: 22px 18px 16px;
    text-align: center;
    box-shadow: var(--sombra-lg);
    overflow: hidden;
}

.tent__titulo {
    font-family: var(--fuente-titulo);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tinta);
    letter-spacing: .02em;
    line-height: 1.45;
    margin-bottom: 14px;
}

.tent__qr {
    width: 132px;
    height: 132px;
    margin: 0 auto 12px;
}

.tent__logo {
    width: 112px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.tent__esquina {
    position: absolute;
    right: -30px;
    bottom: -38px;
    width: 130px;
    height: 96px;
    background: var(--rojo);
    transform: rotate(-14deg);
    border-radius: 6px;
}

.tent__base {
    height: 16px;
    margin: 0 -8px;
    background: linear-gradient(#8A5A32,#6B4526);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

/* =========================================================
   DOLORES
   ========================================================= */
.dolores {
    background: var(--gris-bg);
    padding: 50px 0 34px;
}

.dolores__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 34px;
}

.dolor {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.dolor__ico {
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid #E4B8B2;
    display: grid;
    place-items: center;
    color: var(--tinta);
    background: #fff;
}

    .dolor__ico svg {
        width: 24px;
        height: 24px;
    }

.dolor h3 {
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 6px;
}

.dolor p {
    font-size: 12.5px;
    line-height: 1.65;
    color: #6B6B6B;
}

/* =========================================================
   EDITOR
   ========================================================= */
.editor {
    background: var(--gris-bg);
    padding: 0 0 40px;
}

.editor__panel {
    background: var(--crema);
    border-radius: var(--radio-xl);
    padding: 38px 40px;
    display: grid;
    grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
    gap: 36px;
    align-items: center;
}

.editor__texto h2 {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.015em;
    margin-bottom: 20px;
}

.editor__botones {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 24px;
}

/* Mockup app */
.app {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--linea);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.app__topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--linea-suave);
}

.app__logo {
    height: 26px;
    width: auto;
}

.app__acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.chip {
    font-family: var(--fuente-titulo);
    font-size: 10.5px;
    padding: 6px 11px;
    border-radius: 6px;
    border: 1px solid var(--linea);
    color: var(--tinta);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.chip--rojo {
    background: var(--rojo);
    color: #fff;
    border-color: var(--rojo);
}

.chip svg {
    width: 11px;
    height: 11px;
}

.select {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 10.5px;
    color: #3B3B3B;
    border: 1px solid var(--linea);
    border-radius: 6px;
    padding: 6px 9px;
    background: #fff;
    width: 100%;
}

    .select svg {
        width: 12px;
        height: 12px;
        color: #8A8A8A;
        flex: none;
    }

.select--top {
    width: 172px;
    margin-left: 26px;
}

.app__cuerpo {
    display: grid;
    grid-template-columns: .85fr 1.5fr 1fr;
    min-height: 290px;
}

.app__col {
    padding: 12px 14px;
    border-right: 1px solid var(--linea-suave);
}

    .app__col:last-child {
        border-right: 0;
    }

.app__col--menu {
    background: #fff;
}

.app__col--estilos {
    background: #fff;
}

.app__colTitulo {
    font-family: var(--fuente-titulo);
    font-size: 10.5px;
    color: #6E6E6E;
    font-weight: 500;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--linea-suave);
}

.app__secciones li {
    font-size: 11px;
    color: #3B3B3B;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 5px;
    border: 1px solid transparent;
}

    .app__secciones li.activa {
        background: var(--rojo-claro);
        color: var(--tinta);
        font-weight: 500;
    }

.app__agregar {
    display: block;
    text-align: center;
    font-size: 10.5px;
    color: #5A5A5A;
    border: 1px dashed #D9D2CE;
    border-radius: 6px;
    padding: 7px;
    margin-top: 12px;
}

.app__grupo {
    font-family: var(--fuente-titulo);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tinta);
    border-left: 2px solid var(--rojo);
    padding-left: 8px;
    margin-bottom: 10px;
}

.platillo {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--linea-suave);
    border-radius: 9px;
    padding: 9px 10px;
    margin-bottom: 8px;
    box-shadow: var(--sombra-sm);
}

    .platillo b {
        font-family: var(--fuente-titulo);
        font-size: 11px;
        color: var(--tinta);
        font-weight: 600;
    }

    .platillo p {
        font-size: 9.5px;
        color: #8A8A8A;
        line-height: 1.45;
        margin-top: 3px;
        max-width: 26ch;
    }

.platillo__foto {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: none;
    background: #EADFD3 center/cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

.platillo__foto--1 {
    background-color: #EDC7A4;
    background-image: url("assets/platillo-3.jpg");
}

.platillo__foto--2 {
    background-color: #C99B79;
    background-image: url("assets/platillo-4.jpg");
}

.platillo__foto--3 {
    background-color: #E8D8AE;
    background-image: url("assets/platillo-6.jpg");
}

.app__label {
    font-size: 9.5px;
    color: #8A8A8A;
    margin: 12px 0 6px;
}

    .app__label:first-of-type {
        margin-top: 0;
    }

.swatches {
    display: flex;
    gap: 7px;
}

.sw {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.sw--activo {
    outline: 2px solid #fff;
    box-shadow: 0 0 0 1.5px var(--c);
}

.fondos {
    display: flex;
    gap: 7px;
}

.fondo {
    width: 28px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid var(--linea);
    background: #fff;
}

.fondo--activo {
    border: 1.5px solid var(--rojo);
}

.fondo--madera {
    background: linear-gradient(#7A4A28,#5C3618);
    border-color: #5C3618;
}

.fondo--gris {
    background: #EDEDED;
}

.fondo--papel {
    background: #F2EADC;
}

.slider {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider__pista {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: #E7E1DD;
}

.slider__lleno {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 52%;
    border-radius: 4px;
    background: var(--rojo);
}

.slider__tirador {
    position: absolute;
    left: 52%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1.5px var(--rojo);
}

.slider__valor {
    font-size: 9.5px;
    color: #8A8A8A;
}

/* =========================================================
   BENEFICIOS
   ========================================================= */
.beneficios {
    background: var(--gris-bg);
    padding: 6px 0 42px;
}

.beneficios__grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 22px;
    text-align: center;
}

.beneficio__ico {
    display: grid;
    place-items: center;
    color: var(--rojo);
    margin-bottom: 14px;
}

    .beneficio__ico svg {
        width: 30px;
        height: 30px;
    }

.beneficio h3 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.beneficio p {
    font-size: 11.5px;
    line-height: 1.6;
    color: #6B6B6B;
}

/* =========================================================
   ANALÍTICAS
   ========================================================= */
.analitica {
    background: var(--gris-bg);
    padding: 0 0 40px;
}

.analitica__panel {
    background: #F5F1EF;
    border-radius: var(--radio-xl);
    padding: 30px 32px;
    display: grid;
    grid-template-columns: minmax(0,.85fr) minmax(0,2.15fr);
    gap: 28px;
    align-items: center;
}

.analitica__texto h2 {
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.015em;
}

.analitica__intro {
    font-size: 12.5px;
    color: #6B6B6B;
    margin: 12px 0 18px;
    line-height: 1.65;
    max-width: 38ch;
}

.analitica__texto .btn {
    margin-top: 8px;
}

.analitica__cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}

.card {
    background: #fff;
    border: 1px solid var(--linea-suave);
    border-radius: var(--radio);
    padding: 15px 16px;
    box-shadow: var(--sombra-sm);
    display: flex;
    flex-direction: column;
}

.card__titulo {
    font-size: 11px;
    color: #6E6E6E;
    margin-bottom: 8px;
}

.card__numero {
    font-family: var(--fuente-titulo);
    font-size: 30px;
    font-weight: 600;
    color: var(--tinta);
    line-height: 1.1;
}

.card__delta {
    font-size: 10.5px;
    color: var(--verde);
    margin-top: 4px;
}

.spark {
    width: 100%;
    height: 62px;
    margin-top: auto;
}

.ranking li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: #4B4B4B;
    padding: 5px 0;
    border-bottom: 1px solid #F3F0EE;
}

    .ranking li:last-child {
        border-bottom: 0;
    }

.ranking b {
    color: var(--tinta);
    font-weight: 600;
}

.barras {
    display: flex;
    gap: 8px;
    height: 92px;
    margin-top: 4px;
}

.eje {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 8.5px;
    color: #A5A5A5;
    font-style: normal;
}

    .eje i {
        font-style: normal;
    }

.barras__area {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    border-left: 1px solid #EDE9E7;
    border-bottom: 1px solid #EDE9E7;
    padding-left: 6px;
}

    .barras__area span {
        flex: 1;
        height: var(--h);
        background: #D6D2D0;
        border-radius: 2px 2px 0 0;
    }

    .barras__area .alta {
        background: var(--rojo);
    }

.barras__labels {
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    margin-top: 6px;
    font-size: 8.5px;
    color: #A5A5A5;
}

    .barras__labels i {
        font-style: normal;
    }

/* =========================================================
   PRECIOS
   ========================================================= */
.precios {
    background: var(--gris-bg);
    padding: 6px 0 38px;
}

.precios__layout {
    display: grid;
    grid-template-columns: minmax(0,2.55fr) minmax(0,.95fr);
    gap: 20px;
    align-items: start;
}

/* Dos columnas desde que Business dejó de venderse. */
.planes {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    overflow: hidden;
}

.plan {
    padding: 20px 22px 22px;
    border-right: 1px solid var(--linea-suave);
    display: flex;
    flex-direction: column;
}

    .plan:last-child {
        border-right: 0;
    }

.plan--destacado {
    background: #FFFDFD;
}

.plan__nombre {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.etiqueta {
    font-family: var(--fuente-texto);
    font-size: 9.5px;
    font-weight: 500;
    color: #fff;
    background: var(--rojo);
    border-radius: 20px;
    padding: 3px 9px;
}

.plan__precio {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 16px;
}

.plan__monto {
    font-family: var(--fuente-titulo);
    font-size: 30px;
    font-weight: 600;
    color: var(--tinta);
}

.plan__periodo {
    font-size: 11.5px;
    color: #8A8A8A;
}

.plan .lista-check {
    margin-bottom: 20px;
}

.plan .btn {
    margin-top: auto;
}

.extra {
    background: var(--crema-2);
    border-radius: var(--radio-lg);
    padding: 22px 22px 24px;
}

    .extra h3 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .extra > p {
        font-size: 12px;
        color: #6B6B6B;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .extra .lista-check {
        margin-bottom: 20px;
    }

    .extra .btn svg {
        width: 15px;
        height: 15px;
    }

/* =========================================================
   SEGURIDAD
   ========================================================= */
.seguridad {
    background: var(--gris-bg);
    padding: 4px 0 40px;
}

.seguridad__grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 26px;
}

.seg {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.seg__ico {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid #E4B8B2;
    display: grid;
    place-items: center;
    color: var(--rojo);
    background: #fff;
}

    .seg__ico svg {
        width: 17px;
        height: 17px;
    }

.seg p {
    font-size: 12px;
    line-height: 1.6;
    color: #5B5B5B;
}

/* =========================================================
   CIERRE / FOOTER
   ========================================================= */
.cierre {
    background: var(--rojo);
    color: #fff;
    padding: 22px 0;
}

.cierre__inner {
    max-width: var(--contenedor);
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 34px;
}

.cierre__logo {
    height: 56px;
    width: auto;
    flex: none;
}

.cierre__texto {
    flex: 1;
}

.cierre__titulo {
    font-family: var(--fuente-titulo);
    font-size: 19px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -.01em;
}

.cierre__sub {
    font-size: 12.5px;
    color: rgba(255,255,255,.9);
    margin-top: 3px;
}

.cierre .btn--blanco {
    border-color: #fff;
}

.cierre__qr {
    color: #fff;
    opacity: .95;
    flex: none;
}

    .cierre__qr svg {
        width: 42px;
        height: 42px;
    }

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */
a:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--tinta);
    outline-offset: 3px;
}

.cierre a:focus-visible {
    outline-color: #fff;
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px) {
    .nav__links {
        display: none;
    }

    .beneficios__grid {
        grid-template-columns: repeat(3,1fr);
        row-gap: 32px;
    }

    .analitica__panel {
        grid-template-columns: 1fr;
    }

    .precios__layout {
        grid-template-columns: 1fr;
    }

    .seguridad__grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:900px) {
    .hero__inner {
        grid-template-columns: 1fr;
        padding-top: 44px;
    }

    .hero__texto {
        padding-bottom: 20px;
        max-width: none;
    }

    .hero__visual {
        min-height: 0;
        padding-bottom: 40px;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 24px;
    }

    .telefono {
        margin-right: 0;
    }

    .tent {
        position: static;
        width: 220px;
    }

    .editor__panel {
        grid-template-columns: 1fr;
    }

    .dolores__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .app__cuerpo {
        grid-template-columns: 1fr;
    }

    .app__col {
        border-right: 0;
        border-bottom: 1px solid var(--linea-suave);
    }

    .analitica__cards {
        grid-template-columns: 1fr;
    }

    .planes {
        grid-template-columns: 1fr;
    }

    .plan {
        border-right: 0;
        border-bottom: 1px solid var(--linea-suave);
    }

    .cierre__inner {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        text-align: center;
    }

    .cierre__texto {
        flex: 1 1 100%;
    }
}

@media (max-width:620px) {
    .hero__titulo {
        font-size: 34px;
    }

    .hero__subtitulo {
        font-size: 20px;
    }

    .titulo-seccion {
        font-size: 23px;
    }

    .beneficios__grid {
        grid-template-columns: repeat(2,1fr);
    }

    .seguridad__grid {
        grid-template-columns: 1fr;
    }

    .editor__panel {
        padding: 26px 20px;
    }

    .analitica__panel {
        padding: 24px 20px;
    }

    .nav__inner {
        gap: 14px;
    }

    .nav__actions .btn--ghost {
        display: none;
    }
}


/* =========================================================
   ACCESO / LOGIN  (pantalla de inicio de sesión)
   ========================================================= */
.pagina-acceso {
    background: var(--blanco);
}

.acceso {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.04fr);
    min-height: 100vh;
}

/* ---------- Lado izquierdo: foto + mensaje ---------- */
.acceso__lado {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* >>> Sustituye esta imagen por la foto definitiva <<< */
    background-color: #2A211C;
    background-image: url("assets/acceso-fondo.jpg");
    background-size: cover;
    background-position: center;
}

    .acceso__lado::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, rgba(18,13,10,.88) 0%, rgba(18,13,10,.72) 45%, rgba(18,13,10,.35) 100%);
    }

.acceso__lado-contenido {
    position: relative;
    padding: 64px 58px 64px 62px;
    max-width: 520px;
    color: #fff;
}

.acceso__titulo {
    font-family: var(--fuente-titulo);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.025em;
    color: #fff;
}

.acceso__subtitulo {
    font-family: var(--fuente-titulo);
    font-size: 21px;
    font-weight: 600;
    color: #fff;
    margin-top: 16px;
    letter-spacing: -.015em;
}

.acceso__parrafo {
    margin-top: 20px;
    font-size: 13.5px;
    line-height: 1.8;
    max-width: 40ch;
    color: rgba(255,255,255,.86);
}

.acceso__ventajas {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-top: 56px;
}

    .acceso__ventajas li {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .acceso__ventajas b {
        display: block;
        font-family: var(--fuente-titulo);
        font-size: 13px;
        font-weight: 600;
        color: #fff;
    }

    .acceso__ventajas p {
        font-size: 11.5px;
        line-height: 1.55;
        color: rgba(255,255,255,.75);
        max-width: 30ch;
        margin-top: 3px;
    }

.ventaja__ico {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.08);
}

    .ventaja__ico svg {
        width: 20px;
        height: 20px;
    }

/* ---------- Lado derecho: panel del formulario ---------- */
.acceso__panel {
    position: relative;
    display: grid;
    place-items: center;
    padding: 48px 40px;
    background: #fff;
    overflow: hidden;
}

.acceso__deco {
    position: absolute;
    pointer-events: none;
}

.acceso__deco--blob {
    right: -140px;
    top: -90px;
    width: 460px;
    height: 460px;
    border-radius: 48% 52% 55% 45% / 52% 44% 56% 48%;
    background: var(--rojo-claro);
    opacity: .55;
}

.acceso__deco--puntos {
    right: 34px;
    bottom: 56px;
    width: 132px;
    height: 132px;
    background-image: radial-gradient(#F3C9C3 1.6px, transparent 1.7px);
    background-size: 16px 16px;
    opacity: .85;
}

.tarjeta-acceso {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 410px;
    background: #fff;
    border: 1px solid var(--linea-suave);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra);
    padding: 34px 34px 30px;
}

.tarjeta-acceso__logo {
    width: 78px;
    height: auto;
    margin: 0 auto 14px;
}

.tarjeta-acceso__titulo {
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -.02em;
}

.tarjeta-acceso__sub {
    text-align: center;
    font-size: 13px;
    color: var(--texto-suave);
    margin-top: 6px;
}

/* Alerta de error */
.alerta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 13px 14px;
    border-radius: 10px;
    border: 1px solid #F6C3BD;
    background: var(--rojo-claro);
    color: #B22A1C;
    font-size: 12.5px;
}

    .alerta svg {
        width: 18px;
        height: 18px;
        flex: none;
        color: var(--rojo);
    }

/* Campos */
.formulario {
    margin-top: 18px;
}


.campo__ico {
    width: 17px;
    height: 17px;
    flex: none;
    color: #9A9A9A;
}


.campo__ojo {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: #9A9A9A;
    display: grid;
    place-items: center;
}

    .campo__ojo svg {
        width: 18px;
        height: 18px;
    }

    .campo__ojo:hover {
        color: var(--tinta);
    }

    /* La rayita del ojo tachado. Sólo se dibuja cuando la contraseña está a la vista: así el icono
       enseña lo que va a pasar al pulsarlo —volver a ocultarla— y no el estado actual, que ya se ve
       en el propio campo. */
    .campo__ojo .campo__ojo-tachado {
        display: none;
    }

    .campo__ojo--abierto .campo__ojo-tachado {
        display: inline;
    }

/* El código de regalo del registro, plegado.

   <details> y no JavaScript: esta pantalla es SSR estática y el plegado tiene que funcionar sin
   circuito. Plegado porque el registro se dejó en dos campos a propósito, y un tercero visible
   desharía eso para la mayoría, que no trae código. */
.campo-codigo {
    margin-bottom: 18px;
}

.campo-codigo__resumen {
    cursor: pointer;
    font-family: var(--fuente-titulo);
    font-size: 13px;
    font-weight: 500;
    color: var(--rojo);
    list-style: none;
    padding: 4px 0;
    user-select: none;
}

    /* El triángulo por omisión de <summary> no es del diseño; se sustituye por uno propio que gira
       al abrir. `::-webkit-details-marker` es para Safari, que ignora `list-style: none`. */
    .campo-codigo__resumen::-webkit-details-marker {
        display: none;
    }

    .campo-codigo__resumen::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        margin-right: 8px;
        border-left: 5px solid currentColor;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        transition: transform .15s ease;
        vertical-align: 1px;
    }

    .campo-codigo[open] .campo-codigo__resumen::before {
        transform: rotate(90deg);
    }

    .campo-codigo__resumen:hover {
        text-decoration: underline;
    }

.campo-codigo .campo {
    margin-top: 12px;
}

/* El código se coteja carácter a carácter contra una tarjeta o un mensaje, y en proporcional eso se
   hace mal. Sin ficha del tema: el diseño del dueño no tiene monoespaciada. */
.campo__input--codigo {
    font-family: ui-monospace, 'Roboto Mono', 'Courier New', monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

    .campo__input--codigo::placeholder {
        letter-spacing: normal;
        text-transform: none;
    }

/* Nota bajo un campo (p. ej. la advertencia de que el nombre del restaurante no se puede cambiar
   luego, porque los QR impresos dejarían de funcionar). */
.campo__nota {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--texto-suave);
}
    .campo__nota svg {
        width: 14px;
        height: 14px;
        flex: none;
        color: var(--rojo);
        margin-top: 1px;
    }
    .campo__nota strong {
        color: var(--texto);
        font-weight: 600;
    }

/* Recordar sesión */
.recordar {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--texto);
    margin: 4px 0 18px;
    cursor: pointer;
}

    .recordar input {
        appearance: none;
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        flex: none;
        border: 1.5px solid #CFC8C4;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
        display: grid;
        place-items: center;
    }

        .recordar input:checked {
            background: var(--rojo);
            border-color: var(--rojo);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.6 4.6L19 7' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-size: 11px 11px;
            background-position: center;
            background-repeat: no-repeat;
        }

/* Separador */
.separador {
    position: relative;
    text-align: center;
    margin: 22px 0 16px;
}

    .separador::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        background: var(--linea-suave);
    }

    .separador span {
        position: relative;
        background: #fff;
        padding: 0 10px;
        font-size: 11.5px;
        color: #B0AAA6;
    }

/* Pie */
.tarjeta-acceso__pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--texto);
    flex-wrap: wrap;
}

.enlace-crear {
    color: var(--rojo);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .enlace-crear:hover {
        color: var(--rojo-oscuro);
    }

.pie__flecha {
    width: 15px;
    height: 15px;
    color: var(--rojo);
}

/* ---------- Responsive del acceso ---------- */
@media (max-width:980px) {
    .acceso {
        grid-template-columns: 1fr;
    }

    .acceso__lado {
        min-height: 420px;
    }

    .acceso__lado-contenido {
        padding: 48px 32px;
        max-width: none;
    }

    .acceso__panel {
        padding: 40px 24px 56px;
    }
}

@media (max-width:620px) {
    .acceso__titulo {
        font-size: 30px;
    }

    .acceso__subtitulo {
        font-size: 18px;
    }

    .acceso__ventajas {
        margin-top: 34px;
        gap: 20px;
    }

    .tarjeta-acceso {
        padding: 26px 20px 24px;
    }
}