/* Oro Efectivo: los colores y bloques de la web original, adaptados a móvil. */

:root {
  --amarillo: #f5e151;
  --naranja: #da8d14;
  --oro: #b89400;
  --oro-oscuro: #957800;
  --tinta: #1d1400;
  --rojo: #c62828;
  --verde: #2e7d32;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--amarillo);
  color: #fff;
  font: 16px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--amarillo); }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

strong { font-weight: bold; }

/* ---------- Estructura ---------- */

.pagina {
  max-width: 960px;
  margin: 0 auto;
  padding: 12px 12px 6px;
  background: var(--naranja);
  text-shadow: 0 1px 2px rgba(80, 40, 0, .35);
}

@media (min-width: 600px) {
  .pagina { padding: 16px 20px 8px; }
}

@media (min-width: 992px) {
  .pagina {
    margin: 15px auto;
    padding: 16px 40px 8px;
    box-shadow: 0 6px 28px rgba(140, 90, 0, .28);
  }
}

/* ---------- Cabecera: carrusel de joyas y logotipo ---------- */

.carrusel {
  position: relative;
  max-width: 776px;
  height: clamp(140px, 26vw, 220px);
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--amarillo);
  overflow: hidden;
}

.carrusel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.6s ease, transform 8s ease-out;
}

.carrusel img.activa { opacity: 1; }
.carrusel.en-marcha img.activa { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .carrusel img { transition: opacity .6s ease; }
  .carrusel.en-marcha img.activa { transform: none; }
}

.logo {
  display: block;
  max-width: 680px;
  margin: 12px auto 4px;
  line-height: 0;
}

.logo img { display: block; width: 100%; }

/* ---------- Texto de presentación ---------- */

.presentacion {
  max-width: 700px;
  margin: 0 auto 24px;
  font-size: 1.06rem;
}

.presentacion p { margin: 0 0 .8em; }

/* ---------- Bloques con barra de título amarilla ---------- */

.bloque {
  margin: 0 auto 20px;
  border: 3px solid var(--amarillo);
}

.bloque-contacto { max-width: 640px; }
.bloque-cotizador { max-width: 780px; }
.bloque-estrecho { max-width: 520px; }

.bloque-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
  margin: 0;
  padding: 2px 4px 2px 10px;
  background: var(--amarillo);
  color: #000;
  font-size: 1.45rem;
  font-weight: normal;
  line-height: 1.25;
  text-shadow: none;
}

.bloque-titulo img { flex: none; width: 64px; height: 64px; }

.bloque-contenido { padding: 14px 16px 18px; }
.bloque-contenido > :first-child { margin-top: 0; }
.bloque-contenido p { margin: 0 0 1em; }

@media (max-width: 480px) {
  .bloque-titulo { min-height: 56px; font-size: 1.2rem; }
  .bloque-titulo img { width: 48px; height: 48px; }
  .bloque-contenido { padding: 12px 12px 16px; }
}

.aviso {
  padding: 8px 12px;
  background: var(--amarillo);
  color: #000;
  font-weight: bold;
  text-shadow: none;
}

/* ---------- Formularios ---------- */

.formulario { margin-top: 16px; }

.campo { margin: 0 0 12px; }
.campo label { display: block; margin-bottom: 4px; }
.campo small { font-size: .85em; }

input:not([type]),
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--amarillo);
  border-radius: 0;
  background: #fff;
  color: #000;
  font: inherit;
  text-shadow: none;
}

textarea { min-height: 7.5em; resize: vertical; }

input:focus,
textarea:focus { outline: 3px solid var(--amarillo); outline-offset: 0; }

input.error,
textarea.error {
  border-color: var(--rojo);
  background: #ffe4e0;
  box-shadow: 0 0 0 2px var(--rojo);
}

.campo-casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 4px 10px;
}

.campo-casilla input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--oro); }
.campo-casilla input.error { outline: 3px solid var(--rojo); outline-offset: 1px; }
.campo-casilla label { margin: 0; }

.error-campo {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: #fff;
  color: #9b1c12;
  font-size: .9rem;
  text-shadow: none;
}

.campo-casilla .error-campo { grid-column: 2; justify-self: start; margin-top: 0; }

@media (min-width: 560px) {
  .formulario .campo {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0 12px;
    align-items: start;
  }
  .formulario .campo > label { margin: 8px 0 0; }
  .formulario .campo > .error-campo { grid-column: 2; justify-self: start; }
  .formulario .campo-casilla { grid-template-columns: auto 1fr; gap: 4px 10px; padding-left: calc(7.5rem + 12px); }
  .formulario .campo-casilla > label { margin: 0; }
  .formulario .acciones { padding-left: calc(7.5rem + 12px); }
}

/* El campo trampa para robots no se ve (pero no con display:none, que algunos detectan). */
.trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.acciones { margin: 16px 0 0; }

/* Botón en dos tonos, como el de la web original. */
.boton {
  display: inline-flex;
  padding: 2px;
  border: 1px solid #b57208;
  background: #fff;
  font: inherit;
  font-size: 1.05rem;
  font-variant: small-caps;
  line-height: 1.2;
  text-shadow: none;
  cursor: pointer;
}

.boton span { padding: 8px 12px; }
.boton span:first-child { background: var(--amarillo); color: #000; }
.boton span:last-child { background: var(--oro); color: #fff; }
.boton:hover span:last-child,
.boton:focus-visible span:last-child { background: var(--oro-oscuro); }
.boton:active { transform: translateY(1px); }
.boton[disabled] { opacity: .65; cursor: progress; }

.mensaje {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 6px solid transparent;
  background: #fff;
  color: #222;
  text-shadow: none;
}

.mensaje:empty { display: none; }
.mensaje-ok { border-color: var(--verde); color: #1b4d1e; }
.mensaje-error { border-color: var(--rojo); color: #8e1b12; }

/* ---------- Establecimientos ---------- */

.tiendas { display: grid; gap: 0 20px; }

@media (min-width: 720px) {
  .tiendas { grid-template-columns: 1fr 1fr; }
}

.tiendas .bloque { width: 100%; }
.direccion { margin: 0 0 12px; }
.plano { display: block; width: fit-content; margin: 0 auto; }
.plano img { display: block; border: 1px solid rgba(0, 0, 0, .15); }
.enlace-mapa { display: inline-block; margin-top: 10px; }

/* ---------- Cotizador ---------- */

.cotizador {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 16px;
}

.cotizador label { font-weight: bold; }
.cotizador input { width: 8rem; text-align: right; }

.lingotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.lingote {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 10px 14px;
  border: 2px solid var(--amarillo);
  background: #fff;
  color: #000;
  text-shadow: none;
}

.lingote img { grid-row: span 2; }
.quilates { color: #6b5200; font-size: .9rem; }
.importe { font-size: 1.5rem; font-weight: bold; line-height: 1.2; }

/* ---------- Pie ---------- */

.pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 0 6px;
  border-top: 1px solid rgba(255, 255, 255, .35);
  font-size: .9rem;
}

/* ---------- Condiciones de uso ---------- */

.bloque-legal { max-width: 860px; }

.bloque-legal .bloque-contenido {
  background: #fffbea;
  color: var(--tinta);
  text-shadow: none;
  font-size: .95rem;
}

.bloque-legal a { color: #7a4b00; }
.bloque-legal h2 { margin: 1.6em 0 .5em; font-size: 1.1rem; }
.bloque-legal h3 { margin: 1.3em 0 .4em; font-size: 1rem; }
.bloque-legal h2:first-child { margin-top: 0; }

.volver { margin: 0 0 12px; }

/* ---------- Panel de administración ---------- */

.pagina-admin .logo { display: block; max-width: 320px; margin: 0 auto 16px; }
.pagina-admin main > .bloque { max-width: 640px; }
.pagina-admin main > .bloque-estrecho { max-width: 520px; }
.pagina-admin main > .mensaje { max-width: 640px; margin: 0 auto 16px; }

.tabla-precios {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
}

.tabla-precios th,
.tabla-precios td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  text-align: left;
}

.tabla-precios thead th { font-size: .9rem; font-weight: normal; }
.tabla-precios tbody th { white-space: nowrap; }
.tabla-precios img { vertical-align: middle; }
.tabla-precios input[inputmode] { width: 6.5rem; text-align: right; }
.tabla-precios input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--oro); }

.campo-ancho label { display: block; margin-bottom: 4px; }

.nota { margin: 12px 0 0; font-size: .9rem; }

.salir {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 640px;
  margin: 0 auto 12px;
}

.salir button {
  padding: 4px;
  border: 0;
  background: none;
  color: var(--amarillo);
  font: inherit;
  text-decoration: underline;
  text-shadow: inherit;
  cursor: pointer;
}

.salir button:hover { color: #fff; }