/* tema MEDITERRÁNEO — cálido: oliva, terracota, crema.
   Los colores de marca entran por variables (--primario, --acento) que el
   layout inyecta desde la config de cada tienda: el MISMO tema, rebrandeado
   por tienda sin tocar CSS. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Georgia, 'Times New Roman', serif;
  background: #faf6ef;
  color: #2d2a24;
  line-height: 1.55;
}

a { color: var(--primario, #2f4f3e); }

.demo-banner {
  background: #8a6d3b; color: #fff; text-align: center;
  padding: .4rem 1rem; font-size: .85rem; font-family: system-ui, sans-serif;
}

/* ── cabecera ─────────────────────────── */
.cabecera {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: 1rem 2rem; background: #fffdf8;
  border-bottom: 3px solid var(--acento, #c8722a);
}
.marca { font-size: 1.6rem; font-weight: bold; text-decoration: none; letter-spacing: .03em; }
.marca img { max-height: 52px; }
.buscador { flex: 1; display: flex; min-width: 220px; max-width: 480px; }
.buscador input {
  flex: 1; padding: .55rem .9rem; border: 1px solid #d8cfbc; border-right: 0;
  border-radius: 999px 0 0 999px; background: #fff; font: inherit; font-size: .95rem;
}
.buscador button {
  padding: .55rem 1rem; border: 1px solid #d8cfbc; border-left: 0;
  border-radius: 0 999px 999px 0; background: #fff; cursor: pointer;
}
.acciones { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.idiomas { display: flex; gap: .5rem; font-size: .8rem; font-family: system-ui, sans-serif; }
.idiomas a { text-decoration: none; color: #8a836f; }
.idiomas strong { color: var(--primario); }
.carrito-enlace { text-decoration: none; font-weight: bold; position: relative; }
.globito { display: none; }
.globito.lleno {
  display: inline-block; background: var(--acento); color: #fff;
  border-radius: 999px; font-size: .75rem; min-width: 1.3em; text-align: center;
  padding: .05em .35em; margin-left: .25em; font-family: system-ui, sans-serif;
}

/* ── hero ─────────────────────────────── */
.hero {
  text-align: center; padding: 2.5rem 1rem;
  background: linear-gradient(180deg, var(--primario) 0%, #3d5f4c 100%);
  color: #f6f1e5;
}
.hero h1 { font-size: 2.2rem; letter-spacing: .04em; }
.hero p { margin-top: .5rem; font-style: italic; opacity: .9; }

/* ── contenido ────────────────────────── */
.contenido { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.titulo-seccion {
  font-size: 1.4rem; margin-bottom: 1.25rem; color: var(--primario);
  border-bottom: 2px solid #e7dfd0; padding-bottom: .5rem;
}

/* parrilla de tarjetas */
.parrilla {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.tarjeta {
  background: #fffdf8; border: 1px solid #e7dfd0; border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .15s;
}
.tarjeta:hover { box-shadow: 0 6px 18px rgba(60, 50, 30, .12); }
.tarjeta-foto { display: block; aspect-ratio: 1; background: #fff; text-align: center; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: contain; }
.sin-foto { font-size: 3rem; line-height: 230px; opacity: .3; display: block; }
.sin-foto.grande { font-size: 6rem; line-height: 320px; }
.tarjeta-datos { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.tarjeta-nombre { font-weight: bold; text-decoration: none; color: #2d2a24; font-size: .98rem; }
.tarjeta-marca { font-size: .8rem; color: #8a836f; font-family: system-ui, sans-serif; }
.tarjeta-pie { margin-top: auto; }
.precio { font-size: 1.15rem; font-weight: bold; color: var(--primario); }
.precio-na { font-size: .9rem; color: #8a836f; font-style: italic; }
.etiqueta-demo {
  font-size: .68rem; background: #f3e8cf; color: #8a6d3b; border-radius: 4px;
  padding: .1em .4em; margin-left: .4em; font-family: system-ui, sans-serif; vertical-align: middle;
}
.tarjeta-anadir button, .boton-principal {
  display: inline-block; background: var(--acento); color: #fff; border: 0;
  padding: .55rem 1.2rem; border-radius: 999px; cursor: pointer;
  font-family: system-ui, sans-serif; font-size: .9rem; text-decoration: none;
}
.tarjeta-anadir button:hover, .boton-principal:hover { filter: brightness(1.08); }
.boton-principal.grande { font-size: 1.05rem; padding: .8rem 2rem; }
.boton-secundario {
  background: none; border: 1px solid #c9c0ab; color: #6d6552;
  padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer; font-family: system-ui, sans-serif;
}

/* ── ficha ────────────────────────────── */
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 760px) { .ficha { grid-template-columns: 1fr; } }
.ficha-galeria img#foto-grande {
  width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff;
  border: 1px solid #e7dfd0; border-radius: 10px;
}
.miniaturas { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.miniaturas img {
  width: 64px; height: 64px; object-fit: contain; background: #fff;
  border: 1px solid #e7dfd0; border-radius: 6px; cursor: pointer;
}
.ficha-datos h1 { font-size: 1.6rem; color: var(--primario); margin-bottom: .3rem; }
.ficha-marca { color: #8a836f; font-family: system-ui, sans-serif; margin-bottom: 1rem; }
.ficha-precio { margin: 1rem 0; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ficha-precio .precio { font-size: 1.9rem; }
.iva-nota { font-size: .8rem; color: #8a836f; font-family: system-ui, sans-serif; }
.ficha-comprar { display: flex; align-items: end; gap: 1rem; margin: 1rem 0 1.5rem; }
.ficha-comprar label { font-size: .8rem; font-family: system-ui, sans-serif; color: #6d6552; display: flex; flex-direction: column; gap: .25rem; }
.ficha-comprar input { width: 70px; padding: .5rem; border: 1px solid #d8cfbc; border-radius: 8px; font: inherit; }
.ficha-bullets { margin: 1rem 0 1rem 1.2rem; }
.ficha-bullets li { margin-bottom: .35rem; }
.ficha-descripcion { margin: 1rem 0; }
.ficha-refs { display: flex; gap: 1.5rem; font-size: .8rem; color: #8a836f; font-family: system-ui, sans-serif; margin-top: 1.5rem; }

/* ── carrito / checkout ───────────────── */
.tabla-carrito { width: 100%; border-collapse: collapse; margin: 1.5rem 0; background: #fffdf8; }
.tabla-carrito th, .tabla-carrito td { padding: .7rem .8rem; border-bottom: 1px solid #e7dfd0; text-align: left; vertical-align: middle; }
.tabla-carrito th { font-family: system-ui, sans-serif; font-size: .8rem; color: #8a836f; text-transform: uppercase; letter-spacing: .05em; }
.celda-foto img { width: 54px; height: 54px; object-fit: contain; background: #fff; border-radius: 6px; }
.form-cantidad { display: flex; gap: .4rem; }
.form-cantidad input { width: 60px; padding: .35rem; border: 1px solid #d8cfbc; border-radius: 6px; font: inherit; }
.form-cantidad button { border: 1px solid #d8cfbc; background: #fff; border-radius: 6px; cursor: pointer; padding: .35rem .6rem; font-size: .8rem; }
.boton-quitar { border: 0; background: none; cursor: pointer; color: #b0543a; font-size: 1rem; }
.totales { max-width: 380px; margin-left: auto; display: flex; flex-direction: column; gap: .4rem; }
.totales div { display: flex; justify-content: space-between; }
.total-final { font-weight: bold; font-size: 1.2rem; border-top: 2px solid #e7dfd0; padding-top: .5rem; color: var(--primario); }
.acciones-carrito { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; justify-content: flex-end; }
.vacio { margin: 2rem 0; font-style: italic; }

.checkout { display: grid; grid-template-columns: 3fr 2fr; gap: 2.5rem; align-items: start; }
@media (max-width: 820px) { .checkout { grid-template-columns: 1fr; } }
.checkout-form h2 { font-size: 1.1rem; color: var(--primario); margin: 1.4rem 0 .7rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; font-size: .88rem; font-family: system-ui, sans-serif; color: #57503f; }
.campo input, .campo select, .campo textarea {
  padding: .6rem .8rem; border: 1px solid #d8cfbc; border-radius: 8px; font: inherit; background: #fff;
}
.campo.con-error input { border-color: #b0543a; }
.error { color: #b0543a; font-size: .8rem; }
.fila-doble { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
.metodo-pago { background: #f3ecdd; border-radius: 10px; padding: 1rem 1.2rem; font-family: system-ui, sans-serif; font-size: .9rem; }
.checkout-resumen { background: #fffdf8; border: 1px solid #e7dfd0; border-radius: 10px; padding: 1.3rem 1.5rem; }
.checkout-resumen h2 { font-size: 1.05rem; color: var(--primario); margin-bottom: .8rem; }
.resumen-linea { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .92rem; }

/* ── otros ────────────────────────────── */
.gracias { max-width: 640px; margin: 0 auto; }
.gracias h1 { color: var(--primario); margin-bottom: 1rem; }
.numero-pedido { font-size: 1.1rem; margin: 1rem 0; }
.gracias .metodo-pago { margin: 1.2rem 0; }
.pagina-404 { text-align: center; padding: 4rem 0; }
.aviso-borrador {
  background: #fdf3d7; border: 1px solid #e8d49a; color: #8a6d3b; border-radius: 8px;
  padding: .5rem .9rem; font-size: .82rem; font-family: system-ui, sans-serif; margin: .8rem 0 1.2rem;
}
.texto-legal { max-width: 760px; }

/* ── pie ──────────────────────────────── */
.pie {
  background: #2d2a24; color: #cfc7b4; padding: 1.6rem 2rem; text-align: center;
  font-size: .85rem; font-family: system-ui, sans-serif;
}
.pie a { color: #e8e0cd; text-decoration: none; }
.pie-legal { margin-bottom: .5rem; }