/*
Theme Name: La Caetra
Theme URI: https://lacaetra.com
Author: La Caetra
Description: Tema clásico (sin bloques ni editor de sitio) para La Caetra: Retrocultura. Paleta verde, crema y dorado. Compatible con WooCommerce y con el Editor Clásico. Sin fuentes ni scripts externos.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lacaetra
*/

/* ---------- Variables ---------- */
:root {
  --verde: #0F2B1E;
  --verde-2: #173D29;
  --crema: #F4EEE0;
  --crema-2: #EAE2CF;
  --dorado: #C9A245;
  --dorado-oscuro: #8A7226;
  --blanco: #FFFFFF;
  --texto-suave: #4F5F55;
  --linea: rgba(15, 43, 30, 0.15);
  --radio: 8px;
  --ancho: 1100px;
  --ancho-texto: 720px;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--verde);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--verde); text-decoration-color: var(--dorado); text-underline-offset: 3px; }
a:hover { color: var(--dorado-oscuro); }
:focus-visible { outline: 3px solid var(--dorado); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.25; font-weight: 700; margin: 1.6em 0 0.5em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-top: 0; }
h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); }
h3 { font-size: 1.25rem; }
p, ul, ol, blockquote, figure, table { margin: 0 0 1.2em; }
blockquote {
  border-left: 4px solid var(--dorado);
  padding: 0.2em 0 0.2em 1.2em;
  font-family: var(--serif);
  font-style: italic;
}
hr { border: 0; border-top: 1px solid var(--linea); margin: 2em 0; }
.screen-reader-text, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--dorado); color: var(--verde);
  padding: 8px 14px; border-radius: var(--radio);
}
.wrap { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.prose { max-width: var(--ancho-texto); }

/* Alineaciones y pies del Editor Clásico */
.alignleft { float: left; margin: 0.3em 1.2em 1em 0; }
.alignright { float: right; margin: 0.3em 0 1em 1.2em; }
.aligncenter { display: block; margin: 0 auto 1.2em; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { font-size: 0.85rem; color: var(--texto-suave); text-align: center; }
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* ---------- Botones ---------- */
.btn, button, input[type="submit"], .button {
  display: inline-block;
  background: var(--dorado);
  color: var(--verde);
  border: 0;
  border-radius: var(--radio);
  padding: 0.65em 1.4em;
  font: 600 0.95rem var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, button:hover, input[type="submit"]:hover, .button:hover { background: var(--verde); color: var(--crema); }
.btn-borde { background: transparent; border: 1px solid var(--verde); }
.btn-borde:hover { background: var(--verde); color: var(--crema); }

input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  background: var(--blanco);
  color: var(--verde);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 0.6em 0.8em;
  font: inherit;
}

/* ---------- Cabecera ---------- */
.site-header { background: var(--verde); color: var(--crema); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--crema); text-decoration: none; }
.brand:hover { color: var(--crema); }
.brand .custom-logo { width: auto; max-height: 48px; }
.brand-mark { width: 44px; height: 44px; flex: none; object-fit: contain; }
.brand-name { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.3px; }
.brand-name span { color: var(--dorado); }
.main-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; }
.main-nav a { color: var(--crema); text-decoration: none; font-size: 0.95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current_page_item > a { color: var(--dorado); border-bottom-color: var(--dorado); }
.header-cart { color: var(--dorado); font-size: 0.95rem; text-decoration: none; white-space: nowrap; }
.header-cart:hover { color: var(--crema); }
.nav-toggle { display: none; background: transparent; color: var(--crema); border: 1px solid var(--dorado); }
.nav-toggle:hover { background: var(--dorado); color: var(--verde); }

@media (max-width: 820px) {
  .site-header .wrap { flex-wrap: wrap; }
  .nav-toggle { display: inline-block; }
  .main-nav { display: none; width: 100%; order: 5; }
  .main-nav.abierto { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a { display: block; padding: 10px 0; border-bottom: 1px solid rgba(244, 238, 224, 0.15); }
}

/* ---------- Portada ---------- */
.hero { background: linear-gradient(180deg, var(--verde) 0%, var(--verde-2) 100%); color: var(--crema); text-align: center; padding: 72px 0 80px; }
.hero-mark { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 18px; display: block; }
.hero .custom-logo { max-height: 96px; width: auto; margin: 0 auto 18px; display: block; }
.hero h1 { color: var(--crema); margin: 0; font-size: clamp(2rem, 5.5vw, 3.2rem); letter-spacing: 0.3px; }
.hero h1 span { color: var(--dorado); }
.hero .btn { margin-top: 26px; }

.franja { padding: 48px 0 56px; }
.franja-titulo { font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--sans); font-weight: 700; margin: 0 0 18px; }
.franja-pie { text-align: center; margin-top: 28px; }

/* ---------- Rejilla y tarjetas ---------- */
.rejilla { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
@media (max-width: 820px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rejilla { grid-template-columns: minmax(0, 1fr); } }
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.tarjeta-img { display: block; aspect-ratio: 1 / 1; background: var(--crema-2); overflow: hidden; }
.tarjeta-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-img.vacia { display: flex; align-items: center; justify-content: center; color: var(--dorado-oscuro); }
.tarjeta-cuerpo { padding: 12px 14px 16px; }
.tarjeta h2, .tarjeta h3 { font-size: 1.05rem; margin: 0 0 4px; font-family: var(--serif); }
.tarjeta h2 a, .tarjeta h3 a { text-decoration: none; }
.tarjeta .precio { font-size: 0.95rem; color: var(--texto-suave); margin: 0; }
.tarjeta .meta { font-size: 0.8rem; color: var(--texto-suave); margin: 0 0 6px; }

/* ---------- Páginas y artículos ---------- */
.contenido { padding: 48px 0 64px; }
.cabecera-pagina { padding-bottom: 8px; }
.eyebrow { color: var(--dorado-oscuro); text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.78rem; font-weight: 700; margin: 0 0 8px; }
.eyebrow a { color: inherit; text-decoration: none; }
.meta-entrada { color: var(--texto-suave); font-size: 0.88rem; margin: 0 0 22px; }
.imagen-destacada { margin: 0 0 28px; border-radius: 12px; overflow: hidden; }
.imagen-destacada img { width: 100%; display: block; }

.articulo { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; align-items: start; }
@media (max-width: 900px) { .articulo { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.articulo .entrada > *:last-child { margin-bottom: 0; }
.entrada a { text-decoration-thickness: 1px; }
.lateral h2 { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 12px; }
.lateral .tarjeta { margin-bottom: 14px; }
.navegacion-entradas { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 0.95rem; }
.paginacion { margin-top: 32px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.paginacion .page-numbers { padding: 6px 12px; border: 1px solid var(--linea); border-radius: var(--radio); text-decoration: none; background: var(--blanco); }
.paginacion .current { background: var(--verde); color: var(--crema); border-color: var(--verde); }

.comentarios { margin-top: 48px; }
.comentarios ol { list-style: none; padding: 0; }
.comentarios .comment-body { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 14px; }

table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--linea); padding: 8px 10px; text-align: left; }

/* ---------- Pie ---------- */
.site-footer { background: var(--verde); color: var(--crema); padding: 36px 0; font-size: 0.9rem; }
.site-footer a { color: var(--crema); }
.site-footer a:hover { color: var(--dorado); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; align-items: center; }
.footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; }

/* ---------- WooCommerce ---------- */
.woocommerce .wrap > .woocommerce-breadcrumb { font-size: 0.85rem; color: var(--texto-suave); margin-bottom: 18px; }
.woocommerce-breadcrumb a { color: inherit; }
.woocommerce ul.products { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0 0 24px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
@media (max-width: 820px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .woocommerce ul.products { grid-template-columns: minmax(0, 1fr); } }
.woocommerce ul.products li.product {
  float: none; width: auto; margin: 0; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; padding: 0 0 14px; position: relative;
}
.woocommerce ul.products li.product a img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 0 10px; display: block; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--serif); font-size: 1.05rem; padding: 0 14px; margin: 0 0 4px; }
.woocommerce ul.products li.product .price { padding: 0 14px; color: var(--texto-suave); font-size: 0.95rem; display: block; margin-bottom: 10px; }
.woocommerce ul.products li.product .button { margin: auto 14px 0; text-align: center; }
.woocommerce span.onsale { background: var(--dorado); color: var(--verde); border-radius: var(--radio); min-height: 0; min-width: 0; line-height: 1; padding: 7px 10px; top: 10px; left: 10px; right: auto; margin: 0; }

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  background: var(--dorado); color: var(--verde); border-radius: var(--radio); font-weight: 600; padding: 0.65em 1.4em;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
  background: var(--verde); color: var(--crema);
}
.woocommerce .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--verde); font-weight: 700; }
.woocommerce div.product .product_title { margin-bottom: 8px; }
.woocommerce div.product div.images img { border-radius: 12px; }
.woocommerce-tabs ul.tabs li { background: var(--crema-2); border-color: var(--linea); }
.woocommerce-tabs ul.tabs li.active { background: var(--blanco); }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--blanco); color: var(--verde); border-top: 3px solid var(--dorado); border-radius: var(--radio); padding: 14px 18px 14px 50px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--dorado-oscuro); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { padding: 0.6em 0.8em; }
.woocommerce table.shop_table { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); border-collapse: separate; }
.woocommerce-checkout #payment { background: var(--blanco); border-radius: var(--radio); }
.woocommerce-checkout #payment div.payment_box { background: var(--crema); color: var(--verde); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--crema); }
.woocommerce-ordering select { width: auto; }
.woocommerce-result-count { color: var(--texto-suave); font-size: 0.9rem; }

@media print { .site-header, .site-footer, .nav-toggle { display: none; } body { background: #fff; } }

/* Utilidades de plantilla */
.centrado { text-align: center; margin-top: 2rem; }
.texto { max-width: var(--ancho-texto); }
.texto img { max-width: 100%; height: auto; }

.aviso-envio { font-size: .9rem; color: var(--texto-suave); margin: .25rem 0 1rem; }