/* ==========================================================
   Tienda pública — listado, ficha de producto, carro y compra
   Mobile-first. Comparte .badge y .btn con components.css.
   ========================================================== */

.shop { padding-block: 2rem 3.5rem; }
/* El listado arranca con la franja celeste, que va pegada al menú. La ficha de
   producto no la tiene y conserva su aire de arriba. */
.shop:has(> .shop__header) { padding-block-start: 0; }


.shop__header h1 { margin: 0 0 0.4rem; }
.shop__intro { margin: 0; color: var(--color-text-muted); max-width: 62ch; }
.shop__back { margin: 0 0 1.2rem; font-size: var(--text-md); }
.shop__cart-link { margin-top: 2rem; }

/* Mismo catálogo que /servicios: ancho de ficha fijo (`auto-fill`) y las que
   faltan dejan su hueco, como en cualquier tienda. */
/* La grilla del catálogo: tres columnas en escritorio, dos en tableta, una en
   el teléfono. Declaradas y no calculadas, por lo mismo que en /servicios: con
   `auto-fill` sobraba una columna vacía a la derecha cuando había tres guías, y
   con un máximo fijo la grilla bajaba a dos y dejaba media página en blanco. */
.shop-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    align-items: stretch;
}

@media (min-width: 640px) {
    .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La tarjeta de producto es .service-card: misma estructura, mismo CSS, y acá
   solo lo que cambia. El bloque .shop-card* que había —otro borde, otro radio,
   otro tamaño de título— se fue con él; dos catálogos del mismo sitio no tienen
   por qué mirarse distinto.

   Lo único propio es la portada: cuando la guía no trae imagen, lo que va es la
   ilustración de _cover.php, que es un SVG y no una foto. */
.producto-card .cover-ilustrada {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow) var(--ease-spring);
}
.producto-card:hover .cover-ilustrada { transform: scale(1.04); }

/* El chip de la portada dice cómo se entrega, que en esta tienda es lo que de
   verdad distingue una guía de otra. */
.producto-card .service-card__cat { text-transform: uppercase; }


.shop-card__meta {
    margin: 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.shop-card__price {
    margin-left: auto;
    font-size: var(--text-xl);
    font-weight: 650;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.shop-card__type { font-size: var(--text-sm); color: var(--color-text-muted); }
.shop-card .btn   { align-self: flex-start; }

.shop__empty {
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    padding: 2.5rem 1.5rem;
    text-align: center;
}
.shop__empty h1, .shop__empty h2 { margin: 0 0 0.5rem; font-size: var(--text-2xl); }
.shop__empty p { margin: 0 0 0.9rem; color: var(--color-text-muted); }

/* Ficha de producto */
/* Acá la ficha se ensanchaba a 1280px, porque con los 1120 de entonces la
   descripción quedaba corta. Ese ensanche se va: --container-max subió a 1200 y
   ahora todas las páginas arrancan y terminan donde arrancan y terminan la
   cabecera y el pie. Dejarla en 1280 la habría convertido en la única pantalla
   del sitio que se sale de esos márgenes —80px más ancha que el menú de arriba,
   que es justo lo que se ve raro sin saber por qué—. */

/* ==========================================================
   Ficha de producto
   ==========================================================
   Dos columnas: qué es a la izquierda, qué cuesta y cómo llega a la derecha.

   Antes esto ya era una grilla de dos columnas, pero la de la imagen solo se
   creaba si el producto tenía foto —y las guías no la tienen—, así que la
   columna quedaba reservada y vacía: el texto se encajaba en 5/12 del ancho y
   media pantalla no mostraba nada. Con la portada ilustrada de respaldo la
   composición se sostiene con foto o sin ella. */
.product {
    display: grid;
    gap: 1.8rem;
    margin-bottom: 2.5rem;
    align-items: start;
}

@media (min-width: 860px) {
    /* La imagen no crece más: es una portada, no el contenido. El texto se
       queda con la parte ancha. */
    .product { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 2.6rem; }
    /* La portada NO acompaña al scroll. Se probó pegada y era peor: la ficha
       de producto mide unos 1400px, o sea medio scroll de nada, así que lo
       único que se lograba era ver la imagen seguir a la persona mientras leía
       —y quedar cortada por arriba, porque se pegaba detrás de la cabecera—.
       Un elemento que acompaña se justifica cuando hay mucho que recorrer al
       lado; acá no lo hay. */
}

.product__media {
    overflow: hidden;
    border-radius: var(--radius-organic);
    background: var(--sage-soft);
    line-height: 0;
}
.product__media img,
.product__media svg { width: 100%; height: auto; display: block; }

/* El h1 global es fluido hasta 4rem porque está calculado para el titular de
   portada. Un nombre de producto de ocho palabras con esa escala ocupaba cuatro
   líneas y empujaba el precio y el botón fuera de la primera pantalla. */
.product__title {
    margin: 0 0 0.7rem;
    font-size: clamp(var(--text-4xl), 1.2rem + 1.3vw, 2.4rem);
}

.product__summary {
    margin: 0 0 1.6rem;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: 1.6;
    max-width: 52ch;
}

/* Precio, condiciones y acción en la misma caja: son una sola decisión, y
   separados obligaban a subir y bajar para juntar el precio con el botón. */
.product__compra {
    padding: 1.5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-organic);
    background: var(--surface-quiet);
}

.product__price {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 1.1rem;
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
}
/* "pago único" contesta la duda de si esto se cobra todos los meses. */
.product__price span {
    font-family: var(--font-family);
    font-size: var(--text-md);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

/* Los puntos medios se escribían como texto —"· Descarga digital"— y se leían
   como una viñeta rota. El visto dice lo mismo y además afirma: esto lo
   incluye. */
.product__facts {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: var(--text-base);
    line-height: 1.45;
}
.product__facts li {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    color: var(--color-text);
}
.product__facts svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--sage-deep);
}

.product__buy {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
}
/* A todo el ancho de la caja y apilados: uno al lado del otro, en el teléfono
   el segundo caía a una línea suelta y desalineada. */
.product__cta { width: 100%; }

.product__qty { display: flex; flex-direction: column; font-size: var(--text-sm); gap: 0.25rem; margin-bottom: 0.3rem; }
.product__qty input {
    width: 90px;
    padding: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

/* La duda que queda justo antes de apretar: qué pasa con mi plata. */
.product__seguro {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 1rem 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.product__seguro svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ---------- Descripción ----------
   Ocupa el ancho del contenedor, en una sola columna.

   Queda anotado el compromiso, porque no es gratis: a este ancho la línea pasa
   de los ~75 caracteres que se leen cómodos, y por encima de eso el ojo empieza
   a perder cuál renglón sigue al saltar de línea. Se probó en dos columnas
   —mantenía la línea en 63— y se descartó por decisión de diseño.

   Lo que sí compensa: el interlineado sube de 1.7 a 1.85. En medidas largas es
   lo que más ayuda a no saltar de renglón, porque el hueco entre líneas guía
   el regreso del ojo al margen izquierdo. */
.product__body { max-width: none; }
.product__body h2 { font-size: var(--text-2xl); margin: 1.8rem 0 0.6rem; }
.sitio-publico .product__body h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
}
.product__body p  { margin: 0 0 1.1rem; line-height: 1.85; }
.product__body ul,
.product__body ol { line-height: 1.85; }
.product__body > :first-child { margin-top: 0; }

/* Carro y compra */
.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.8rem;
    /* Una tabla nunca puede empujar la página en horizontal en un teléfono. */
    display: block;
    overflow-x: auto;
}
.cart-table thead th,
.cart-table tfoot th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.cart-table th,
.cart-table td { padding: 0.75rem 0.6rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.cart-table tfoot th { border-bottom: 0; font-size: var(--text-base); color: inherit; text-transform: none; letter-spacing: 0; }
.cart-table__meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 0.2rem; }
.cart-table__remove {
    background: none;
    border: 0;
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}
.cart-table__remove:hover { color: var(--color-danger); }

.checkout-form { max-width: 560px; }
.checkout-form h2 { font-size: var(--text-lg); margin: 1.8rem 0 0.8rem; }

.order-box {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.3rem 1.4rem;
    margin-bottom: 1.6rem;
}
.order-box h1 { margin: 0 0 0.5rem; font-size: var(--text-2xl); }
.order-box__status { margin: 0 0 1.2rem; }

.intake-box {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.3rem 1.4rem;
    margin-bottom: 1.6rem;
    max-width: 620px;
}
.intake-box h2 { margin: 0 0 0.6rem; font-size: var(--text-xl); }

.intake-options { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.3rem; }
.intake-option  { display: flex; gap: 0.45rem; align-items: center; font-weight: 400; }

.payment-result {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 2.2rem 1.6rem;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.payment-result h1 { margin: 0 0 0.6rem; font-size: var(--text-2xl); }
.payment-result p  { margin: 0 0 1.2rem; color: var(--color-text-muted); }

/* ==========================================================
   Carro / datos de compra
   ==========================================================
   Era una tabla de cuatro columnas encima de un formulario largo. La tabla es
   lo primero que se rompe en un teléfono: "Producto / Cantidad / Subtotal" en
   390px deja el nombre del producto en una columna de cien píxeles partido en
   seis líneas. Y el total quedaba a mil píxeles del botón de pagar, así que
   había que subir a recordar cuánto se estaba por gastar.

   Ahora son dos columnas: el formulario, que es el trabajo, y el resumen de la
   compra al costado, acompañando el scroll. En el teléfono se apilan en el
   orden del marcado —resumen primero, formulario después—, que es el orden en
   que se mira: qué llevo, cuánto es, y recién ahí mis datos. */
/* ---------- Los tres pasos ----------
   No es una barra de progreso decorativa: contesta "¿cuánto falta?" y "¿cuándo
   me van a cobrar?", que son las dos preguntas que frenan a alguien parado
   frente a un formulario en un sitio que no conoce. */
.carro-pasos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-md);
    color: var(--color-text-muted);
}
.carro-pasos li { display: flex; align-items: center; gap: .5rem; }
/* La separación entre pasos es un guion tenue, no un borde: dibuja la
   secuencia sin agregar una caja más a la página. */
.carro-pasos li + li::before {
    content: '';
    width: 1.4rem;
    height: 1px;
    background: var(--hairline);
    margin-right: .1rem;
}
.carro-pasos span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.carro-pasos .is-actual { color: var(--color-text-strong); font-weight: 600; }
.carro-pasos .is-actual span {
    background: var(--color-cta);
    border-color: var(--color-cta);
    color: var(--color-cta-text);
}

/* ---------- Carro vacío ----------
   Un estado vacío no es un error: es una pantalla más, y tiene que decir qué
   se puede hacer desde acá. */
.carro-vacio {
    max-width: 34rem;
    margin: var(--space-lg) auto;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--color-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-2xl);
}
.carro-vacio__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: var(--sage-soft);
    color: var(--color-accent-text);
}
.carro-vacio__icono svg { width: 30px; height: 30px; }
.carro-vacio h2 {
    margin: 0 0 .5rem;
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    color: var(--color-text-strong);
}
.carro-vacio p { margin: 0 0 1.4rem; color: var(--color-text-muted); }
.carro-vacio__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin: 0;
}

.carro-layout {
    display: grid;
    gap: 1.5rem;
    align-items: start;
    margin-top: var(--space-lg);
}

@media (min-width: 900px) {
    /* El formulario primero en pantalla y el resumen a la derecha, invirtiendo
       el orden del marcado con `order`. */
    .carro-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; }
    .carro-form    { order: 1; }
    .carro-resumen { order: 2; position: sticky; top: var(--sticky-top); }
}

/* ---------- Resumen ---------- */
.carro-resumen__caja {
    background: var(--color-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-2xl);
    padding: 1.3rem 1.3rem 1.1rem;
    box-shadow: var(--shadow-soft);
}

.carro-resumen__titulo {
    margin: 0 0 1rem;
    font-size: var(--text-xl);
    font-weight: 650;
    color: var(--color-text-strong);
}

.carro-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }

/* Miniatura + texto + precio. La línea se lee de izquierda a derecha en el
   mismo orden en que se comprueba una compra: qué es, qué condiciones tiene,
   cuánto sale. */
.carro-linea {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.5rem 0.8rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--hairline);
}
.carro-linea:last-child { padding-bottom: 0; border-bottom: 0; }

/* 8:5 y no un cuadrado: es la proporción del lienzo de la portada ilustrada
   (320×200). En un cuadrado, el `slice` del SVG recorta por el centro y deja
   fuera justamente el símbolo, que vive a la izquierda: la miniatura quedaba
   con un pedazo de fondo y nada que reconocer. */
.carro-linea__foto {
    display: block;
    width: 80px;
    aspect-ratio: 8 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--sage-soft);
    flex: 0 0 auto;
}
.carro-linea__foto img,
.carro-linea__foto .cover-ilustrada { width: 100%; height: 100%; object-fit: cover; display: block; }

.carro-linea__nombre {
    margin: 0 0 0.15rem;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-strong);
}
.carro-linea__nombre a { color: inherit; text-decoration: none; }
.carro-linea__nombre a:hover { text-decoration: underline; }
.carro-linea__meta { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.carro-linea__unico { margin: .35rem 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }

.carro-linea__lado { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }

.carro-linea__precio {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-text-strong);
}
.carro-linea__unitario {
    margin: 0;
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Cantidad ----------
   Una píldora con − número + : es el control que la gente ya sabe usar, y no
   pide teclado. Los dos botones son objetivos de 36px dentro de una fila de
   44 de alto, que es lo que hay que dar en un teléfono. */
.carro-cant {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    margin: .5rem 0 0;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
}
.carro-cant button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-accent-text);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.carro-cant button:hover:not(:disabled) { background: var(--color-cta-soft); }
.carro-cant button:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 1px; }
/* Deshabilitado se ve deshabilitado: en gris y sin cursor. En el 1, el − no
   borra la línea —para eso está la ✕— y tiene que decirlo sin texto. */
.carro-cant button:disabled { color: var(--color-text-subtle); cursor: not-allowed; }
.carro-cant svg { width: 15px; height: 15px; }
.carro-cant__num {
    min-width: 1.6rem;
    text-align: center;
    font-size: var(--text-base);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
}

/* El botón de quitar era una "×" de trece píxeles. Ahora es un objetivo de 44,
   que es lo que corresponde a algo que se toca con el dedo —y más todavía
   cuando equivocarse significa borrar lo que se iba a comprar. */
.carro-linea__quitar { margin: 0; }
.carro-linea__quitar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    /* El margen negativo a la derecha alinea el dibujo con el borde del precio
       que tiene encima; el área táctil sigue midiendo 44 y se come el aire de
       la caja, que ahí no molesta a nadie. */
    margin: -0.1rem -0.7rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.carro-linea__quitar button:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.carro-linea__quitar button:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.carro-linea__quitar svg { width: 15px; height: 15px; }

.carro-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
    font-size: var(--text-md);
    color: var(--color-text-muted);
}
.carro-total strong {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
}

.carro-senales {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--hairline);
    display: grid;
    gap: 0.55rem;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--color-text-muted);
}
.carro-senales li { display: flex; gap: 0.5rem; align-items: flex-start; }
.carro-senales svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 0.1rem; color: var(--color-accent-text); }

.carro-seguir { margin: 1rem 0 0; font-size: var(--text-md); }
.carro-seguir a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Formulario ---------- */
.carro-form { max-width: 560px; }

/* Cada grupo de campos en su superficie, como el resumen del costado. Sueltos
   sobre el fondo de la página, el formulario y el resumen se veían como dos
   materiales distintos y la mitad izquierda quedaba desnuda. */
.carro-bloque {
    background: var(--color-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-2xl);
    padding: 1.4rem 1.3rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-soft);
}
.carro-bloque > :last-child { margin-bottom: 0; }

.carro-form__titulo {
    margin: 0 0 1.1rem;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    color: var(--color-text-strong);
}
.carro-form__titulo + .carro-form__campo { margin-top: 0; }

.carro-form__campo { margin: 0 0 1rem; }
.carro-form__campo label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--text-md);
    font-weight: 500;
}
.carro-form__campo input { width: 100%; }

.carro-form__ayuda {
    margin: -0.6rem 0 1rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.carro-aviso {
    margin: 0 0 1.2rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--color-warn-soft);
    color: var(--color-warn);
    font-size: var(--text-md);
    line-height: 1.5;
}

.carro-form__legal { margin: 1rem 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

.carro-form__enviar { margin: 1.4rem 0 0; }
.carro-form__enviar .btn { width: 100%; }
@media (min-width: 640px) {
    .carro-form__enviar .btn { width: auto; min-width: 17rem; }
}

/* Mismo criterio que en la agenda: 16px en el teléfono o iOS hace zoom solo al
   enfocar el campo. La regla general vive en components.css; acá no hace falta
   repetirla, pero sí dejar dicho por qué no está. */

/* ─────────────────────────────────────────────────────────────
   Cuenta del cliente
   Los formularios de entrar, registrarse y recuperar la clave
   son cortos: a lo ancho de la página quedan campos de 900px
   para escribir un correo.
   ───────────────────────────────────────────────────────────── */
.order-box--angosta { max-width: 26rem; margin-inline: auto; }

.cuenta-links {
    margin: 1.1rem 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* El aviso de correo sin confirmar: se ve, pero no bloquea la página —
   con la cuenta sin verificar igual se pueden mirar las compras. */
.cuenta-aviso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    flex-wrap: wrap;
    margin: 0 0 1.3rem;
    padding: .85rem 1rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-cta);
    border-radius: 10px;
    background: var(--color-bg-alt);
}
.cuenta-aviso p { margin: 0; font-size: var(--text-sm); flex: 1 1 16rem; }

.cuenta-salir { margin: 1.4rem 0 0; }

@media (max-width: 600px) {
    .cuenta-aviso { flex-direction: column; align-items: stretch; }
    .cuenta-aviso .btn { width: 100%; }
}

/* El bloque de cuenta dentro del checkout: mismo lenguaje que los otros
   grupos del formulario, apenas separado para que se lea como un tema aparte. */
.carro-cuenta {
    margin-top: 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-border);
}