/* ============================================================
   MATETIC · CSS GLOBAL
   Base adaptada desde styles.css original
   ============================================================ */


/* ============================================================
   01 · FUENTES
   ============================================================ */

/* PP Kyoto · Medium */
@font-face {
    font-family: "PP Kyoto";
    src: url("../fonts/PPKyoto-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* PP Kyoto · Medium Italic */
@font-face {
    font-family: "PP Kyoto";
    src: url("../fonts/PPKyoto-MediumItalic.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Podkova · Variable */
@font-face {
    font-family: "Podkova";
    src: url("../fonts/Podkova.ttf") format("truetype");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

/* Whitney SSm */
@font-face {
    font-family: "Whitney SSm";
    src: url("../fonts/Whitney.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Pliant · Variable */
@font-face {
    font-family: "Pliant";
    src: url("../fonts/Pliant.ttf") format("truetype");
    font-weight: 200 800;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

/* Pliant · Variable Italic */
@font-face {
    font-family: "Pliant";
    src: url("../fonts/Pliant-Italic.ttf") format("truetype");
    font-weight: 200 800;
    font-stretch: 75% 125%;
    font-style: italic;
    font-display: swap;
}


/* ============================================================
   02 · VARIABLES GLOBALES MATETIC
   ============================================================ */

:root {

    /* Colores */
    --ink: #2c2820;
    --ink-soft: #4a4438;

    --cream: #fafaf8;
    --cream-dim: #efeeea;
    --sand: #d8d4cb;

    --bronze: #2c2820;
    --bronze-lt: #fafaf8;

    --line: rgba(44, 40, 32, 0.16);
    --line-light: rgba(250, 250, 248, 0.24);


    /* Tipografías */
    --title: "PP Kyoto", Georgia, "Times New Roman", serif;

    --accent: "Podkova", Georgia, serif;

    --sans: "Whitney SSm", "Pliant", "Helvetica Neue",
            Arial, sans-serif;

    --serif: "PP Kyoto", Georgia, serif;


    /* Layout */
    --pad: clamp(1.25rem, 5vw, 6rem);
    --maxw: 1500px;


    /* Movimiento */
    --ease: cubic-bezier(.22, .61, .36, 1);
}


/* ============================================================
   03 · BASE TIPOGRÁFICA GLOBAL
   ============================================================ */

/*
   NO hacemos aquí un reset agresivo.
   Elementor seguirá controlando su estructura.
*/

body {
    font-family: var(--sans);
    color: var(--ink);
    background-color: var(--cream);
    line-height: 1.6;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}


/* Títulos generales */
h1,
h2,
h3,
.elementor-heading-title {
    font-family: var(--title);
    font-weight: 500;
}


/* Texto normal */
p {
    font-family: var(--sans);
}


/* Utilidad original: eyebrow */
.eyebrow {
    font-family: var(--accent);
    font-weight: 500;
    font-size: 0.76rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.eyebrow.accent {
    color: var(--bronze);
}

/* ============================================================
   05 · ADAPTACIÓN ELEMENTOR
   Mantiene las clases originales de Matetic
   ============================================================ */


/* HERO · Título
   Original: .hero-title está directamente en el H1
   Elementor: la clase está en el wrapper del widget
*/
.hero-title .elementor-heading-title {
    font-family: var(--title) !important;
    font-weight: 500 !important;
    font-size: clamp(1.3rem, 2.4vw, 2.15rem) !important;
    line-height: 1.32 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: #f5f2ec !important;
    text-align: center !important;
    text-shadow: 0 1px 30px rgba(15,13,9,.55);
}


/* HERO · Texto */
.hero-text,
.hero-text p {
    font-family: var(--sans) !important;
    font-weight: 400 !important;
    font-size: clamp(.88rem, 1vw, 1rem) !important;
    line-height: 1.7 !important;
    letter-spacing: .01em !important;
    color: #f5f2ec !important;
    text-align: center !important;
}

.hero-text {
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
    opacity: .95;
    text-shadow: 0 1px 16px rgba(15,13,9,.5);
}


/* HERO · Botones */
.btn .elementor-button {
    font-family: var(--accent) !important;
    font-weight: 500 !important;
    font-size: .8rem !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;

    padding: 1rem 2.1rem !important;

    border: 1px solid var(--cream) !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: var(--cream) !important;

    transition:
        background .4s var(--ease),
        color .4s var(--ease),
        transform .4s var(--ease);
}

.btn .elementor-button:hover {
    background: var(--cream) !important;
    color: var(--ink) !important;
}


/* Contenedor de botones */
.hero-cta {
    display: flex;
    gap: 1rem;
    margin-top: 2.6rem;
    flex-wrap: wrap;
    justify-content: center;
}


/* ============================================================
   EDITORIAL · ADAPTACIÓN ELEMENTOR
   ============================================================ */

/* Eyebrow */
.editorial .eyebrow,
.editorial .eyebrow p {
    font-family: var(--accent) !important;
    font-weight: 500 !important;
    font-size: .76rem !important;
    letter-spacing: .3em !important;
    text-transform: uppercase !important;
}

.editorial .eyebrow.accent,
.editorial .eyebrow.accent p {
    color: var(--bronze) !important;
}


/* Cita editorial */
.editorial .quote,
.editorial .quote p {
    font-family: var(--serif) !important;
    font-weight: 500 !important;
    font-size: clamp(1.4rem, 2.8vw, 2.35rem) !important;
    line-height: 1.32 !important;
    text-align: center !important;
    color: var(--ink) !important;
}

.editorial .quote {
    max-width: 24ch;
    margin: 1.8rem auto 0;
}

.editorial .quote em {
    font-style: italic;
    color: var(--bronze);
}


/* ============================================================
   SECTION HEAD · ADAPTACIÓN ELEMENTOR
   ============================================================ */

/* Título H2 */
.section-head .elementor-heading-title {
    font-family: var(--title) !important;
    font-weight: 500 !important;
    font-size: clamp(1.8rem, 3.6vw, 3.4rem) !important;
    line-height: 1.12 !important;
    letter-spacing: .02em !important;
    color: var(--ink) !important;
}

/* Párrafo descriptivo */
.section-head .elementor-widget-text-editor,
.section-head .elementor-widget-text-editor p {
    font-family: var(--sans) !important;
    color: var(--ink-soft) !important;
    font-size: .98rem !important;
    line-height: 1.7 !important;
}

/* Mantener el eyebrow con su propia tipografía */
.section-head .eyebrow,
.section-head .eyebrow p {
    font-family: var(--accent) !important;
}



/* ============================================================
   04 · ESTRUCTURA GLOBAL DE SECCIONES
   Original Matetic
   ============================================================ */

/* ============================================================
   ESTRUCTURA GLOBAL MATETIC
   ============================================================ */

.mtc-section {
    padding: clamp(4.5rem, 11vh, 10rem) var(--pad);
    width: 100%;
}

.mtc-wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-left: auto;
    margin-right: auto;
}

.mtc-section-head {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
    text-align: center;
}

.mtc-section-head .eyebrow {
    display: block;
    margin-bottom: 1.3rem;
}

.mtc-section-head .elementor-heading-title {
    font-family: var(--title) !important;
    font-weight: 500 !important;
    font-size: clamp(1.55rem, 2.8vw, 2.5rem) !important;
    line-height: 1.04 !important;
    letter-spacing: .005em !important;
    color: var(--ink) !important;
    text-align: center !important;
}

.mtc-section-head .elementor-widget-text-editor,
.mtc-section-head .elementor-widget-text-editor p {
    font-family: var(--sans) !important;
    font-size: .98rem !important;
    line-height: 1.7 !important;
    text-align: center !important;
    color: var(--ink) !important;
}

/* ============================================================
   VINOS · GRID + TARJETAS + IMAGEN + ZOOM
   ============================================================ */

/* Contenedor de las 3 tarjetas */
.mtc-wines-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1.2rem, 2.5vw, 2.4rem);
}

/* Tarjeta individual */
.mtc-wine-card {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Marco de la imagen */
.mtc-wine-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden !important;
}

/* Widget imagen de Elementor */
.mtc-wine-frame .elementor-widget-image {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
}

/* Imagen */
.mtc-wine-frame .elementor-widget-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;

    transform: scale(1);
    transform-origin: center center;
    transition: transform .8s var(--ease) !important;
}

/* Zoom interno */
.mtc-wine-card:hover .mtc-wine-frame img {
    transform: scale(1.05);
}

/* Información inferior */
.mtc-wine-meta {
    width: 100%;
    padding-top: 1.4rem;
}

/* Nombre */
.mtc-wine-meta .elementor-heading-title {
    font-family: var(--title) !important;
    font-weight: 500 !important;
    font-size: 1.4rem !important;
    line-height: 1.1 !important;
    color: var(--ink) !important;
    margin: 0 0 .5rem !important;
}

/* Descripción */
.mtc-wine-meta .elementor-widget-text-editor,
.mtc-wine-meta .elementor-widget-text-editor p {
    font-family: var(--sans) !important;
    font-size: .92rem !important;
    line-height: 1.62 !important;
    color: var(--ink) !important;
    opacity: .7;
}

/* Tablet */
@media (max-width: 900px) {
    .mtc-wines-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Móvil */
@media (max-width: 600px) {
    .mtc-wines-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   RECONOCIMIENTOS · VINOS
   ============================================================ */

.mtc-accolades {
    width: 100%;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: clamp(3rem, 6vw, 5rem);
    padding: clamp(2rem, 4vw, 3rem) 0;

    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    /* Importante: conservar los 3 en horizontal */
    flex-wrap: nowrap !important;
}

.mtc-accolade {
    flex: 1 1 0;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;

    text-align: center;
}


/* Círculo de puntuación */
.mtc-score {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    flex: 0 0 76px !important;

    border-radius: 50% !important;
    border: 1px solid var(--line) !important;
    background: rgba(44, 40, 32, .06) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 auto !important;

    font-family: var(--serif) !important;
    color: var(--ink) !important;
}

/* Wrapper interno que crea Elementor */
.mtc-score .elementor-widget-container {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;
}

/* Número real */
.mtc-score p,
.mtc-score .elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;

    font-family: var(--serif) !important;
    font-size: 1.75rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    color: var(--ink) !important;
    text-align: center !important;
}



/* Texto de reconocimientos · PODKOVA */
.mtc-accolade .mtc-accolade-src,
.mtc-accolade .mtc-accolade-src .elementor-widget-container,
.mtc-accolade .mtc-accolade-src p {
    font-family: "Podkova", Georgia, serif !important;
    font-weight: 400 !important;
    font-size: .68rem !important;
    line-height: 1.5 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    text-align: center !important;
}

.mtc-accolade .mtc-accolade-src p {
    margin: 0 !important;
}

.mtc-accolade-src {
    opacity: .7;
}

/* Móvil: siguen siendo 3 columnas horizontales */
@media (max-width: 600px) {
    .mtc-accolades {
        gap: .6rem;
        justify-content: center;
    }

    .mtc-accolade {
        flex: 1 1 33.333%;
    }

    .mtc-score {
        width: 58px;
        height: 58px;
        min-width: 58px;
        min-height: 58px;
        font-size: 1.35rem !important;
    }

    .mtc-accolade-src,
    .mtc-accolade-src p {
        font-size: .52rem !important;
        letter-spacing: .10em !important;
    }
}

/* ============================================================
   BOTONES · TIPOGRAFÍA GLOBAL MATETIC
   ============================================================ */

.mtc-btn .elementor-button,
.mtc-btn .elementor-button-text {
    font-family: "Podkova", Georgia, serif !important;
    font-weight: 500 !important;
    font-size: .76rem !important;
    line-height: 1 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

/* Separación etiqueta/título en tarjetas de navegación */
.mtc-world-number {
    margin-bottom: 8px !important;
}
/* =========================================
   HEADER BLANCO - PAGINAS DE VINO
   ========================================= */

/* Logo */
body.tm-wine-page .tm-logo-white {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body.tm-wine-page .tm-logo-black {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Idioma */
body.tm-wine-page .tm-idioma,
body.tm-wine-page .tm-idioma *,
body.tm-wine-page .elementor-element-2dd5146,
body.tm-wine-page .elementor-element-2dd5146 *,
body.tm-wine-page .elementor-element-3067685,
body.tm-wine-page .elementor-element-3067685 *,
body.tm-wine-page .elementor-element-7516496,
body.tm-wine-page .elementor-element-7516496 * {
    color: #000 !important;
    fill: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

/* Reservas */
body.tm-wine-page .elementor-element-6806beb,
body.tm-wine-page .elementor-element-6806beb * {
    color: #000 !important;
    fill: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

/* Comprar Vinos */
body.tm-wine-page .elementor-element-f3fae83,
body.tm-wine-page .elementor-element-f3fae83 * {
    color: #000 !important;
    fill: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

/* Separador */
body.tm-wine-page .elementor-element-0d3ff2a,
body.tm-wine-page .elementor-element-0d3ff2a * {
    color: #000 !important;
    border-color: #000 !important;
    background-color: #000 !important;
}