/*
Theme Name: Teresa Espinosa Art
Theme URI: https://teresaespinosa.art
Author: Teresa Espinosa
Author URI: https://teresaespinosa.art
Description: Minimalist fine art portfolio theme for Teresa Espinosa. Features semantic HTML, clean responsive CSS, and Elementor compatibility.
Version: 1.0.5
Text Domain: teresa-art-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   CSS Variables (Design Tokens)
   ========================================================================== */
:root {
    /* Tipografías */
    --font-serif: "Playfair Display", serif;
    --font-sans: "Montserrat", sans-serif;

    /* Paleta de Colores */
    --color-gris-titulos: #808080;
    --color-gris: #6a6a6a;
    --color-charcoal: #2D2D2D;
	--color-cobre: #d18e6c;
	--color-bone: #F9F9F9;
    --color-sand: #E5D3B3;
    --color-terracotta: #D27D56;
    --color-white: #FFFFFF;
    

    /* Anchos de Gutenberg (Sincronización de Layout) */
    --content-width: 80rem;
    --wide-width: 90rem;

    /* Transiciones */
    --transition-fast: 0.3s ease;
    --transition-normal: 0.5s ease;
}

/* ==========================================================================
   Base Styles / Reset
   ========================================================================== */
/* Reset controlado */
*,
::before,
::after {
    box-sizing: border-box;
}

/* Devolvemos el aire a los textos que el reset anterior mató */
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content figure {
    margin-bottom: 1.8rem !important;
    line-height: 1.8;
    color: rgba(45, 45, 45, 0.7);
    /* SYNC: Color editorial */
}

.entry-content figcaption {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: rgba(45, 45, 45, 0.5);
    margin-top: 0.5rem;
    text-align: center;
}

/* Corregimos el Header Fijo que encima el contenido */
main#primary.site-main {
    padding-top: 85px;
    /* Crea el hueco para el menú fijo */
}

/* Evitamos el hueco en la Home para que el Hero luzca */
.home main#primary.site-main {
    padding-top: 0;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bone);
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.125rem;
    /* SYNC: Base 18px */
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif) !important;
    /* El !important aquí ayuda a vencer los estilos nativos de la interfaz del editor */
    color: var(--color-charcoal);
    font-weight: 400;
    line-height: 1.2;
}

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

ul {
    list-style: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

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

/* ==========================================================================
   Typography Utilities
   ========================================================================== */
.font-serif {
    font-family: var(--font-serif);
}

.font-sans {
    font-family: var(--font-sans);
}

.italic {
    font-style: italic;
}

.lowercase {
    text-transform: lowercase;
}

.uppercase {
    text-transform: uppercase;
}

.text-terracotta {
    color: var(--color-terracotta);
}

.opacity-70 {
    opacity: 0.7;
}

/* Sincronización de anchos para el Editor de Bloques */
.entry-content>*:not(.alignwide):not(.alignfull) {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.entry-content>.alignwide {
    max-width: var(--wide-width);
}

.entry-content>.alignfull {
    max-width: none;
}

/* Ajuste para permitir bloques alignfull y alignwide */
.container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    /* Eliminamos padding vertical para que Gutenberg controle los espacios */
}

/* Permitir que los bloques de Gutenberg respiren */
.entry-content>*:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    /* Fuerza la alineación natural del editor */
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    transition: padding var(--transition-normal), background-color var(--transition-normal);
    padding: 1.5rem 0;
    background-color: transparent;
}

.site-header.glass-nav {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.75rem 0;
}

.site-header a:hover {
    color: var(--color-terracotta, #b85c38) !important; /* Si se pone amarillo al pasar el mouse, el CSS funciona y el problema es el color cobre */
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand-wrap {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
}

.brand-logo {
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .brand-logo {
        font-size: 1.4rem;
    }
}

.nav-links.desktop-only {
    display: none;
    gap: 2rem;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-left: auto;
    margin-right: 2rem;
}

@media (min-width: 1024px) {
    .nav-links.desktop-only {
        display: flex;
    }
}

.nav-right-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mobile-header-only-cart {
    display: flex;
}

@media (min-width: 768px) {
    .mobile-header-only-cart {
        display: none !important;
    }
}

.nav-actions {
    display: none;
    align-items: center;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .nav-actions {
        display: flex;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        padding-right: 1.5rem;
        margin-right: 0.5rem;
    }
}

@media (min-width: 1024px) {
    .nav-actions {
        border-right: none;
        border-left: none;
        padding-left: 0;
    }
}

.nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    transition: color var(--transition-fast);
}

.nav-btn svg {
    width: 20px;
    height: 20px;
}

.nav-btn:hover {
    color: var(--color-terracotta);
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--color-charcoal);
    color: var(--color-white);
    font-size: 8px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-toggle {
    display: flex;
}

@media (min-width: 1024px) {
    .mobile-nav-toggle {
        display: none;
    }
}

.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    text-align: center;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-normal);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.mobile-menu.is-active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-extra-icons {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    .mobile-menu-extra-icons {
        display: none;
    }
}

.mobile-menu-extra-icons .nav-btn {
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-menu-extra-icons .icon-label {
    font-size: 9px;
    font-weight: 600;
    color: rgba(45, 45, 45, 0.5);
}

/* ==========================================================================
   CUSTOM LOGO EN EL HEADER
   ========================================================================== */
   
/* LOGO - Tamaño visual del logo para que no se vea gigante */
.custom-logo-link img {
    width: 380px !important; /* El ancho que definiste en el diseño */
    height: auto !important;
    display: block;
}

/* LOGO - Ajuste fino para el móvil */
@media (max-width: 768px) {
    .custom-logo-link img {
        width: 275px !important;
    }
}

/* ==========================================================================
   Full Screen Search Overlay (NUEVO)
   ========================================================================== */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(249, 249, 249, 0.95);
    /* Color Hueso */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.search-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.search-close-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: var(--color-charcoal);
    transition: transform 0.3s ease;
}

.search-close-btn:hover {
    transform: rotate(90deg);
    color: var(--color-terracotta);
}

.search-overlay-content {
    width: 100%;
    max-width: 800px;
    text-align: center;
}

.search-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.3em;
    margin-bottom: 2rem;
    color: var(--color-terracotta);
    font-weight: 600;
}

.search-input-wrap {
    position: relative;
    border-bottom: 1px solid rgba(45, 45, 45, 0.2);
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 1rem 0;
    font-size: 2rem;
    color: var(--color-charcoal);
    outline: none;
}

@media (min-width: 768px) {
    .search-input {
        font-size: 3.5rem;
    }
}

.search-submit-arrow {
    color: var(--color-charcoal);
    transition: transform 0.3s ease;
}

.search-submit-arrow:hover {
    transform: translateX(10px);
    color: var(--color-terracotta);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85; /* Transparencia del Hero en Home */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(249, 249, 249, 0.1), transparent, rgba(249, 249, 249, 0.2)); /* Desvanecidos a blanco arriba y abajo del Hero en Home */
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 56rem;
    padding: 0 1.5rem;
}

.hero-subtitle {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    margin-bottom: 1.5rem;
	margin-left: 1.3rem;
    display: block;
    color: rgba(255, 255, 255, 1);
    font-weight: 600;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.8) !important;	
}

.hero-title {
    font-size: 2.25rem;
	color: rgba(255, 255, 255, 0.95);
    line-height: 1.1;
    margin-bottom: 2rem;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.85) !important;	
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 4.5rem;
    }
}

/* TEXTO DESCRIPCION EN HOME HERO */
.hero-desc {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.125rem;
    font-weight: 350;
    margin-bottom: 3rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.625;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.8) !important;	
}

@media (min-width: 768px) {
    .hero-desc {
        font-size: 1.25rem;
    }
}

.btn-primary {
    background-color: var(--color-charcoal);
    color: var(--color-white);
    padding: 1.25rem 3rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    display: inline-flex;
    align-items: center;
    transition: background-color var(--transition-fast);
}


.btn-primary:hover {
    background-color: rgba(45, 45, 45, 0.9);
}


.btn-primary svg {
    margin-left: 0.75rem;
    transition: transform var(--transition-fast);
    width: 14px;
    height: 14px;
}

.btn-primary:hover svg {
    transform: translateX(4px);
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.scroll-line-container {
    width: 1px;
    height: 4rem;
    background-color: rgba(45, 45, 45, 0.2);
    position: relative;
    overflow: hidden;
}

.scroll-line {
    position: absolute;
    top: -2rem;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--color-charcoal);
    animation: scrollDown 2s infinite linear;
}

@keyframes scrollDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(4rem);
    }
}

/* ==========================================================================
   Secondary Navigation (Categories)
   ========================================================================== */
.categories-section {
    padding: 6rem 0;
    background-color: var(--color-white);
}

.section-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4rem;
}

.section-label h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--color-terracotta);
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: var(--font-sans);
}

.section-label-divider {
    height: 1px;
    width: 3rem;
    background-color: rgba(45, 45, 45, 0.2);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .categories-grid {
        gap: 3rem;
    }
}

.category-card {
    text-align: center;
    cursor: pointer;
}

.category-img-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background-color: var(--color-bone);
}

.category-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter var(--transition-slow), transform var(--transition-slow);
}

.category-card:hover .category-img-wrap img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.category-card h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 500;
    transition: color var(--transition-fast);
    font-family: var(--font-sans);
}

.category-card:hover h3 {
    color: var(--color-terracotta);
}

/* ==========================================================================
   Featured Collection (Process)
   ========================================================================== */
.process-section {
    padding: 8rem 0;
    background-color: var(--color-bone);
    overflow: hidden;
}

.process-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

@media (min-width: 1024px) {
    .process-layout {
        flex-direction: row;
        gap: 6rem;
    }
}

.process-img-col,
.process-text-col {
    flex: 1;
}

.process-img-wrap {
    position: relative;
}

.process-img-inner {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.process-img-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.process-text-col {
    max-width: 36rem;
}

/* La marca de agua (Monograma) */
.process-text-col::after {
    content: "" !important;
    position: absolute !important;

/* CENTRADO PERFECTO: Usamos top 50% y transform */
    top: 55% !important;
    left: 47% !important;
    transform: translate(-50%, -50%) !important;
    
/* ESCALADO GRADUAL Dimensiones del símbolo */
    width: 170% !important; 
    height: 170% !important;
	max-width: 1000px; /* Límite para que no crezca infinito en pantallas ultra-wide */
    
/* Pegar aquí la URL de tu biblioteca de medios */
    background-image: url('/wp-content/uploads/2026/03/Teresa-Espinosa-Sello.svg'); /* *** La marca de agua *** */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    
/* Opacidad sutil para que el texto de ACF sea legible */
    opacity: 0.05; 
    z-index: -1;
    pointer-events: none;
}

/* Ajuste para Tablet */
@media (max-width: 1024px) {
    .process-text-col::after {
		max-width: 600px; /* Límite para que no rebase los bordes */
        opacity: 0.05;
    }
}

/* Ajuste para Móvil */
@media (max-width: 768px) {
    .process-text-col::after {
		max-width: 580px; /* Límite para que no rebase los bordes */
        opacity: 0.05;
    }
}

.process-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--color-terracotta);
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: block;
}

.process-desc {
    color: rgba(45, 45, 45, 0.7);
    font-weight: 300;
    line-height: 1.625;
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

.link-underline {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 700;
    border-bottom: 1px solid var(--color-charcoal);
    padding-bottom: 0.5rem;
    transition: all var(--transition-fast);
}

.link-underline:hover {
    color: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.link-underline svg {
    margin-left: 0.75rem;
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast);
}

.link-underline:hover svg {
    transform: translateX(4px);
}

/* ==========================================================================
   HOME - SECCIÓN BENEFICIOS BASE
   ========================================================================== */
.benefits-section {
    padding: 8rem 0;
    background-color: var(--color-white);
}

.benefits-layout {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .benefits-layout {
        flex-direction: row;
        gap: 5rem;
    }
}

.benefits-list-col {
    flex: 1;
    order: 2;
    width: 100%;
}

@media (min-width: 1024px) {
    .benefits-list-col {
        order: 1;
    }
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.benefit-item {
    display: flex;
    gap: 2rem;
}

.benefit-icon {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.benefit-icon svg {
    width: 24px;
    height: 24px;
}

.benefit-item h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-family: var(--font-sans);
}

.benefit-item p {
    color: rgba(45, 45, 45, 0.6);
    font-weight: 300;
    line-height: 1.625;
    font-size: 0.875rem;
}

.benefits-img-col {
    flex: 1.5;
    order: 1;
    position: relative;
    width: 100%;
}

@media (min-width: 1024px) {
    .benefits-img-col {
        order: 2;
    }
}

.benefits-img-wrap {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.benefits-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Diseño de la caja de Frase de Sección Beneficios */

.benefits-quote {
    position: absolute;
    top: 99%;
    left: 60%;
	transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(45, 45, 45, 0.12);
    padding: 1.5rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    z-index: 20;
    width: 85%;
    max-width: 400px;
    text-align: center;
	border-radius: 4px;
}

.benefits-quote p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--color-charcoal);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1024px) {
	.benefits-quote {
    position: absolute;
    top: 99%;
    left: 70%;
	transform: translate(-50%, -50%);
	}
}
	
@media (max-width: 768px) {
    .benefits-quote {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translate(-50%, -50%);
        padding: 0.5rem 1.5rem;
        max-width: 300px;
		
    }

    .benefits-quote p {
        font-size: 1.1rem;
		line-height: 1.5;
    }
}

/* ==========================================================================
         HOME - SECCIÓN BENEFICIOS modificaciones ACF
   ========================================================================== */
.benefits-section {
    padding: 80px 0px;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 50px;
}

.benefit-card {
    text-align: center;
    padding: 20px;
}

.benefit-icon img {
    width: 45px;
    height: auto;
    margin-bottom: 25px;
    /* Un toque de elegancia: los iconos cargan en gris y pasan a color al hover */
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease;
}

.benefit-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-charcoal);
    margin-bottom: 15px;
}

.benefit-text {
    font-size: 14px;
    color: #777;
    line-height: 1.6;
    max-width: 250px;
    margin: 0 auto;
}

/* Contenedor de imagen con estilo de "Obra de Arte" */
.custom-artwork-display {
    border-radius: 4px; /* Bordes redondeados sutiles */
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* Sombra suave para dar profundidad */
    transition: transform 0.4s ease;
}

.custom-artwork-display img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Product Grid
   ========================================================================== */
.products-section {
    padding: 8rem 0;
    background-color: var(--color-bone);
}

.products-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
    text-align: center;
}

.products-header h2 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    color: var(--color-terracotta);
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: var(--font-sans);
}

.products-title {
    font-size: 1.875rem;
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .products-title {
        font-size: 2.25rem;
    }
}

.filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    border-bottom: 1px solid var(--color-charcoal);
    padding-bottom: 0.25rem;
    transition: all var(--transition-fast);
}

.filter-toggle-btn:hover {
    color: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.filter-toggle-btn svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast);
}

.filter-toggle-btn.is-open svg {
    transform: rotate(180deg);
}

.filters-container {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    margin-bottom: 0;
}

.filters-container.is-open {
    max-height: 1000px;
    opacity: 1;
    margin-bottom: 4rem;
}

.filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(45, 45, 45, 0.05);
    border-bottom: 1px solid rgba(45, 45, 45, 0.05);
}

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

@media (min-width: 1024px) {
    .filters-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.filter-group h4 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 1rem;
    color: rgba(45, 45, 45, 0.4);
    font-family: var(--font-sans);
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-btn {
    padding: 0.5rem 1rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(45, 45, 45, 0.1);
    transition: all var(--transition-fast);
}

.filter-btn:hover {
    border-color: var(--color-charcoal);
}

.filter-btn.is-active {
    background-color: var(--color-charcoal);
    color: var(--color-white);
    border-color: var(--color-charcoal);
}

.filters-clear {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.filters-clear-btn {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: rgba(45, 45, 45, 0.4);
    transition: color var(--transition-fast);
}

.filters-clear-btn:hover {
    color: var(--color-terracotta);
}

.products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.product-card {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.product-card.is-hidden {
    display: none;
}

.product-img-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: var(--color-white);
    margin-bottom: 1.5rem;
}

.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.05);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(45, 45, 45, 0.4);
    opacity: 0;
    transition: opacity var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.product-view-btn {
    background-color: var(--color-white);
    color: var(--color-charcoal);
    padding: 0.75rem 1.5rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    transition: background-color var(--transition-fast);
}

.product-view-btn:hover {
    background-color: var(--color-bone);
}

.product-info {
    text-align: center;
}

.product-info h4 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.product-tags {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(45, 45, 45, 0.4);
    margin-bottom: 0.75rem;
}

.product-price {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-terracotta);
}

.products-empty {
    display: none;
    padding: 5rem 0;
    text-align: center;
}

.products-empty p {
    color: rgba(45, 45, 45, 0.4);
    font-weight: 300;
    font-style: italic;
}

.products-more {
    margin-top: 5rem;
    text-align: center;
}

.btn-outline {
    border: 1px solid rgba(45, 45, 45, 0.2);
    padding: 1rem 2.5rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    transition: all var(--transition-fast);
}

.btn-outline:hover {
    background-color: var(--color-charcoal);
    color: var(--color-white);
}

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter-section {
    padding: 8rem 0;
    background-color: var(--color-charcoal);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.newsletter-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    pointer-events: none;
}

.newsletter-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: overlay;
}

.newsletter-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.newsletter-icon {
    color: var(--color-terracotta);
    margin: 0 auto 2rem;
    width: 40px;
    height: 40px;
}

.newsletter-title {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .newsletter-title {
        font-size: 3rem;
    }
}

.newsletter-desc {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    font-size: 1.125rem;
    margin-bottom: 3rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 32rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .newsletter-form {
        flex-direction: row;
    }
}

.newsletter-input {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    color: var(--color-white);
    outline: none;
    transition: border-color var(--transition-fast);
}

.newsletter-input:focus {
    border-color: var(--color-terracotta);
}

.newsletter-btn {
    background-color: var(--color-white);
    color: var(--color-charcoal);
    padding: 1rem 2rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    transition: all var(--transition-fast);
}

.newsletter-btn:hover {
    background-color: var(--color-terracotta);
    color: var(--color-white);
}

/* ==========================================================================
   Footer - Teresa Espinosa Art
   ========================================================================== */
.site-footer {
    background-color: var(--color-bone);
    padding-top: 6rem;
    padding-bottom: 3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
    text-align: center;
}

/* --- Marca De Agua footer --- */
/* Contenedor principal */
.brand-watermark-wrapper {
    position: relative;
    padding: 1rem 0;
}

/* Posicionamiento del logo detrás */
.footer-watermark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); /* Centra verticalmente respecto al texto */
    z-index: 1; /* Capa inferior */
    pointer-events: none; /* Permite hacer clic en los enlaces a través de la imagen */
}

.watermark-img {
    width: 350px; /* Ajusta según el tamaño de tu logo */
    height: auto;
    opacity: 0.05; /* Opacidad muy baja para que no estorbe el texto */
    filter: grayscale(100%);
}

/* Contenedor del texto arriba */
.brand-text-content {
    position: relative;
    z-index: 2; /* Capa superior */
}

/* Ajustes para tablet Marca de agua*/
@media (max-width: 1023px) {
    .footer-watermark {
        left: 50%;
        transform: translate(-50%, -50%); /* Centrado total en móviles */
    }
}

/* Ajustes para móvil Marca de agua */
@media (max-width: 768px) {
    .footer-watermark {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%; /* Aseguramos que el contenedor permita el ancho */
        display: flex;
        justify-content: center;
    }

    .watermark-img {
        /* Aumentamos el tamaño */
        width: 380px !important; 
        
        /* Subimos el límite para que permita los 380px en pantallas pequeñas */
        max-width: 95vw; 
        
        height: auto;
        opacity: 0.08; 
    }
    
    .brand-text-content {
        text-align: center;
        position: relative;
        z-index: 2;
    }
}
/* _________________________________ */


/* --- VERSION MÓVIL --- */
@media (max-width: 768px) {
    .footer-brand {
        margin: 0 auto 1.5rem auto;
    }

    /* Empujamos el título SOLO si NO pertenece a la sección de contacto */
    .footer-heading:not(.footer-contact-centered .footer-heading) {
        padding: 0; 
        display: table; 
        margin: 0 auto; 
        margin-left: 45%; 
        transform: translateX(-50%);
        text-align: left;
        min-width: 180px; 
		margin-top: 2.5rem;
		margin-bottom: 1.5rem;
    }

    /* Empujamos los links SOLO si NO pertenecen a la sección de contacto */
    .footer-links:not(.footer-contact-centered .footer-links) {
        padding: 0; 
        display: table; 
        margin: 0 auto; 
        margin-left: 55%; 
        transform: translateX(-50%);
        text-align: left;
        min-width: 180px; 

    }

    .footer-links li {
        margin-bottom: 0.8rem; /* Espacio entre renglones */
    }

    .footer-links li:last-child {
        margin-bottom: 0; /* Evitamos espacio extra al final del bloque */
    }
    
    .footer-bottom {
        gap: 1.5rem;
    }

    .copyright {
        font-size: 9px;
        text-align: center;
        order: 2;
    }
	



}

/* --- VERSION TABLET --- */
@media (min-width: 768px) and (max-width: 1023px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2.5rem;
        padding: 0 3rem;
    }

    .footer-grid > div:first-child {
        grid-column: 1 / span 3;
        text-align: center;
        max-width: 650px;
        margin: 0 auto 2rem auto;
    }

    .footer-grid > div:nth-child(2),
    .footer-grid > div:nth-child(3) {
        text-align: left;
		padding: 0 3rem;
    }

    .footer-grid > div:nth-child(2) .footer-heading,
    .footer-grid > div:nth-child(3) .footer-heading {
        justify-content: flex-start;

    }
	
}

/* --- DESKTOP VERSION --- */
@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr; /* 3 columnas: Desc mas ancha */
        padding: 0;
        text-align: left;
    }

    .footer-grid > div:first-child {
        grid-column: auto;
        text-align: left;
        margin: 0;
        padding-right: 4rem;
    }
}

/* --- ELEMENTOS DE MARCA Y TEXTO --- */
.footer-brand {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: block;
}

.footer-desc {
    color: rgba(45, 45, 45, 0.4);
    font-size: 0.875rem;
    line-height: 1.625;
    font-weight: 400;
}

.footer-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 700;
    margin-bottom: 2rem;
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-links a {
    font-size: 0.875rem;
    color: rgba(45, 45, 45, 0.6);
    font-weight: 300;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-terracotta);
}

/* --- SECCIÓN CONTACTO CENTRALIZADA (NUEVA) --- */
.footer-contact-centered {
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 4rem;
    margin-top: 2rem;
    margin-bottom: 5rem;
}

.footer-contact-centered .footer-heading {
    justify-content: center;
    margin-bottom: 1rem;
}

.contact-email {
    display: block;
    font-size: 1.125rem;
    color: rgba(45, 45, 45, 0.8);
    text-decoration: none;
    margin-bottom: 2.5rem;
    font-weight: 300;
    transition: color var(--transition-fast);
}

.contact-email:hover {
    color: var(--color-terracotta);
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
}

.social-link {
    color: rgba(45, 45, 45, 0.4);
    transition: all var(--transition-fast);
}

.social-link:hover {
    color: var(--color-terracotta);
    transform: translateY(-3px);
}

/* --- FOOTER BOTTOM --- */
.footer-bottom {
    padding-top: 3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column-reverse; /* Medios de pago arriba, Copyright abajo */
    align-items: center;
    gap: 2rem;
    text-align: center;
}

/* Forzamos que se mantenga en columna incluso en desktop */
@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: column-reverse; 
        justify-content: center;
    }
}

.copyright {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(45, 45, 45, 0.3);
}

.payment-methods {
    display: flex;
    gap: 1.5rem;
    opacity: 0.3;
    filter: grayscale(100%);
    align-items: center;
    justify-content: center;
}

.payment-methods img {
    height: 0.8rem;
}

/* ==========================================================================
   Animations
   ========================================================================== */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease;
}

.fade-right {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-left {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease, transform 1s ease;
}

.scale-up {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.in-view {
    opacity: 1;
    transform: translate(0) scale(1);
}

.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}


/* ==========================================================================
   PASO 1: LIMPIEZA DE INTERFAZ (ELIMINAR RUIDO)
   ========================================================================== */

/* 1. Eliminar Breadcrumbs (Inicio / Shop) */
.woocommerce-breadcrumb {
    display: none !important;
}

/* 2. Eliminar el Título de la página (Shop / Tienda) */
.woocommerce-products-header__title.page-title {
    display: none !important;
}

/* 3. Eliminar el contador de resultados (Mostrando 1-12 de...) */
.woocommerce-result-count {
    display: none !important;
}

/* 4. Eliminar el selector de orden predeterminado (Opcional, para máxima limpieza) */
.woocommerce-ordering {
    display: none !important;
}

/* 5. Ajuste de margen superior para compensar lo eliminado */
.post-type-archive-product .site-main {
    padding-top: 0rem !important;
}

@media (max-width: 767px) {
    .post-type-archive-product .site-main {
        padding-top: 0rem !important;
    }
}

/* ==========================================================================
   PASO 2: GRID DE GALERÍA DE PRODUCTOS (TIENDA)
   ========================================================================== */

/* 1. Reset y Contenedor Principal */
    .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    /* 6 columnas en desktop */
    gap: 60px 30px !important;
    /* Espacio generoso entre obras */
    margin: 8rem 0 !important;
    padding: 0 !important;
}

/* 2. Eliminación de comportamientos antiguos de WooCommerce */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
    /* Elimina el clear:both que rompe grids modernos */
}

.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    list-style: none !important;
    position: relative;
    transition: transform var(--transition-normal);
}

/* 3. Marco de la Obra (Imagen) */
.woocommerce ul.products li.product img {
    width: 80% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
    /* Proporción de cuadro vertical */
    object-fit: cover;
    margin-bottom: 20px !important;
    filter: grayscale(20%);
    /* Toque artístico sutil */
    transition: all var(--transition-normal);
}

.woocommerce ul.products li.product:hover img {
    filter: grayscale(0%);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

/* 4. Tipografía de la Obra (Nombre y Precio) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-serif) !important;
    font-size: 1.1rem !important;
    color: var(--color-charcoal) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.woocommerce ul.products li.product .price {
    font-family: var(--font-sans) !important;
    font-size: 0.85rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.1em !important;
    color: var(--color-charcoal) !important;
    opacity: 0.7;
}

/* 5. Ocultar botones de "Añadir al carrito" en el grid para limpieza visual */
/* (Solo se verán dentro de la página del producto) */
.woocommerce ul.products li.product .button {
    display: none !important;
}



/* ==========================================================================
   PASO 3: AJUSTE DE ESCALA DE IMÁGENES (GRID)
   ========================================================================== */

/* 1. Aumentamos a 6 columnas en desktop para reducir el tamaño individual */
@media (min-width: 1200px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 40px 25px !important;
        /* Espaciado más compacto */
    }
}

/* 2. Limitamos el ancho máximo de la imagen dentro de su celda */
.woocommerce ul.products li.product img {
    max-width: 85% !important;
    /* No ocupa todo el ancho de la columna */
    margin-left: auto !important;
    margin-right: auto !important;
    aspect-ratio: 3 / 4 !important;
    /* Mantenemos la proporción vertical */
}

/* 3. Alineamos el texto al centro para que coincida con la imagen reducida */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
    text-align: center !important;
}

/* 4. Ajuste para Tablets (3 columnas en lugar de 2 para que no se vean gigantes) */
@media (min-width: 768px) and (max-width: 1199px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
		gap: 40px 20px !important;
		padding-top: -30rem !important;
    }

    .woocommerce ul.products li.product img {
        max-width: 80% !important;
    }
}

/* 5. Ajuste para Móvil (1 columna) */

@media (max-width: 767px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        /* 1 columna en Móvil */
        padding: 0 1rem !important;
    }
}

/* ==========================================================================
   PASO 4: MÁRGENES LATERALES DEL GRID (RESPIRACIÓN)
   ========================================================================== */

/* 1. Limitamos el ancho del contenedor y lo centramos */
.woocommerce ul.products {
    max-width: 1800px !important;
    /* Ajusta este número si quieres que sea más o menos ancho */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 5% !important;
    /* Margen interno de seguridad izquierdo */
    padding-right: 5% !important;
    /* Margen interno de seguridad derecho */
}

/* 2. Ajuste para pantallas muy grandes (Ultra-Wide) */
@media (min-width: 1800px) {
    .woocommerce ul.products {
        max-width: 2400px !important;
        padding-left: 8% !important;
        padding-right: 8% !important;
    }
}

/* 3. Ajuste para Tablet (para que no se pegue a los bordes del iPad) */
@media (min-width: 768px) and (max-width: 1199px) {
    .woocommerce ul.products {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* ==========================================================================
   PASO 5: ALINEACIÓN DE TEXTO EN MÓVIL (GRID)
   ========================================================================== */


@media (max-width: 767px) {

    /* 1. Aseguramos que el contenedor del producto sea un bloque centrado */
    .woocommerce ul.products li.product {
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 15px !important;
        /* Aire a los lados para que no toque el borde del cel */
        margin-bottom: 40px !important;
    }

    /* 2. Limitamos el ancho del título al mismo ancho de la imagen */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        max-width: 85% !important;
        /* Igualamos al max-width que le dimos a la imagen */
        margin: 10px auto !important;
        font-size: 1rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        word-wrap: break-word !important;
        /* Evita que palabras largas rompan el layout */
    }

    /* 3. Ajuste del precio */
    .woocommerce ul.products li.product .price {
        width: auto !important;
        text-align: center !important;
        display: block !important;
    }
}

/* ==========================================================================
   PASO 6: ALINEACIÓN ARQUITECTÓNICA (DESKTOP)
   ========================================================================== */

@media (min-width: 1024px) {

    /* 1. Forzamos al contenedor del producto a ser un bloque vertical centrado */
    .woocommerce ul.products li.product {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* 2. El título NUNCA debe ser más ancho que la imagen (85% que definimos antes) */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        max-width: 85% !important;
        margin: 15px auto 5px auto !important;
        padding: 0 !important;
        display: block !important;
        /* Evitamos que el texto toque a la obra vecina */
        overflow-wrap: break-word !important;
        line-height: 1.2 !important;
    }

    /* 3. El precio sigue la misma regla de ancho */
    .woocommerce ul.products li.product .price {
        max-width: 85% !important;
        margin: 0 auto !important;
        display: block !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.05em !important;
    }
}

/* ==========================================================================
   PASO 7: ELIMINACIÓN DEFINITIVA DE RESIDUOS (BASADO EN ID: SIDEBAR)
   ========================================================================== */

/* 1. Elimina el bloque azul que seleccionaste en el inspector */
#sidebar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Elimina los textos de cabecera (Shop, Inicio/Shop, Mostrando resultados) */
.woocommerce-breadcrumb,
.woocommerce-products-header,
.woocommerce-result-count,
.woocommerce-ordering {
    display: none !important;
}

/* 3. Ajuste de espaciado superior para que el grid no flote demasiado alto */
.post-type-archive-product #primary {
    padding-top: 60px !important;
    width: 100% !important;
}

/* 4. Aseguramos que el footer real no se vea afectado, solo el sidebar de widgets */
footer#colophon {
    margin-top: 100px !important;
    /* Espacio antes del footer real */
}

/* ==========================================================================
   PASO 8: PÁGINA DE PRODUCTO INDIVIDUAL (OBRA ÚNICA)
   ========================================================================== */

/* 1. Estructura de dos columnas con más aire */
.single-product div.product {
    display: flex !important;
    flex-wrap: wrap;
    gap: 60px;
    margin-top: 8rem !important;
    padding: 0 5% !important;
}

/* 2. Área de la Imagen (La Obra) */
.single-product div.product .woocommerce-product-gallery {
    flex: 1 1 50% !important;
    max-width: 550px !important;
    /* Evitamos que la imagen sea gigante y pierda calidad */
    margin: 0 auto !important;
}

.single-product div.product .woocommerce-product-gallery img {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    /* Sombra muy suave de cuadro */
}

/* 3. Área de Texto (Ficha Técnica) */
.single-product div.product .summary {
    flex: 1 1 40% !important;
    text-align: left !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 4. Título de la Obra */
.single-product div.product .product_title {
    font-family: var(--font-serif) !important;
    font-size: 2.0rem !important;
    color: var(--color-charcoal) !important;
    margin-bottom: 10px !important;
}

/* 5. Precio Discreto */
.single-product div.product .price {
    font-family: var(--font-sans) !important;
    font-size: 1.2rem !important;
    font-weight: 300 !important;
    color: var(--color-charcoal) !important;
    margin-bottom: 30px !important;
    opacity: 0.8;
}

/* ==== AJUSTE DE ESPACIADO: DISPONIBILIDAD (PÁGINA PRODUCTO) ==== */

.single-product div.product .stock.in-stock {
    margin-top: 25px !important;
    /* Espacio respecto al texto superior */
    margin-bottom: 25px !important;
    /* Espacio respecto al botón de añadir al carrito */
    font-family: var(--font-sans) !important;
    font-size: 0.85rem !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-charcoal) !important;
    display: block !important;
    /* Asegura que respete los márgenes */
}

/* 6. Botón de Compra Estilizado */
.single-product div.product .cart .button {
    background-color: var(--color-charcoal) !important;
    color: var(--color-bone) !important;
    padding: 20px 40px !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    border-radius: 4px !important;
    transition: all 0.4s ease;
}

.single-product div.product .cart .button:hover {
    background-color: var(--color-terracotta) !important;
}

/* ==== AJUSTE DEL MARGEN DE LA IMAGEN EN MÓVIL (PÁGINA PRODUCTO) ==== */

/* 8. Responsive para móvil */
@media (max-width: 767px) {
    .single-product div.product {
        flex-direction: column !important;
        padding: 0 20px !important;
    }

    .single-product div.product .product_title {
        font-size: 1.5rem !important;
    }
}

/* ==========================================================================
   PASO 9: VERSIÓN ESTABLE DE AVISOS 
   ========================================================================== */

/* 1. Contenedor Maestro */
.woocommerce-notices-wrapper {
    display: block !important;
    margin-top: 150px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 25px 30px !important;
    margin: 0 5% 25px 5% !important;
    background-color: var(--color-bone) !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* 2. Barras laterales y Colores */
.woocommerce-message {
    border-left: 6px solid #4CAF50 !important;
}

.woocommerce-error {
    border-left: 6px solid #D32F2F !important;
}

/* 3. Iconos XXL (Posición lateral) */
.woocommerce-message::after,
.woocommerce-error::after {
    font-size: 2.5rem !important;
    margin-right: 25px !important;
    order: -1 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.woocommerce-message::after {
    content: "✓" !important;
    color: #4CAF50 !important;
}

.woocommerce-error::after {
    content: "✕" !important;
    color: #D32F2F !important;
}

/* 4. Texto y Separación (Desktop y Tablet) */
.woocommerce-message,
.woocommerce-error li {
    flex: 1 !important;
    font-family: var(--font-sans) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4 !important;
    padding-right: 60px !important;
}

/* 5. Botón Sólido */
.woocommerce-message .button,
.woocommerce-error .button {
    order: 2 !important;
    margin-left: auto !important;
    background-color: #ebe9eb !important;
    color: var(--color-charcoal) !important;
    padding: 12px 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    display: inline-block !important;
    border: none !important;
    flex-shrink: 0 !important;
}

/* 6. Fix Limpieza */
.woocommerce-error {
    list-style: none !important;
}

.woocommerce-error li {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-error li::before {
    display: none !important;
    content: none !important;
}

/* 7. RESPONSIVE */

@media (max-width: 1024px) {

    .woocommerce-message,
    .woocommerce-error li {
        padding-right: 80px !important;
    }
}

@media (max-width: 767px) {
    .woocommerce-notices-wrapper {
        margin-top: 130px !important;
    }

    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-error li {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px !important;
    }

    .woocommerce-message::after,
    .woocommerce-error::after {
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }

    .woocommerce-message .button,
    .woocommerce-error .button {
        margin-left: 0 !important;
        margin-top: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        align-self: center !important;
    }

    .woocommerce-message,
    .woocommerce-error li {
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   PASO 10: META DATOS EN PRODUCTO (REEMPLAZO TOTAL - FLUJO DE FRASE)
   ========================================================================== */

/* 1. Ocultar SKU */
.product_meta .sku_wrapper {
    display: none !important;
}

/* 2. Contenedor Maestro */
.product_meta {
    margin-top: 50px !important;
    padding-top: 30px !important;
    border-top: 1px solid #f0f0f0 !important;
    font-size: 0 !important;
    color: transparent !important;
}

/* 3. Ajuste de los bloques de Categorías y Etiquetas */
.product_meta .posted_in,
.product_meta .tagged_as {
    display: flex !important;
    /* Flex para que título y links convivan */
    flex-wrap: wrap !important;
    /* Para que si hay muchos, bajen al siguiente renglón */
    align-items: center !important;
    font-size: 0 !important;
    margin-bottom: 25px !important;
    /* Espacio entre el grupo de Categorías y Etiquetas */
    line-height: 2.5 !important;
    /* Espacio entre renglones de la misma frase */
}

/* 4. Inyectamos los títulos (Categorías: / Etiquetas:) */
.product_meta .posted_in::before {
    content: "Categorías: ";
}

.product_meta .tagged_as::before {
    content: "Etiquetas: ";
}



.product_meta .posted_in::before,
.product_meta .tagged_as::before {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: var(--color-charcoal) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 15px;
    /* Espacio después de los dos puntos */
    visibility: visible !important;
}

/* 5. Los Enlaces (Las palabras de la frase) */
.product_meta a {
    font-size: 0.75rem !important;
    color: #888 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    transition: color 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
}

.product_meta a:hover {
    color: var(--color-charcoal) !important;
}

/* 6. El Punto XXL (Centrado perfecto) */
.product_meta a:not(:last-child)::after {
    content: "·" !important;
    display: inline-flex !important;
    width: 35px !important;
    /* Espacio entre palabras */
    justify-content: center !important;
    color: #ccc !important;
    font-size: 2.5rem !important;
    line-height: 0 !important;
    margin-top: -3px !important;
}

/* ==========================================================================
   PASO 11: REAGRUPACIÓN AGRESIVA (SOLUCIÓN AL VACÍO EN TABLET)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    /* 1. Rompemos la fila de dos columnas para que todo sea una sola columna */
    .single-product div.product {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Forzamos ancho completo para los bloques principales */
    .woocommerce-product-gallery,
    .summary.entry-summary,
    .woocommerce-tabs,
    .product_meta {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Ajuste de imagen para que no sea gigantesca al ocupar el 100% */
    .woocommerce-product-gallery {
        margin-bottom: 40px !important;
    }

    /* 4. El texto (Summary) ahora respira mejor debajo de la foto */
    .summary.entry-summary {
        text-align: left !important;
    }

    /* 5. Reacomodo de los Metadatos (Tus etiquetas con puntos XXL) */
    .product_meta {
        margin-top: 30px !important;
        padding: 30px 5% !important;
        /* Mantenemos margen del 5% */
        border-top: 1px solid #f0f0f0 !important;
    }

    .product_meta .posted_in,
    .product_meta .tagged_as {
        display: flex !important;
        flex-wrap: wrap !important;
        line-height: 2.2 !important;
    }

    /* 6. Pestañas (Tabs) centradas y limpias */
    .woocommerce-tabs {
        margin-top: 30px !important;
    }
}

/* ==========================================================================
   PASO 12: COMPACTAR ESPACIO ENTRE ETIQUETAS Y TABS (TABLET)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    /* 1. Eliminamos el margen excesivo del sumario */
    .summary.entry-summary {
        margin-bottom: 10px !important;
    }

    /* 2. Compactamos el bloque de metadatos */
    .product_meta {
        margin-top: 10px !important;
        /* Lo pegamos más al botón/texto superior */
        padding-top: 20px !important;
        padding-bottom: 10px !important;
        /* Reducimos el aire de salida */
        margin-bottom: 0 !important;
    }

    /* 3. Ajustamos el bloque de etiquetas específicamente */
    .product_meta .tagged_as {
        margin-bottom: 5px !important;
        /* Casi eliminamos el margen final */
    }

    /* 4. Subimos las Tabs (Pestañas) */
    .woocommerce-tabs {
        margin-top: 0 !important;
        padding-top: 10px !important;
        /* Un pequeño toque de aire para no chocar */
    }

    /* 5. Eliminamos posibles divisores extra del tema que ocupen espacio */
    .woocommerce-tabs::before {
        display: none !important;
    }
}

/* ==========================================================================
   PASO 13: OPTIMIZACIÓN DE TABS (PESTAÑAS) EN PRODUCTO PARA MÓVIL
   ========================================================================== */

@media (max-width: 767px) {

    /* 1. Limpiar el contenedor de pestañas */
    .woocommerce-tabs ul.tabs {
        display: flex !important;
        flex-direction: column !important;
        /* Los apilamos para facilitar el tap */
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
        border: none !important;
        background: none !important;
    }

    /* 2. Estilo de los botones (links de las pestañas) */
    .woocommerce-tabs ul.tabs li {
        background: none !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        /* Línea divisoria sutil */
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        text-align: left !important;
    }

    .woocommerce-tabs ul.tabs li a {
        display: block !important;
        padding: 15px 0 !important;
        font-family: var(--font-sans) !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        color: #bbb !important;
        /* Color apagado para las no activas */
    }

    /* 3. Resaltar la pestaña activa */
    .woocommerce-tabs ul.tabs li.active a {
        color: var(--color-charcoal) !important;
        position: relative;
    }

    /* 4. Panel de contenido (el texto que aparece abajo) */
    .woocommerce-tabs .woocommerce-Tabs-panel {
        padding: 20px 0 !important;
        border: none !important;
    }

    .woocommerce-tabs .woocommerce-Tabs-panel h2 {
        display: none !important;
        /* Ocultamos el título repetitivo interno */
    }

    /* 5. Ajustar tipografía del contenido de la descripción en móvil */
    .woocommerce-Tabs-panel p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        color: #444 !important;
    }
}

/* ==========================================================================
   PASO 14: ELIMINACIÓN SELECTIVA DE TÍTULOS (RECUPERANDO EL STATEMENT)
   ========================================================================== */

/* 1. Ocultar SOLO el primer h2 de cada panel (el que pone el tema por defecto) */
.woocommerce-Tabs-panel>h2:first-child,
.woocommerce-Tabs-panel>h3:first-child,
.woocommerce-Tabs-panel>.section-title:first-child {
    display: none !important;
}

/* 2. Asegurarnos de que tu frase destacada (Statement) sea visible */
/* Si tu frase es un h2, h3 o p dentro del contenido, esto la protegerá */
.woocommerce-Tabs-panel .description-content h2,
.woocommerce-Tabs-panel p strong,
.woocommerce-Tabs-panel h2:not(:first-child) {
    display: block !important;
}

/* 3. Ajuste de margen superior para que el texto no quede pegado a los botones */
.woocommerce-tabs .woocommerce-Tabs-panel {
    padding-top: 15px !important;
}

/* ==========================================================================
   PASO 15: PRODUCTOS RELACIONADOS - AJUSTE POR DISPOSITIVO
   ========================================================================== */

/* 1. TÍTULO (Común para todos) */
.related.products h2 {
    text-align: center !important;
    margin-bottom: 90px !important;
    font-family: var(--font-sans) !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 1.2rem !important;
}

/* 2. CONFIGURACIÓN PARA DESKTOP (Pantallas grandes) */
@media (min-width: 1025px) {
    .related.products ul.products {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        margin: 0 auto !important;
        padding: 0 !important;
        float: none !important;
    }

    .related.products ul.products li.product {
        /* Calculamos el ancho para 4 columnas exactas con margen */
        width: calc(20% - 30px) !important;
        margin: 0 15px 30px 15px !important;
        float: none !important;
        text-align: center !important;
    }
}

/* 3. CONFIGURACIÓN PARA TABLET (iPad, etc.) */
@media (min-width: 768px) and (max-width: 1024px) {
    .related.products ul.products {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .related.products ul.products li.product {
        width: 40% !important;
        /* 2 columnas centradas */
        margin: 0 15px 30px 15px !important;
        float: none !important;
        text-align: center !important;
    }
}

/* 4. CONFIGURACIÓN PARA MÓVIL */
@media (max-width: 767px) {
    .related.products ul.products {
        display: block !important;
        /* Volvemos al flujo natural para evitar errores */
    }

    .related.products ul.products li.product {
        width: 100% !important;
        margin: 0 0 30px 0 !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   PASO 16: ALINEACIÓN DEL BOTÓN DE COMPRA (CENTRADOS)
   ========================================================================== */

/* 1. MÓVIL Y TABLET (Alineación centrada) */
@media (max-width: 1024px) {

    /* Centramos el contenedor del botón y el selector de cantidad */
    .summary form.cart {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Centramos el botón en sí */
    .summary form.cart .button {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        min-width: 200px !important;
        /* Asegura un buen tamaño táctil */
    }

    /* Centramos el texto de "1 DISPONIBLES" */
    .stock {
        text-align: center !important;
        width: 100% !important;
    }
}

/* 2. DESKTOP (Mantenemos alineación original a la izquierda) */
@media (min-width: 1025px) {
    .summary form.cart {
        justify-content: flex-start !important;
    }
}

/* ==========================================================================
   PASO 17: ALINEACIÓN EDITORIAL INTEGRAL (TEXTO AL BORDE)
   ========================================================================== */

/* 1. AJUSTES PARA TABLET (768px a 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .summary.entry-summary {
        text-align: left !important;
        padding: 0 13% !important;
    }

    .product_meta {
        text-align: left !important;
        padding-left: 0 !important;
    }

    .product_meta .posted_in,
    .product_meta .tagged_as {
        justify-content: flex-start !important;
        /* Alinea etiquetas al borde */
    }
}

/* ==========================================================================
   PASO 18: LABORATORIO MÓVIL (CORRECCIÓN DE ESPACIOS Y MÁRGENES) PRODUCTO
   ========================================================================== */

@media (max-width: 767px) {

    /* --- 1. CABECERA Y TEXTO --- */
    .summary.entry-summary {
        text-align: left !important;
        padding: 0 15px !important;
    }

    /* --- 2. ETIQUETAS (Reducción de espacio inferior) --- */
    .product_meta {
        text-align: left !important;
        padding-top: 15px !important;
        padding-bottom: 0 !important;
        /* Eliminamos el acolchado inferior */
        margin-bottom: 5px !important;
        /* Margen mínimo */
    }

    .product_meta .posted_in,
    .product_meta .tagged_as {
        display: flex !important;
        justify-content: flex-start !important;
        line-height: 2.2 !important;
    }

    /* --- 3. PESTAÑAS (El "Tirón" hacia arriba) --- */

    /* Este es el contenedor que suele tener el espacio bloqueado */
    .woocommerce-tabs.wc-tabs-wrapper {
        margin-top: -80px !important;
        /* Valor negativo agresivo para cerrar el hueco */
        padding-top: 0 !important;
        clear: both !important;
    }

    .woocommerce-tabs ul.tabs {
        text-align: left !important;
        margin-left: 15px !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        padding-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        border: none !important;
    }

    /* --- 4. PANEL DE CONTENIDO --- */
    .woocommerce-tabs .woocommerce-Tabs-panel {
        text-align: left !important;
        padding-top: 10px !important;
        /* Pegamos el texto más a los botones */
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
    }

    /* --- 5. BOTÓN DE COMPRA --- */
    .summary form.cart {
        justify-content: center !important;
        margin: 25px 0 !important;
    }
}

/* ==========================================================================
   PASO 19.4: CARRITO MÓVIL - MINIATURAS DISCRETAS Y AIRE
   ========================================================================== */

/* 1. OCULTAR TÍTULO Y DAR AIRE AL HEADER */
header.entry-header,
h1.entry-title.font-serif,
.wc-block-cart__title {
    display: none !important;
}

/* 2. ESPACIO DE CORTESÍA Y MÁRGENES EDITORIALES */
.wc-block-cart,
.wc-block-checkout {
    margin-top: 120px !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
}

@media (min-width: 768px) and (max-width: 1024px) {

    .wc-block-cart {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .wc-block-checkout {
        padding-left: 2% !important;
        padding-right: 2% !important;
    }
}

/* 2. AJUSTES EXCLUSIVOS PARA MÓVIL (< 767px) */
@media (max-width: 767px) {

    /* --- MINIATURAS PEQUEÑAS (Evita la claustrofobia) --- */
    .wc-block-cart-items__product-image {
        width: 60px !important;
        /* Tamaño reducido para no saturar */
        min-width: 60px !important;
    }

    .wc-block-cart-items__product-image img {
        width: 60px !important;
        height: 60px !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }

    /* --- FLUJO DE TEXTO --- */
    .wc-block-cart-items__product {
        display: flex !important;
        align-items: flex-start !important;
        gap: 15px !important;
        /* Espacio entre la mini-imagen y el texto */
        margin-bottom: 10px !important;
    }

    /* --- FILAS MÁS COMPACTAS --- */
    .wc-block-cart-items__row {
        padding: 15px 0 !important;
        margin-bottom: 20px !important;
        border-bottom: 1px solid #f2f2f2 !important;
    }

    /* Títulos de las obras más finos en móvil */
    .wc-block-components-product-name {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }

    /* --- PRECIO TOTAL DE LA FILA --- */
    .wc-block-cart-items__total {
        width: 100% !important;
        text-align: right !important;
        margin-top: 5px !important;
        font-size: 0.9rem !important;
        color: #666 !important;
        /* Un gris más suave para no pesar tanto */
    }

    /* Botón eliminar más pequeño aún */
    .wc-block-cart-item__remove-link {
        font-size: 0.65rem !important;
        margin-top: 5px !important;
        display: inline-block !important;
    }
}


/* ===   BOTÓN FINALIZAR COMPRA (ESTILO COBRE + BOLD)   ==== */

/* 1. ESTADO BASE DEL BOTÓN (Negro por defecto) */
.wc-block-cart__submit-button,
.wc-block-components-checkout-button,
.wc-block-components-button {
    background-color: var(--color-charcoal) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 17px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    /* Transición suave para color de fondo y texto */
    transition: background-color 0.4s ease, color 0.4s ease !important;
    text-decoration: none !important;
}

/* 2. TIPOGRAFÍA DEL BOTÓN (Bold y Espaciada) */
.wc-block-components-button__text {
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    font-size: 0.85rem !important;
    /* --- AQUÍ ESTÁ EL CAMBIO A BOLD --- */
    font-weight: 700 !important;
    /* Peso bold/negrita forzado */
}

/* 3. ESTADO HOVER EN DESKTOP (Cambio a Cobre) */
@media (min-width: 1025px) {

    .wc-block-cart__submit-button:hover,
    .wc-block-components-checkout-button:hover,
    .wc-block-components-button:hover {
        /* --- COLOR COBRE EXACTO --- */
        background-color: #c68363 !important;
        color: #ffffff !important;
        cursor: pointer;
    }

    /* Aseguramos que el texto siga siendo bold y blanco en el hover */
    .wc-block-cart__submit-button:hover .wc-block-components-button__text,
    .wc-block-components-checkout-button:hover .wc-block-components-button__text {
        color: #ffffff !important;
        font-weight: 700 !important;
    }
}

/* ==========================================================================
   PASO 20.6 CRRECCION FINAL CHECKOUT
   ========================================================================== */

/* 1. RESTAURACIÓN DE TÍTULOS Y ALERTAS (PASO 20.5) */
.wc-block-checkout__section-title,
.wc-block-components-checkout-step__title,
.wc-block-components-title,
h2.wc-block-components-title {
    font-family: var(--font-sans) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--color-gris) !important;
    border-bottom: 1px solid #000 !important;
    padding-bottom: 12px !important;
    margin-bottom: 30px !important;
    display: block !important;
    width: 100% !important;
}

.wc-block-components-validation-error {
    position: relative !important;
    display: block !important;
    margin-top: 10px !important;
    clear: both !important;
}

.wc-block-components-text-input {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 25px !important;
}

/* 2. ALINEACIÓN QUIRÚRGICA: POBLACIÓN Y REGIÓN */
/* Localizamos el contenedor que agrupa estos dos campos específicamente */
.wc-block-components-address-form__city-state {
    display: flex !important;
    flex-direction: row !important;
    /* Forzamos fila */
    gap: 20px !important;
    /* Espacio entre ambos */
    align-items: flex-start !important;
    width: 100% !important;
}

/* Aseguramos que cada uno ocupe la mitad del espacio */
.wc-block-components-address-form__city-state>div {
    flex: 1 !important;
    min-width: 0 !important;
    /* Evita que el dropdown de región rompa el ancho */
}

/* 3. ESPACIO DEL HEADER */
.wc-block-checkout {
    margin-top: 80px !important;
}


/* ==========================================================================
   MÖVIL: AJUSTES MÓVIL y ALINEACIÓN DE PRECIOS (RESUMEN)
   ========================================================================== */

@media (max-width: 767px) {
    .wc-block-checkout {
        margin-top: 60px !important;
    }

    .wc-block-components-address-form__city-state {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* ==  En carrito  == */

    .wc-block-cart-item__wrap {
        display: flex !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 0 15px !important;
    }

    /* 1. Contenedor principal de cada producto */
    .wc-block-components-order-summary-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 15px !important;
        padding: 30px 0 15px !important;
        /* Aumentamos espacio superior */
    }

    /* ==  En checkout  == */

    /* 3. PRECIO INDIVIDUAL: Alineado a la izquierda bajo el título */
    .wc-block-components-order-summary-item__individual-price {
        display: block !important;
        text-align: left !important;
        margin-top: 5px !important;
        font-size: 0.75rem !important;
        color: #666 !important;
        order: 3 !important;
        /* Asegura que vaya después del badge */
    }

    /* 4. PRECIO TOTAL (EL DE LA DERECHA): Forzado a su posición */
    /* Usamos el selector del inspector para el total_price */
    .wc-block-components-order-summary-item__total-price {
        display: block !important;
        min-width: fit-content !important;
        text-align: right !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        color: #000 !important;
        margin-left: auto !important;
        /* Lo empuja totalmente a la derecha */
        padding-top: 2px !important;
        /* Alineación visual con el título */
    }

    /* Ajuste del badge de stock para que no rompa la línea */
    .wc-block-components-product-badge {
        align-self: flex-start !important;
        margin-bottom: 2px !important;
    }
}

/* ====  VERSION DESKTOP Y TABLET: RECONSTRUCCIÓN COMPACTA DEL RESUMEN  ==== */

/* 1. Reset de la estructura del ítem para que sea un bloque vertical contenido */
.wc-block-components-order-summary-item {
    display: flex !important;
    flex-wrap: wrap !important;
    /* Permite que el precio baje si no hay espacio */
    align-items: flex-start !important;
    padding: 25px 0 10px !important;
    /* Aumentamos espacio superior */
    border-bottom: 1px solid #eee !important;
    position: relative !important;
}

/* 2. Imagen fija a la izquierda */
.wc-block-components-order-summary-item__image {
    width: 10px !important;
    margin-right: 5px !important;
    flex-shrink: 0 !important;
}

/* 3. Contenedor de información (Título y Artista) */
.wc-block-components-order-summary-item__content {
    flex: 1 !important;
    /* Ocupa el espacio restante */
    min-width: 150px !important;
    margin-bottom: 2px !important;
}

/* 4. EL PRECIO: Forzamos que se quede dentro y abajo */
.wc-block-components-order-summary-item {
    display: block !important;
    position: relative !important;
    /* Anulamos el absolute que lo saca de la caja */
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    /* Ocupa todo el ancho para bajar */
    text-align: left !important;
    /* Alineado a la derecha del bloque */
    margin-top: 0px !important;
    font-size: 0.75rem !important;
    color: #666 !important;
    clear: both !important;
}

.wc-block-components-product-price {
    display: block !important;
    position: relative !important;
    /* Anulamos el absolute que lo saca de la caja */
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    /* Ocupa todo el ancho para bajar */
    text-align: right !important;
    /* Alineado a la derecha del bloque */
    margin-top: 0px !important;
    font-size: 0.75rem !important;
    color: #666 !important;
    clear: both !important;
}

/* 5. Ajuste del sidebar para que no apriete el contenido */
.wc-block-checkout__sidebar {
    padding-left: 5px !important;
    padding-right: 0px !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .wc-block-checkout__sidebar {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ==========================================================================
   PASO 21.1: MI CUENTA -  LIBERAR ANCHO Y AJUSTES DE MI CUENTA
   ========================================================================== */

/* 1. Eliminar la restricción de 48rem del contenedor principal */
.woocommerce-account .entry-content .container {
    max-width: 1200px;
    /* Ajustado al ancho estándar del header */
    width: 100% !important;
    margin: 0 auto !important;
}

/* 2. Ajuste de la estructura de Mi Cuenta */
.woocommerce-account .woocommerce {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    /* Espacio entre menú y contenido */
    margin-top: 200px !important;
    /* Bajamos el bloque para separarlo del header */
}

/* 3. Menú Lateral: Asegurar alineación a la izquierda */
.woocommerce-MyAccount-navigation {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation li {
    padding: 10px 0 !important;
    border-bottom: 1px solid #f2f2f2 !important;
}

.woocommerce-MyAccount-navigation li a {
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 0.85rem !important;
    color: #666 !important;
    text-decoration: none !important;
}

.woocommerce-MyAccount-navigation li.is-active a {
    color: #000 !important;
    font-weight: 700 !important;
}

/* 4. Contenido Principal: Estilo de Bienvenida */
.woocommerce-MyAccount-content {
    flex: 1 !important;
    margin-top: -70px !important;
    /* Para acomodarlo en vertical */
    padding-right: 50px;
}

/* Saludo Personalizado */
.woocommerce-MyAccount-content p:first-of-type {
    font-size: 1.6rem !important;
    margin-bottom: 20px !important;
    color: var(--color-charcoal) !important;
}

.woocommerce-MyAccount-content p:first-of-type a {
    font-size: 0.8rem !important;
    color: #999 !important;
    text-decoration: underline !important;
}

/* Párrafo de instrucciones con toque editorial */
.woocommerce-MyAccount-content p:last-of-type {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    color: #444 !important;
    border-left: 2px solid #000;
    padding-left: 30px;
    margin-top: 30px !important;
}

/* ==========================================================================
   ELIMINAR Residuo BARRA LATERAL Texto DEL ESCRITORIO
   ========================================================================== */

/* Solo quita la línea decorativa izquierda del párrafo de bienvenida */
.woocommerce-account .woocommerce-MyAccount-content p {
    border-left: none !important;
    padding-left: 0 !important;
}

/* ==========================================================================
     SALTO DE LÍNEA EXACTO PARA EL PARENTESIS (MI CUENTA)
   ========================================================================== */

/* 1. Hacemos que el párrafo sea un contenedor flexible para reordenar */
.woocommerce-MyAccount-content p:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    line-height: 1.8 !important;
    column-gap: 5px !important;
}

/* 2. Forzamos que el enlace de cerrar sesión y lo que le siga rompa la línea */
.woocommerce-MyAccount-content p:first-child a {
    flex-basis: 100% !important;
    /* Fuerza el salto de línea */
    margin-top: 10px !important;
    /* Espacio de separación */
    font-size: 0.9em !important;
    color: #6c6c6c !important;
    text-decoration: underline !important;
}

/* 3. Ajuste para los paréntesis (si el tema los pone como texto plano) */
/* Nota: Este selector intenta capturar el texto antes y después del link */
.woocommerce-MyAccount-content p:first-child a::before {
    content: "(¿no eres " attr(data-username) "? " !important;
}

/* ==========================================================================
   PASO 21.2: LIMPIEZA DE FORMULARIOS DE CUENTA >>Revisado<<
   ========================================================================== */

/* 1. Estructura de filas del formulario */
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row {
    margin-bottom: 25px !important;
    width: 100% !important;
}

/* 3. Estilo de los Inputs (Minimalista) */
.woocommerce-account input.input-text {
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    background: transparent !important;
    font-size: 1rem !important;
    transition: border-color 0.3s ease;
}

.woocommerce-account input.input-text:focus {
    border-bottom-color: #000 !important;
    outline: none !important;
}

/* 4. Etiquetas (Labels) */
.woocommerce-account label {
    display: block !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 5px !important;
    color: #888 !important;
}

/* 5. Separación de la sección de cambio de contraseña */
.woocommerce-EditAccountForm fieldset {
    margin-top: 50px !important;
    border: none !important;
    padding: 0 !important;
}

.woocommerce-EditAccountForm fieldset legend {
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #000 !important;
    width: 100% !important;
    margin-bottom: 30px !important;
}

/* 6. Botón de Guardar Cambios */
.woocommerce-account .button {
    background: var(--color-charcoal) !important;
    color: #fff !important;
    border: none !important;
    padding: 15px 40px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: opacity 0.3s ease !important;
    margin-top: 20px !important;

}

/* Pasar el botón de guardar dirección a la derecha */
.woocommerce-Address form p:last-of-type,
.woocommerce-edit-address form p:has(button[name="save_address"]) {
    display: flex !important;
    justify-content: flex-end !important; /* Mueve el contenido al final (derecha) */
    width: 100% !important;
    clear: both !important;
    padding-top: 20px !important;
}

/* Ajuste para que el botón no toque el borde si hay márgenes globales */
.woocommerce-Address button.button {
    margin-right: 0;
}

.woocommerce-account .button:hover {
    opacity: 0.8 !important;
}

/* 6.1 Botón de Guardar Dirección Centrado en MÓVIL */
@media (max-width: 767px) {
	/* Centrar el botón de guardar dirección */
	.woocommerce-Address form p:last-of-type,
	.woocommerce-edit-address form p:has(button[name="save_address"]) {
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
		clear: both !important;
		padding-top: 20px !important;
	}

	/* Ajustar el ancho del botón */
	.woocommerce-Address button.button {
		min-width: 280px;
	}
}

/* ==========================================================================
   PASO 21.3: TÍTULOS DE FORMULARIOS (SANS-SERIF) >>Revisado<<
   ========================================================================== */

/* Aplicamos la fuente sans a los títulos H2 en las páginas de edición de cuenta */
.woocommerce-edit-address h2,
.woocommerce-edit-account h2,
.woocommerce-MyAccount-content form h2,
.woocommerce-MyAccount-content h2 {
    font-family: var(--font-sans) !important;
	color: var(--color-charcoal) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 1.2rem !important;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 30px !important;
    width: 100%;
    display: block;
}

/* Forzar que el campo de texto baje debajo de la etiqueta (Label) */
#billing_first_name_field, 
#billing_last_name_field {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
	margin-bottom: 25px !important;
}

/* Asegurar que el input ocupe todo el ancho disponible */
#billing_first_name_field .woocommerce-input-wrapper,
#billing_last_name_field .woocommerce-input-wrapper,
#billing_first_name_field input,
#billing_last_name_field input {
    width: 100% !important;
    display: block !important;
}

/* Espacio entre la palabra NOMBRE y el cuadro de texto */
#billing_first_name_field label, 
#billing_last_name_field label {
    margin-bottom: 5px !important;
    display: block !important;
}

/* Nombre y Apellido uno debajo del otro */
#billing_first_name_field, 
#billing_last_name_field {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-right: 0 !important;
}



/* ==========================================================================
   PASO 21.4: ELIMINAR BARRAS LATERALES Y AJUSTE FINAL
   ========================================================================== */

/* 1. Quitar cualquier borde o decoración lateral en los campos de contraseña */
.woocommerce-account .woocommerce-form-row,
.woocommerce-account .password-input,
.woocommerce-account .woocommerce-Input {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 2. Quitar específicamente la barra del contenedor del botón y campos finales */
.woocommerce-EditAccountForm p,
.woocommerce-EditAccountForm span,
.woocommerce-form-row--wide {
    border-left: none !important;
    border-right: none !important;
}

/* 3. Asegurar que el botón de Guardar Cambios no tenga decoraciones */
.woocommerce-EditAccountForm .button {
    border-left: none !important;
    border-right: none !important;
    display: inline-block !important;
    /* Evita que tome comportamientos de bloque con bordes */
}

/* 4. Reset general para cualquier elemento con 'before' que cree líneas */
.woocommerce-EditAccountForm .woocommerce-form-row::before,
.woocommerce-EditAccountForm .woocommerce-form-row::after {
    display: none !important;
}

/* ==========================================================================
   PASO 21.5: ALINEACIÓN DEL BOTÓN A LA DERECHA
   ========================================================================== */

/* 1. Contenedor del botón: forzamos alineación a la derecha */

.woocommerce-account .woocommerce-EditAccountForm p:has(.button) {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    border: none !important;
    /* Refuerzo para asegurar que no hay barras */
}

/* 2. Ajuste del botón para que no tenga márgenes que lo desvíen */
.woocommerce-account .woocommerce-EditAccountForm .button {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* 3. Limpieza final de bordes en el área del botón */
.woocommerce-account .woocommerce-EditAccountForm p {
    border-left: none !important;
}

/* Ajuste Responsivo */
@media (max-width: 1024px) {

    .woocommerce-MyAccount-content {
        flex: 1 !important;
        margin-top: -100px !important;
        /* Para acomodarlo en vertical */
        padding-right: 0px;
    }

    .woocommerce-account .woocommerce {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 20px !important;
        /* Espacio entre menú y contenido */
        margin-top: 130px !important;
        /* Bajamos el bloque para separarlo del header */
    }

    .woocommerce-MyAccount-navigation li a {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 767px) {
    .woocommerce-MyAccount-content {
        flex: 1 !important;
        margin-top: -100px !important;
        /* Para acomodarlo en vertical */
        padding-right: 0px;
    }

    .woocommerce-account .woocommerce {
        flex-direction: column !important;
    }

    .woocommerce-MyAccount-navigation {
        flex: 1 0 100% !important;
        width: 100% !important;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
    }

    .woocommerce-MyAccount-navigation li a {
        font-size: 0.95rem !important;
    }


    /* ==========================================================================
          PASO 21.6: CENTRADO TOTAL DE BOTÓN EN MÓVIL
       ========================================================================== */

    /* 1. Forzamos al párrafo contenedor a ser un flex central */
    .woocommerce-account .woocommerce-EditAccountForm p:has(button[name="save_account_details"]) {
        display: flex !important;
        flex-direction: column !important;
        /* Apila elementos ocultos */
        align-items: center !important;
        /* Centra todo el contenido */
        justify-content: center !important;
        width: 100% !important;
        float: none !important;
        border: none !important;
        padding-left: 0 !important;
    }

    /* 2. Ajuste del botón para que no flote y se centre */
    .woocommerce-account .woocommerce-EditAccountForm .button[name="save_account_details"] {
        display: block !important;
        margin: 20px 0 !important;
        /* Centrado por el contenedor flex de arriba */
        width: 100% !important;
        max-width: 280px !important;
        float: none !important;
        /* Elimina cualquier empuje a la derecha */
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }
}

/* ==========================================================================
   PASO 21.7: AJUSTE DE ALTURA EXCLUSIVO "MI CUENTA" (SOLO MÓVIL)
   ========================================================================== */

@media (max-width: 767px) {

    /* Usamos la clase específica de la página de cuenta para no mover lo demás */
    .woocommerce-account .woocommerce {
        margin-top: 10px !important;
        /* Ajusta este valor según necesites bajarlo */
    }
}

/* 3. Limpieza del párrafo informativo (Sin quitar nada, solo quitando la barra) */
.woocommerce-account .woocommerce-MyAccount-content p:first-of-type {
    border-left: none !important;
    padding-left: 0 !important;
    margin-bottom: 60px !important;
}

/* ==========================================================================
   PASO 22.1: AJUSTES EN DIRECCIÓNES EN MI CUENTA >>Revisado<<
   ========================================================================== */

/* Cambiamos la fuente de los títulos H2/H3 en la sección de direcciones */
/* Cambiar el color del título de Dirección de Facturación */
.woocommerce-Address-title h2, 
.woocommerce-column--billing-address .woocommerce-Address-title h3 {
    color: var(--color-charcoal) !important;
}

/* Estilo de los enlaces "Añadir" o "Editar" direción*/
.woocommerce-account .edit {
    font-size: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: underline !important;
    color: var(--color-gris-titulos) !important;
    float: none !important;
    display: block;
    margin-top: 15px;
	padding-bottom: 15px;
}

/* ==========================================================================
   PASO 22.5: FORZAR EXPANSIÓN DE HIJOS EN EL CONTENEDOR FLEX
   ========================================================================== */

/* Esto obliga a los bloques de dirección a estirarse al 100% del área disponible */
.woocommerce-account .u-columns.addresses>* {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Aseguramos que el contenido interno (address) también sepa que debe ser ancho */
.woocommerce-account address {
    display: block !important;
    width: 100% !important;
}



/* ==========================================================================
   PASO 26: AVISO PEDIDOS VACÍOS - ESTILO MINIMALISTA (SIN BORDES)
   ========================================================================== */

/* 1. Contenedor principal: Centrado y totalmente limpio (sin bordes ni fondos) */
.woocommerce-account .woocommerce-info {
    border: none !important;
    /* Eliminamos el borde */
    background-color: transparent !important;
    /* Fondo transparente */
    color: var(--color-charcoal) !important;
    padding: 0px 0 !important;
    /* Más espacio vertical para que respire */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 30px !important;
    /* Espacio entre icono, texto y botón */
    box-shadow: none !important;
    /* Por si el tema tiene sombra */
}

/* 2. El Icono Grande y Sutil (CAMBIA EL 'content' AQUÍ) */
.woocommerce-account .woocommerce-info::before {
    /* * --- TABLA DE OPCIONES ---
     * ○ : Círculo Fino (vacío, zen)
     * ø : Círculo Tachado (arte, ruptura)
     * ◻ : Cuadrado Fino (marco, lienzo)
     * ◇ : Rombo Fino (joya, abstracto)
     * — : Línea Larga Em-dash (minimalismo puro)
     * ✕ : Aspa Minimalista (sutil)
     * * Simplemente copia y pega el símbolo que más te guste entre las comillas.
     */
    content: "◇" !important;
    /* Mi recomendación actual: el círculo fino */

    font-family: serif !important;
    /* Usamos serif para trazos más finos */
    font-size: 10rem !important;
    /* Aún más grande para que no parezca error */
    font-weight: 100 !important;
    /* Trazo extra-fino */
    color: #e0e0e0 !important;
    /* Gris muy pálido, casi imperceptible */
    margin: 0 !important;
    display: block !important;
    position: static !important;
    /* Anula el icono por defecto */
    line-height: 1 !important;
}

/* 3. Estilo del texto del mensaje */
.woocommerce-account .woocommerce-info {
    font-family: var(--font-sans) !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.5px !important;
    line-height: 1.6 !important;
}

/* 4. BOTÓN EXPLORAR: En una sola línea, negro y minimalista */
.woocommerce-account .woocommerce-info .button {
    float: none !important;
    display: inline-block !important;
    white-space: nowrap !important;
    /* Fuerza una sola línea */
    background-color: var(--color-charcoal) !important;
    color: #fff !important;
    padding: 16px 45px !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    border: none !important;
    transition: background-color 0.3s ease;
    margin: 0 !important;
    border-radius: 4px !important;
}

.woocommerce-account .woocommerce-info .button:hover {
    background-color: #333 !important;
}

/* ==========================================================================
   PASO 27: ALINEACIÓN Y CENTRADO DE COLUMNAS pedido
   ========================================================================== */

/* 1. Centramos verticalmente todo el contenido de las celdas */
.woocommerce-orders-table__cell {
    vertical-align: middle !important;
    text-align: left;
    /* Mantenemos el texto a la izquierda para lectura fluida */
}

/* 2. Ajuste específico para el Número de Pedido (#) */
/* Eliminamos cualquier padding superior extra que pueda tener el link interno */
.woocommerce-orders-table__cell-order-number a {
    display: inline-block;
    line-height: 1 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* 3. Centrado del Botón "VER" */
/* Aseguramos que el botón no tenga floats y se alinee al centro de su celda */
.woocommerce-orders-table__cell-order-actions {
    text-align: center !important;
    /* El botón suele ir mejor alineado a la derecha en tablas */
    vertical-align: middle !important;
}

.woocommerce-orders-table__cell-order-actions .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    background-color: var(--color-charcoal) !important;
    color: #fff !important;
}

/* 4. Si prefieres que el botón esté físicamente en el centro de la columna: */
/* Cambia 'right' por 'center' en la regla anterior si ese es tu gusto visual */

/* ==========================================================================
   PASO 28: ALINEAR BLOQUE DE CORREO (ICONO + TEXTO)
   ========================================================================== */

.woocommerce-customer-details--email {
    display: flex !important;
    align-items: center !important;
    /* Centra verticalmente sobre y texto */
    justify-content: flex-start !important;
    gap: 15px !important;
    /* Espacio exacto entre el sobre y el texto */
    padding-left: 0 !important;
    margin-top: 10px !important;
    border: none !important;
}

/* Forzamos al icono a comportarse como un elemento flexible */
.woocommerce-customer-details--email::before {
    position: static !important;
    /* Quitamos el posicionamiento absoluto que causa el encimado */
    margin: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
    transform: none !important;
    /* Quitamos traslaciones viejas */
}

/* ==========================================================================
   PASO 29: BORDES REFORZADOS EN TABLET (EVITAR CORTE)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    /* Aplicamos un borde más grueso a las tablas para forzar el renderizado */
    .woocommerce-account table.shop_table,
    .woocommerce-customer-details address {
        border: 3px solid #eee !important;
        /* Borde exterior reforzado */
        border-collapse: separate !important;
    }

}

/* ==========================================================================
   PASO 30.1: ESPACIO SUPERIOR EN MÓVIL (PÁGINA DE PEDIDO)
   ========================================================================== */

@media (max-width: 767px) {

    /* Atacamos el contenedor principal que muestra el inspector */
    .woocommerce-order,
    .woocommerce-account .woocommerce {
        padding-top: 140px !important;
        /* Aumentamos el margen para librar el logo y menú */
        display: block !important;
        clear: both !important;
    }

    /* Aseguramos que el main-site no tenga un margen negativo que lo suba */
    #primary.site-main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 1. Forzamos que cada dato ocupe su propia línea */
    .woocommerce-order-overview.woocommerce-thankyou-order-details {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        /* Espacio entre cada renglón de información */
        padding: 0 !important;
        border: none !important;
    }

    .woocommerce-order-overview li {
        width: 100% !important;
        border: none !important;
        /* Quitamos bordes laterales que ensucian */
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
        /* Alineación limpia a la izquierda */
        float: none !important;
    }

    /* 2. Estilizamos las etiquetas (NÚMERO DE PEDIDO, FECHA, etc.) */
    .woocommerce-order-overview li strong {
        display: block !important;
        /* El valor va debajo de la etiqueta */
        font-size: 1.1rem !important;
        margin-top: 5px !important;
    }

    /* ==========================================================================
   PASO 30.4: ENGROSAR BORDE DEL RESUMEN SUPERIOR Y Titulo Serif (SOLO MÓVIL)
   ========================================================================== */


    /* Atacamos el contenedor de la lista de resumen del pedido */
    .woocommerce-order-overview.woocommerce-thankyou-order-details {
        border: 2px solid #eee !important;
        /* Grosor aumentado */
        padding: 20px !important;
        /* Espacio interno para que el texto no toque el borde */
        list-style: none !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    /* Aplicamos el borde grueso al contenedor de la tabla de productos */
    .woocommerce-order-details table.shop_table {
        border: 2px solid #eee !important;
        border-collapse: separate !important;
        /* Evita que los bordes internos colapsen con el marco */
        border-spacing: 0 !important;
        display: table !important;
        /* Asegura que mantenga su comportamiento de tabla */
        width: 100% !important;
    }

    /* Opcional: Si quieres que la primera y última celda no peguen con el borde */
    .woocommerce-order-details table.shop_table td,
    .woocommerce-order-details table.shop_table th {
        padding: 15px !important;
    }

    /* Aplicamos la variable sans al título de la sección de detalles */
    .woocommerce-order-details .woocommerce-order-details__title,
    .woocommerce-customer-details .woocommerce-column__title {
        font-family: var(--font-sans) !important;
        font-weight: 400 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        font-size: 1.1rem !important;
        margin-bottom: 20px !important;
        margin-top: 40px !important;
        display: block !important;
    }
}

/* ==========================================================================
   PASO 35.5: RECONSTRUCCIÓN TOTAL DE BIENVENIDA (SOLO MÓVIL/ESCRITORIO)
   ========================================================================== */
.woocommerce-MyAccount-content p:first-child {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* 2. Hacemos que el nombre del usuario (strong) sea el nuevo título */
.woocommerce-MyAccount-content p:first-child strong {
    display: block !important;
    color: #2d2d2d !important;
    /* El color #2D2D2D que buscábamos */
    font-size: 1.2rem !important;
    font-family: var(--font-sans) !important;
    line-height: 1.2 !important;
    visibility: visible !important;
    margin-bottom: 15px !important;
}

/* Agregamos el "Hola" antes del nombre */
.woocommerce-MyAccount-content p:first-child strong::before {
    content: "Hola " !important;
    font-weight: 400 !important;
}

/* 3. El enlace de cerrar sesión se convierte en la segunda línea */
.woocommerce-MyAccount-content p:first-child a {
    display: block !important;
    visibility: visible !important;
    font-size: 0.9rem !important;
    color: #6c6c6c !important;
    /* Gris suave */
    font-family: var(--font-sans) !important;
    text-decoration: underline !important;
    line-height: 1.5 !important;
}

/* Personalizamos el texto del enlace para que incluya el paréntesis */
.woocommerce-MyAccount-content p:first-child a::before {
    content: "(¿No eres tú? " !important;
}

.woocommerce-MyAccount-content p:first-child a::after {
    content: ")" !important;
}


/* ==========================================================================
   PASO 36: UNIFICACIÓN Y CENTRADO ABSOLUTO DEL (LOGIN/REGISTRO) Del sitio
   ========================================================================== */

/* 1. Reset del contenedor padre SOLO si existe el formulario de login */
.woocommerce-account:has(#customer_login) .woocommerce {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* 2. Liberamos el contenido SOLO cuando las tablas de acceso están presentes */
.woocommerce-account:has(#customer_login) .woocommerce-MyAccount-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Refuerzo por si tu navegador no soporta :has (Navegadores antiguos) */
#customer_login {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. Centrado real del bloque de las dos tablas */
#customer_login {
    display: flex !important;
    justify-content: center !important;
    /* Centrado horizontal real */
    align-items: flex-start !important;
    gap: 80px !important;
    /* Espacio entre columnas */
    max-width: 1100px !important;
    /* Alineado con el ancho de tu header */
    margin: 60px auto !important;
    /* Centra el bloque en la página */
    padding: 0 20px !important;
}

/* 4. Estilo de Títulos (Identidad Teresa Espinosa Art) */
#customer_login h2 {
    font-family: var(--font-sans) !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    font-size: 1.4rem !important;
    text-align: center !important;
    color: var(--color-charcoal) !important;
    border-bottom: 1px solid #eee !important;
    padding-bottom: 15px !important;
    margin-bottom: 30px !important;
}

/* 5. Estilo de Botones (Fondo Charcoal) */
#customer_login .woocommerce-button {
    background-color: var(--color-charcoal) !important;
    color: #ffffff !important;
    font-family: var(--font-sans) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 16px 30px !important;
    border: none !important;
    border-radius: 4 !important;
    width: 100% !important;
    /* Botones consistentes */
    transition: opacity 0.3s ease !important;
}

#customer_login .woocommerce-button:hover {
    opacity: 0.8 !important;
}

/* 6. Estilo de Inputs Minimalistas */
#customer_login input.input-text {
    border: 1px solid #e0e0e0 !important;
    padding: 12px !important;
    border-radius: 0 !important;
    font-family: var(--font-sans) !important;
}

/* 7. Optimización para Móvil */
@media (max-width: 767px) {
    #customer_login {
        flex-direction: column !important;
        gap: 50px !important;
        margin-top: -170px !important;
    }

    .u-column1,
    .u-column2 {
        width: 100% !important;
    }
}

/* ==========================================================================
   PASO 37: VISTA DE TABLET - UNA SOLA COLUMNA ANCHA Y CENTRADA
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    /* Configuramos el contenedor para apilar y centrar los elementos */
    #customer_login {
        flex-direction: column !important;
        align-items: center !important;
        /* Centrado horizontal de los hijos */
        max-width: 100% !important;
        margin: 0 auto !important;
        gap: 60px !important;
        /* Espacio elegante entre Acceder y Registrarse */
        margin-top: -60px !important;
    }

    /* Ajustamos las tablas para que sean anchas pero no toquen los bordes */
    .u-column1,
    .u-column2 {
        width: 85% !important;
        /* Ancho prominente en tablet */
        max-width: 600px !important;
        /* Evita que se estiren demasiado en horizontal */
        float: none !important;
        margin: 0 auto !important;
        /* Refuerzo de centrado */
    }

    /* Alineamos los títulos al centro para mantener la simetría de la columna */
    #customer_login h2 {
        text-align: center !important;
    }
}

/* ==========================================================================
   PASO 38: VISTA DE MÓVIL - OTRAS MODIFICACIONES 
   ========================================================================== */
   
/* Ajuste de margen superior solo para móvil en la páginas ID 119,22 y 24 */
@media (max-width: 767px) {
	.page-id-119 #primary,
	.page-id-22 #primary,
    .page-id-24 #primary, 
    .page-id-24 .site-content,
    .page-id-24 #content {
        margin-top: 80px !important; /* Ajusta este valor según la altura de tu header */
    }
}   


/* ==========================================================================
   PASO 39: HOME - UNIFICAR ESTILO DEL BOTON DEL HERO HEADER 
   ========================================================================== */

/* Unificar el botón del Hero con el RESTO DEL SITIO */
.btn-primary.button.alt {
    background-color: #919191 !important;
	opacity: 0.85; /* 85% de opacidad global */
    color: #fff !important;
    padding: 12px 32px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 4px !important; /* El redondeo sutil del carrito */
    border: none !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
/* La transición es clave para que sea "suave" */
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease !important;
}

/* Efecto Rollover al color Cobre */
.btn-primary.button.alt:hover {
    /* Color cobre extraído de tu imagen de producto */
    background-color: var(--color-cobre) !important; 
/*     transform: translateY(-2px); */
    box-shadow: 0 4px 12px rgba(209, 142, 108, 0.3); /* Sombra sutil del mismo tono */
}

/* Animación de la flecha */
.btn-primary.button.alt svg {
    transition: transform 0.3s ease;
}

.btn-primary.button.alt:hover svg {
    transform: translateX(5px);
}

/* ==========================================================================
   PASO 40: HOME - ESTILO DE LA LETRA CURSIVA EN EL HERO HEADER 
   ========================================================================== */
/* 1. Sans (La de tu sistema/Inter) */
.font-sans { font-family: 'Inter', sans-serif; font-style: italic; font-weight: 300; }

/* 2. Serif (Genérica del sistema) */
.font-serif { font-family: Georgia, serif; font-style: italic; }

/* 3. Elegante (Google Fonts) */
.font-elegant { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; }

/* 4. Firma (Google Fonts) */
.font-signature { 
    font-family: 'Monsieur La Doulaise', cursive; 
    font-weight: 400; 
    text-transform: none;
    letter-spacing: 0; /* Las firmas no llevan espaciado extra */
}

/* ==========================================================================
   PASO 41: HOME - CATEGORÍAS DINÁMICAS (LIMPIO & UNIFICADO)
   ========================================================================== */

.categories-section {
    padding: 100px 0;
    background-color: #ffffff;
}

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

.category-card {
    position: relative;
    text-align: center;
    display: block;
    text-decoration: none;
}

/* Contenedor de la imagen */
.category-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: visible; /* Vital para que el reflejo de FF se vea */
    margin-bottom: 25px;
    background-color: #f8f8f8;
}

/* La imagen dentro del wrap */
.category-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
    
    /* Reflejo Nativo (Chrome, Edge, Safari) */
    -webkit-box-reflect: below 2px linear-gradient(transparent, transparent 75%, rgba(255,255,255,0.2));
}

/* --- SOLUCIÓN ESPECÍFICA PARA FIREFOX --- */
/* Creamos una sombra de "apoyo" que simula el reflejo mate */
@-moz-document url-prefix() {
    .category-img-wrap::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 5%;
        width: 90%;
        height: 15px;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, transparent 80%);
        filter: blur(4px);
        opacity: 0;
        transition: opacity 0.6s ease, transform 0.6s ease;
        pointer-events: none;
    }

    .category-card:hover .category-img-wrap::after {
        opacity: 1;
        transform: translateY(10px); /* Sigue a la imagen cuando sube */
    }
}

/* --- EFECTOS HOVER GENERALES --- */
.category-card:hover .category-img-wrap img {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Títulos de Categoría */
.category-card h3 {
    margin-top: 40px; /* Espacio para el reflejo/sombra */
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #1a1a1a;
    font-weight: 500;
    transition: color 0.3s ease;
}

.category-card:hover h3 {
    color: #d18e6c; /* Color cobre al pasar el mouse */
}

/* --- RESPONSIVO --- */
@media (max-width: 992px) {
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
    .categories-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   TIENDA - HERO DE CATEGORÍA INTEGRADO (DESKTOP)
   ========================================================================== */

.category-hero-section {
    width: 100% !important;
    height: 600px !important; 
    display: block !important;
    position: relative !important;
    margin-top: -20px !important;
    z-index: 1 !important;
    opacity: 0.8 !important;
    background-color: #1a1a1a !important;
    overflow: hidden;
}

.cat-hero-bg {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-position: 50% 60% !important; 
}

.cat-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-end !important; /* Texto abajo */
    justify-content: center !important;
    z-index: 2 !important;
    padding-bottom: 60px !important; 
    box-sizing: border-box !important;
}

.cat-hero-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25em !important;
    margin: 0 !important; 
    text-shadow: 2px 2px 15px rgba(0,0,0,0.8) !important;
    text-align: center;
}

.cat-hero-subtitle {
    display: block !important;
    margin-top: 15px !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8) !important;
    text-align: center;
    font-size: 1.8rem !important;
}


/* ==========================================================================
   TIENDA - HERO DE CATEGORÍA INTEGRADO (MÓVIL)
   ========================================================================== */

@media (max-width: 768px) {
    .category-hero-section {
        /* Reducimos la altura para que se aprecie la rejilla de productos abajo */
        height: 300px !important; 
        
        /* Ajustamos el margen para móvil. 
           Si tu header móvil es más pequeño, reduce este número (ej: -60px) */
        margin-top: 60px !important; 
        
        margin-bottom: 30px !important;
    }

    .cat-hero-bg {
        /* En móvil el scroll suele ser más fluido que el fixed */
        background-attachment: scroll !important;
        background-position: center center !important;
    }

    .cat-hero-title {
        /* Tamaño de fuente más legible en pantallas pequeñas */
        font-size: 1.6rem !important;
        letter-spacing: 0.15em !important;
        padding: 0 20px !important; /* Evita que el texto toque los bordes */
    }

    .cat-hero-subtitle {
		/* Aquí aplicamos una reducción automática del 30% (0.7) */
        font-size: calc(var(--sub-size, 1.8rem) * 0.6) !important;
    }

    .cat-hero-overlay {
        /* Ajustamos el padding-bottom para móvil si es necesario subir el texto */
        padding-bottom: 80px !important;
    }
    
    .shop-main-container {
		margin-top: -40px !important; 
        padding-top: 0px !important;
    }
}
	





/* ==========================================================================
   PASO 44: HOME - HERO EFECTO CIRCULO DE CRISTAL ESMERILADO (backdrop-filter)
   ========================================================================== */
   
/* --- CONTENEDOR DEL CÍRCULO --- */
.hero-circle-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.hero-circle-shape {
    width: 840px; /* Ajusta según el tamaño deseado */
    height: 840px;
    background: rgba(255, 255, 255, 0.25); /* Blanco semi-transparente **** */
    backdrop-filter: blur(0px); /* Blur Efecto Glassmorphism **** */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.10);
    border: 3px solid rgba(255,255,255,0.2);
}

.hero-content {
    max-width: 95%;
    /* color: #1a1a1a !important; /* Texto oscuro para contraste */
}

/* Ocultar el overlay negro de fondo si el círculo está activo */
.overlay-hidden {
    background: rgba(0,0,0,0.05) !important;
}

	
/* RESPONSIVE: DE CÍRCULO TABLET*/
@media (max-width: 1024px) {
    .hero-circle-shape {
        width: 750px;
        height: 750px;
        padding: 30px;
    }
}

/* --- RESPONSIVE: DE CÍRCULO A RECTÁNGULO PARA MÓVIL --- */
@media (max-width: 768px) {
    .hero-circle-wrapper {
        padding: 0px; /* Margen para que la tarjeta no toque los bordes del cel */
    }

    .hero-circle-shape {
        /* 1. Cambiamos la forma */
        width: 100% !important;
        height: auto !important; /* Altura automática según el texto */
        min-height: 450px;
        border-radius: 0px !important; /* Rectángulo con bordes redondeados */
        
        /* 2. Ajustamos espacio interno */
        padding: 40px 25px !important;
        
        /* 3. Estética de cristal */
        background: rgba(255, 255, 255, 0.25) !important; /* Blanco semi-transparente en móvil **** */
        backdrop-filter: blur(0px); /* Blur en móvil  **** */
    }

    .hero-content {
        max-width: 100% !important;
    }

    /* Ajuste de los textos para que quepan mejor en el rectángulo móvil */
    .hero-title {
        font-size: 2.2rem !important; /* Reducimos un poco el título principal */
    }
    
    .italic {
        font-size: 1.8rem !important; /* Reducimos la cursiva */
    }
}
	
	/* --- CORRECCIÓN MANUSCRITA DESKTOP --- */

    /* Seleccionamos la clase 'italic' que es la que tiene la fuente manuscrita */
    .hero-content .italic {
        /* 1. Aumentamos el tamaño sutilmente */
        font-size: 3.2rem !important; 
		color: #a2baff !important; /* Texto claro para contraste */
        
        /* 2. Hacemos el trazo más pesado */
        font-weight: 600 !important; 
        
        /* 3. El truco clave: una sombra muy suave (text-shadow) 
           que crea un contorno invisible para que el blanco no se pierda */
        text-shadow: 1px 1px 0px rgba(0,0,0,0.8) !important;
        
        /* 4. Ajuste de espaciado */
        line-height: 1.5 !important;
        margin-top: 10px !important;
        display: block !important;
        
        /* 5. Si la fuente lo permite, forzamos un suavizado de bordes */
        -webkit-font-smoothing: antialiased;
	}
	
	/* --- CORRECCIÓN MANUSCRITA MÓVIL --- */
	@media (max-width: 768px) {
    /* Seleccionamos la clase 'italic' que es la que tiene la fuente manuscrita */
    .hero-content .italic {
        /* 1. Aumentamos el tamaño sutilmente */
        font-size: 2.5rem !important; 
		color: #a2baff !important; /* Texto claro para contraste */
        
        /* 2. Hacemos el trazo más pesado */
        font-weight: 600 !important; 
        
        /* 3. El truco clave: una sombra muy suave (text-shadow) 
           que crea un contorno invisible para que el blanco no se pierda */
        text-shadow: 1px 1px 0px rgba(0,0,0,0.8) !important;
        
        /* 4. Ajuste de espaciado */
        line-height: 1.2 !important;
        margin-top: 20px !important;
        display: block !important;
        
        /* 5. Si la fuente lo permite, forzamos un suavizado de bordes */
        -webkit-font-smoothing: antialiased;
    }

	
	/* --- CORRECCIÓN BOTÓN MÓVIL --- */
    .hero-btn-anchor .btn-primary.button.alt {
        /* Prohíbe que el texto salte de línea */
        white-space: nowrap !important;
        
        /* Ajustamos el ancho para que el botón crezca si es necesario */
        width: auto !important;
        min-width: 240px; /* Un ancho base sólido para móvil */
        
        /* Ajuste de padding para que el texto no toque los bordes */
        padding-left: 25px !important;
        padding-right: 25px !important;
        
        /* Centramos el contenido (texto + flecha) */
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        
        /* Reducción sutil de fuente si el nombre es muy largo */
        font-size: 0.9rem !important;
    }

    /* Aseguramos que el contenedor del botón no lo asfixie */
    .scale-up.delay-1000 {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
         HOME - SECCIÓN PROCESO Modificaciones ACF
   ========================================================================== */

.process-section {
    padding: 100px 0;
    background-color: #fdfdfd; /* Fondo muy claro */
}

.process-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.process-img-wrap {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.process-img-inner {
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.process-img-inner img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* El subtítulo rojo */
.process-label {
    color: #cc0000; /* El rojo que usas */
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 10px;
}

/* El título principal Serif */
.process-title {
    font-size: 2.5rem;
	    line-height: 1.25;
    margin-bottom: 30px;
}

.process-desc {
    color: #666; /* Gris de texto descriptivo */
    line-height: 1.8;
    margin-bottom: 20px;
}

/* El enlace con subrayado */
.link-underline {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-decoration: none;
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #1a1a1a;
    transition: all 0.3s ease;
}

.link-underline:hover {
    border-bottom-color: transparent;
    color: #cc0000;
}

/* Responsive Tablet Titulo */
@media (max-width: 1024px) {
    .process-title {
        font-size: 2rem;
    }
}

/* Responsive Móvil */
@media (max-width: 768px) {
    .process-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .process-title {
        font-size: 2rem;
    }
}

/* ==========================================================================
   PASO 46: SLIDESHOW ANIMADO DE BENEFICIOS (10 IMÁGENES / 5s)
   ========================================================================== */

/* 1. Contenedor principal que apila las imágenes */
.artwork-slideshow {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: 100%; /* Asegura que ocupe todo el contenedor con bordes redondeados */
    overflow: hidden;
}

/* 2. Estilo base para cada imagen de la secuencia */
.artwork-slideshow .slide-img {
    grid-area: 1 / 1 / 2 / 2; /* Todas las imágenes en la misma celda de grid */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para llenar el espacio sin deformar */
    
    /* Configuración de la animación */
    opacity: 0; /* Empiezan invisibles */
    animation: artworkFadeInOut 40s infinite ease-in-out; /* Duración total del ciclo */
    backface-visibility: hidden; /* Mejora el rendimiento de la animación */
    will-change: opacity, transform; /* Pista para el navegador */
}

/* 3. Definición de la animación: Fundido + Movimiento Suave */
@keyframes artworkFadeInOut {
    /* 0% a 2%: Transición de entrada (fundido + zoom suave) */
    0% {
        opacity: 0;
        transform: scale(1.15) translateX(10px); /* Empieza un poco más grande y desplazada */
    }
    2% {
        opacity: 1;
        transform: scale(1) translateX(0); /* Estado visible y natural */
    }
    /* 2% a 10%: Se mantiene totalmente visible (5 segundos) */
    10% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
    /* 10% a 12%: Transición de salida (fundido a negro/transparente) */
    15% {
        opacity: 0;
        transform: scale(1.02) translateX(-5px); /* Se aleja suavemente */
    }
    /* 12% a 100%: Permanece invisible hasta que vuelve a ciclar */
    100% {
        opacity: 0;
    }
}

/* 4. Retardos (Delays) para cada imagen (Crucial para la secuencia) */
/* Cada imagen empieza su 10% de visibilidad después de la anterior */
.artwork-slideshow .slide-img:nth-child(1)  { animation-delay: 0s; }
.artwork-slideshow .slide-img:nth-child(2)  { animation-delay: 4s; }
.artwork-slideshow .slide-img:nth-child(3)  { animation-delay: 8s; }
.artwork-slideshow .slide-img:nth-child(4)  { animation-delay: 12s; }
.artwork-slideshow .slide-img:nth-child(5)  { animation-delay: 16s; }
.artwork-slideshow .slide-img:nth-child(6)  { animation-delay: 20s; }
.artwork-slideshow .slide-img:nth-child(7)  { animation-delay: 24s; }
.artwork-slideshow .slide-img:nth-child(8)  { animation-delay: 28s; }
.artwork-slideshow .slide-img:nth-child(9)  { animation-delay: 32s; }
.artwork-slideshow .slide-img:nth-child(10) { animation-delay: 36s; }

/* 5. Mantenemos el estilo de "Obra de Arte" definido anteriormente */
.custom-artwork-display {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}



/* AJUSTE DE IMAGEN PARA TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
    
.benefits-section .container {
        /* Aumentamos el espacio interno lateral para que la imagen no toque el borde */
        padding-right: 0px !important; 
        padding-left: 0px !important;
    }

    .benefits-list-col {
        /* Le damos un poco más de aire a la lista */
        flex: 10 0 38% !important;
        max-width: 48% !important;
    }
	
	.benefits-img-col {
        /* Nos aseguramos de que la columna de la imagen respete ese espacio */
        margin-right: 0; 
        padding-right: 0px;
    }
	
	.custom-artwork-display {
    border-radius: 0px;
	}

}

/* ==========================================================================
   PASO 49: AJUSTE FINAL RESPONSIVE - FORZAR CONTENEDOR MÓVIL A 1:1
   ========================================================================= */

/* Limpieza de estados iniciales */
.show-on-mobile { display: none !important; }
.hide-on-mobile { display: grid !important; }

@media (max-width: 767px) {
    /* Ocultamos la de desktop y mostramos la de móvil */
    .hide-on-mobile { 
        display: none !important; 
    }
	
	.benefits-section .container {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
	
	.benefits-list-col {
        /* Le damos un poco más de aire a la lista */
        max-width: 90% !important;
    }
	
	/* ¡EL TRUCO MAESTRO!: Forzamos el marco cuadrado sobre el contenedor */
    .custom-artwork-display {
        width: 100%; /* Ocupa el ancho total del móvil (menos los 20px de padding) */
        
        /* OBLIGAMOS a que el marco sea cuadrado (1:1) */
        aspect-ratio: 1 / 1 !important; 
        
        /* Limpiamos estilos de desktop */
        height: auto !important; 
        border-radius: 0px;
        overflow: hidden;
    }
    
    .show-on-mobile { 
        display: grid !important; 
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
    }


}

/* Posicionamiento correcto del Newsletter */
.newsletter-section {
    clear: both; /* Fuerza a la sección a bajar después de elementos flotados */
    display: block;
    width: 100%;
    margin-top: 60px; /* Espacio estético entre la galería y el formulario */
    background-color: #f4f4f4; /* O el color gris que estás usando */
}

#newsletter-box {
    float: none; 
    margin: 0 auto;
}


/* ==========================================================================
                Mensaje de Producto Agotado/Sin Existencia
   ========================================================================= */

.mensaje-producto-agotado {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fdfdfd; /* Fondo casi blanco muy sutil */
    padding: 2rem 1.5rem;
    margin-bottom: 2.5rem;
    color: #1a1a1a;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: 1px solid #eeeeee; /* Borde muy fino en lugar de la barra */
}

/* El gráfico del Rombo (inspirado en tu imagen) */
.mensaje-producto-agotado::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 20px;
    border: 3px solid #d4d4d4; /* Color gris suave como el de la captura */
    transform: rotate(45deg); /* Crea el rombo */
    flex-shrink: 0;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .mensaje-producto-agotado {
        padding: 1.5rem 1rem;
        font-size: 0.8rem;
    }
    .mensaje-producto-agotado::before {
        width: 18px;
        height: 18px;
        margin-right: 15px;
		margin-left: 22px;
    }
}

/* ==========================================================================
   GALERÍA MASONRY - TERESA ESPINOSA ART (CONSOLIDADO FINAL)
   ========================================================================== */

/* 1. Contenedor y Estructura Base */
.gallery-section .masonry-grid {
    display: block !important;
    width: 100%;
    opacity: 1;
}

.masonry-item {
    float: left;
    width: 33.333%; /* 3 Columnas Desktop */
    padding: 15px;
    box-sizing: border-box;
    
    /* Estado inicial para animación (Scroll o Carga) */
    opacity: 0 !important;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    will-change: opacity, transform;
}

/* 2. Activación de Animación (Soporta .is-visible y .in-view) */
.masonry-item.is-visible,
.masonry-item.in-view {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}


/* ==========================================================================
   GALERÍA MASONRY - EFECTO HOVER (CAPTION TRASLÚCIDO)
   ========================================================================== */

/* 1. Preparar el contenedor de la obra */
.artwork-card {
    position: relative; /* Esencial para posicionar el caption */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
}

/* Efecto hover general de la tarjeta */
.artwork-card:hover {
    transform: translateY(-3px); /* Un pequeño desplazamiento hacia arriba */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* Imagen dentro de la tarjeta */
.artwork-card img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
}

/* Zoom sutil al pasar el mouse por la obra */
.artwork-card:hover img {
    transform: scale(1.10);
}

/* 2. El Caption de Info (Estado inicial: Oculto) */
.artwork-info.hover-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* Caja discreta transparente (rgba para opacidad del fondo) */
    background: rgba(255, 255, 255, 0.75); /* Fondo blanco traslúcido (ajusta a 0.7 o 0.9 según gustos) */
    
    /* Espaciado interno */
    padding: 30px 20px;
    box-sizing: border-box;
    
    /* Ocultar por defecto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Un pequeño brinco desde abajo */
    
    /* Transición suave */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
    z-index: 2;
}

/* 3. El Caption de Info (Estado al pasar el mouse por la obra) */
.artwork-card:hover .artwork-info.hover-caption {
    opacity: 1;
    visibility: visible;
    transform: translateY(0.1px); /* Esto Quito la raya */
}

/* Forzar visualización del título con la clase de JS para TouchScreen Movil y Tablet*/
.artwork-card.mobile-active .artwork-info.hover-caption {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0.1px) !important;
}

/* 4. Estilos de Tipografía (Discreta y Minimalista) */
.artwork-title {
    margin: 0;
    font-size: 0.9rem; /* Ajustar a 0.9rem si es necesario */
    color: #2D2D2D;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center; /* Alineación centrada como en tu referencia */
}

/* Ajuste opcional para autor si existe */
.artwork-author {
    display: block;
    font-size: 0.7rem;
    color: #666;
    text-transform: capitalize;
    margin-top: 3px;
    text-align: center;
}

/* Ajustes Responsive (Móvil) */
@media (max-width: 600px) {
    .artwork-info.hover-caption {
        padding: 30px 15px;
    }
    
    .artwork-title {
        font-size: 0.85rem;
    }
}

/* 4. Ajustes Responsive (Columnas y Espaciado) */

/* Tablet (Mantiene 3 columnas) */
@media (max-width: 1024px) {
    .masonry-item { 
        width: 33.333% !important; 
        padding: 10px; 
    }
}

/* Móvil (Cambia a 2 columnas) */
@media (max-width: 768px) {
    .masonry-item { 
        width: 50% !important; 
        padding: 8px;
    }
}

/* Móvil Pequeño (Mantiene 2 columnas pero ajusta texto) */
@media (max-width: 480px) {
    .masonry-item { 
        width: 50% !important; 
        padding: 5px;
    }
    
    .artwork-title {
        font-size: 0.85rem !important;
    }
}

/* ==========================================================================
   NEWSLETTER SECTION
   ========================================================================== */

.newsletter-section {
    position: relative;
    padding: 100px 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 450px;
}

/* Manejo del Fondo y Overlay */
.newsletter-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.newsletter-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Capa blanquecina para estilo elegante (o usa rgba(0,0,0,0.4) para oscuro) */
    background: rgba(255, 255, 255, 0.75); 
}

/* Contenido */
.newsletter-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    text-align: center;
}

.newsletter-icon {
    margin-bottom: 20px;
    color: #c5a47e; /* Un tono dorado/bronce acorde al arte */
}

.newsletter-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.newsletter-desc {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* Formulario Estilizado */
.newsletter-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-input {
    flex: 1;
    padding: 15px 20px;
    border: 1px solid #aeaeae;
    border-radius: 4px; /* Tu solicitud */
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
	color: #1a1a1a;
	text-align: center;
}

.newsletter-input:focus {
    border-color: #c59c1f;
}

.newsletter-btn {
    background: #1a1a1a;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 4px; /* Tu solicitud */
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.3s, transform 0.2s;
}

.newsletter-btn:hover {
    background: #333;
    transform: translateY(-2px);
}

.newsletter-title {
    /* Un pequeño ajuste de espaciado entre letras para el estilo serif */
    letter-spacing: -0.5px;
    /* Sombra muy sutil para despegar el texto del fondo si la imagen es muy clara */
    text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.newsletter-desc {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    /* Esto evita que las líneas de texto sean demasiado largas y cansen la vista */
}

/* Responsive */

@media (max-width: 768px) {
    .newsletter-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 450px !important; /* Altura suficiente para el formulario */
        padding: 60px 20px !important;
    }

    .newsletter-bg {
        height: 100% !important;
        width: 100% !important;
    }

    .newsletter-content {
        width: 100% !important;
        padding: 0 15px;
    }
	
	.newsletter-title {
        font-size: 1.8rem;
    }

    /* Ajuste para que el input y botón no se amontonen */
    .newsletter-form {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .newsletter-input {
        width: 100% !important;
        min-width: unset !important;
    }
}

/* ==========================================================================
   Navegación Estilo Flickr en Galería de Producto
   ========================================================================== */

/* Forzar la aparición de las flechas de navegación del slider */
.woocommerce-product-gallery .flex-direction-nav {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-product-gallery .flex-direction-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 99 !important;
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(255, 255, 255, 0.8) !important; /* Fondo sutil para las flechas */
    color: #000000 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
    transition: all 0.2s ease !important;
}

/* Posicionar flecha izquierda y derecha */
.woocommerce-product-gallery .flex-direction-nav a.flex-prev {
    left: 15px !important;
}

.woocommerce-product-gallery .flex-direction-nav a.flex-next {
    right: 15px !important;
}

/* Efecto hover elegante para la navegación */
.woocommerce-product-gallery .flex-direction-nav a:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Darle formato de cuadrícula limpia a las miniaturas restantes */
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 15px 0 0 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.woocommerce-product-gallery .flex-control-thumbs li {
    width: calc(25% - 8px) !important; /* 4 miniaturas por fila bien distribuidas */
    cursor: pointer !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li:hover img {
    opacity: 1 !important;
}