/*
Theme Name: Emporio del Bebé
Author: Custom
Description: Tema seguro y personalizado para Emporio del Bebé
Version: 3.3
*/

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;1,300&family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --color-fondo: #F4F5F7;
    --color-fondo-blanco: #FFFFFF;
    --color-texto: #2C3034;
    --color-acento-suave: #E2E6EA;
    --color-salvia: #91A08D;
    --color-salvia-claro: #E6EBE4;
    --color-azul-fiordo: #DDE8ED;
    --color-malva: #E7D8DF;
    --color-amarillo-suave: #EEE8C8;
    --vichy-rgb: 145, 160, 141;
    --fuente-logo: 'Poppins', sans-serif; 
    --fuente-cuerpo: 'Figtree', sans-serif; 
}

body {
    background-color: var(--color-fondo);
    background-image: linear-gradient(90deg, rgba(var(--vichy-rgb), 0.055) 50%, transparent 50%), linear-gradient(rgba(var(--vichy-rgb), 0.055) 50%, transparent 50%);
    background-size: 20px 20px;
    color: var(--color-texto);
    font-family: var(--fuente-cuerpo);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-logo);
    font-weight: normal;
    color: var(--color-texto);
}

.site-header {
    background-color: transparent;
    padding: 20px;
    text-align: center;
}

* { box-sizing: border-box; }
a { color: inherit; }
.site-header { border-bottom: 1px solid var(--color-acento-suave); padding: 27px 20px; }
.site-header__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 30px; position: relative; }
.site-logo, .site-footer__logo { font-family: var(--fuente-logo); font-size: 1.55rem; font-weight: 500; letter-spacing: -0.04em; text-decoration: none; }
.site-logo--artisanal { display: block; line-height: 1; }
.site-navigation__list { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; justify-content: center; }
.site-navigation a { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.site-navigation a:hover, .site-footer a:hover { color: var(--color-salvia); }
.site-cart { align-items: center; color: var(--color-texto); display: inline-flex; height: 32px; justify-content: center; position: absolute; right: 0; text-decoration: none; top: 2px; width: 32px; }
.site-cart svg { fill: none; height: 23px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; width: 23px; }
.site-cart span { background: var(--color-texto); border-radius: 50%; color: #fff; font: 600 .62rem var(--fuente-cuerpo); min-width: 16px; padding: 1px 4px; position: absolute; right: -8px; text-align: center; top: -5px; }
.site-footer { border-top: 1px solid var(--color-acento-suave); padding: 48px 20px; text-align: center; }
.site-footer__inner { display: grid; gap: 12px; justify-items: center; }
.site-footer p, .site-footer small { margin: 0; opacity: .75; }
.site-footer > div > a:not(.site-footer__logo) { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 14px 20px; justify-content: center; }
.site-footer__links a { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

/* Vichy salvia/gris en todo el sitio; Empresas recibe una variante beige suave. */
body.emporio-page-empresas { --color-fondo: #F0ECE7; --color-acento-suave: #DED6CE; --vichy-rgb: 154, 142, 128; }

body.tax-product_cat h1.woocommerce-products-header__title.page-title,
body.tax-product_cat .woocommerce-products-header .page-title,
body.tax-product_cat .page-title { font-family: var(--fuente-logo) !important; font-size: clamp(1.8rem, 3vw, 2.7rem) !important; font-weight: 400 !important; letter-spacing: -0.04em !important; line-height: 1.1 !important; text-transform: lowercase !important; }
body.tax-product_cat h1.woocommerce-products-header__title.page-title::first-letter,
body.tax-product_cat .woocommerce-products-header .page-title::first-letter,
body.tax-product_cat .page-title::first-letter { text-transform: uppercase; }
.tax-product_cat.woocommerce-page ul.products li.product .button { background: var(--color-texto); border: 1px solid var(--color-texto); border-radius: 999px; color: #fff; display: block; font: 600 .78rem var(--fuente-cuerpo); letter-spacing: .07em; padding: 13px 16px; text-align: center; text-transform: uppercase; }
.tax-product_cat.woocommerce-page ul.products li.product .button:hover { background: var(--color-salvia); border-color: var(--color-salvia); }
.emporio-empty-category { background: rgba(255,255,255,.78); margin: 42px 0 70px; max-width: 680px; padding: clamp(38px, 6vw, 72px); text-align: center; }
.emporio-empty-category h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 400; line-height: 1.2; margin: 10px 0 16px; }
.emporio-empty-category p:not(.eyebrow) { line-height: 1.7; margin: 0 auto 25px; max-width: 500px; }
.emporio-empty-category .button { border-radius: 999px; }

/* Portada: vichy como marco y fotos reales como principal acento de color. */
.home-hero { background: var(--color-fondo-blanco); display: grid; gap: clamp(35px, 6vw, 80px); grid-template-columns: minmax(0, .9fr) minmax(300px, .8fr); margin: 0 auto; max-width: 1180px; padding: 46px clamp(20px, 5vw, 75px); }
.home-hero__content { align-self: center; max-width: 530px; }
.home-hero h1 { font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 400; line-height: 1.15; margin: 13px 0 20px; }
.home-hero p:not(.eyebrow), .home-story p:not(.eyebrow) { font-size: 1rem; font-weight: 300; margin: 0; max-width: 510px; }
.home-hero__image { aspect-ratio: 4 / 3; background: var(--color-fondo); margin: 0; overflow: hidden; }
.home-hero__image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.home-story { background: var(--color-fondo); border-top: 1px solid var(--color-acento-suave); display: grid; gap: clamp(35px, 7vw, 100px); grid-template-columns: minmax(260px, 1fr) minmax(240px, .7fr); padding: 88px max(20px, calc((100% - 1030px) / 2)); }
.home-story__gallery { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.home-story__gallery img { aspect-ratio: 4 / 5; display: block; height: 100%; object-fit: cover; object-position: center top; width: 100%; }
.home-story__content { align-self: center; }
.home-story h2 { font-size: clamp(1.7rem, 2.5vw, 2.3rem); font-weight: 400; line-height: 1.2; margin: 12px 0 16px; }
.text-link { border-bottom: 1px solid currentColor; display: inline-block; font-size: .88rem; font-weight: 600; letter-spacing: .04em; margin-top: 27px; padding-bottom: 3px; text-decoration: none; }
.home-categories { background: var(--color-fondo-blanco); display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0 max(20px, calc((100% - 1080px) / 2)); }
.home-category { align-content: center; color: var(--color-texto); display: grid; font: 500 clamp(1.05rem, 1.6vw, 1.35rem) var(--fuente-logo); gap: 13px; min-height: 170px; padding: 30px; text-decoration: none; }
.home-category + .home-category { border-left: 1px solid var(--color-acento-suave); }
.home-category span { color: var(--color-salvia); font: 600 .7rem var(--fuente-cuerpo); letter-spacing: .12em; }
.home-category:hover { color: var(--color-salvia); }

/* Páginas Nosotras y Contacto. */
.about-hero, .contact-hero { background: var(--color-fondo-blanco); margin: 0 auto; max-width: 960px; padding: 105px 20px; text-align: center; }
.about-hero > *, .contact-hero > * { margin-left: auto; margin-right: auto; max-width: 710px; }
.about-hero h1, .contact-hero h1 { font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 400; line-height: 1.15; margin-top: 12px; }
.about-hero p:not(.eyebrow), .contact-hero p:not(.eyebrow) { font-size: 1.05rem; font-weight: 300; line-height: 1.8; }
.about-people { background: var(--color-fondo); display: grid; gap: 70px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 85px max(20px, calc((100% - 1000px) / 2)); }
.about-person img, .about-person__placeholder { aspect-ratio: 4 / 5; background: var(--color-fondo-blanco); display: block; object-fit: cover; width: 100%; }
.about-person__placeholder { align-items: center; color: rgba(44,48,52,.55); display: flex; font-size: .78rem; justify-content: center; letter-spacing: .08em; text-transform: uppercase; }
.about-person > div:last-child { padding-top: 23px; }
.about-person h2 { font-size: 1.8rem; font-weight: 400; margin: 10px 0; }
.about-person p:not(.eyebrow) { font-weight: 300; margin: 0; }
.contact-options { background: var(--color-fondo); display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); padding: 1px max(20px, calc((100% - 1000px) / 2)); }
.contact-option { background: var(--color-fondo-blanco); color: var(--color-texto); display: grid; gap: 13px; min-height: 170px; padding: 34px; text-decoration: none; }
.contact-option span { color: var(--color-salvia); font-size: .75rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.contact-option strong { font: 400 clamp(1.05rem, 1.7vw, 1.35rem) var(--fuente-logo); overflow-wrap: anywhere; }
.contact-option:hover { background: var(--color-salvia-claro); }

.enterprise-hero { background: var(--color-fondo-blanco); display: grid; gap: clamp(35px, 6vw, 80px); grid-template-columns: minmax(0, .9fr) minmax(300px, .8fr); margin: 0 auto; max-width: 1180px; padding: 46px clamp(20px, 5vw, 75px); }
.enterprise-hero__content { align-self: center; max-width: 550px; }
.enterprise-hero h1 { font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 400; line-height: 1.15; margin: 13px 0 15px; }
.enterprise-hero p:not(.eyebrow), .enterprise-intro p:not(.eyebrow) { font-size: 1rem; font-weight: 300; }
.enterprise-hero__note { color: var(--color-salvia); font-size: 1.08rem !important; font-weight: 500 !important; margin: 0 0 16px; max-width: 410px; }
.enterprise-hero__image { aspect-ratio: 4 / 3; background: var(--color-fondo); margin: 0; overflow: hidden; }
.enterprise-hero__image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.enterprise-intro { background: var(--color-fondo-blanco); padding: 82px 20px; text-align: center; }
.enterprise-intro > * { margin-left: auto; margin-right: auto; max-width: 720px; }
.eyebrow { color: var(--color-salvia); font-size: .76rem; font-weight: 600; letter-spacing: .18em; margin: 0; text-transform: uppercase; }
.button { background: var(--color-salvia); border: 1px solid var(--color-salvia); border-radius: 2px; color: #fff; cursor: pointer; display: inline-block; font: 500 .85rem var(--fuente-cuerpo); letter-spacing: .07em; margin-top: 17px; padding: 14px 26px; text-decoration: none; text-transform: uppercase; }
.button:hover { background: transparent; color: var(--color-texto); }
.enterprise-gallery { background: #fff; display: grid; gap: 16px; grid-template-columns: 1.1fr .8fr 1.1fr; padding: 16px; }
.enterprise-gallery__image { align-items: center; background: var(--color-fondo); color: rgba(44,48,52,.55); display: flex; justify-content: center; min-height: 330px; overflow: hidden; }
.enterprise-gallery__image--2 { background: #e9e5df; min-height: 410px; }
.enterprise-gallery__image img { height: 100%; object-fit: cover; width: 100%; }
.enterprise-gallery__image span { border: 1px solid rgba(44,48,52,.2); font-size: .76rem; letter-spacing: .08em; padding: 10px 14px; text-transform: uppercase; }
.enterprise-intro h2, .enterprise-form h2 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.15; margin: 12px auto 18px; }
.enterprise-steps { background: var(--color-texto); color: #fff; padding: 68px max(20px, calc((100% - 1100px) / 2)); }
.enterprise-steps > h2 { color: #fff; font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 400; margin: 0 0 38px; text-align: center; }
.enterprise-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.enterprise-steps article { border-left: 1px solid rgba(255,255,255,.25); padding: 5px 32px 10px; }
.enterprise-steps article:first-child { border-left: 0; }
.enterprise-steps span { color: #c8d3c4; font-size: 1.05rem; font-weight: 600; letter-spacing: .12em; }
.enterprise-steps h3 { color: #fff; font-size: 1.5rem; margin: 23px 0 8px; }
.enterprise-steps p { color: rgba(255,255,255,.77); font-weight: 300; margin: 0; }
.enterprise-logos { background: var(--color-fondo-blanco); padding: 68px 20px; text-align: center; }
.enterprise-logos > div { align-items: center; display: flex; flex-wrap: wrap; gap: 35px 55px; justify-content: center; margin: 28px auto 0; max-width: 1000px; }
.enterprise-logos img { filter: grayscale(1); max-height: 50px; max-width: 140px; object-fit: contain; opacity: .72; }
.enterprise-form { background: var(--color-fondo); display: grid; gap: 75px; grid-template-columns: .8fr 1.2fr; padding: 95px max(20px, calc((100% - 1000px) / 2)); }
.enterprise-form__card { background: #fff; padding: 34px; }
.enterprise-form form { display: grid; gap: 16px; }
.enterprise-form label { display: grid; font-size: .84rem; font-weight: 600; gap: 6px; }
.enterprise-form input, .enterprise-form textarea { background: #fff; border: 1px solid var(--color-acento-suave); border-radius: 0; color: var(--color-texto); font: 400 1rem var(--fuente-cuerpo); padding: 11px; width: 100%; }
.enterprise-form textarea { resize: vertical; }
.enterprise-form .button { justify-self: start; }
.form-notice { border: 1px solid var(--color-acento-suave); margin: 0 0 20px; padding: 12px; }
.form-notice--success { background: var(--color-salvia-claro); }

@media (max-width: 720px) {
  .site-header__inner { flex-direction: column; }
  .site-navigation__list { gap: 14px; }
  .site-cart { right: 2px; top: 0; }
  .enterprise-hero { grid-template-columns: 1fr; padding: 60px 20px; }
  .enterprise-hero__content { text-align: center; }
  .enterprise-hero__note { margin-left: auto; margin-right: auto; }
  .enterprise-hero__image { margin: 0 auto; max-width: 520px; width: 100%; }
  .enterprise-intro { padding: 72px 20px; }
  .home-hero, .home-story { grid-template-columns: 1fr; padding: 60px 20px; }
  .home-hero__content { text-align: center; }
  .home-hero p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
  .home-hero__image { margin: 0 auto; max-width: 390px; width: 100%; }
  .home-story__gallery { max-width: 600px; }
  .home-categories { grid-template-columns: 1fr; }
  .home-category { min-height: 112px; }
  .home-category + .home-category { border-left: 0; border-top: 1px solid var(--color-acento-suave); }
  .enterprise-gallery, .enterprise-steps__grid, .enterprise-form { grid-template-columns: 1fr; }
  .enterprise-gallery__image, .enterprise-gallery__image--two { min-height: 230px; }
  .enterprise-steps { padding: 50px 20px; }
  .enterprise-steps article, .enterprise-steps article:first-child { border-left: 0; border-top: 1px solid rgba(255,255,255,.25); padding: 24px 0; }
  .enterprise-steps article:first-child { border-top: 0; padding-top: 0; }
  .enterprise-form { gap: 30px; padding: 65px 20px; }
  .about-hero, .contact-hero { padding: 70px 20px; }
  .about-people, .contact-options { grid-template-columns: 1fr; padding: 60px 20px; }
}

@media (max-width: 430px) {
  .site-header { padding-left: 12px; padding-right: 12px; }
  .site-header__inner { gap: 23px; }
  .site-logo--artisanal > span { font-size: 2.2rem !important; }
  .site-cart { right: 0; top: -2px; }
}

/* Ficha de producto: estos estilos no afectan carrito, checkout ni confirmación. */
.single-product .woocommerce-content { background: var(--color-fondo); max-width: 1160px !important; padding: 66px clamp(20px, 4vw, 56px) 86px !important; }
.single-product div.product { align-items: start; display: grid; gap: clamp(28px, 5vw, 70px); grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); }
.single-product div.product div.images, .single-product div.product div.summary { float: none !important; margin: 0 !important; width: auto !important; }
.single-product div.product div.images { align-self: start; background: #fff; padding: clamp(12px, 2vw, 28px); }
.single-product div.product div.images img { display: block; height: auto; mix-blend-mode: multiply; width: 100%; }
.single-product div.product .product_title { font-size: clamp(1.9rem, 2.8vw, 2.65rem); font-weight: 400; line-height: 1.17; margin: 3px 0 16px; }
.single-product div.product p.price { color: var(--color-texto); font: 500 1.25rem var(--fuente-logo); margin: 0 0 27px; }
.single-product div.product .woocommerce-product-details__short-description { border-top: 1px solid var(--color-acento-suave); font-size: 1.02rem; line-height: 1.75; padding-top: 22px; }
.single-product div.product form.cart .variations { border: 0; border-collapse: separate; border-spacing: 0 13px; margin: 5px 0 18px; width: 100%; }
.single-product div.product form.cart .variations th, .single-product div.product form.cart .variations td { display: block; padding: 0; text-align: left; }
.single-product div.product form.cart .variations th label { font: 600 .78rem var(--fuente-cuerpo); letter-spacing: .1em; text-transform: uppercase; }
.single-product div.product form.cart .variations select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%232C3034' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 15px center; border: 1px solid var(--color-texto); border-radius: 24px; color: var(--color-texto); font: 500 .92rem var(--fuente-cuerpo); margin-top: 8px; min-height: 45px; padding: 0 42px 0 17px; width: 100%; }
.single-product div.product form.cart .variations .reset_variations { color: var(--color-texto); font-size: .78rem; margin-left: 8px; }
.single-product div.product form.cart { margin: 28px 0 32px; }
.single-product div.product form.cart:not(.variations_form), .single-product div.product .variations_form .woocommerce-variation-add-to-cart { align-items: stretch; display: flex; gap: 8px; }
.single-product div.product form.cart .quantity .qty { border: 1px solid var(--color-acento-suave); font: 500 1rem var(--fuente-cuerpo); height: 48px; width: 58px; }
.single-product div.product form.cart .single_add_to_cart_button { background: var(--color-texto); border: 1px solid var(--color-texto); border-radius: 999px; color: #fff; flex: 1; font: 600 .82rem var(--fuente-cuerpo); letter-spacing: .08em; min-height: 54px; padding: 0 30px; text-transform: uppercase; }
.single-product div.product form.cart .single_add_to_cart_button:hover { background: var(--color-salvia); border-color: var(--color-salvia); color: #fff; }
.single-product div.product .product_meta { border-top: 1px solid var(--color-acento-suave); color: rgba(44,48,52,.75); font-size: .85rem; line-height: 1.8; padding-top: 18px; }
.single-product div.product .product_meta a { color: var(--color-texto); }
.single-product .woocommerce-message { background: var(--color-salvia-claro); border-top-color: var(--color-salvia); box-shadow: none; color: var(--color-texto); margin-bottom: 32px; }
.single-product .woocommerce-message::before { color: var(--color-salvia); }
.single-product .woocommerce-message .button { background: transparent; border: 1px solid var(--color-salvia); color: var(--color-texto); margin: -7px 0 0; padding: 9px 14px; }
.single-product .related { grid-column: 1 / -1; }
.product-benefits { border-bottom: 1px solid var(--color-acento-suave); border-top: 1px solid var(--color-acento-suave); display: grid; gap: 8px; list-style: none; margin: 25px 0; padding: 17px 0; }
.product-benefits li { align-items: center; display: flex; font-size: .84rem; gap: 10px; }
.product-benefits li::before { border: 1px solid var(--color-salvia); border-radius: 50%; color: var(--color-salvia); content: '✓'; display: inline-grid; font-size: .68rem; font-weight: 600; height: 17px; place-items: center; width: 17px; }
.product-description-accordion { border-bottom: 1px solid var(--color-acento-suave); margin: 0; }
.product-description-accordion summary { align-items: center; cursor: pointer; display: flex; font: 500 1rem var(--fuente-logo); justify-content: space-between; list-style: none; padding: 18px 0; }
.product-description-accordion summary::-webkit-details-marker { display: none; }
.product-description-accordion summary span { color: var(--color-salvia); font: 300 1.5rem var(--fuente-cuerpo); }
.product-description-accordion[open] summary span { transform: rotate(45deg); }
.product-description-accordion__content { font-size: .92rem; line-height: 1.7; padding: 0 0 20px; }
@media (max-width: 720px) { .single-product div.product { display: block; } .single-product div.product div.summary { margin-top: 30px !important; } }