/* El Método — skin Shopify. Todo namespaced bajo .emt-* para no afectar al resto del sitio. */ /* Gotham (tipografía de marca) autoalojada en el plugin: book (texto), bold (títulos), bold italic (botones, como en el resto de la web). */ @font-face{ font-family:'GothamEMT'; src:url('fonts/gotham-book.woff2') format('woff2'), url('fonts/gotham-book.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'GothamEMT'; src:url('fonts/gotham-bold.woff2') format('woff2'), url('fonts/gotham-bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:'GothamEMT'; src:url('fonts/gotham-bolditalic.woff2') format('woff2'), url('fonts/gotham-bolditalic.woff') format('woff'); font-weight:700; font-style:italic; font-display:swap; } .emt-planes{ --emt-surface:#16161d; --emt-border:#232330; --emt-text:#f4f4f6; --emt-muted:#a0a4ae; --emt-bright:#ecedf1; --emt-accent:#cc3366; --emt-ok:#3ecb8c; --emt-yellow:#fffe00; --emt-on-yellow:#141418; --emt-radius:12px; max-width:1280px; margin:0 auto; padding:16px 24px 72px; font-family:'GothamEMT','Gotham2','Gotham',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--emt-text); line-height:1.55; box-sizing:border-box; } .emt-planes *{box-sizing:border-box} /* Botón de marca: amarillo, Gotham bold itálica, píldora, crece al pasar el ratón */ .emt-btn{ display:inline-flex; align-items:center; justify-content:center; text-align:center; background:#fff52a !important; color:#d82f13 !important; border:none !important; border-radius:30px; padding:15px 26px; text-decoration:none; cursor:pointer; font-family:'GothamEMT','Gotham2','Gotham',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important; font-weight:700 !important; font-style:italic !important; font-size:15.5px; letter-spacing:.01em; line-height:1.1; transition:transform .16s ease, box-shadow .16s ease; } .emt-btn:hover, .emt-btn:focus-visible{ transform:scale(1.05); color:#d82f13 !important; box-shadow:0 8px 26px rgba(255,245,42,.36); } .emt-btn:active{ transform:scale(.99) } /* Hero */ .emt-planes-hero{text-align:center; padding:44px 8px 8px} .emt-planes-hero h2{ font-size:38px; margin:0 0 14px; font-weight:700; letter-spacing:-.01em; line-height:1.1; background:linear-gradient(90deg,#58d0f5,#cc3366,#ffe000); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .emt-planes-hero p{color:var(--emt-bright); font-size:16px; margin:0 auto; max-width:680px; line-height:1.6} .emt-planes-hero p b{color:#fff; font-weight:700} /* Rejilla de planes */ .emt-planes-grid{ display:grid; grid-template-columns:1fr; gap:24px; padding:40px 0 44px } @media(min-width:640px){ .emt-planes-grid{grid-template-columns:1fr 1fr} } @media(min-width:1040px){ .emt-planes-grid{grid-template-columns:repeat(4,1fr)} } .emt-plan{ background:var(--emt-surface); border:1px solid var(--emt-border); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; } .emt-plan.emt-best{ border:2px solid var(--emt-accent); box-shadow:0 0 0 5px rgba(204,51,102,.12) } .emt-plan-top{ padding:22px 24px; color:#fff; position:relative } .emt-plan-top h3{ margin:0; font-size:22px; font-weight:700; color:#fff; line-height:1.2 } .emt-best .emt-plan-top h3{ padding-right:92px } .emt-badge{ position:absolute; top:16px; right:16px; background:rgba(0,0,0,.34); color:#fff; font-size:10px; font-weight:700; letter-spacing:.05em; padding:4px 10px; border-radius:20px; white-space:nowrap; } .emt-power{ display:flex; gap:6px; margin-top:14px } .emt-power span{ height:8px; flex:1; border-radius:4px; background:rgba(255,255,255,.28) } .emt-power span.on{ background:#fff } .emt-plan-oc{ font-size:13px; font-weight:700; opacity:.97; margin-top:10px } .emt-plan-body{ padding:24px; display:flex; flex-direction:column; gap:16px; flex:1 } .emt-plan-price{ font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--emt-text) } .emt-plan-price .woocommerce-Price-amount{ font-size:30px; font-weight:700 } .emt-oc-callout{ display:flex; align-items:center; gap:9px; font-size:14px; background:rgba(204,51,102,.14); color:#fff; border:1px solid rgba(204,51,102,.32); border-radius:12px; padding:12px 14px; line-height:1.25; } .emt-oc-callout b{ font-weight:700 } .emt-oc-callout svg{ width:18px; height:18px; flex:none; color:var(--emt-accent) } .emt-inc-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#c9ccd3; margin-top:2px; } .emt-plan-body ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; flex:1 } .emt-plan-body li{ display:flex; gap:9px; font-size:13.5px; color:var(--emt-text); align-items:flex-start; line-height:1.4 } .emt-plan-body li svg{ width:16px; height:16px; flex:none; margin-top:1px; color:var(--emt-ok) } .emt-plan-req{ font-size:12px; color:var(--emt-muted); line-height:1.45 } /* Montaje PC — banner destacado */ .emt-montaje{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:linear-gradient(120deg,#1b1622,#221a2b); border:1px solid rgba(204,51,102,.35); border-radius:20px; padding:28px 30px; margin-top:16px; } .emt-montaje-ic{ width:68px; height:68px; border-radius:18px; flex:none; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#cc3366,#7a1d3c); } .emt-montaje-ic svg{ width:32px; height:32px } .emt-montaje-body{ flex:1; min-width:240px } .emt-montaje-tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#f4c1d3; background:rgba(204,51,102,.16); padding:4px 11px; border-radius:20px; margin-bottom:10px; } .emt-montaje-body h3{ margin:0; font-size:20px; font-weight:700; color:var(--emt-text); line-height:1.25 } .emt-montaje-body p{ margin:6px 0 0; color:var(--emt-bright); font-size:14px; max-width:600px; line-height:1.55 } .emt-montaje-cta{ display:flex; flex-direction:column; align-items:stretch; gap:10px; min-width:200px } .emt-montaje-price{ font-size:22px; font-weight:700; text-align:center; color:var(--emt-text) } /* Preguntas frecuentes (acordeón nativo) — al ancho completo, con aire */ .emt-faq{ margin-top:64px } .emt-faq-title{ font-size:28px; font-weight:700; text-align:center; margin:0 0 26px; color:#fff } .emt-faq-item{ background:var(--emt-surface); border:1px solid var(--emt-border); border-radius:14px; margin-bottom:14px; overflow:hidden; } .emt-faq-item summary{ cursor:pointer; padding:20px 24px; font-weight:700; font-size:16px; color:var(--emt-text); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } .emt-faq-item summary::-webkit-details-marker{ display:none } .emt-faq-item summary::after{ content:"+"; font-size:26px; line-height:1; color:var(--emt-yellow); font-weight:400; flex:none; } .emt-faq-item[open] summary::after{ content:"\2013" } .emt-faq-item[open] summary{ color:#fff } .emt-faq-a{ padding:0 24px 22px; color:var(--emt-bright); font-size:15px; line-height:1.7; max-width:820px } .emt-faq-a a{ color:var(--emt-yellow); text-decoration:underline } /* Móvil (la mayoría del tráfico) */ @media(max-width:600px){ .emt-planes{ padding:8px 16px 48px } .emt-planes-hero{ padding:26px 4px 4px } .emt-planes-hero h2{ font-size:28px; margin-bottom:12px } .emt-planes-hero p{ font-size:15px } .emt-planes-grid{ gap:18px; padding:28px 0 32px } .emt-plan-top{ padding:20px 22px } .emt-plan-top h3{ font-size:21px } .emt-plan-body{ padding:22px } .emt-btn{ padding:16px 24px; font-size:16px } .emt-montaje{ padding:22px; gap:18px; border-radius:18px } .emt-montaje-ic{ width:58px; height:58px } .emt-montaje-body{ min-width:100% } .emt-montaje-cta{ min-width:100%; width:100% } .emt-faq{ margin-top:44px } .emt-faq-title{ font-size:24px } .emt-faq-item summary{ padding:18px 18px; font-size:15px } .emt-faq-a{ padding:0 18px 18px; font-size:14.5px } } /* ============================================================ MI CUENTA (WooCommerce nativo, skin Shopify oscuro) ============================================================ */ .emt-account-in .woocommerce{ display:grid !important; grid-template-columns:250px minmax(0,1fr); gap:40px; width:100%; max-width:1180px; margin:0 auto; padding:12px 24px 68px; font-family:'GothamEMT','Gotham2','Gotham',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#f4f4f6; box-sizing:border-box; line-height:1.55; float:none; } .emt-account-in .woocommerce *{ box-sizing:border-box } /* Colocación explícita: barra lateral col.1, contenido col.2, avisos a todo el ancho. Anula el float/ancho por defecto de WooCommerce que rompería la rejilla. */ .emt-account-in .woocommerce > .woocommerce-notices-wrapper{ grid-column:1 / -1 } .emt-account-in .woocommerce-MyAccount-navigation{ grid-column:1; float:none !important; width:auto !important; margin:0 !important; align-self:start; } .emt-account-in .woocommerce-MyAccount-content{ grid-column:2; float:none !important; width:auto !important; margin:0 !important; min-width:0; } /* Barra lateral — panel de menú fijo con iconos (base reutilizable para LearnDash) */ .woocommerce-MyAccount-navigation{ background:#14141a; border:1px solid #232330; border-radius:16px; padding:10px; /* top = alto de la barra superior sticky (58px) + hueco, para que el 1er punto (Escritorio) no quede tapado al hacer scroll */ position:sticky; top:80px; } .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px } .woocommerce-MyAccount-navigation li{ margin:0 } .woocommerce-MyAccount-navigation li a{ display:flex; align-items:center; gap:12px; padding:12px 13px; border-radius:11px; text-decoration:none; color:#a0a4ae; font-weight:700; font-size:14.5px; transition:background .15s,color .15s; } .emt-nav-ic{ display:inline-flex; flex:none; width:20px; height:20px; color:#6b7079; transition:color .15s } .emt-nav-ic svg{ width:20px; height:20px; display:block } .emt-nav-label{ min-width:0 } .woocommerce-MyAccount-navigation li a:hover{ color:#fff; background:#1d1d26 } .woocommerce-MyAccount-navigation li a:hover .emt-nav-ic{ color:#cc3366 } .woocommerce-MyAccount-navigation li.is-active a{ background:linear-gradient(135deg,#cc3366,#9e2450); color:#fff; box-shadow:0 6px 18px rgba(204,51,102,.30); } .woocommerce-MyAccount-navigation li.is-active .emt-nav-ic{ color:#fff } .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{ margin-top:8px; border-top:1px solid #232330; padding-top:8px } .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a, .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout .emt-nav-ic{ color:#7b7f89 } /* Contenido */ .woocommerce-MyAccount-content{ min-width:0; color:#f4f4f6 } .woocommerce-MyAccount-content > p:first-child{ color:#ecedf1 } .woocommerce-MyAccount-content a:not(.emt-btn):not(.button){ color:#fff } /* Escritorio propio */ .emt-acc-greet{ font-size:26px; font-weight:700; margin:0 0 6px; color:#fff } .emt-acc-sub{ color:#a0a4ae; font-size:15px; margin:0 0 22px } .emt-acc-label{ font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#a0a4ae; margin:26px 0 14px } .emt-hero-access{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:linear-gradient(135deg,#cc3366,#5a1330); color:#fff; border-radius:18px; padding:24px; margin-bottom:14px; } .emt-hero-plus{ background:linear-gradient(135deg,#6d28d9,#2a1258) } .emt-ha-ic{ width:66px; height:66px; border-radius:16px; flex:none; background:rgba(255,255,255,.16); display:grid; place-items:center; font-weight:700; font-size:11px; text-align:center; line-height:1.1; color:#fff } .emt-ha-body{ flex:1; min-width:220px } .emt-ha-body h3{ margin:0; font-size:20px; font-weight:700; color:#fff } .emt-ha-body p{ margin:5px 0 0; font-size:14px; color:#fff; opacity:.92 } .emt-ha-owned{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.22); color:#fff; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:20px; margin-top:11px } .emt-ha-owned svg{ width:12px; height:12px } .emt-ha-btn{ flex:none; background:#fff !important; color:#a3244a !important; padding:0 24px; height:50px; font-style:italic } .emt-ha-btn:hover{ box-shadow:0 8px 24px rgba(0,0,0,.28) } .emt-acc-upsell{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px } .emt-up-card{ background:#16161d; border:1px solid #232330; border-radius:18px; overflow:hidden; display:flex; flex-direction:column } .emt-up-top{ height:150px; display:grid; place-items:center; overflow:hidden } .emt-up-top img{ width:100%; height:100%; object-fit:cover; display:block; margin:0 } .emt-up-ph{ color:#fff; font-weight:700; font-style:italic; font-size:21px; letter-spacing:.02em; text-align:center; padding:0 16px; line-height:1.2 } .emt-up-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1 } .emt-up-body h3{ margin:0; font-size:17px; font-weight:700; color:#fff } .emt-up-body p{ margin:0; color:#a0a4ae; font-size:13px; line-height:1.5; flex:1 } .emt-up-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; flex-wrap:wrap } .emt-up-price{ font-weight:700; font-size:18px; color:#fff; white-space:nowrap } /* Botones e inputs nativos de WooCommerce dentro de Mi cuenta */ .woocommerce-MyAccount-content .button, .woocommerce-MyAccount-content a.button, .woocommerce-MyAccount-content button.button, .woocommerce-MyAccount-content input[type="submit"]{ background:#fff52a !important; color:#d82f13 !important; border:none !important; border-radius:30px !important; padding:13px 26px !important; font-weight:700 !important; font-style:italic !important; font-family:'GothamEMT','Gotham2','Gotham',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important; cursor:pointer; display:inline-block; transition:transform .16s ease, box-shadow .16s ease; } .woocommerce-MyAccount-content .button:hover, .woocommerce-MyAccount-content input[type="submit"]:hover{ transform:scale(1.04); box-shadow:0 8px 26px rgba(255,245,42,.36) } .woocommerce-MyAccount-content input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .woocommerce-MyAccount-content select, .woocommerce-MyAccount-content textarea{ background:#121218; border:1px solid #232330; color:#f4f4f6; border-radius:10px; padding:12px 13px; font:inherit; width:100%; max-width:100%; box-sizing:border-box; } .woocommerce-MyAccount-content input:focus, .woocommerce-MyAccount-content select:focus, .woocommerce-MyAccount-content textarea:focus{ outline:none; border-color:#cc3366; box-shadow:0 0 0 3px rgba(204,51,102,.18) } .woocommerce-MyAccount-content table{ color:#f4f4f6 } .woocommerce-MyAccount-content table th, .woocommerce-MyAccount-content table td{ border-color:#232330 !important } /* --- Apartados del menú (pedidos, direcciones, métodos de pago, detalles) --- */ /* Avisos de WooCommerce */ .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-MyAccount-content .woocommerce-error, .woocommerce-MyAccount-content .woocommerce-Message{ background:#1d1d26 !important; border:1px solid #232330; border-left:3px solid #cc3366; color:#ecedf1; border-radius:10px; padding:14px 18px !important; margin:0 0 18px; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:14px; } .woocommerce-MyAccount-content .woocommerce-message{ border-left-color:#3ecb8c } .woocommerce-MyAccount-content .woocommerce-error{ border-left-color:#e24b4a } .woocommerce-MyAccount-content .woocommerce-info::before, .woocommerce-MyAccount-content .woocommerce-message::before, .woocommerce-MyAccount-content .woocommerce-error::before{ display:none !important } /* Títulos dentro del contenido */ .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3{ color:#fff; font-weight:700; margin:0 0 14px; font-size:18px } /* Tabla de pedidos */ .woocommerce-MyAccount-content table.shop_table{ width:100%; border-collapse:collapse; border:1px solid #232330; border-radius:12px; overflow:hidden; background:#16161d; margin:0; } .woocommerce-MyAccount-content table.shop_table thead th{ background:#1d1d26; color:#a0a4ae; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; padding:13px 14px; text-align:left; font-weight:700; border:none; } .woocommerce-MyAccount-content table.shop_table td{ padding:14px; border-top:1px solid #232330; color:#ecedf1; font-size:14px; vertical-align:middle } .woocommerce-MyAccount-content table.shop_table .button{ padding:9px 18px !important; font-size:13px } /* Direcciones */ .woocommerce-Addresses{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0 } /* El clearfix de WooCommerce (::before/::after) se cuela como celda de la rejilla y descoloca las tarjetas. Lo anulamos para que solo cuenten las dos direcciones. */ .woocommerce-Addresses::before, .woocommerce-Addresses::after{ content:none !important; display:none !important } .woocommerce-Addresses .col-1, .woocommerce-Addresses .col-2, .woocommerce-Address{ width:auto !important; float:none !important; margin:0 !important; background:#16161d; border:1px solid #232330; border-radius:14px; padding:20px 22px } .woocommerce-Address-title{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px } .woocommerce-Address-title h3{ margin:0 } .woocommerce-Address-title .edit{ display:inline-flex; align-items:center; gap:6px; flex:none; background:#1d1d26; border:1px solid #34343f; color:#fff !important; padding:8px 15px; border-radius:22px; font-size:12.5px; font-weight:700; font-style:italic; text-decoration:none; transition:transform .15s, border-color .15s, background .15s; } .woocommerce-Address-title .edit svg{ width:15px; height:15px; color:#fff52a; flex:none } .woocommerce-Address-title .edit:hover{ background:#26262f; border-color:#54545f; transform:translateY(-1px); color:#fff !important } /* Ocultar textos solo-lector que WooCommerce añade (evita textos largos visibles) */ .woocommerce-MyAccount-content .screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 } .woocommerce-Address address{ color:#ecedf1; font-style:normal; line-height:1.7; font-size:14px } /* Formularios (detalles de la cuenta / direcciones) */ .woocommerce-MyAccount-content form .woocommerce-form-row, .woocommerce-MyAccount-content form p.form-row{ display:flex; flex-direction:column; margin:0 0 16px } .woocommerce-MyAccount-content form label{ color:#c9ccd3; font-size:13px; font-weight:700; margin-bottom:7px } .woocommerce-MyAccount-content form .required{ color:#cc3366; border:none } .woocommerce-MyAccount-content fieldset{ border:1px solid #232330; border-radius:12px; padding:18px 22px 6px; margin:26px 0 0 } .woocommerce-MyAccount-content legend{ color:#fff; font-weight:700; padding:0 10px; font-size:15px } .woocommerce-MyAccount-content .woocommerce-form-row span em{ color:#7b7f89; font-style:normal; font-size:12px } @media(min-width:560px){ .woocommerce-MyAccount-content form .woocommerce-form-row--first{ width:calc(50% - 8px); float:left; margin-right:16px } .woocommerce-MyAccount-content form .woocommerce-form-row--last{ width:calc(50% - 8px); float:left } .woocommerce-MyAccount-content form .clear{ clear:both } } @media(max-width:880px){ .emt-account-in .woocommerce{ grid-template-columns:1fr; gap:20px; padding:10px 16px 48px } /* El contenido vuelve a la única columna (en escritorio va en la col.2) — si no, queda hueco a la izquierda */ .emt-account-in .woocommerce-MyAccount-content{ grid-column:1 / -1 !important; } /* Menú lateral = cajón deslizante desde la izquierda (igual que en cursos) */ .emt-account .woocommerce-MyAccount-navigation{ position:fixed; top:0; left:0; bottom:0; width:300px; max-width:86vw; padding:22px 14px; border-radius:0; background:#101014; border-right:1px solid #232330; transform:translateX(-100%); transition:transform .25s ease; z-index:9995; overflow-y:auto; } .emt-account .woocommerce-MyAccount-navigation.open{ transform:none; } .woocommerce-MyAccount-navigation ul{ flex-direction:column; flex-wrap:nowrap; gap:3px; overflow:visible } .woocommerce-MyAccount-navigation li a{ padding:12px 14px; font-size:14px; white-space:normal } .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{ margin-top:8px; border-top:1px solid #232330; padding-top:8px } .emt-ha-btn{ width:100%; justify-content:center } .emt-acc-greet{ font-size:23px } .woocommerce-Addresses{ grid-template-columns:1fr } } /* ============================================================ LOGIN / REGISTRO (tarjeta centrada estilo Shopify) ============================================================ */ .emt-account .emt-auth{ max-width:440px; margin:40px auto 64px; background:#16161d; border:1px solid #232330; border-radius:18px; padding:32px 28px; font-family:'GothamEMT','Gotham2','Gotham',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#f4f4f6; box-sizing:border-box; } .emt-account .emt-auth *{ box-sizing:border-box } .emt-auth-title{ text-align:center; font-size:23px; font-weight:700; margin:0 0 6px; color:#fff } .emt-auth-sub{ text-align:center; color:#a0a4ae; font-size:14px; margin:0 0 24px; line-height:1.5 } .emt-auth-tabs{ display:flex; background:#121218; border:1px solid #232330; border-radius:12px; padding:4px; margin-bottom:24px } .emt-tab{ flex:1; background:transparent; border:none; color:#a0a4ae; font-family:inherit; font-weight:700; font-style:italic; font-size:14.5px; padding:11px 8px; border-radius:9px; cursor:pointer; transition:background .15s,color .15s; } .emt-tab.is-active{ background:#fff52a; color:#d82f13 } .emt-auth .woocommerce-form{ display:flex; flex-direction:column; gap:15px; margin:0; padding:0 } .emt-auth .form-row{ display:flex; flex-direction:column; margin:0; padding:0 } .emt-auth label{ color:#c9ccd3; font-size:13px; font-weight:700; margin-bottom:7px } .emt-auth .required{ color:#cc3366; border:none; text-decoration:none } .emt-auth input[type="text"], .emt-auth input[type="email"], .emt-auth input[type="password"]{ width:100%; background:#121218; border:1px solid #232330; color:#f4f4f6; border-radius:10px; padding:13px 14px; font:inherit; font-size:14.5px; } .emt-auth input:focus{ outline:none; border-color:#cc3366; box-shadow:0 0 0 3px rgba(204,51,102,.18) } .emt-auth-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 } .emt-auth-row label{ display:flex; align-items:center; gap:8px; color:#a0a4ae; font-size:13px; font-weight:600; margin:0; cursor:pointer } .emt-auth-row input[type="checkbox"]{ accent-color:#cc3366; width:16px; height:16px } .emt-auth-lost{ color:#fff52a !important; font-size:12.5px; font-weight:700; font-style:italic; text-decoration:none; white-space:nowrap } .emt-auth-lost:hover{ text-decoration:underline } .emt-btn-block{ display:flex; width:100%; margin-top:6px } .emt-auth .woocommerce-password-strength, .emt-auth .woocommerce-password-hint{ font-size:12px; color:#a0a4ae; margin-top:-6px } @media(max-width:520px){ .emt-account .emt-auth{ margin:24px auto 48px; padding:26px 20px } .emt-auth-title{ font-size:21px } } /* Separador "o" y botón de Google en login/registro */ .emt-auth-divider{ display:flex; align-items:center; gap:14px; color:#5f636e; font-size:12px; margin:8px 0 4px } .emt-auth-divider::before, .emt-auth-divider::after{ content:""; flex:1; height:1px; background:#232330 } .emt-gbtn{ display:flex; justify-content:center; margin-top:6px; color-scheme:light } /* Botón propio de Google: mismo ancho y tipografía que el de Discord (.emd-login-btn) */ .emt-glogin-btn{ display:flex !important; align-items:center; justify-content:center; gap:10px; width:100%; box-sizing:border-box; margin-top:6px; background:#fff !important; color:#1f1f1f !important; font-family:'GothamEMT','Gotham',system-ui,"Segoe UI",Roboto,Arial,sans-serif !important; font-weight:600 !important; font-size:15px !important; line-height:1 !important; padding:12px 18px !important; border-radius:30px !important; border:0 !important; cursor:pointer; text-transform:none !important; letter-spacing:normal !important; transition:background .14s ease, box-shadow .14s ease; } .emt-glogin-btn:hover{ background:#f2f2f2 !important; box-shadow:0 6px 18px rgba(0,0,0,.18); } .emt-glogin-btn span{ color:#1f1f1f !important; font-weight:600 !important; } /* ============================================================ CARRITO (lista tipo Shopify, diseño de la web) ============================================================ */ .emt-cart .woocommerce{ max-width:1180px; margin:0 auto; padding:8px 24px 72px; font-family:'GothamEMT','Gotham2','Gotham',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#f4f4f6; box-sizing:border-box; } .emt-cart .woocommerce *{ box-sizing:border-box } .emt-cart-title{ max-width:1180px; margin:0 auto; padding:26px 24px 10px; font-size:30px; font-weight:700; color:#fff } /* Dos columnas cuando hay productos: artículos | resumen */ @media(min-width:900px){ .emt-cart .woocommerce{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:48px; align-items:start } .emt-cart .emt-cart-form{ grid-column:1; margin:0 } .emt-cart .cart-collaterals{ grid-column:2; max-width:none !important } } /* En una sola columna (móvil/tablet) la caja de totales NO se estira a lo ancho de la página */ .emt-cart .cart-collaterals{ width:100% !important; max-width:420px !important; float:none !important; margin:0 !important } /* Lista de artículos */ .emt-cart-list{ display:flex; flex-direction:column; } .emt-cart-line{ display:grid; grid-template-columns:84px minmax(0,1fr) auto auto; align-items:center; gap:18px; padding:20px 0; border-bottom:1px solid #232330; } .emt-cart-line:first-child{ border-top:1px solid #232330 } .emt-cl-thumb img{ width:78px; height:78px; object-fit:cover; border-radius:12px; display:block } .emt-cl-info{ min-width:0 } .emt-cl-name{ color:#fff; font-weight:700; font-size:16px; text-decoration:none; display:inline-block } .emt-cl-name:hover{ color:#fff52a } .emt-cl-info .variation, .emt-cl-info dl{ color:#a0a4ae; font-size:12.5px; margin:4px 0 0 } .emt-cl-unit{ color:#a0a4ae; font-size:13px; margin-top:4px } .emt-cart .emt-cl-remove{ display:inline-block !important; width:auto !important; height:auto !important; margin-top:10px !important; padding:0 !important; border-radius:0 !important; background:none !important; color:#7b7f89 !important; font-size:12.5px !important; line-height:1.4 !important; font-weight:700 !important; text-decoration:none !important; } .emt-cart .emt-cl-remove:hover{ color:#cc3366 !important; background:none !important } /* Cantidad con +/- */ .emt-cl-qty .quantity{ display:inline-flex; align-items:center; background:#121218; border:1px solid #232330; border-radius:12px; overflow:hidden } .emt-qbtn{ width:38px; height:44px; background:transparent !important; border:none !important; color:#fff !important; font-size:20px; line-height:1; cursor:pointer; transition:background .15s } .emt-qbtn:hover{ background:#1d1d26 } .emt-cl-qty input.qty{ width:46px; height:44px; text-align:center; background:transparent; border:none; color:#fff; font:inherit; font-weight:700; -moz-appearance:textfield; } .emt-cl-qty input.qty::-webkit-outer-spin-button, .emt-cl-qty input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 } .emt-cl-price{ font-weight:700; font-size:16px; color:#fff; white-space:nowrap; text-align:right; min-width:80px } /* Acciones: cupón + actualizar */ .emt-cart-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:22px 0 0 } .emt-cart-actions .coupon{ display:flex; gap:10px; flex:1 1 auto } .emt-cart-actions #coupon_code{ flex:0 1 220px; height:46px; background:#121218; border:1px solid #232330; color:#f4f4f6; border-radius:12px; padding:0 15px; font:inherit; } .emt-cart-actions #coupon_code:focus{ outline:none; border-color:#cc3366; box-shadow:0 0 0 3px rgba(204,51,102,.18) } .emt-cart-actions .coupon .button, .emt-cart-actions .emt-update-cart{ height:46px; background:#1d1d26 !important; color:#fff !important; border:1px solid #34343f !important; border-radius:23px !important; padding:0 22px !important; font-weight:700 !important; font-style:italic !important; font-family:'GothamEMT',sans-serif !important; cursor:pointer; } .emt-cart-actions .coupon .button:hover, .emt-cart-actions .emt-update-cart:hover:not([disabled]){ border-color:#54545f !important } .emt-cart-actions .emt-update-cart[disabled]{ opacity:.45; cursor:default } /* Resumen (cart totals) — ocupa toda la columna */ .emt-cart .cart-collaterals{ text-align:left } .emt-cart .cart_totals{ width:100% !important; float:none !important; margin:0 !important; text-align:left; align-self:start; background:#16161d; border:1px solid #232330; border-radius:18px; padding:24px; } @media(min-width:900px){ .emt-cart .cart_totals{ position:sticky; top:80px } } .emt-cart .cart_totals h2{ font-size:19px; font-weight:700; color:#fff; margin:0 0 18px; text-align:left } .emt-cart .cart_totals table{ width:100%; border:none !important; margin:0 } .emt-cart .cart_totals table td, .emt-cart .cart_totals table th{ border:none !important } .emt-cart .cart_totals table tr{ display:flex; justify-content:space-between; align-items:baseline; gap:16px } .emt-cart .cart_totals th, .emt-cart .cart_totals td{ border:none !important; padding:11px 0 !important; background:transparent; font-size:14px } .emt-cart .cart_totals th{ text-align:left; font-weight:600; color:#a0a4ae } .emt-cart .cart_totals td{ text-align:right; font-weight:700; color:#f4f4f6 } .emt-cart .cart_totals tr.cart-subtotal{ border-bottom:1px solid #232330; padding-bottom:4px; margin-bottom:4px } .emt-cart .cart_totals tr.order-total{ border-top:1px solid #232330; margin-top:6px; padding-top:8px } .emt-cart .cart_totals tr.order-total th{ color:#fff; font-size:16px; font-weight:700 } .emt-cart .cart_totals tr.order-total td{ font-size:24px; color:#fff } .emt-cart .cart_totals .woocommerce-shipping-destination, .emt-cart .cart_totals .shipping-calculator-button{ color:#a0a4ae; font-size:12.5px } /* Botón finalizar compra */ .emt-cart .wc-proceed-to-checkout{ padding:20px 0 0 !important } .emt-cart .wc-proceed-to-checkout a.checkout-button{ display:flex !important; align-items:center; justify-content:center; width:100%; background:#fff52a !important; color:#d82f13 !important; border:none !important; border-radius:30px !important; padding:17px !important; font-size:16.5px !important; font-weight:700 !important; font-style:italic !important; font-family:'GothamEMT',sans-serif !important; text-decoration:none; transition:transform .16s, box-shadow .16s; } .emt-cart .wc-proceed-to-checkout a.checkout-button:hover{ transform:scale(1.03); box-shadow:0 8px 26px rgba(255,245,42,.36) } /* Al pulsar "Finalizar compra" navega directo: quitamos el spinner de WooCommerce (se deformaba con el botón flex) */ .emt-cart .wc-proceed-to-checkout a.checkout-button.loading{ opacity:1 !important; padding:17px !important; } .emt-cart .wc-proceed-to-checkout a.checkout-button::after, .emt-cart .wc-proceed-to-checkout a.checkout-button::before{ content:none !important; display:none !important; } .emt-cart .wc-proceed-to-checkout .blockUI.blockOverlay{ display:none !important; } /* Carrito vacío */ .emt-cart .cart-empty{ text-align:center; font-size:18px; color:#ecedf1; margin:34px 0 18px } .emt-cart .return-to-shop{ text-align:center } .emt-cart .return-to-shop a.button{ display:inline-flex; background:#fff52a !important; color:#d82f13 !important; border:none !important; border-radius:30px !important; padding:14px 26px !important; font-weight:700 !important; font-style:italic !important; font-family:'GothamEMT',sans-serif !important; text-decoration:none; } @media(max-width:899px){ .emt-cart-title{ font-size:24px; padding:18px 16px 8px } .emt-cart .woocommerce{ padding:8px 16px 48px } .emt-cart .cart-collaterals{ margin-top:26px !important } .emt-cart-line{ grid-template-columns:64px minmax(0,1fr) auto; gap:14px } .emt-cl-thumb img{ width:60px; height:60px } .emt-cl-qty{ grid-column:2; justify-self:start; margin-top:6px } .emt-cl-price{ grid-column:3; grid-row:1 } } /* ============================================================ CARRITO LATERAL (side-cart de Elementor Pro, skin oscuro) ============================================================ */ .elementor-menu-cart__main{ background:#101014 !important; color:#f4f4f6 !important; width:390px !important; max-width:92vw !important; font-family:'GothamEMT','Gotham2','Gotham',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important; padding:24px 22px !important; border-left:1px solid #232330 !important; } .elementor-menu-cart__close-button{ color:#8b8f9a !important; opacity:1 !important; font-size:22px !important } .elementor-menu-cart__close-button:hover{ color:#fff !important } .elementor-menu-cart__products::before{ content:"Tu carrito"; display:block; font-size:19px; font-weight:700; color:#fff; margin:4px 0 16px; } .elementor-menu-cart__products{ scrollbar-width:thin } .elementor-menu-cart__product{ border-bottom:1px solid #232330 !important; padding:15px 0 !important; margin:0 !important } .elementor-menu-cart__product-name, .elementor-menu-cart__product-name a{ color:#fff !important; font-weight:700 !important; font-size:14.5px !important } .elementor-menu-cart__product-price, .elementor-menu-cart__product-price *{ color:#ecedf1 !important } .elementor-menu-cart__product-image img{ border-radius:10px !important } .elementor-menu-cart__product-remove a, .elementor-menu-cart__product-remove{ color:#7b7f89 !important } .elementor-menu-cart__product-remove a:hover{ color:#cc3366 !important } .elementor-menu-cart__subtotal{ color:#fff !important; border-top:1px solid #232330 !important; font-weight:700 !important; font-size:16px !important; padding-top:18px !important; margin-top:6px !important; } .elementor-menu-cart__subtotal *{ color:#fff !important } .elementor-menu-cart__footer-buttons{ display:flex !important; flex-direction:column !important; gap:10px !important; margin-top:16px !important } .elementor-menu-cart__footer-buttons a{ display:flex !important; align-items:center; justify-content:center; width:100% !important; border-radius:30px !important; padding:14px !important; font-size:15px !important; font-weight:700 !important; font-style:italic !important; font-family:'GothamEMT','Gotham2','Gotham',sans-serif !important; text-decoration:none !important; } .elementor-menu-cart__footer-buttons a.elementor-button--view-cart, .elementor-menu-cart__footer-buttons a.wc-forward:not(.checkout):not(.checkout-button){ background:#1d1d26 !important; color:#fff !important; border:1px solid #34343f !important; } .elementor-menu-cart__footer-buttons a.elementor-button--checkout, .elementor-menu-cart__footer-buttons a.checkout, .elementor-menu-cart__footer-buttons a.checkout-button{ background:#fff52a !important; color:#d82f13 !important; border:none !important; } .elementor-menu-cart__empty *{ color:#a0a4ae !important } /* ============================================================ CHECKOUT (estilo Shopify, dos columnas, oscuro) ============================================================ */ .emt-checkout .woocommerce{ width:100%; max-width:1180px; margin:0 auto; padding:38px 24px 72px; font-family:'GothamEMT','Gotham2','Gotham',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#f4f4f6; box-sizing:border-box; } .emt-checkout .woocommerce *{ box-sizing:border-box } .emt-checkout-title{ max-width:1180px; margin:0 auto; padding:26px 24px 14px 0; font-size:30px; font-weight:700; color:#fff; text-align:left } .emt-checkout .emt-express-sep{ display:flex; align-items:center; gap:14px; max-width:540px; margin:20px auto 0; color:#8b90a0; font-size:13px; white-space:nowrap } .emt-checkout .emt-express-sep::before, .emt-checkout .emt-express-sep::after{ content:""; flex:1; height:1px; background:#2a2a35 } /* Dos columnas: datos a la izquierda | resumen+pago a la derecha */ @media(min-width:960px){ .emt-checkout form.checkout{ display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:48px; align-items:start } .emt-checkout .emt-co-main{ grid-column:1; min-width:0 } .emt-checkout .emt-co-aside{ grid-column:2; position:sticky; top:80px } } /* En móvil, orden lógico: datos → extras → RESUMEN → pago (realizar pedido al final) */ @media(max-width:959px){ .emt-checkout form.checkout{ display:flex; flex-direction:column; gap:28px; } .emt-checkout .emt-co-main{ display:contents; } .emt-checkout #customer_details{ order:1; } .emt-checkout .emt-bumps{ order:2; } .emt-checkout .emt-co-aside{ order:3; } .emt-checkout .emt-co-payment{ order:4; border-top:1px solid #2a2a35; padding-top:26px; } } /* Método de pago: etiqueta larga (p.ej. Redsys) SIEMPRE al lado del radio, nunca debajo. flex:1 1 0 → la etiqueta parte de ancho 0 (cabe junto al radio) y el texto envuelve a su lado. */ .emt-checkout #payment ul.wc_payment_methods > li > label{ flex:1 1 0 !important; align-items:flex-start !important; } .emt-checkout #payment ul.wc_payment_methods > li{ align-items:flex-start !important } .emt-checkout .emt-co-aside #order_review_heading{ margin:0 0 14px !important; font-size:18px !important; color:#fff !important } .emt-checkout .emt-co-payment{ margin-top:0 } .emt-checkout .emt-co-payment > h3{ margin:0 0 16px !important; font-size:17px !important; color:#fff !important } /* Apilar facturación y envío en la columna izquierda */ .emt-checkout #customer_details.col2-set, .emt-checkout .col2-set{ display:block !important; width:auto !important } .emt-checkout #customer_details .col-1, .emt-checkout #customer_details .col-2{ width:auto !important; float:none !important; max-width:none !important; padding:0 !important; margin:0 0 22px !important } /* Títulos */ .emt-checkout h3, .emt-checkout #order_review_heading, .emt-checkout .woocommerce-billing-fields h3, .emt-checkout .woocommerce-shipping-fields h3{ color:#fff !important; font-weight:700 !important; font-size:18px !important; margin:0 0 14px !important; } /* Campos */ .emt-checkout .form-row{ margin:0 0 14px !important; padding:0 !important } .emt-checkout .form-row label{ color:#e4e7ed !important; font-size:13px !important; font-weight:700 !important; display:block; margin-bottom:6px } .emt-checkout .form-row .required{ color:#e0483c !important; border:none } .emt-checkout .woocommerce-input-wrapper{ width:100% } .emt-checkout input.input-text, .emt-checkout textarea, .emt-checkout select, .emt-checkout .select2-container .select2-selection--single{ width:100% !important; background-color:#121218 !important; border:1px solid #363642 !important; color:#f4f4f6 !important; border-radius:10px !important; min-height:48px !important; height:48px !important; padding:10px 13px !important; font:inherit !important; line-height:26px !important; } .emt-checkout textarea{ height:auto !important; min-height:90px !important } .emt-checkout input.input-text:focus, .emt-checkout textarea:focus{ outline:none; border-color:#d82f13 !important; box-shadow:0 0 0 3px rgba(216,47,19,.22) } /* El texto del país centrado verticalmente en la caja (flex, infalible) */ .emt-checkout .select2-container--default .select2-selection--single{ display:flex !important; align-items:center !important; padding-top:0 !important; padding-bottom:0 !important } .emt-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{ color:#f4f4f6 !important; line-height:normal !important; padding-left:0 !important; padding-right:44px !important; flex:1 1 auto } .emt-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{ height:100% !important } .emt-checkout .woocommerce-input-wrapper .description{ color:#c2c6d0 } /* Resumen del pedido (rail estilo Shopify, fondo distinto de la columna izquierda) */ .emt-checkout #order_review{ background:#17171f; border:1px solid #262631; border-radius:18px; padding:26px 26px 24px; box-shadow:0 10px 30px rgba(0,0,0,.28) } .emt-checkout .woocommerce-checkout-review-order-table{ width:100%; border:none !important; margin:0 } .emt-checkout .woocommerce-checkout-review-order-table th, .emt-checkout .woocommerce-checkout-review-order-table td{ border:none !important; padding:10px 0 !important; color:#ecedf1 !important; background:transparent !important; font-size:14px } .emt-checkout .woocommerce-checkout-review-order-table thead{ display:none !important } .emt-checkout .woocommerce-checkout-review-order-table .cart_item td{ border-top:1px solid #1d1d26 !important } .emt-checkout .woocommerce-checkout-review-order-table .product-name{ color:#fff !important; font-weight:700 } .emt-checkout .woocommerce-checkout-review-order-table .product-total{ text-align:right; font-weight:700; color:#fff !important; white-space:nowrap } .emt-checkout .woocommerce-checkout-review-order-table tfoot th{ color:#cbcfd7 !important; font-weight:600; text-align:left; border-top:1px solid #232330 !important } .emt-checkout .woocommerce-checkout-review-order-table tfoot td{ text-align:right; font-weight:700; color:#fff !important; border-top:1px solid #232330 !important } .emt-checkout .woocommerce-checkout-review-order-table tfoot .order-total th{ color:#fff !important; font-size:15px } .emt-checkout .woocommerce-checkout-review-order-table tfoot .order-total td{ font-size:20px } /* Pasarelas de pago */ .emt-checkout #payment{ background:transparent !important; border-radius:0 !important; margin-top:8px } .emt-checkout #payment ul.wc_payment_methods{ border:none !important; padding:0 !important; margin:0 0 8px !important } .emt-checkout #payment ul.wc_payment_methods li{ background:#101014 !important; border:1px solid #363642 !important; border-radius:12px !important; margin:0 0 10px !important; padding:14px 16px !important; list-style:none !important; } .emt-checkout #payment ul.wc_payment_methods li label{ color:#fff !important; font-weight:700 !important; display:inline-block; margin:0 } .emt-checkout #payment input[type="radio"]{ accent-color:#d82f13; width:17px; height:17px; margin-right:8px } .emt-checkout #payment .payment_box{ background:#16161d !important; border:1px solid #363642 !important; border-radius:10px !important; color:#c9ccd3 !important; margin-top:12px !important; padding:14px !important; } .emt-checkout #payment .payment_box::before{ display:none !important } /* Cada opción de pago: título a la izquierda, logos de marca a la derecha */ .emt-checkout #payment ul.wc_payment_methods li{ display:flex !important; flex-wrap:wrap; align-items:center } .emt-checkout #payment ul.wc_payment_methods li > input[type="radio"]{ flex:none } .emt-checkout #payment ul.wc_payment_methods li label{ display:flex !important; align-items:center; gap:10px; flex:1 1 auto; min-width:0; margin:0 } .emt-checkout #payment ul.wc_payment_methods li .payment_box{ flex-basis:100%; order:9 } .emt-checkout #payment .emt-pay-logos{ margin-left:auto; display:inline-flex; align-items:center; gap:6px } .emt-checkout #payment .emt-pay-logos .emt-pl{ width:40px; height:26px; display:block; border-radius:4px } .emt-checkout #payment ul.wc_payment_methods li label img{ height:26px !important; width:auto !important; margin:0 0 0 auto !important; padding:0 !important; display:inline-block; max-width:none !important; box-shadow:none !important; border:none !important } /* Botón realizar pedido */ .emt-checkout #place_order, .emt-checkout #payment #place_order{ display:block !important; width:100% !important; background:#fff52a !important; color:#d82f13 !important; border:none !important; border-radius:30px !important; padding:17px !important; margin-top:10px !important; font-size:16.5px !important; font-weight:700 !important; font-style:italic !important; font-family:'GothamEMT','Gotham2','Gotham',sans-serif !important; cursor:pointer; float:none !important; transition:transform .16s, box-shadow .16s; } .emt-checkout #place_order:hover{ transform:scale(1.02); box-shadow:0 8px 26px rgba(255,245,42,.36) } .emt-checkout .woocommerce-terms-and-conditions-wrapper{ color:#c2c6d0; font-size:12.5px; margin-bottom:10px } /* Avisos / cupón del checkout */ .emt-checkout .woocommerce-info, .emt-checkout .woocommerce-message{ background:#1d1d26 !important; border:1px solid #232330; border-left:3px solid #d82f13; color:#ecedf1 !important; border-radius:10px; padding:14px 16px !important; } .emt-checkout .woocommerce-info::before, .emt-checkout .woocommerce-message::before{ display:none !important } .emt-checkout .woocommerce-form-coupon-toggle .woocommerce-info a{ color:#fff52a !important } @media(max-width:959px){ .emt-checkout-title{ font-size:24px; padding:18px 16px 8px 0 } .emt-checkout .woocommerce{ padding:8px 16px 48px } .emt-checkout #order_review{ margin-top:22px } } /* Checkout moderno: login discreto, descuento en resumen, miniaturas */ .emt-checkout .emt-co-login{ margin:0; padding:0; color:#c2c6d0; font-size:13px; white-space:nowrap; } .emt-checkout .emt-co-login a{ color:#fff52a; font-weight:700; font-style:italic; text-decoration:none } .emt-checkout .emt-co-login a:hover{ text-decoration:underline } .emt-co-discount{ display:flex; gap:10px; margin:0 0 18px } .emt-co-discount #emt_coupon_code{ flex:1; min-width:0; height:46px; background:#121218; border:1px solid #232330; color:#f4f4f6; border-radius:10px; padding:0 14px; font:inherit; } .emt-co-discount #emt_coupon_code:focus{ outline:none; border-color:#d82f13; box-shadow:0 0 0 3px rgba(216,47,19,.22) } .emt-co-discount #emt_coupon_btn{ height:46px; background:#1d1d26; color:#fff; border:1px solid #34343f; border-radius:23px; padding:0 22px; font-weight:700; font-style:italic; font-family:'GothamEMT','Gotham2','Gotham',sans-serif; cursor:pointer; white-space:nowrap; } .emt-co-discount #emt_coupon_btn:hover{ border-color:#54545f } .emt-co-discount #emt_coupon_btn[disabled]{ opacity:.5; cursor:default } .emt-checkout .emt-co-item{ display:flex; align-items:center; gap:12px } .emt-checkout .emt-co-thumb img{ width:50px; height:50px; object-fit:cover; border-radius:8px; display:block; margin:0 } .emt-checkout .emt-co-nm{ font-weight:700; color:#fff } .emt-checkout .woocommerce-checkout-review-order-table .cart_item td{ padding:14px 0 !important } .emt-checkout .woocommerce-checkout-review-order-table .product-name{ font-weight:700 } /* Cupón aplicado (fila de descuento) */ .emt-checkout .cart-discount td, .emt-checkout .cart-discount th{ color:#3ecb8c !important } .emt-checkout .cart-discount .woocommerce-remove-coupon{ color:#7b7f89 !important; font-size:12px; margin-left:6px } /* Checkout estilo Shopify: columna izquierda PLANA (secciones separadas por líneas, sin cajas) */ .emt-checkout .emt-co-section{ background:transparent; border:none; border-radius:0; padding:0 0 26px; margin:0 0 26px; border-bottom:1px solid #34343f; } .emt-checkout .emt-co-main > .emt-co-section:last-child, .emt-checkout .emt-co-payment{ border-bottom:none; padding-bottom:0; margin-bottom:0 } /* La línea antes de "Método de pago" la aporta la sección anterior (Info adicional o los bumps) */ .emt-checkout .emt-co-payment{ padding-top:0 } .emt-checkout .emt-co-section > h3, .emt-checkout .emt-co-head > h3{ font-size:19px !important; color:#fff !important; font-weight:700 !important } .emt-checkout .emt-co-section > h3{ margin:0 0 15px !important } .emt-checkout .emt-co-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 15px } .emt-checkout .emt-co-head > h3{ margin:0 !important } .emt-checkout .emt-co-acc-note{ color:#c2c6d0; font-size:13px; margin:-6px 0 14px } .emt-checkout .woocommerce-account-fields__field-wrapper .form-row{ width:auto !important; float:none !important; max-width:none !important } .emt-checkout .create-account{ margin:0 0 12px } .emt-checkout .emt-co-section .woocommerce-billing-fields__field-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px } .emt-checkout .emt-co-section .woocommerce-billing-fields__field-wrapper > .form-row{ float:none; width:auto } .emt-checkout .emt-co-section .emt-col-full{ grid-column:1 / -1 } .emt-checkout .emt-co-section .emt-col-half{ grid-column:span 1 } @media(max-width:520px){ .emt-checkout .emt-co-section .woocommerce-billing-fields__field-wrapper{ grid-template-columns:1fr } .emt-checkout .emt-co-section .emt-col-half{ grid-column:1 / -1 } } /* La sección de envío (si aparece) con el mismo look */ .emt-checkout .woocommerce-shipping-fields{ background:#16161d; border:1px solid #232330; border-radius:16px; padding:22px 22px 8px; margin:0 0 20px } .emt-checkout .woocommerce-shipping-fields > h3, .emt-checkout .woocommerce-additional-fields > h3{ font-size:17px !important; color:#fff !important } .emt-checkout .woocommerce-additional-fields{ background:transparent; border:none; border-bottom:1px solid #34343f; border-radius:0; padding:0 0 26px; margin:0 0 26px } /* Con productos digitales "Información adicional" se oculta, pero WooCommerce deja el div contenedor vacío. Sin campos dentro, quitamos su separador y espaciado para no dejar dos líneas con un hueco vacío antes de "Método de pago". */ .emt-checkout .woocommerce-additional-fields:not(:has(.woocommerce-additional-fields__field-wrapper)){ border:none !important; padding:0 !important; margin:0 !important } /* Código de afiliado en el checkout */ .emt-co-affiliate{ margin-top:2px } .emt-co-affiliate-msg{ font-size:12.5px; margin:-8px 0 14px; min-height:1px; font-weight:700 } .emt-co-affiliate-msg.is-ok{ color:#3ecb8c } .emt-co-affiliate-msg.is-err{ color:#e24b4a } /* ---- Checkout: correcciones ---- */ /* Colapsable "Añadir código" con descuento y afiliado (mismo estilo) */ .emt-co-codes{ margin:0 0 18px; border:1px solid #232330; border-radius:12px; background:#101014; overflow:hidden } .emt-co-codes > summary{ cursor:pointer; padding:14px 16px; font-weight:700; font-size:14px; color:#fff; list-style:none; display:flex; align-items:center; gap:9px } .emt-co-codes > summary::-webkit-details-marker{ display:none } .emt-co-codes > summary::before{ content:"+"; color:#fff52a; font-size:19px; font-weight:400; line-height:1 } .emt-co-codes[open] > summary::before{ content:"\2013" } .emt-co-code-row{ display:flex; gap:10px; padding:0 16px 14px } .emt-co-code-input{ flex:1; min-width:0; height:44px !important; background:#121218 !important; border:1px solid #232330 !important; color:#f4f4f6 !important; border-radius:10px !important; padding:0 14px !important; font:inherit !important; } .emt-co-code-input:focus{ outline:none; border-color:#d82f13 !important; box-shadow:0 0 0 3px rgba(216,47,19,.22) !important } .emt-co-code-btn{ height:44px; background:#1d1d26 !important; color:#fff !important; border:1px solid #34343f !important; border-radius:22px !important; padding:0 20px !important; font-weight:700 !important; font-style:italic !important; font-family:'GothamEMT','Gotham2','Gotham',sans-serif !important; cursor:pointer; white-space:nowrap; } .emt-co-code-btn:hover{ border-color:#54545f !important } .emt-co-code-btn[disabled]{ opacity:.5; cursor:default } .emt-co-affiliate-msg{ padding:0 16px 14px; margin:-6px 0 0; font-size:12.5px; font-weight:700 } .emt-co-affiliate-msg.is-ok{ color:#3ecb8c } .emt-co-affiliate-msg.is-err{ color:#e24b4a } /* Miniatura + controles de cantidad (stepper discreto) y × para quitar */ .emt-checkout .emt-co-item{ align-items:flex-start } .emt-checkout .emt-co-thumb{ display:inline-block; flex:none } .emt-checkout .emt-co-nm{ display:flex; flex-direction:column; gap:7px; align-items:flex-start } .emt-co-controls{ display:flex; align-items:center; gap:10px } .emt-co-controls.is-loading{ opacity:.45; pointer-events:none } /* Stepper: pastilla blanca con texto oscuro */ .emt-co-stepper{ display:inline-flex; align-items:stretch; border:none !important; border-radius:15px; background:#fff; overflow:hidden } .emt-co-step{ width:27px; height:28px; background:#fff !important; border:none !important; color:#16161d !important; font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; margin:0; } .emt-co-step:hover{ background:#e9e9ef !important; color:#16161d !important } .emt-co-count{ min-width:22px; padding:0 2px; text-align:center; color:#16161d; background:#fff; font-weight:700; font-size:12.5px; display:flex; align-items:center; justify-content:center } /* × para quitar: sin bordes ni fondo, centrada H y V */ .emt-co-del{ width:22px; height:22px; padding:0; border:none !important; border-radius:50%; background:transparent !important; color:#e0483c !important; font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; } .emt-co-del:hover{ color:#ff5a4d !important; background:transparent !important } /* Nombre/apellidos (y demás): que llenen su celda (WooCommerce impone width:47%/float) */ .emt-checkout .emt-co-section .form-row{ width:auto !important; float:none !important; max-width:none !important } /* Flecha blanca en los desplegables: select nativo (país/estado antes de que cargue select2) y select2 */ .emt-checkout select{ -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f6' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 14px center !important; padding-right:40px !important; } /* select2 (país): ocultamos el triángulo nativo y pintamos nuestro propio chevron blanco */ .emt-checkout .select2-container--default .select2-selection--single{ background-color:#121218 !important } .emt-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{ width:42px !important; height:100% !important; top:0 !important; right:2px !important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f6' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center !important; } .emt-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b{ display:none !important } /* La sección de envío vacía no debe verse como una tarjeta */ .emt-checkout .woocommerce-shipping-fields{ background:transparent !important; border:none !important; padding:0 !important; margin:0 !important } .emt-checkout .col-2:empty{ display:none !important } /* Order bumps: "Añade también" */ .emt-bumps-grid{ display:grid; gap:12px } .emt-bump{ display:flex; align-items:center; gap:13px; background:#101014; border:1px solid #34343f; border-radius:12px; padding:12px 14px } .emt-bump.is-added{ opacity:.55 } .emt-bump-thumb{ display:block; flex:none; line-height:0 } .emt-bump-thumb img{ width:48px; height:48px; object-fit:cover; border-radius:9px; display:block; margin:0 } .emt-bump-info{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; gap:2px } .emt-bump-name{ color:#fff !important; font-weight:700; font-size:14px; line-height:1.25; text-decoration:none } .emt-bump-name:hover{ text-decoration:underline; color:#fff !important } .emt-bump-price{ color:#c2c6d0; font-size:13px; font-weight:700 } .emt-bump-price .amount{ color:#c2c6d0 } .emt-bump-add{ margin-left:auto; flex:none; background:#fff52a !important; color:#d82f13 !important; border:none !important; border-radius:22px !important; padding:9px 18px !important; font-size:13.5px !important; font-weight:700 !important; font-style:italic !important; font-family:'GothamEMT','Gotham2','Gotham',sans-serif !important; cursor:pointer; white-space:nowrap; transition:transform .15s; } .emt-bump-add:hover{ transform:scale(1.04) } .emt-bump-add[disabled]{ opacity:.75; cursor:default; transform:none } /* Fix: iconos SVG decorativos (divisores anchos) no deben desbordar su contenedor */ .elementor-icon svg{max-width:100%;height:auto} /* ========================================================================== Pedido recibido (order-received / thankyou) — estilo Shopify, marca Fortnite ========================================================================== */ .emt-ty{ --emt-bg:#0e0e12; --emt-panel:#16161d; --emt-line:#232330; --emt-line2:#34343f; --emt-text:#f3f3f7; --emt-muted:#a2a2b0; --emt-faint:#71717f; --emt-ok:#37d17a; --emt-yellow:#fff52a; max-width:940px; margin:0 auto; padding:34px 20px 72px; box-sizing:border-box; font-family:'GothamEMT','Gotham2','Gotham',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--emt-text); line-height:1.55; } .emt-ty *{box-sizing:border-box} /* Cabecera */ .emt-ty-head{ text-align:center; margin:0 0 30px } .emt-ty-badge{ width:66px; height:66px; margin:0 auto 16px; border-radius:50%; background:radial-gradient(circle at 30% 25%, #4be894, #1f9d5c); display:flex; align-items:center; justify-content:center; color:#062012; box-shadow:0 10px 30px rgba(55,209,122,.35), 0 0 0 6px rgba(55,209,122,.10); animation:emt-ty-pop .45s cubic-bezier(.2,.9,.3,1.3) both; } .emt-ty-badge svg{ width:34px; height:34px } .emt-ty-badge-info{ background:radial-gradient(circle at 30% 25%, #6aa8ff, #2f5cc0); color:#04122e; box-shadow:0 10px 30px rgba(80,120,255,.3) } .emt-ty-badge-err{ background:radial-gradient(circle at 30% 25%, #ff7a6a, #c53321); color:#2b0a05; font-size:34px; font-weight:700; box-shadow:0 10px 30px rgba(216,47,19,.35) } @keyframes emt-ty-pop{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } } .emt-ty-order-tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--emt-ok); background:rgba(55,209,122,.10); border:1px solid rgba(55,209,122,.30); padding:5px 13px; border-radius:20px; margin:0 0 12px; } .emt-ty-head h1{ margin:0 0 8px; font-size:32px; font-weight:700; color:#fff; line-height:1.15 } .emt-ty-sub{ margin:0 auto; max-width:560px; color:var(--emt-muted); font-size:15px } .emt-ty-sub strong{ color:#fff } /* Rejilla resumen + lateral */ .emt-ty-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:18px; align-items:start } .emt-ty-aside{ display:grid; gap:18px } .emt-ty-card{ background:var(--emt-panel); border:1px solid var(--emt-line); border-radius:16px; padding:22px } .emt-ty-card-tit{ margin:0 0 16px; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--emt-faint) } /* Artículos */ .emt-ty-items{ display:grid; gap:14px } .emt-ty-item{ display:flex; align-items:center; gap:13px } .emt-ty-thumb{ position:relative; flex:none; width:54px; height:54px } .emt-ty-thumb img{ width:54px !important; height:54px !important; object-fit:cover; border-radius:10px; display:block; margin:0; border:1px solid var(--emt-line2) } .emt-ty-qty{ position:absolute; top:-8px; right:-8px; min-width:21px; height:21px; padding:0 5px; border-radius:11px; background:#2a2a35; border:1px solid #45454f; color:#fff; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; } .emt-ty-item-nm{ flex:1 1 auto; min-width:0; font-weight:700; color:#fff; font-size:14.5px; line-height:1.3 } .emt-ty-item-pr{ flex:none; color:var(--emt-text); font-weight:700; font-size:14px; white-space:nowrap } .emt-ty-item-pr .amount{ color:var(--emt-text) } /* Totales */ .emt-ty-totals{ margin-top:18px; padding-top:16px; border-top:1px solid var(--emt-line2); display:grid; gap:9px } .emt-ty-trow{ display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--emt-muted) } .emt-ty-trow span:last-child{ color:var(--emt-text); font-weight:700 } .emt-ty-trow.is-total{ margin-top:5px; padding-top:12px; border-top:1px solid var(--emt-line2); font-size:18px } .emt-ty-trow.is-total span{ color:#fff !important; font-weight:700 } .emt-ty-trow .cart-discount span:last-child, .emt-ty-trow.woocommerce-order-overview__discount span:last-child{ color:var(--emt-ok) } /* Datos del pedido */ .emt-ty-meta{ margin:0; display:grid; gap:11px } .emt-ty-meta > div{ display:flex; justify-content:space-between; gap:12px; align-items:baseline } .emt-ty-meta dt{ margin:0; color:var(--emt-muted); font-size:13.5px } .emt-ty-meta dd{ margin:0; color:#fff; font-weight:700; font-size:13.5px; text-align:right; word-break:break-word } /* Pasos siguientes */ .emt-ty-next .emt-ty-step{ display:flex; gap:13px; padding:16px 0; border-top:1px solid var(--emt-line) } .emt-ty-next .emt-ty-step:first-of-type{ padding-top:2px; border-top:none } .emt-ty-step-ic{ flex:none; width:38px; height:38px; border-radius:11px; background:#101014; border:1px solid var(--emt-line2); display:flex; align-items:center; justify-content:center; font-size:18px; } .emt-ty-step-body{ min-width:0 } .emt-ty-step-body h3{ margin:0 0 4px; font-size:15px; font-weight:700; color:#fff } .emt-ty-step-body p{ margin:0; color:var(--emt-muted); font-size:13.5px } .emt-ty-step-btn{ margin-top:12px; padding:11px 20px; font-size:14px } /* CTA / pie */ .emt-ty-cta{ text-align:center; margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:14px } .emt-ty-foot{ display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-top:28px } .emt-ty-link{ color:var(--emt-muted); font-size:13.5px; text-decoration:none } .emt-ty-link:hover{ color:#fff52a } @media(max-width:820px){ .emt-ty-grid{ grid-template-columns:1fr } .emt-ty-head h1{ font-size:27px } .emt-ty{ padding:26px 16px 60px } } /* ========================================================================== Recomendaciones reutilizables (.emt-recs) — "También te puede interesar". Tarjetas estilo producto + swipe + dots + auto-swipe. JS en recs.js. Usado en: ficha de producto, sorteo ([emt_productos]) y Mi cuenta. ========================================================================== */ .emt-recs{ max-width:1180px; margin:0 auto; min-width:0; font-family:'GothamEMT','Gotham2','Gotham',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } .emt-recs-title{ margin:0 0 16px; font-size:22px; font-weight:700; color:#fff; text-align:center; } .emt-recs-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:6px 2px 10px; min-width:0; } .emt-recs-track::-webkit-scrollbar{ display:none; } .emt-rec-card{ flex:0 0 calc((100% - 48px)/4); scroll-snap-align:start; background:#16161d; border:1px solid #232330; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; transition:transform .14s, border-color .14s, box-shadow .14s; } .emt-rec-card:hover{ transform:translateY(-4px); border-color:#3a3a48; box-shadow:0 14px 30px rgba(0,0,0,.35); } .emt-rec-img{ aspect-ratio:1/1; background:#0e0e12; overflow:hidden; display:flex; align-items:center; justify-content:center; } .emt-rec-img img{ width:100%; height:100%; object-fit:cover; display:block; } .emt-rec-body{ padding:15px 16px 17px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; } .emt-rec-title{ margin:0; font-weight:700; font-size:15px; line-height:1.3; color:#fff; } .emt-rec-sub{ margin:0; color:#a0a4ae; font-size:12.5px; line-height:1.45; flex:1; } .emt-rec-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; flex-wrap:wrap; } .emt-rec-price{ color:#fff; font-weight:700; font-size:16px; white-space:nowrap; } .emt-rec-price .amount{ color:#fff; } .emt-rec-price del{ color:#71717f; font-weight:400; margin-right:6px; } .emt-rec-price del .amount{ color:#71717f; } .emt-rec-price ins{ text-decoration:none; } .emt-rec-btn{ background:#fff52a; color:#d82f13; font-weight:700; font-style:italic; font-size:13.5px; border-radius:30px; padding:8px 18px; white-space:nowrap; transition:transform .14s; } .emt-rec-card:hover .emt-rec-btn{ transform:scale(1.05); } .emt-recs-dots{ display:flex; justify-content:center; gap:8px; margin-top:14px; } .emt-recs-dots button{ width:8px; height:8px; padding:0; border:none; border-radius:50%; background:#34343f; cursor:pointer; transition:background .15s, transform .15s; } .emt-recs-dots button.is-active{ background:#fff52a; transform:scale(1.3); } @media(max-width:900px){ .emt-rec-card{ flex-basis:calc((100% - 32px)/3); } } @media(max-width:680px){ .emt-rec-card{ flex-basis:calc((100% - 16px)/2); } } /* Medidor de fuerza de contrasena en el CHECKOUT (crear cuenta): pildora clara + texto oscuro */ .emt-checkout .woocommerce-password-strength{ color:#1e1e1e !important; background:#ececed; border:1px solid #d5d5dd; padding:6px 10px; border-radius:8px; font-size:12px; font-weight:700; display:block; margin-top:8px } .emt-checkout .woocommerce-password-hint{ color:#c7c7d0 !important; font-size:12px; display:block; margin-top:6px } /* Fix scroll horizontal: no forzar ancho en el