/* HEADER */
.mt-head {
padding: clamp(120px, 14vw, 180px) 0 clamp(28px, 3vw, 40px);
background: var(--black);
border-bottom: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.mt-head__bg .blob { position: absolute; width: 540px; height: 540px; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.mt-head__bg .blob--pink { background: var(--magenta-deep); opacity: .2; top: -240px; right: -100px; }
.mt-head__inner { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.mt-head__crumbs { font: 700 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; display: flex; gap: 8px; align-items: center; }
.mt-head__crumbs a { color: var(--cream-soft); } .mt-head__crumbs a:hover { color: var(--pink); } .mt-head__crumbs .sep { color: var(--line-2); }
.mt-head__title { font: 500 clamp(40px, 5vw, 64px) var(--font-display); color: var(--cream); letter-spacing: -.025em; line-height: 1; }
.mt-head__title em { font-style: italic; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mt-avatar {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px 14px 14px;
background: var(--night); border: 1px solid var(--line);
border-radius: var(--r-md);
}
.mt-avatar__circle {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--gradient);
display: flex; align-items: center; justify-content: center;
font: italic 600 22px var(--font-display);
color: white;
}
.mt-avatar__info { display: flex; flex-direction: column; gap: 2px; }
.mt-avatar__info .label { font: 700 9px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--orange); }
.mt-avatar__info .name { font: 500 15px var(--font-display); color: var(--cream); letter-spacing: -.01em; }
.mt-avatar__info .name em { font-style: italic; color: var(--cream-soft); }
@media (max-width: 720px) { .mt-head__inner { grid-template-columns: 1fr; } }
/* TABS */
.mt-tabs {
background: var(--black);
border-bottom: 1px solid var(--line);
position: sticky; top: 72px; z-index: 40;
backdrop-filter: blur(20px); background: rgba(10,10,10,0.85);
}
.mt-tabs__inner { display: flex; gap: 0; overflow-x: auto; }
.mt-tab {
font: 500 13px var(--font-body);
color: var(--cream-soft);
padding: 18px 20px;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color .2s, border-color .25s;
display: inline-flex; align-items: center; gap: 8px;
}
.mt-tab.is-active { color: var(--cream); border-bottom-color: var(--pink); }
.mt-tab:hover { color: var(--cream); }
.mt-tab__num { font: italic 400 13px var(--font-display); color: var(--orange); }
.mt-tab .badge {
background: var(--pink); color: white;
padding: 2px 7px; border-radius: 999px;
font: 700 9px var(--font-mono); letter-spacing: .1em;
}
/* BODY */
/* El grabado decorativo asoma a proposito por fuera del borde y la rotacion
le suma unos 20px mas, asi que en una pantalla ancha la pagina scrolleaba
de costado. Se recorta en el contenedor del grabado y no en el html:
probado en la misma carga, con overflow-x clip en el root los
position: sticky se dejan de pegar. */
.mt-body { background: var(--black); padding: clamp(40px, 5vw, 64px) 0; min-height: 60vh; overflow-x: clip; }
.mt-pane { display: none; }
.mt-pane.is-active { display: block; }
/* TICKET CARD */
.mt-ticket {
background: var(--night);
border: 1px solid var(--line);
border-radius: var(--r-md);
display: grid;
grid-template-columns: 140px 1fr 200px;
gap: 0;
margin-bottom: 18px;
position: relative;
overflow: hidden;
transition: border-color .25s, transform .25s var(--ease-out), box-shadow .35s;
}
.mt-ticket:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.mt-ticket__date {
background: linear-gradient(180deg, var(--magenta-deep) 0%, var(--pink) 100%);
padding: 22px 18px;
display: flex; flex-direction: column; gap: 4px;
align-items: center;
justify-content: center;
color: white;
position: relative;
}
.mt-ticket__date::after {
content: '';
position: absolute;
top: 0; bottom: 0; right: -8px;
width: 16px;
background:
radial-gradient(circle at 0 50%, transparent 8px, var(--night) 8px);
}
.mt-ticket__date .dow { font: 700 10px var(--font-mono); letter-spacing: .22em; text-transform: uppercase; opacity: .9; }
.mt-ticket__date .day { font: italic 500 48px var(--font-display); line-height: 1; letter-spacing: -.02em; }
.mt-ticket__date .month { font: 500 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; opacity: .92; }
.mt-ticket__date .year { font: 500 9px var(--font-mono); letter-spacing: .2em; opacity: .7; margin-top: 4px; }
.mt-ticket__body {
padding: 22px 28px;
display: flex; flex-direction: column; gap: 6px;
border-right: 2px dashed rgba(255,255,255,0.1);
}
.mt-ticket__cat { font: 700 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pink); }
.mt-ticket__title { font: 500 22px var(--font-display); color: var(--cream); letter-spacing: -.018em; line-height: 1.1; }
.mt-ticket__title em { font-style: italic; color: var(--cream-soft); }
.mt-ticket__meta { display: flex; gap: 16px; flex-wrap: wrap; font: 500 12px var(--font-mono); color: var(--muted); margin-top: 6px; letter-spacing: .04em; }
.mt-ticket__meta b { color: var(--cream-soft); font-weight: 500; }
.mt-ticket__actions {
padding: 22px 22px;
display: flex; flex-direction: column; gap: 8px;
justify-content: center;
border-left: 2px dashed rgba(255,255,255,0.1);
}
.mt-ticket__qty { font: italic 400 12px var(--font-display); color: var(--muted); margin-bottom: 4px; }
.mt-ticket__qty b { font-style: normal; color: var(--cream); font-weight: 500; }
.mt-ticket__btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 14px; border-radius: 999px;
font: 700 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
transition: all .2s;
}
.mt-ticket__btn--primary { background: var(--gradient); color: white; }
.mt-ticket__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(255,61,127,.3); }
.mt-ticket__btn--ghost { border: 1px solid var(--line-2); color: var(--cream-soft); }
.mt-ticket__btn--ghost:hover { border-color: var(--pink); color: var(--cream); }
.mt-ticket--past { opacity: .65; }
.mt-ticket--past .mt-ticket__date { background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%); }
.mt-ticket__qr {
width: 80px; height: 80px;
background: var(--cream);
border-radius: var(--r-sm);
position: relative; align-self: center;
margin: 4px 0 8px;
background-image:
linear-gradient(90deg, var(--black) 50%, transparent 50%),
linear-gradient(0deg, var(--black) 50%, transparent 50%),
linear-gradient(135deg, var(--black) 50%, transparent 50%);
background-size: 8px 8px, 8px 8px, 12px 12px;
background-position: 0 0, 4px 0, 0 4px;
opacity: .9;
overflow: hidden;
}
.mt-ticket__qr::after {
content: ''; position: absolute; inset: 4px;
background: var(--cream);
background-image:
repeating-linear-gradient(0deg, var(--black) 0 3px, transparent 3px 6px),
repeating-linear-gradient(90deg, var(--black) 0 3px, transparent 3px 6px);
background-blend-mode: multiply;
border: 6px solid var(--cream);
}
@media (max-width: 880px) {
.mt-ticket { grid-template-columns: 110px 1fr; }
.mt-ticket__body { border-right: none; }
.mt-ticket__actions { grid-column: 1 / -1; border-left: none; border-top: 2px dashed rgba(255,255,255,0.1); flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.mt-ticket__qr { display: none; }
}
/* PEDIDO row */
.mt-orders { background: var(--night); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.mt-order {
display: grid;
grid-template-columns: 130px 1fr auto;
gap: 20px;
padding: 22px 26px;
border-bottom: 1px solid var(--line);
align-items: center;
}
.mt-order:last-child { border-bottom: none; }
.mt-order__id { font: 500 13px var(--font-mono); color: var(--muted); letter-spacing: .04em; }
.mt-order__id b { color: var(--cream); font-weight: 500; }
.mt-order__info { display: flex; flex-direction: column; gap: 2px; }
.mt-order__info .name { font: 500 16px var(--font-display); color: var(--cream); letter-spacing: -.01em; }
.mt-order__info .meta { font: italic 400 12px var(--font-display); color: var(--cream-soft); }
.mt-order__price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mt-order__price .v { font: 600 18px var(--font-display); color: var(--cream); }
.mt-order__price .status {
font: 700 9px var(--font-mono); letter-spacing: .18em; text-transform: uppercase;
padding: 3px 8px; border-radius: 999px;
}
.mt-order__price .status--ok { background: rgba(52,211,153,.15); color: var(--green); }
.mt-order__price .status--refund { background: rgba(255,138,61,.15); color: var(--orange); }
@media (max-width: 720px) { .mt-order { grid-template-columns: 1fr; gap: 6px; } .mt-order__price { align-items: flex-start; flex-direction: row; gap: 12px; align-items: center; } }
/* CUENTA section */
.mt-account { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.mt-card {
background: var(--night); border: 1px solid var(--line);
border-radius: var(--r-md); padding: 28px;
margin-bottom: 18px;
}
.mt-card h3 { font: 500 22px var(--font-display); color: var(--cream); letter-spacing: -.018em; margin-bottom: 6px; }
.mt-card h3 em { font-style: italic; color: var(--cream-soft); }
.mt-card .sub { font: italic 400 13px var(--font-display); color: var(--muted); margin-bottom: 18px; }
.mt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.mt-row--full { grid-template-columns: 1fr; }
.mt-field { display: flex; flex-direction: column; gap: 6px; }
.mt-field label { font: 700 9px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.mt-field input, .mt-field select {
background: var(--black); border: 1px solid var(--line-2);
border-radius: var(--r-sm); padding: 12px 14px;
font: 500 14px var(--font-body); color: var(--cream);
outline: none;
transition: border-color .2s;
}
.mt-field input:focus, .mt-field select:focus { border-color: var(--pink); }
.mt-card button.save {
background: var(--gradient); color: white;
border-radius: 999px; padding: 12px 22px;
font: 700 12px var(--font-body); letter-spacing: .04em;
margin-top: 8px;
display: inline-flex; align-items: center; gap: 8px;
}
/* MEMBERSHIP card */
.mt-member {
background: linear-gradient(135deg, rgba(255,61,127,.18) 0%, rgba(255,138,61,.05) 100%);
border: 1px solid rgba(255,61,127,.3);
border-radius: var(--r-md);
padding: 24px;
position: relative;
overflow: hidden;
}
.mt-member::before {
content: ''; position: absolute; top: -40px; right: -40px;
width: 120px; height: 120px;
border-radius: 50%;
background: var(--gradient);
filter: blur(40px); opacity: .4;
}
.mt-member__tier { font: 700 10px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--pink); position: relative; }
.mt-member__name { font: 500 28px var(--font-display); color: var(--cream); letter-spacing: -.02em; margin: 6px 0 12px; position: relative; }
.mt-member__name em { font-style: italic; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mt-member__bar { display: flex; justify-content: space-between; font: 500 11px var(--font-mono); color: var(--cream-soft); margin: 12px 0; letter-spacing: .04em; position: relative; }
.mt-member__bar b { color: var(--cream); font-weight: 500; }
.mt-member__id { padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.18); font: 500 11px var(--font-mono); color: var(--muted); letter-spacing: .14em; position: relative; }
.mt-member__id b { color: var(--cream); font-weight: 500; }
.mt-foto__row { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.mt-foto__circle { width: 76px; height: 76px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--night); border: 1px solid var(--line-2); font: 500 24px var(--font-display); color: var(--cream-soft); }
.mt-foto__circle img { width: 100%; height: 100%; object-fit: cover; }
.mt-foto__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.mt-foto__btn { display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; font: 700 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-soft); transition: all .2s; }
.mt-foto__btn:hover { border-color: var(--pink); color: var(--cream); }
.mt-avatares { margin-top: 26px; }
.mt-avatares__tit { font: 700 10px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.mt-avatares__sub { font: italic 400 14px var(--font-display); color: var(--cream-soft); line-height: 1.5; margin: 6px 0 14px; max-width: 52ch; }
.mt-avatares__grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 460px; }
.mt-avatares__op {
aspect-ratio: 1; padding: 0; border-radius: 50%; overflow: hidden;
border: 1px solid var(--line-2); background: var(--night); cursor: pointer;
transition: border-color .2s, transform .2s var(--ease-out);
}
.mt-avatares__op img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-avatares__op:hover { border-color: var(--pink); transform: translateY(-2px); }
.mt-avatares__op.is-puesto { border-color: var(--pink); border-width: 2px; }
@media (max-width: 620px) { .mt-avatares__grilla { grid-template-columns: repeat(3, 1fr); max-width: 320px; } }
/* LUPA · al clickear un grabado se ve grande antes de ponerlo */
.mt-lupa { position: fixed; inset: 0; z-index: 1200; display: none; place-items: center; padding: 24px; background: rgba(6,5,4,.86); backdrop-filter: blur(6px); }
.mt-lupa.is-abierta { display: grid; }
.mt-lupa__caja { width: min(400px, 100%); text-align: center; }
.mt-lupa__marco { width: min(320px, 76vw); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 2px solid var(--pink); background: var(--night); }
.mt-lupa__marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-lupa__txt { font: italic 400 16px var(--font-display); color: var(--cream-soft); line-height: 1.5; margin: 20px auto 22px; max-width: 34ch; }
.mt-lupa__acc { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 880px) { .mt-account { grid-template-columns: 1fr; } .mt-row { grid-template-columns: 1fr; } }
/* WALLET */
.mt-wallet {
background: linear-gradient(135deg, rgba(52,211,153,.15), rgba(52,211,153,.02));
border: 1px solid rgba(52,211,153,.3);
border-radius: var(--r-md);
padding: 32px;
text-align: center;
margin-bottom: 28px;
}
.mt-wallet__label { font: 700 11px var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--green); }
.mt-wallet__amount { font: italic 500 clamp(48px, 6vw, 80px) var(--font-display); color: var(--cream); letter-spacing: -.02em; line-height: 1; margin: 14px 0 8px; }
.mt-wallet__amount em { color: var(--green); font-style: italic; }
.mt-wallet__sub { font: italic 400 14px var(--font-display); color: var(--cream-soft); }
.mt-wallet__actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.mt-history { background: var(--night); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.mt-tx { display: grid; grid-template-columns: 100px 1fr auto; gap: 18px; padding: 16px 22px; border-bottom: 1px solid var(--line); align-items: center; }
.mt-tx:last-child { border-bottom: none; }
.mt-tx .when { font: 500 11px var(--font-mono); color: var(--muted); letter-spacing: .04em; }
.mt-tx .what { font: 500 14px var(--font-body); color: var(--cream); }
.mt-tx .what em { font-style: italic; color: var(--cream-soft); }
.mt-tx .amount { font: 500 16px var(--font-display); color: var(--cream); }
.mt-tx .amount.cr { color: var(--green); }
.mt-tx .amount.db { color: var(--orange); }
/* (nav mobile consolidado en css/site.css) */
/* ---------------------------------------------------------------------------
Lo que agrega WordPress (no esta en el mockup)
------------------------------------------------------------------------ */
/* Woo escupe su propio menu vertical adentro del contenido. Arriba ya estan las
solapas con lo mismo, asi que quedaban dos menus. Se va el de Woo. */
.mt-account .woocommerce-MyAccount-navigation { display: none; }
.mt-account .woocommerce-MyAccount-content { float: none; width: auto; }
/* woo-skin.css pone .woocommerce en grilla de dos columnas (menu + contenido)
para el escritorio pelado. Adentro del diseno nuevo esa grilla sobra, y en la
pantalla de entrar, donde no hay menu, empujaba el formulario a la segunda
columna: quedaba a 824 px y corrido a la derecha. */
.woocommerce-account .mt-entrar .woocommerce,
.woocommerce-account .mt-account .woocommerce {
display: block;
grid-template-columns: none;
}
/* Cuando no hay tarjeta de foto (pedidos, descargas, entradas) el contenido usa
todo el ancho en vez de quedarse en la columna angosta. */
.mt-account--woo { grid-template-columns: 1.4fr 1fr; }
.mt-account--woo:not(:has(.mt-foto__row)) { grid-template-columns: 1fr; }
@media (max-width: 900px) { .mt-account--woo { grid-template-columns: 1fr; } }
.mt-card--woo { min-width: 0; }
.mt-card--woo p { margin: 0 0 1.1em; }
.mt-card--woo p:last-child { margin-bottom: 0; }
.mt-card--woo h2, .mt-card--woo h3 {
font-family: var(--font-display); color: var(--cream);
letter-spacing: -.02em; line-height: 1.1;
margin: 1.6em 0 .7em; font-weight: 500;
}
.mt-card--woo h2:first-child, .mt-card--woo h3:first-child { margin-top: 0; }
.mt-card--woo a:not(.button):not(.btn) {
color: var(--pink); text-decoration: underline; text-underline-offset: 3px;
}
.mt-card--woo table { width: 100%; border-collapse: collapse; }
.mt-card--woo .woocommerce-Message,
.mt-card--woo .woocommerce-info,
.mt-card--woo .woocommerce-error {
background: rgba(255,255,255,.03);
border-left: 3px solid var(--pink);
border-radius: 8px;
color: var(--cream-soft);
}
/* ---------------------------------------------------------------------------
Entrar y registrarse
---------------------------------------------------------------------------
Woo pone dos formularios sueltos, uno al lado del otro, sin nada. Van en las
mismas tarjetas que el resto de la cuenta. */
.mt-head__inner--anon { display: block; }
.mt-head__sub {
font: italic 400 clamp(15px, 1.5vw, 18px) var(--font-display);
color: var(--cream-soft);
max-width: 52ch; margin-top: 14px; line-height: 1.5;
}
/* La pagina de la cuenta esta armada en Elementor y su seccion impone dos
columnas angostas: sin esto los formularios quedaban espichados en 170 px al
medio de la pantalla. Se desarma esa grilla y la que manda es la de Woo. */
.mt-entrar .elementor-container { max-width: none !important; display: block !important; }
.mt-entrar .elementor-column,
.mt-entrar .elementor-widget-wrap,
.mt-entrar .elementor-column-wrap { width: 100% !important; max-width: none !important; }
.mt-entrar .elementor-section { padding-left: 0 !important; padding-right: 0 !important; }
.mt-entrar .elementor-background-overlay { display: none; }
/* Las dos columnas de Woo, cada una en su tarjeta. */
.mt-entrar #customer_login {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(24px, 3vw, 44px); align-items: start;
width: 100%; max-width: none;
}
/* Woo le cuelga un clearfix con ::before y ::after. En una grilla esos cuentan
como celdas, asi que "Acceder" caia en la segunda y "Registrarse" en la
tercera: quedaban en diagonal en vez de lado a lado. */
.mt-entrar #customer_login::before,
.mt-entrar #customer_login::after { display: none !important; }
@media (max-width: 860px) { .mt-entrar #customer_login { grid-template-columns: 1fr; } }
.mt-entrar .u-column1, .mt-entrar .u-column2 {
width: auto !important; float: none !important; margin: 0 !important;
background: var(--night);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: clamp(22px, 2.4vw, 30px);
}
/* El saludo de arriba, ancho completo y con la voz del sitio. */
.mt-entrar .elementor-widget-text-editor {
font: italic 400 clamp(15px, 1.5vw, 18px) var(--font-display);
color: var(--cream-soft);
max-width: 60ch;
margin-bottom: clamp(24px, 3vw, 40px);
}
.mt-entrar h2 {
font: 500 clamp(24px, 2.6vw, 34px) var(--font-display);
color: var(--cream); letter-spacing: -.02em; margin: 0 0 6px;
}
.mt-entrar .mt-card > p:first-of-type {
font: italic 400 14px var(--font-display); color: var(--cream-dim);
margin: 0 0 20px;
}
.mt-entrar .woocommerce-form-login, .mt-entrar .woocommerce-form-register {
border: 0 !important; padding: 0 !important; margin: 0 !important;
}
.mt-entrar .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cream-dim); }
.mt-entrar .lost_password { font-size: 13px; }
.mt-entrar .lost_password a { color: var(--cream-dim) !important; }
.mt-entrar .lost_password a:hover { color: var(--pink) !important; }
/* La tarjeta del usuario en la cabecera, mas grande: en el mockup era un chip
al costado de una lista de tickets, aca es lo unico que hay a la derecha y
quedaba perdida. */
.mt-head .mt-avatar { padding: 20px 30px 20px 20px; gap: 22px; }
.mt-head .mt-avatar__circle {
width: clamp(84px, 8vw, 112px); height: clamp(84px, 8vw, 112px);
font-size: clamp(30px, 3vw, 40px);
overflow: hidden;
}
/* El :not([hidden]) no es decorativo: display:block le gana en especificidad al
[hidden] del HTML, asi que sin foto el ![]()
vacio seguia ocupando los 112 px
del circulo y empujaba las iniciales afuera. Se veia un globo de gradiente con
el "JP" colgando al costado. */
.mt-head .mt-avatar__circle img:not([hidden]) { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-head .mt-avatar__info .name { font-size: clamp(20px, 2vw, 26px); }
@media (max-width: 860px) {
.mt-head__inner { flex-wrap: wrap; }
.mt-head .mt-avatar { width: 100%; }
}
/* El texto del escritorio de Woo, con la voz del sitio: venia en la tipografia
de fabrica y desentonaba al lado de las tarjetas. */
.mt-card--woo .woocommerce-MyAccount-content > p,
.mt-card--woo > p {
font: italic 400 clamp(15px, 1.5vw, 17px) var(--font-display);
color: var(--cream-soft);
line-height: 1.6;
max-width: 62ch;
}
.mt-card--woo .woocommerce-MyAccount-content > p strong,
.mt-card--woo > p strong { font-style: normal; color: var(--cream); font-weight: 500; }
/* ---------------------------------------------------------------------------
Lo que se muestra junto a otra solapa
---------------------------------------------------------------------------
"Pedidos" va adentro de "Entradas" y "Direccion" adentro de "Detalles de la
cuenta". Cada anexo se separa con su propio titulo y su linea. */
/* El Entradas
que imprime FooEvents se reemplaza por el titulo con la
voz del sitio (ver archi_entradas_html en functions.php). Este bloque le da
aire a la lista y separa visiblemente las dos mitades de la pantalla: arriba
lo que mostras en la puerta, abajo lo que pagaste. */
.mt-entradas { display: flex; flex-direction: column; gap: 14px; }
.mt-entradas .mt-ticket { margin: 0; }
.woocommerce-MyAccount-content > h1 { display: none; }
.mt-anexo {
margin-top: clamp(34px, 4vw, 54px);
padding-top: clamp(28px, 3vw, 40px);
border-top: 1px solid var(--line);
}
.mt-sub { margin-bottom: 22px; }
.mt-sub__tit {
font: 500 clamp(22px, 2.4vw, 30px) var(--font-display);
color: var(--cream); letter-spacing: -.02em; line-height: 1.1;
margin: 0 0 6px;
}
.mt-sub__tit em {
font-style: italic;
background: var(--gradient);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.mt-sub__baja {
font: italic 400 14px var(--font-display);
color: var(--cream-dim); margin: 0;
}
/* Las dos direcciones (facturacion y envio) una al lado de la otra. */
.mt-anexo .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mt-anexo .woocommerce-Addresses::before,
.mt-anexo .woocommerce-Addresses::after { display: none !important; }
.mt-anexo .woocommerce-Address { width: auto !important; float: none !important; }
@media (max-width: 760px) { .mt-anexo .woocommerce-Addresses { grid-template-columns: 1fr; } }
.mt-anexo .woocommerce-Address-title h3 {
font: 700 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
color: var(--muted); margin: 0 0 10px;
}
.mt-anexo address { font-style: normal; color: var(--cream-soft); line-height: 1.7; }
/* La tabla de pedidos */
.mt-anexo .woocommerce-orders-table th {
font: 700 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
color: var(--muted); text-align: left; padding: 10px 12px;
border-bottom: 1px solid var(--line);
}
.mt-anexo .woocommerce-orders-table td {
padding: 14px 12px; border-bottom: 1px solid var(--line);
color: var(--cream-soft); font-size: 14px;
}
.mt-anexo .woocommerce-orders-table__row:hover td { background: rgba(255,255,255,.02); }
/* Los formularios de Woo (direccion, datos de la cuenta) con la caja del sitio */
.mt-card--woo .woocommerce-form-row label,
.mt-card--woo .form-row label {
display: block;
font: 700 10px var(--font-mono);
letter-spacing: .16em; text-transform: uppercase;
color: var(--muted); margin-bottom: 7px;
}
.mt-card--woo input[type=text], .mt-card--woo input[type=email],
.mt-card--woo input[type=tel], .mt-card--woo input[type=password],
.mt-card--woo select, .mt-card--woo textarea {
width: 100%;
background: var(--black);
border: 1px solid var(--line); border-radius: 10px;
color: var(--cream); font: 400 15px var(--font-body);
padding: 12px 14px;
}
.mt-card--woo input:focus, .mt-card--woo select:focus, .mt-card--woo textarea:focus {
border-color: var(--pink); outline: none;
box-shadow: 0 0 0 3px rgba(255,61,127,.16);
}
/* ---------------------------------------------------------------------------
Las solapas paran justo debajo del nav
---------------------------------------------------------------------------
El mockup las clava a 72px, que es el alto del nav sin barra de admin y sin
scroll. Con la barra puesta el nav baja 32px o mas y las solapas le quedaban
por debajo: los dos renglones de links encimados. functions.php mide el nav
en vivo y lo publica en --archi-navh. */
.mt-tabs { top: calc( var(--archi-navh, 72px) + var(--archi-adminbar, 0px) ); }
/* ---------------------------------------------------------------------------
El formulario del perfil
---------------------------------------------------------------------------
Woo apila cada campo a lo ancho de la tarjeta: en escritorio quedaban cajas
de 1.400 px de ancho y 50 de alto para escribir un nombre. Va en dos columnas
y con una medida de lectura, como el resto del sitio. */
.mt-card--woo .woocommerce-EditAccountForm,
.mt-anexo .woocommerce-address-fields {
display: grid; grid-template-columns: 1fr 1fr;
gap: 4px 20px; max-width: 780px; align-items: start;
}
.mt-card--woo .woocommerce-EditAccountForm > p,
.mt-anexo .woocommerce-address-fields p { margin: 0 0 16px; }
.mt-card--woo .woocommerce-EditAccountForm > p.form-row-wide,
.mt-card--woo .woocommerce-EditAccountForm > fieldset,
.mt-anexo .woocommerce-address-fields .form-row-wide { grid-column: 1 / -1; }
/* Woo cierra sus floats con divs vacios: en una grilla son celdas fantasma que
dejan huecos y corren los campos de columna. */
.mt-card--woo .woocommerce-EditAccountForm > .clear,
.mt-card--woo .woocommerce-EditAccountForm::before,
.mt-card--woo .woocommerce-EditAccountForm::after,
.mt-anexo .woocommerce-address-fields .clear { display: none !important; }
.mt-card--woo .woocommerce-EditAccountForm .form-row,
.mt-anexo .woocommerce-address-fields .form-row {
width: auto !important; float: none !important; padding: 0 !important;
}
@media (max-width: 720px) {
.mt-card--woo .woocommerce-EditAccountForm,
.mt-anexo .woocommerce-address-fields { grid-template-columns: 1fr; }
}
/* Campos mas bajos: los de fabrica median 50px de alto. */
.mt-card--woo input[type=text], .mt-card--woo input[type=email],
.mt-card--woo input[type=tel], .mt-card--woo input[type=password],
.mt-card--woo select, .mt-card--woo textarea {
padding: 10px 13px; font-size: 14.5px; border-radius: 9px;
}
.mt-card--woo .woocommerce-EditAccountForm em,
.mt-card--woo span.description, .mt-card--woo .form-row .description {
display: block; margin-top: 6px;
font: italic 400 13px var(--font-display); color: var(--cream-dim);
}
/* El bloque de contrasena venia con el marco gris de fabrica y la leyenda
pisando el borde. */
.mt-card--woo .woocommerce-EditAccountForm fieldset {
border: 1px solid var(--line); border-radius: var(--r-md);
padding: 20px 22px 4px; margin: 6px 0 20px;
}
.mt-card--woo .woocommerce-EditAccountForm legend {
font: 700 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
color: var(--muted); padding: 0 8px;
}
.mt-card--woo .woocommerce-EditAccountForm fieldset .form-row { grid-column: 1 / -1; }
.mt-card--woo .woocommerce-EditAccountForm > p:last-child { grid-column: 1 / -1; margin-top: 4px; }
/* ---------------------------------------------------------------------------
La contraseña, atras de un boton
---------------------------------------------------------------------------
Woo la deja como un bloque de tres campos siempre abierto en el medio del
perfil: media pantalla para algo que casi nunca se toca. Queda un boton y los
campos se mudan a un popup (js/profile.js), que cuelga del formulario para
que "Guardar cambios" los siga mandando. */
.mt-pass__abrir { grid-column: 1 / -1; justify-self: start; margin: 2px 0 18px; }
.mt-pass {
position: fixed; inset: 0; z-index: 3000;
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mt-pass[hidden] { display: none; }
.mt-pass::before {
content: ''; position: absolute; inset: 0;
background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
}
.mt-pass__panel {
position: relative; z-index: 1; width: min(430px, 100%);
background: var(--night); border: 1px solid var(--line-2);
border-radius: var(--r-md); padding: 30px 28px 24px;
box-shadow: 0 30px 80px rgba(0,0,0,.6);
max-height: 88vh; overflow-y: auto;
}
.mt-pass__panel::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--gradient);
}
.mt-pass__x {
position: absolute; top: 14px; right: 16px;
background: none; border: 0; cursor: pointer; line-height: 1;
font-size: 22px; color: var(--cream-dim);
}
.mt-pass__x:hover { color: var(--cream); }
.mt-pass__tit {
font: 500 clamp(22px, 2.4vw, 28px) var(--font-display);
color: var(--cream); letter-spacing: -.02em; margin: 0 0 6px;
}
.mt-pass__tit em {
font-style: italic; background: var(--gradient);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.mt-pass__baja {
font: italic 400 13.5px var(--font-display); color: var(--cream-dim);
margin: 0 0 20px;
}
/* Adentro del popup el marco del fieldset sobra: el marco es el popup. */
.mt-pass__fs { border: 0 !important; padding: 0 !important; margin: 0 !important; display: block; }
.mt-pass__fs .form-row { width: auto !important; float: none !important; margin: 0 0 16px; }
.mt-pass__acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.mt-pass__guardar {
border: 0; border-radius: 999px; cursor: pointer;
background: var(--gradient); color: #fff;
font: 700 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
padding: 11px 20px;
box-shadow: 0 10px 28px rgba(255,61,127,.3);
}
.mt-pass__guardar:hover { transform: translateY(-1px); }
/* ---------------------------------------------------------------------------
La foto: un solo lugar donde cargarla
---------------------------------------------------------------------------
El snippet de WPCode dibuja su propio formulario ("Sube tu foto de perfil",
Choose file, la foto actual y Guardar cambios). Al lado estaba el circulo del
diseno con sus botones: dos cargadores para una sola foto. El del snippet se
esconde y lo maneja el boton "Cargar foto" (js/profile.js); su input sigue
siendo el que sube el archivo. */
#profile-picture-form { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-foto__estado {
font: italic 400 13.5px var(--font-display); color: var(--cream-dim);
margin: 12px 0 0;
}
/* El grabado puesto se marca, para que se vea cual esta activo. */
.mt-avatares__op.is-puesto { outline: 2px solid var(--pink); outline-offset: 3px; }
.mt-card--woo button.button, .mt-card--woo input.button,
.mt-card--woo a.button {
background: var(--gradient) !important;
border: 0 !important; border-radius: 999px !important;
color: var(--black) !important;
font: 700 11px var(--font-mono) !important;
letter-spacing: .12em; text-transform: uppercase;
padding: 12px 26px !important;
text-decoration: none !important;
cursor: pointer;
}