*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* overflow-x: 'clip' en vez de 'hidden'. 'hidden' convierte el elemento raíz en un contenedor de scroll, y en iOS Safari eso hace que los elementos con position:fixed se posicionen y se recorten respecto a él en lugar de respecto a la pantalla — por eso la cabecera no llegaba hasta arriba y dejaba ver la página bajo la hora y la batería. 'clip' recorta igual pero sin crear contenedor de scroll. Se deja 'hidden' delante como respaldo: los navegadores que no entienden 'clip' se quedan con la primera declaración. */ html, body { background: var(--ivory); color: var(--ink); font-family: var(--font-sans-body); min-height: 100vh; overflow-x: hidden; overflow-x: clip; } /* En horizontal, el notch se pone a un lado y con viewport-fit=cover el contenido se le mete debajo: se cortan textos y botones por el borde. La cabecera ya se aparta sola (lleva sus propios env() a izquierda y derecha), pero el resto de la página usa 24px fijos en decenas de reglas. En vez de tocarlas todas, se aparta el entero. Solo en horizontal: en vertical el notch está arriba, esto valdría 0 y además dejaría franjas laterales en las secciones de fondo oscuro. Los elementos position:fixed (lupa de imagen, carrito, menú) no se mueven, porque se posicionan respecto a la pantalla y no respecto al . */ @media (orientation: landscape) { body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } } /* Las secciones de fondo oscuro vuelven a sangrar hasta el borde: si no, aparecería una franja marfil justo donde está el notch, como si la sección llevara marco. Se les devuelve el hueco como relleno, así el texto sigue apartado. El !important es por #contacto-ft, que trae el padding en un style= dentro del HTML de cada página. Limitado a menos de 1200px: por encima de esa anchura estas secciones se centran con 'margin: 0 auto' y pisar el margen las descolocaría. En un móvil en horizontal nunca se llega a 1200px. */ @media (orientation: landscape) and (max-width: 1199px) { #contacto, #contacto-ft { margin-left: calc(-1 * env(safe-area-inset-left, 0px)); margin-right: calc(-1 * env(safe-area-inset-right, 0px)); padding-left: calc(24px + env(safe-area-inset-left, 0px)) !important; padding-right: calc(24px + env(safe-area-inset-right, 0px)) !important; } } h1, h2, h3 { font-family: var(--font-serif-display); font-weight: 400; } a { color: var(--gold-dark); } a:hover { color: var(--gold); } .reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 0.9s var(--ease-standard), transform 0.9s var(--ease-standard), filter 0.9s var(--ease-standard); } .reveal.in-view { opacity: 1; transform: translateY(0); filter: blur(0); } /* ===== SITE HEADER ===== */ /* En iPhone (y cualquier móvil con notch) la web ocupa ahora toda la pantalla gracias a viewport-fit=cover en el . La cabecera se estira por detrás de la barra de estado y se le suma ese alto al relleno, para que el logo y el botón no queden bajo la hora ni la batería. En pantallas sin notch, env() vale 0 y todo queda exactamente igual que antes. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: calc(168px + env(safe-area-inset-top, 0px)); display: flex; align-items: flex-start; justify-content: space-between; padding: calc(22px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) 22px calc(24px + env(safe-area-inset-left, 0px)); pointer-events: none; } /* El fondo (degradado + desenfoque + difuminado del borde inferior) va en una capa aparte y NO en la cabecera. Motivo: WebKit sitúa la máscara desde el padding-box, no desde el borde. Al sumarle al padding-top la altura del notch, la máscara se desplazaba con él y dejaba una franja sin tratar justo bajo la hora y la batería — la costura que se veía en iPhone. Con inset:0 y sin padding, la capa cubre siempre la cabecera entera, y mask-origin/size/repeat se declaran explícitos para no depender de los valores por defecto de cada navegador. */ .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; /* La franja del notch va opaca: así la barra de estado se apoya en un fondo limpio y se funde con la cabecera en vez de dejar ver la foto de detrás. */ background: linear-gradient(to bottom, var(--ivory) 0, var(--ivory) env(safe-area-inset-top, 0px), rgba(245,241,234,0.78) env(safe-area-inset-top, 0px), rgba(245,241,234,0.4) 55%, rgba(245,241,234,0) 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 96%); mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 96%); -webkit-mask-origin: border-box; mask-origin: border-box; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .site-header > * { pointer-events: auto; } @media (min-width: 768px) { .site-header { padding: calc(28px + env(safe-area-inset-top, 0px)) calc(48px + env(safe-area-inset-right, 0px)) 28px calc(48px + env(safe-area-inset-left, 0px)); } } .logo { font-family: var(--font-serif-display); font-size: 20px; text-decoration: none; color: var(--ink); } .site-nav { display: none; gap: 40px; position: absolute; left: 50%; top: 32px; transform: translateX(-50%); } @media (min-width: 900px) { .site-nav { display: flex; } } .site-nav a { color: var(--ink); font-size: 14px; letter-spacing: 0.04em; text-decoration: none; position: relative; padding-bottom: 4px; } .site-nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--gold-dark); transition: width 0.35s var(--ease-standard); } .site-nav a:hover { color: var(--gold-dark); } .site-nav a:hover::after, .site-nav a.active::after { width: 100%; } .site-nav a.active { color: var(--gold-dark); } .burger-btn { width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; background: var(--ivory); box-shadow: var(--shadow-sm); flex-shrink: 0; } .burger-btn .bar { width: 20px; height: 1.5px; background: var(--ink); transition: transform 0.3s ease; } .burger-btn.open .bar:first-child { transform: rotate(45deg) translate(2px, 2px); } .burger-btn.open .bar:last-child { transform: rotate(-45deg) translate(2px, -2px); } /* Con el menú abierto la cabecera sube POR ENCIMA del panel: si no, el panel (z-index 31) tapaba el propio botón y el aspa no se podía pulsar. Se le quita el fondo difuminado para no ensuciar el panel oscuro, y el logo pasa a claro para que siga leyéndose sobre él. */ .site-header.menu-abierto { z-index: 32; } /* El fondo vive ahora en ::before, así que es esa capa la que se oculta. */ .site-header.menu-abierto::before { display: none; } .site-header.menu-abierto .logo { color: var(--ivory); } /* Capa que cubre la página con el menú abierto. Existe para que tocar fuera siempre tenga algo que recibir el toque: sin ella, el clic podía caer en el lienzo 3D, que captura el puntero y hace que el navegador no llegue a emitir ningún evento 'click'. Va por debajo del panel (31) y de la cabecera (32). */ .menu-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; z-index: 30; background: rgba(28, 22, 16, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease-standard); } .menu-backdrop.open { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .menu-backdrop { transition: none; } } .menu-panel { position: fixed; z-index: 31; left: 8px; right: 8px; top: -600px; opacity: 0; pointer-events: none; border-radius: var(--radius-lg); background: var(--ink); padding: 100px 32px 32px; display: flex; flex-direction: column; justify-content: space-between; transition: top 0.5s var(--ease-standard), opacity 0.4s ease; /* En pantallas bajas el menú no cabía entero: que scrolle él por dentro en vez de arrastrar la página del fondo. */ max-height: calc(100vh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; } @media (min-width: 768px) { .menu-panel { left: auto; right: 8px; width: 380px; padding: 60px; } } /* Con el menú abierto, el panel arranca por debajo de la barra de estado. */ .menu-panel.open { top: env(safe-area-inset-top, 0px); opacity: 1; pointer-events: auto; } @media (min-width: 768px) { .menu-panel.open { top: 8px; } } .menu-panel nav { display: flex; flex-direction: column; gap: 6px; } .menu-panel nav a { font-family: var(--font-serif-display); color: var(--ivory); font-size: 34px; text-decoration: none; } .menu-panel nav a:hover { opacity: 0.65; } .menu-contact { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; } .menu-email { color: var(--gold); font-size: 16px; text-decoration: none; } .menu-socials { display: flex; gap: 20px; } .menu-socials a { color: var(--text-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; } .menu-socials a:hover { color: var(--ivory); } /* ===== CTA BUTTON (shared) ===== */ .cta-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; border: none; background: none; cursor: pointer; border-radius: var(--radius-pill); padding: 6px; gap: 10px; width: fit-content; } .cta-btn-bg { position: absolute; top: 4px; bottom: 4px; left: 6px; width: calc(100% - 6px - 6px - 44px - 10px); border-radius: var(--radius-pill); background: var(--ink); z-index: 0; transition: width 0.4s var(--ease-standard); } .cta-btn:hover .cta-btn-bg { width: calc(100% - 12px); } .cta-btn-text { position: relative; z-index: 1; color: var(--ivory); font-weight: 500; font-size: 15px; padding: 12px 28px; white-space: nowrap; } /* En móvil, un texto largo (p. ej. "Solicitar presupuesto personalizado") hacía que el botón midiera más que la pantalla, porque no podía encogerse ni partir línea. Aquí sí puede. */ @media (max-width: 640px) { .cta-btn { max-width: 100%; } .cta-btn-text { white-space: normal; padding: 12px 18px; font-size: 14px; } } .cta-btn-circle { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); flex-shrink: 0; transition: transform 0.4s var(--ease-standard); } .cta-btn:hover .cta-btn-circle { transform: translateX(-6px); } .cta-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-size: 14px; white-space: nowrap; transition: border-color 0.35s var(--ease-standard), color 0.35s var(--ease-standard), background 0.35s var(--ease-standard); } .cta-secondary:hover { border-color: var(--gold-dark); color: var(--gold-dark); background: var(--accent-soft); } /* ===== CART ===== */ .cart-btn { position: relative; width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--ivory); box-shadow: var(--shadow-sm); color: var(--ink); flex-shrink: 0; margin-right: 10px; } .cart-btn .cart-count { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--gold-dark); color: var(--ivory); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .cart-panel { position: fixed; z-index: 40; right: 8px; top: -20px; opacity: 0; pointer-events: none; width: min(400px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto; border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-lg); padding: 32px 28px; display: flex; flex-direction: column; gap: var(--space-5); transition: top 0.45s var(--ease-standard), opacity 0.35s ease; } .cart-panel.open { top: 8px; opacity: 1; pointer-events: auto; } .cart-panel h3 { font-size: 20px; } .cart-panel .cart-close { position: absolute; top: 20px; right: 24px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); } .cart-items { display: flex; flex-direction: column; gap: var(--space-4); } .cart-item { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-default); padding-bottom: var(--space-4); } .cart-item-name { font-family: var(--font-serif-display); font-size: 16px; } .cart-item-tier { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .cart-item-price { font-size: 14px; color: var(--gold-dark); white-space: nowrap; } .cart-item-remove { background: none; border: none; color: var(--text-muted); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; margin-top: 6px; } .cart-empty { font-size: 14px; color: var(--text-muted); } .cart-total { display: flex; justify-content: space-between; font-size: 16px; padding-top: var(--space-3); border-top: 1px solid var(--border-default); } .cart-total strong { color: var(--gold-dark); } .cart-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 39; background: rgba(43,43,43,0.35); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .cart-backdrop.open { opacity: 1; pointer-events: auto; } /* ===== SPEECH BUBBLES ===== */ .bubble { position: relative; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); } .bubble::after { content: ''; position: absolute; left: 36px; bottom: -9px; width: 18px; height: 18px; background: var(--surface-card); border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); transform: rotate(45deg); border-radius: 0 0 3px 0; } .bubble-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 10px; display: block; } /* ===== SECTIONS SHARED ===== */ section.block { padding: var(--space-7) 24px; max-width: 1200px; margin: 0 auto; } @media (min-width: 900px) { section.block { padding: var(--space-8) 48px; } } .block-head { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin-bottom: var(--space-6); } .block-eyebrow { font-size: 12px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--gold-dark); } .block-title { font-size: var(--text-display-md); line-height: var(--lh-tight); } .block-sub { font-size: var(--text-body-lg); line-height: var(--lh-relaxed); color: var(--text-secondary); max-width: 540px; } .block-head.centered { align-items: center; text-align: center; margin-left: auto; margin-right: auto; } /* ===== FOOTER ===== */ footer { border-top: 1px solid rgba(245,241,234,0.14); margin-top: var(--space-9); padding-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-6); } @media (min-width: 700px) { footer { flex-direction: row; justify-content: space-between; align-items: center; } } .footer-logo { font-family: var(--font-serif-display); font-size: 20px; color: var(--ivory); } .footer-links { display: flex; gap: var(--space-6); flex-wrap: wrap; } .footer-links a { color: var(--ivory); opacity: 0.75; font-size: 13px; letter-spacing: 0.04em; text-decoration: none; } .footer-links a:hover { opacity: 1; } .footer-email { color: var(--gold-light); font-size: 13px; text-decoration: none; } .footer-email:hover { opacity: 0.8; } .footer-copy { font-size: 12px; color: var(--text-muted); } .footer-legal { display: flex; gap: var(--space-5); flex-wrap: wrap; } .footer-legal a { color: var(--text-muted); opacity: 1; font-size: 12px; } .footer-legal a:hover { color: var(--ivory); } /* ===== CANTIDAD Y PRECIO ===== */ .qty-row { display: flex; align-items: center; gap: 14px; margin-top: 4px; } .tier-name { font-size: 14px; color: var(--ink); font-weight: 500; } .pd-option-row { display: flex; align-items: center; gap: 10px; } .pd-option-row label { font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; cursor: pointer; } .pd-option-row select { padding: 10px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--ivory); font-family: var(--font-sans-body); font-size: 14px; color: var(--ink); cursor: pointer; } /* ===== SELECTOR DE TAMAÑO ===== */ .size-options { display: flex; flex-direction: column; gap: 10px; } .size-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; cursor: pointer; transition: border-color 0.25s var(--ease-standard), background 0.25s var(--ease-standard); } .size-option:hover { border-color: var(--gold-dark); } .size-option.selected { border-color: var(--gold-dark); background: var(--accent-soft); } .size-option-info { display: flex; flex-direction: column; gap: 2px; } .size-option-label { font-size: 14px; color: var(--ink); font-weight: 500; } .size-option-sub { font-size: 12px; color: var(--text-muted); } .size-option-price { font-size: 13px; color: var(--gold-dark); white-space: nowrap; } /* ===== IDEAS DE GRABADO ===== */ .engrave-ideas { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .engrave-ideas-title { font-family: var(--font-serif-display); font-size: 17px; color: var(--ink); display: flex; align-items: center; gap: 8px; } .engrave-ideas-title svg { color: var(--gold-dark); } .engrave-idea { display: flex; gap: 12px; align-items: flex-start; transition: opacity 0.3s var(--ease-standard); } .engrave-idea svg { color: var(--gold-dark); flex-shrink: 0; margin-top: 2px; } .engrave-idea-text strong { color: var(--ink); font-size: 14px; } .engrave-idea-text span { display: block; font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-top: 2px; } /* ===== IDEAS DE GRABADO — sección a ancho completo ===== */ .engrave-ideas-section { background: var(--ivory-deep); } .engrave-ideas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); } .engrave-ideas-grid .engrave-idea { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); } .engrave-ideas-grid .engrave-idea svg { width: 20px; height: 20px; } /* ===== GALERÍA DE IMÁGENES POR TAMAÑO (carrusel deslizable bajo la foto principal) ===== */ .pd-photo-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; } /* ===== GALERÍA EN ÓRBITA (coverflow) ===== La foto activa va centrada y grande; las de los lados se ven detrás, giradas y a menor escala, dando sensación de profundidad. Se navega arrastrando, con las flechas o pulsando una foto lateral. */ .size-gallery { position: relative; } .size-gallery-viewport { position: relative; overflow: hidden; perspective: 1400px; perspective-origin: 50% 50%; touch-action: pan-y; cursor: grab; user-select: none; padding: 8px 0; } .size-gallery-viewport.dragging { cursor: grabbing; } .size-gallery-track { position: relative; transform-style: preserve-3d; height: 100%; } .size-gallery-slide { position: absolute; top: 0; left: 50%; width: 62%; max-width: 340px; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface-card); transform-origin: 50% 50%; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s var(--ease-standard); will-change: transform; } .size-gallery-viewport.dragging .size-gallery-slide { transition: none; } .size-gallery-slide.is-active { box-shadow: var(--shadow-lg); } .size-gallery-slide:not(.is-active) { cursor: pointer; } .size-gallery-slide image-slot { display: block; width: 100%; height: 100%; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .size-gallery-slide { transition: none; } } .size-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-default); background: rgba(245,241,234,0.9); backdrop-filter: blur(6px); cursor: pointer; font-size: 18px; color: var(--ink); display: flex; align-items: center; justify-content: center; transition: background 0.3s var(--ease-standard); } .size-gallery-arrow:hover { background: var(--ivory); } .size-gallery-arrow.prev { left: 12px; } .size-gallery-arrow.next { right: 12px; } .size-gallery-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; } .gallery-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--border-default); cursor: pointer; transition: all 0.3s var(--ease-standard); padding: 0; border: none; } .gallery-dot.active { background: var(--gold-dark); width: 20px; } .size-gallery-hint { font-size: 12px; color: var(--text-muted); } /* ===== PACKS "COMBINA Y AHORRA" ===== */ .packs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); } .pack-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); transition: transform 0.35s var(--ease-standard), box-shadow 0.35s var(--ease-standard); } .pack-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .pack-name { font-family: var(--font-serif-display); font-size: 19px; color: var(--ink); } .pack-includes { font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .pack-price-row { display: flex; align-items: baseline; gap: 10px; } .pack-price-strike { font-size: 14px; color: var(--text-muted); text-decoration: line-through; } .pack-price-final { font-size: 20px; color: var(--state-success); font-weight: 600; } .pack-savings { font-size: 12px; color: var(--state-success); } /* Es un (lleva a personalizar el pack), así que necesita display/centrado y quitar el subrayado para verse igual que el botón que era antes. */ .pack-add-btn { display: block; text-align: center; text-decoration: none; margin-top: auto; border: 1px solid var(--ink); background: var(--ink); color: var(--ivory); border-radius: var(--radius-pill); padding: 12px 20px; font-size: 13px; cursor: pointer; transition: opacity 0.3s var(--ease-standard); } .pack-add-btn:hover { opacity: 0.8; } .qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-pill); overflow: hidden; } .qty-stepper button { width: 36px; height: 36px; border: none; background: none; cursor: pointer; font-size: 16px; color: var(--ink); } /* En pantallas táctiles, área de toque mínima recomendada de 44px */ @media (pointer: coarse) { .qty-stepper button { width: 44px; height: 44px; } .qty-stepper input { width: 52px; font-size: 16px; } } .qty-stepper button:hover { background: var(--accent-soft); color: var(--gold-dark); } .qty-stepper input { width: 48px; text-align: center; border: none; background: none; font-size: 14px; color: var(--ink); } .qty-stepper input:focus { outline: none; } .price-breakdown { font-size: 13px; color: var(--text-muted); } .price-breakdown strong { color: var(--gold-dark); } /* ===== ENVÍO Y PLAZO ===== */ .info-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); background: var(--accent-soft); border-radius: var(--radius-md); padding: 12px 16px; } .info-banner svg { color: var(--gold-dark); flex-shrink: 0; } .info-banner .ship-strike { text-decoration: line-through; color: var(--text-muted); margin-right: 4px; } .info-banner .ship-free { color: var(--state-success); font-weight: 600; } /* ===== SELLOS DE PAGO SEGURO ===== */ .trust-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: var(--space-4); } .trust-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 6px 12px; } .trust-badge svg { color: var(--gold-dark); } .trust-cards { display: flex; gap: 6px; margin-top: 10px; } .trust-cards svg { color: var(--text-muted); } /* ===== ESTRELLAS ===== */ .review-stars { display: flex; gap: 2px; color: var(--gold); } .review-stars svg { width: 15px; height: 15px; } /* ===== CHECKOUT ===== */ .checkout-wrap { padding: 150px 24px 80px; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-7); } @media (min-width: 900px) { .checkout-wrap { padding: 170px 48px 90px; } } .checkout-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-7); } .checkout-empty { text-align: center; color: var(--text-secondary); padding: var(--space-8) 0; display: flex; flex-direction: column; gap: var(--space-5); align-items: center; } /* ===== CONFIRMACIÓN DE PEDIDO ===== */ .confirm-wrap { padding: 170px 24px 90px; max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); } .confirm-check { width: 64px; height: 64px; border-radius: 50%; background: var(--state-success); display: flex; align-items: center; justify-content: center; color: var(--ivory); } .confirm-number { font-family: var(--font-serif-display); font-size: 32px; color: var(--gold-dark); } .confirm-card { width: 100%; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-7); text-align: left; display: flex; flex-direction: column; gap: var(--space-4); } /* ===== BURBUJA DE BIENVENIDA ===== */ .welcome-bubble { position: fixed; z-index: 41; left: 16px; bottom: -400px; opacity: 0; width: min(320px, calc(100vw - 32px)); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); transition: bottom 0.5s var(--ease-standard), opacity 0.4s ease; } .welcome-bubble.open { bottom: 16px; opacity: 1; } .welcome-bubble-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 18px; color: var(--text-muted); cursor: pointer; } .welcome-bubble-close:hover { color: var(--ink); } .welcome-bubble-title { font-family: var(--font-serif-display); font-size: 17px; color: var(--ink); margin-bottom: 6px; padding-right: 20px; } .welcome-bubble-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; } #welcome-bubble-form { display: flex; flex-direction: column; gap: 10px; } #welcome-bubble-form input { padding: 11px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--ivory); font-family: var(--font-sans-body); font-size: 14px; color: var(--ink); } #welcome-bubble-form input:focus { outline: none; border-color: var(--gold-dark); } #welcome-bubble-form button { border: 1px solid var(--ink); background: var(--ink); color: var(--ivory); border-radius: var(--radius-pill); padding: 11px 18px; font-size: 13px; cursor: pointer; transition: opacity 0.3s var(--ease-standard); } #welcome-bubble-form button:hover { opacity: 0.8; } /* ===== CUENTA (login / registro) ===== */ .account-wrap { padding: 150px 24px 90px; max-width: 460px; margin: 0 auto; } @media (min-width: 900px) { .account-wrap { padding: 170px 48px 100px; } } .account-tabs { display: flex; gap: 10px; margin-bottom: var(--space-6); } .account-tabs button { flex: 1; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px; background: none; cursor: pointer; font-size: 14px; color: var(--ink); transition: border-color 0.25s var(--ease-standard), background 0.25s var(--ease-standard); } .account-tabs button.selected { border-color: var(--gold-dark); background: var(--accent-soft); color: var(--gold-dark); } .account-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-7); } .account-form { display: flex; flex-direction: column; gap: var(--space-5); } .account-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; } .account-row label { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); cursor: pointer; } .account-note { font-size: 12px; color: var(--text-muted); margin-top: var(--space-4); text-align: center; } /* ===== LEGAL ===== */ .legal-wrap { padding: 150px 24px 90px; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); } @media (min-width: 900px) { .legal-wrap { padding: 170px 48px 100px; } } .legal-wrap h1 { font-size: var(--text-display-md); } .legal-wrap h2 { font-size: 19px; margin-top: var(--space-5); } .legal-wrap p, .legal-wrap li { font-size: 15px; line-height: var(--lh-relaxed); color: var(--text-secondary); } .legal-wrap ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; } .legal-updated { font-size: 13px; color: var(--text-muted); font-style: italic; } /* ===== PRODUCTO AGOTADO ===== */ /* Etiqueta y foto atenuadas cuando no hay stock. */ .product-badge.agotado { border-color: var(--text-muted); color: var(--text-muted); } .product-card:has(.product-badge.agotado) .product-photo { opacity: 0.55; } /* ===== SELECTOR VISUAL DE TIPOGRAFÍA (js/selector-tipografia.js) ===== Cada nombre se muestra escrito con su propia letra. Sustituye al