/*
Theme Name: Entre Valles
Theme URI: https://entrevalles.es
Description: Tema de pizarra de mercado para la tienda de cerezas y castañas Entre Valles (Plasencia). Preparado para WooCommerce.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Author: Entre Valles
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: entre-valles
*/

/* Pizarras de puesto de mercado con marco de madera; precios a tiza. Las páginas interiores (producto, cesta, pago, textos legales) van en una "hoja" clara clavada sobre la pizarra. */
:root {
  --pizarra: #232A2B;
  --pizarra-2: #2B3334;
  --pizarra-3: #1B2122;
  --tiza: #ECE7DC;
  --tiza-2: #A9AEA8;
  --cereza: #F07383;
  --castana: #E3A866;
  --encina: #A8C98C;
  --madera: #7A4E2D;
  --madera-2: #5A381E;
  --madera-3: #8E5F3A;
  --hoja: #F3EEE3;
  --tinta: #2B2622;
  --tinta-2: #625A51;
  --tinta-roja: #9E2335;
  --display: "Cabin Sketch", "Chalkboard SE", "Comic Sans MS", cursive;
  --body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --cita: "Alegreya", Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--pizarra);
  color: var(--tiza);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; }
.wrap {
  max-width: 1120px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px dashed var(--castana); outline-offset: 3px; }
.etq { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--tiza-2); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.marco {
  border: 12px solid var(--madera);
  border-image: repeating-linear-gradient(90deg, var(--madera) 0 18px, var(--madera-2) 18px 21px, var(--madera-3) 21px 34px, var(--madera) 34px 46px) 12;
  background-color: var(--pizarra-2);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .35);
}

/* Cabecera */
header.top {
  position: sticky; top: 0; z-index: 20;
  background: repeating-linear-gradient(90deg, var(--madera-2) 0 140px, var(--madera) 140px 143px, var(--madera-2) 143px 300px);
  border-bottom: 3px solid var(--pizarra-3);
}
body.admin-bar header.top { top: 32px; }
@media (max-width: 782px) { body.admin-bar header.top { top: 0; position: relative; } }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tiza); }
.marca svg { width: 40px; height: 40px; flex: none; }
.marca b { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1; display: block; }
.marca small { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--castana); font-weight: 700; }
nav.menu { display: flex; gap: 22px; }
nav.menu a { text-decoration: none; font-weight: 500; color: var(--tiza); opacity: .85; }
nav.menu a:hover { opacity: 1; color: var(--castana); }
.btn-cesta {
  display: inline-flex; align-items: center; gap: 8px; border: 2px dashed var(--tiza);
  color: var(--tiza); padding: 6px 14px; border-radius: 4px; font-weight: 700; text-decoration: none;
}
.btn-cesta .n-cesta {
  background: var(--cereza); color: var(--pizarra-3); min-width: 1.5em; height: 1.5em;
  border-radius: 99px; display: grid; place-items: center; font-size: .8rem; padding-inline: 4px;
}
@media (max-width: 760px) { nav.menu { display: none; } }

/* Portada */
.portada { padding-block: 52px 36px; }
.portada .wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.familia { color: var(--encina); }
.portada h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); margin-top: 14px; }
.portada h1 .r { color: var(--cereza); }
.portada h1 .o { color: var(--castana); }
.portada .entradilla { margin-top: 20px; font-size: 1.2rem; max-width: 34em; color: var(--tiza-2); }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 4px; font-weight: 700; text-decoration: none;
  border: 2px solid transparent; transition: transform .15s ease;
}
.btn:hover { transform: translateY(-1px) rotate(-.5deg); }
.btn-cereza { background: var(--cereza); color: var(--pizarra-3); }
.btn-castana { background: var(--castana); color: var(--pizarra-3); }
.btn-tiza { border: 2px dashed var(--tiza); color: var(--tiza); background: transparent; }

.foto { display: block; width: 100%; max-width: 100%; object-fit: cover; border: 3px solid var(--tiza); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.pizarra-hoy { transform: rotate(-1.2deg); }
.pizarra-hoy .in { padding: 26px 26px 22px; display: grid; gap: 14px; }
.pizarra-hoy h2 { font-size: 2rem; text-align: center; }
.pizarra-hoy .foto { aspect-ratio: 16 / 9; transform: rotate(1.5deg); }
.pizarra-hoy .chinchetas { position: relative; }
.pizarra-hoy .chinchetas::before, .pizarra-hoy .chinchetas::after {
  content: ""; position: absolute; top: -4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--cereza); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); z-index: 1;
}
.pizarra-hoy .chinchetas::before { left: 14px; }
.pizarra-hoy .chinchetas::after { right: 14px; }
.precio-linea { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-size: 1.45rem; }
.precio-linea .puntos { flex: 1; border-bottom: 3px dotted var(--tiza-2); transform: translateY(-6px); min-width: 20px; }
.precio-linea .v { white-space: nowrap; }
.precio-linea.r .v { color: var(--cereza); }
.precio-linea.o .v { color: var(--castana); }
.pizarra-hoy .pie { text-align: center; color: var(--encina); font-family: var(--display); font-size: 1.15rem; border-top: 2px dashed var(--tiza-2); padding-top: 12px; }
@media (max-width: 860px) {
  .portada .wrap { grid-template-columns: 1fr; }
  .pizarra-hoy { max-width: 440px; width: 100%; margin-inline: auto; transform: rotate(0); }
}

/* Calendario */
.calendario { padding-block: 20px 0; }
.cal-caja { border-top: 2px dashed var(--tiza-2); border-bottom: 2px dashed var(--tiza-2); padding-block: 20px; }
.cal-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: baseline; margin-bottom: 16px; }
.cal-cab h2 { font-size: 1.7rem; }
.cal-scroll { overflow-x: auto; }
.cal-tabla { display: grid; grid-template-columns: 92px repeat(12, minmax(34px, 1fr)); gap: 5px; min-width: 560px; align-items: center; }
.cal-tabla .mes { font-family: var(--display); font-size: .95rem; text-align: center; color: var(--tiza-2); }
.cal-tabla .mes.hoy { color: var(--tiza); text-decoration: underline wavy var(--encina); text-underline-offset: 5px; }
.cal-tabla .fila { font-weight: 700; }
.cal-tabla .c { height: 20px; border-radius: 3px; border: 1.5px dashed rgba(236, 231, 220, .18); }
.cal-tabla .c.cer { background: var(--cereza); border-color: transparent; opacity: .9; }
.cal-tabla .c.cas { background: var(--castana); border-color: transparent; opacity: .9; }
.cal-tabla .c.hoy { outline: 2px solid var(--tiza); outline-offset: 2px; }

/* Bloques */
section.bloque { padding-block: 64px 12px; scroll-margin-top: 80px; }
.titulo-bloque { display: grid; gap: 6px; margin-bottom: 28px; }
.titulo-bloque h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
.titulo-bloque p { color: var(--tiza-2); max-width: 40em; }

/* Fichas de producto en portada */
.productos { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .productos { grid-template-columns: 1fr; } }
.producto { min-width: 0; }
.producto .foto { aspect-ratio: 4 / 3; border-width: 0; box-shadow: none; }
.producto-in { padding: 24px; display: grid; gap: 18px; align-content: start; }
.producto .cab { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; }
.producto h3 { font-size: 2.3rem; }
.producto.r h3 { color: var(--cereza); }
.producto.o h3 { color: var(--castana); }
.producto .precio-base { color: var(--tiza-2); }
.producto .desc { color: var(--tiza-2); }
.chip { display: inline-block; padding: 3px 12px; border-radius: 99px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.chip.si { background: var(--encina); color: var(--pizarra-3); }
.chip.no { border: 1.5px dashed var(--tiza-2); color: var(--tiza-2); }
.formatos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 460px) { .formatos { grid-template-columns: repeat(2, 1fr); } }
.formato {
  border: 1.5px dashed rgba(236, 231, 220, .3); padding: 10px 6px; border-radius: 4px;
  display: grid; gap: 2px; text-align: center;
}
.formato .kg { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.formato .pr { font-size: .92rem; font-variant-numeric: tabular-nums; }
.formato .ah { font-size: .76rem; font-weight: 700; color: var(--encina); min-height: 1.2em; }
.aviso-admin { border: 2px dashed var(--castana); padding: 16px; color: var(--castana); }

/* Tabla de descuentos */
.tabla-scroll { overflow-x: auto; }
.tabla-marco { padding: 8px 20px 12px; }
table.desc { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 500px; }
table.desc th, table.desc td { padding: 12px 10px; text-align: right; border-bottom: 1.5px dashed rgba(236, 231, 220, .2); }
table.desc th:first-child, table.desc td:first-child { text-align: left; }
table.desc thead th { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tiza-2); }
table.desc tbody tr:last-child td { border-bottom: 0; }
table.desc td.kg { font-family: var(--display); font-weight: 700; font-size: 1.4rem; }
table.desc td.r { color: var(--cereza); font-family: var(--display); font-size: 1.3rem; }
table.desc td.o { color: var(--castana); font-family: var(--display); font-size: 1.3rem; }
table.desc td small { display: block; color: var(--tiza-2); font-family: var(--body); font-size: .8rem; }
table.desc td .ahorro { color: var(--encina); font-weight: 700; }
.nota { margin-top: 14px; color: var(--tiza-2); font-size: .95rem; }

/* Envíos */
.envios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.envios > div { display: grid; gap: 8px; align-content: start; min-width: 0; padding-top: 16px; border-top: 2px dashed var(--tiza-2); }
.envios h3 { font-size: 1.35rem; }
.envios .dato { font-family: var(--display); font-weight: 700; font-size: 2.2rem; color: var(--castana); line-height: 1; }
.envios p { color: var(--tiza-2); }
@media (max-width: 760px) { .envios { grid-template-columns: 1fr; } }

/* Familia */
.familia-sec { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.familia-sec .texto { display: grid; gap: 16px; max-width: 36em; }
.familia-sec blockquote {
  margin: 0; font-family: var(--cita); font-style: italic; font-weight: 500; font-size: 1.55rem; line-height: 1.35;
  border-left: 4px solid var(--cereza); padding-left: 20px; color: var(--tiza);
}
.generaciones { padding: 24px; }
.generaciones h3 { font-size: 1.6rem; margin-bottom: 14px; }
.gen { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-bottom: 18px; position: relative; }
.gen:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; border-left: 2px dashed var(--tiza-2); }
.gen .punto { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--encina); display: grid; place-items: center; font-family: var(--display); font-weight: 700; color: var(--encina); }
.gen b { font-family: var(--display); font-size: 1.3rem; display: block; line-height: 1.2; }
.gen p { color: var(--tiza-2); font-size: .98rem; }
.mapa { margin: 0; padding: 14px; }
.mapa svg { width: 100%; height: auto; display: block; }
.mapa figcaption { font-size: .85rem; color: var(--tiza-2); margin-top: 6px; }
.lado { display: grid; gap: 28px; }
@media (max-width: 860px) { .familia-sec { grid-template-columns: 1fr; } }

/* Preguntas */
.preguntas { display: grid; border-top: 2px dashed var(--tiza-2); }
.preguntas details { border-bottom: 2px dashed rgba(236, 231, 220, .2); padding-block: 16px; }
.preguntas summary { font-family: var(--display); font-weight: 700; font-size: 1.35rem; cursor: pointer; }
.preguntas details p { margin-top: 10px; color: var(--tiza-2); max-width: 44em; }

/* Pie */
footer.pie-web { margin-top: 72px; background: var(--madera-2); border-top: 6px solid var(--madera); }
footer.pie-web .wrap { padding-block: 28px; display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between; color: var(--tiza); font-size: .92rem; }
footer.pie-web .legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer.pie-web .creditos { flex-basis: 100%; font-size: .8rem; opacity: .75; }

/* Páginas interiores: hoja clara sobre la pizarra */
.interior { padding-block: 40px 0; }
.hoja {
  background: var(--hoja); color: var(--tinta); padding: clamp(20px, 4vw, 44px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); position: relative; min-width: 0;
}
.hoja::before, .hoja::after {
  content: ""; position: absolute; top: 10px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--tinta-roja); box-shadow: 0 2px 3px rgba(0, 0, 0, .4);
}
.hoja::before { left: 12px; }
.hoja::after { right: 12px; }
.hoja a { color: var(--tinta-roja); }
.hoja h1, .hoja .product_title { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 18px; color: var(--tinta); }
.hoja h2 { font-size: 1.7rem; margin: 28px 0 12px; }
.hoja p { margin: 0 0 14px; }
.hoja input[type="text"], .hoja input[type="email"], .hoja input[type="tel"], .hoja input[type="number"], .hoja input[type="password"], .hoja select, .hoja textarea {
  font: inherit; color: var(--tinta); background: #fff; border: 1.5px solid #B9AF9F; border-radius: 4px; padding: 9px 10px;
}
.hoja .button, .hoja button.button, .hoja a.button, .hoja input.button, .hoja .single_add_to_cart_button,
.hoja .wp-element-button, .hoja .wc-block-components-button:not(.is-link), .hoja .checkout-button {
  background: var(--tinta-roja) !important; color: #fff !important; border: 0 !important; border-radius: 4px !important;
  font-weight: 700 !important; padding: 12px 22px !important; text-decoration: none !important;
}
.hoja .button:hover, .hoja .wp-element-button:hover, .hoja .wc-block-components-button:not(.is-link):hover { filter: brightness(1.1); }
.woocommerce .hoja div.product p.price, .woocommerce .hoja div.product span.price, .hoja .price { color: var(--tinta-roja); font-family: var(--display); font-size: 1.6rem; }
.hoja .variations { margin-bottom: 14px; }
.hoja .variations th.label { padding-right: 12px; font-weight: 700; }
.hoja .variations select { min-width: 160px; }
.hoja .stock.out-of-stock { color: var(--tinta-roja); font-weight: 700; }
.hoja .woocommerce-tabs ul.tabs li { background: var(--hoja) !important; }
.hoja .woocommerce-message, .hoja .woocommerce-info { border-top-color: var(--tinta-roja); }
.hoja .woocommerce-message::before, .hoja .woocommerce-info::before { color: var(--tinta-roja); }
.hoja ul.products li.product .woocommerce-loop-product__title { font-family: var(--display); font-size: 1.5rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }