/*
Theme Name: Entre Telas y Bordados
Theme URI: https://entretelasybordados.es/
Author: Codex
Description: Tema editorial de comercio electrónico para encajes, tules, bordados y tejidos especiales.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: entre-telas
*/

:root {
  --ink: #171716;
  --paper: #ffffff;
  --soft: #f4f2ed;
  --coral: #d85643;
  --coral-dark: #b84233;
  --sage: #a8b8a0;
  --line: #deddd8;
  --muted: #686865;
  --max: 1240px;
  --radius: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  margin: 0;
}
body.admin-bar .site-header { top: 32px; }
a { color: inherit; }
img { display: block; height: auto; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: 0; }
h1, h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: .98;
}

.skip-link { left: -9999px; position: absolute; }
.skip-link:focus { background: #fff; left: 16px; padding: 12px; top: 16px; z-index: 100; }
.announcement {
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 8px 18px;
  text-align: center;
  text-transform: uppercase;
}
.site-header {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-wrap {
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: auto 1fr auto;
  margin: 0 auto;
  max-width: var(--max);
  min-height: 76px;
  padding: 10px 24px;
}
.brand { align-items: center; display: flex; gap: 11px; text-decoration: none; }
.brand-symbol { height: 48px; object-fit: contain; width: 48px; }
.brand-wordmark { display: grid; line-height: 1; }
.brand-wordmark strong { font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.brand-wordmark span { color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .14em; margin-top: 5px; text-transform: uppercase; }
.main-nav { justify-self: center; }
.nav-menu { align-items: center; display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-menu a { font-size: 13px; font-weight: 700; text-decoration: none; }
.nav-menu a:hover { color: var(--coral); }
.menu-toggle { background: none; border: 0; display: none; font-size: 22px; padding: 8px; }
.header-actions { align-items: center; display: flex; gap: 16px; font-size: 12px; font-weight: 750; }
.header-actions a { text-decoration: none; }
.cart-link { border-bottom: 2px solid var(--coral); padding: 7px 0 5px; }
.cart-link span { background: var(--coral); border-radius: 50%; color: #fff; display: inline-grid; font-size: 10px; height: 20px; margin-left: 5px; place-items: center; width: 20px; }

.hero-commerce { color: #fff; height: min(790px, calc(100vh - 108px)); min-height: 620px; overflow: hidden; position: relative; }
.hero-commerce-media { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.hero-commerce-overlay { background: linear-gradient(90deg, rgba(17,17,16,.9) 0%, rgba(17,17,16,.58) 42%, rgba(17,17,16,.06) 76%); inset: 0; position: absolute; }
.hero-commerce-inner { margin: 0 auto; max-width: var(--max); padding: 12vh 24px 120px; position: relative; z-index: 2; }
.eyebrow { color: #fff; font-size: 11px; font-weight: 850; letter-spacing: .18em; margin-bottom: 20px; text-transform: uppercase; }
.eyebrow.dark { color: var(--coral); }
.hero-commerce h1 { font-size: clamp(58px, 8vw, 108px); max-width: 760px; }
.hero-lede { color: rgba(255,255,255,.82); font-size: 19px; max-width: 600px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 25px; margin-top: 34px; }
.button, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--coral);
  border: 1px solid var(--coral);
  border-radius: var(--radius);
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  justify-content: center;
  padding: 14px 22px;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.button:hover, .wp-block-button__link:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--coral-dark); border-color: var(--coral-dark); color: #fff; transform: translateY(-1px); }
.button.light { background: #fff; border-color: #fff; color: var(--ink); }
.text-link { align-items: center; color: #fff; display: inline-flex; font-size: 13px; font-weight: 800; gap: 10px; text-decoration: none; }
.text-link span { font-size: 21px; }
.dark-link { color: var(--ink); }
.hero-note { align-items: center; background: rgba(23,23,22,.88); bottom: 0; display: flex; font-size: 11px; font-weight: 700; gap: 18px; left: 0; letter-spacing: .09em; padding: 16px max(24px, calc((100vw - var(--max))/2 + 24px)); position: absolute; right: 0; text-transform: uppercase; z-index: 3; }
.hero-note span { background: var(--coral); border-radius: 50%; height: 5px; width: 5px; }

.inner { margin: 0 auto; max-width: var(--max); }
.commerce-band { padding: 104px 24px; }
.commerce-band.soft { background: var(--soft); }
.section-heading { align-items: end; display: grid; gap: 40px; grid-template-columns: 1fr minmax(280px, .55fr); margin-bottom: 48px; }
.section-heading.compact { align-items: center; }
.section-heading h2, .advice-title h2 { font-size: clamp(42px, 6vw, 74px); margin-bottom: 0; }
.section-heading > p { color: var(--muted); margin-bottom: 4px; max-width: 480px; }
.category-editorial { display: grid; gap: 14px; grid-template-columns: 1.45fr .8fr; grid-template-rows: repeat(2, minmax(210px, 1fr)); }
.category-editorial a { overflow: hidden; position: relative; text-decoration: none; }
.category-feature { grid-row: 1 / span 2; min-height: 590px; }
.category-feature::after { background: linear-gradient(0deg, rgba(0,0,0,.76), transparent 55%); content: ""; inset: 0; position: absolute; }
.category-feature img { height: 100%; object-fit: cover; position: absolute; width: 100%; transition: transform .5s ease; }
.category-feature:hover img { transform: scale(1.025); }
.category-copy, .category-block span { bottom: 0; color: #fff; display: grid; left: 0; padding: 30px; position: absolute; right: 0; z-index: 2; }
.category-copy small, .category-block small { font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.category-copy strong, .category-block strong { font-family: Georgia, serif; font-size: clamp(32px, 4vw, 54px); font-weight: 400; line-height: 1; margin: 8px 0 15px; }
.category-copy em, .category-block em { font-size: 12px; font-style: normal; font-weight: 750; text-transform: uppercase; }
.category-block { min-height: 288px; }
.category-block.coral { background: var(--coral); }
.category-block.ink { background: var(--ink); }
.category-block span { position: relative; }

.story-band { background: var(--ink); color: #fff; display: grid; grid-template-columns: 1.05fr .95fr; min-height: 660px; }
.story-media { min-height: 560px; overflow: hidden; }
.story-media img { height: 100%; object-fit: cover; width: 100%; }
.story-copy { align-self: center; max-width: 620px; padding: 80px clamp(40px, 7vw, 120px); }
.story-copy h2 { font-size: clamp(44px, 6vw, 74px); }
.story-copy > p:not(.eyebrow) { color: rgba(255,255,255,.67); font-size: 17px; margin-bottom: 32px; }
.advice-grid { display: grid; gap: 80px; grid-template-columns: .8fr 1.2fr; }
.advice-list article { border-top: 1px solid var(--line); display: grid; gap: 22px; grid-template-columns: 42px 1fr; padding: 24px 0; }
.advice-list article > span { color: var(--coral); font-size: 12px; font-weight: 800; }
.advice-list h3 { font-family: Georgia, serif; font-size: 27px; font-weight: 400; margin-bottom: 8px; }
.advice-list p { color: var(--muted); margin-bottom: 0; }
.conversion-band { align-items: center; background: var(--coral); color: #fff; display: flex; gap: 40px; justify-content: space-between; padding: 80px max(24px, calc((100vw - var(--max))/2 + 24px)); }
.conversion-band h2 { font-size: clamp(40px, 6vw, 70px); margin-bottom: 0; max-width: 820px; }

.site-footer { background: #0d0d0c; color: #fff; padding: 80px 24px 28px; }
.footer-wrap { display: grid; gap: 60px; grid-template-columns: 1.2fr .6fr; margin: 0 auto 70px; max-width: var(--max); }
.footer-kicker { color: var(--coral); font-size: 11px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.footer-brand h2 { font-size: clamp(38px, 5vw, 64px); margin: 16px 0 0; max-width: 760px; }
.footer-contact { border-left: 1px solid rgba(255,255,255,.2); padding-left: 32px; }
.footer-contact p { color: rgba(255,255,255,.58); }
.contact-pending { color: #fff; display: block; font-size: 13px; font-weight: 750; margin-top: 16px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.55); display: flex; font-size: 11px; justify-content: space-between; margin: 0 auto; max-width: var(--max); padding-top: 22px; }

.content-page, .shop-inner { margin: 0 auto; max-width: var(--max); padding: 70px 24px 100px; }
.content-page h1, .shop-inner > h1 { font-size: clamp(44px, 6vw, 76px); }
.shop-shell { background: var(--soft); min-height: 60vh; }
.woocommerce .woocommerce-breadcrumb { color: var(--muted); font-size: 12px; margin-bottom: 30px; }
.woocommerce ul.products { display: grid; gap: 26px 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { float: none; margin: 0; width: auto; }
.woocommerce ul.products li.product a img { aspect-ratio: 4/5; background: #eee; margin-bottom: 16px; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: Georgia, serif; font-size: 20px; font-weight: 400; padding: 0; }
.woocommerce ul.products li.product .price { color: var(--coral); font-size: 14px; font-weight: 800; }
.woocommerce span.onsale { background: var(--coral); border-radius: 0; font-size: 11px; min-height: auto; min-width: auto; padding: 4px 9px; }
.woocommerce div.product { display: grid; gap: 50px; grid-template-columns: 1fr 1fr; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { float: none; width: auto; }
.woocommerce div.product .product_title { font-family: Georgia, serif; font-size: clamp(38px, 5vw, 62px); font-weight: 400; }
.woocommerce div.product p.price { color: var(--coral); font-size: 24px; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--coral); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--coral); }

@media (max-width: 920px) {
  body.admin-bar .site-header { top: 46px; }
  .nav-wrap { grid-template-columns: 1fr auto auto; }
  .main-nav { justify-self: end; order: 2; }
  .menu-toggle { display: block; }
  .nav-menu { background: #fff; border-bottom: 1px solid var(--line); display: none; left: 0; padding: 22px 24px; position: absolute; right: 0; top: 76px; }
  .nav-menu.is-open { display: grid; }
  .header-actions { order: 3; }
  .hero-commerce-inner { padding-top: 100px; }
  .hero-commerce-overlay { background: linear-gradient(90deg, rgba(17,17,16,.88), rgba(17,17,16,.38)); }
  .section-heading, .story-band, .advice-grid, .footer-wrap { grid-template-columns: 1fr; }
  .story-copy { max-width: none; }
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .woocommerce div.product { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .announcement { font-size: 9px; }
  .brand-wordmark strong { font-size: 17px; }
  .brand-symbol { height: 42px; width: 42px; }
  .icon-link { display: none; }
  .nav-wrap { gap: 12px; padding: 8px 16px; }
  .hero-commerce { height: 680px; }
  .hero-commerce h1 { font-size: 54px; }
  .hero-commerce-inner { padding: 80px 18px 100px; }
  .hero-note { align-items: flex-start; flex-direction: column; gap: 5px; padding-left: 18px; }
  .hero-note span { display: none; }
  .commerce-band { padding: 74px 18px; }
  .category-editorial { grid-template-columns: 1fr; grid-template-rows: none; }
  .category-feature { grid-row: auto; min-height: 460px; }
  .category-block { min-height: 220px; }
  .story-media { min-height: 420px; }
  .story-copy { padding: 70px 20px; }
  .conversion-band { align-items: flex-start; flex-direction: column; padding: 68px 20px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .woocommerce ul.products { grid-template-columns: 1fr; }
}