/* =============================================================================
   CHICHO'S CAFÉ - RESTAURANT · ESTILOS
   -----------------------------------------------------------------------------
   Escrito "mobile first": primero el diseño para teléfono y después, con
   @media (min-width: …), los ajustes para tablet y computadora.
   ============================================================================= */

/* ------------------------------------------------------------- variables --- */
:root {
  --cafe-oscuro:  #43281a;
  --cafe-medio:   #5c3a20;
  --negro:        #17130f;
  --negro-suave:  #262019;
  --crema:        #fdf6e4;
  --crema-2:      #fffdf6;
  --crema-borde:  #e0cda6;
  --amarillo:     #ffc233;
  --amarillo-2:   #ffd257;
  --naranja:      #f0a93a;
  --rojo:         #c1272d;
  --rojo-claro:   #ef4136;
  --rojo-sombra:  #7a1c20;
  --rosa:         #ef5d8f;
  --verde:        #4fa25a;
  --verde-claro:  #58d68d;
  --verde-borde:  #2f8f52;
  --turquesa:     #67d5cd;
  --turquesa-b:   #2fa9a0;
  --texto-marron: #5c3a20;
  --texto-suave:  #96775a;

  --cat-color: #e2342c;   /* lo cambia el JS según la categoría abierta */

  --f-titulo: 'Lobster Two', Georgia, cursive;
  --f-mano:   'Pacifico', 'Segoe Script', cursive;
  --f-texto:  'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --madera: repeating-linear-gradient(97deg, #5c3a20 0 9px, #6d4728 9px 17px, #53331c 17px 27px, #63401f 27px 34px);
  --ancho: 1120px;
}

/* --------------------------------------------------------------- básicos --- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cafe-oscuro);
  font-family: var(--f-texto);
  color: var(--crema);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Las vistas se muestran/ocultan con el atributo hidden: tiene que ganar
   siempre, aunque el elemento tenga un display propio. */
[hidden] { display: none !important; }

a { color: var(--amarillo); text-decoration: none; }
a:hover { color: #ffe08a; }

button { font-family: inherit; }

h1, h2, h3, h4, p, ul, dl, figure, fieldset, legend { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; }

/* Todo lo que se pueda tocar tiene al menos 44px de alto en el teléfono */
button, .btn-pill, .btn-carta, .cat-tab, .opcion, .plato-btn { touch-action: manipulation; }

:focus-visible {
  outline: 3px solid var(--amarillo-2);
  outline-offset: 3px;
}

.c-amarillo { color: var(--amarillo); }
.c-rosa     { color: var(--rosa); }

.linea-punteada {
  border: 0;
  border-top: 2px dashed rgba(253, 246, 228, 0.28);
  margin: 18px 0;
}

/* Logo de repuesto por si images/logo-chichos.png todavía no está */
.logo-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
}
.logo-texto-nombre {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(44px, 13vw, 68px);
  line-height: 1;
  color: var(--amarillo);
  text-shadow: 0 3px 0 var(--rojo), 0 5px 0 rgba(0, 0, 0, 0.45);
  letter-spacing: 0.5px;
}
.logo-texto-sub {
  font-family: var(--f-mano);
  font-size: clamp(14px, 4vw, 19px);
  color: var(--crema);
  transform: rotate(-1.5deg);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}


/* =============================================================================
   VISTA 1 · INICIO
   ============================================================================= */

.tabla-madera {
  background: var(--madera);
  box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.55);
}

/* --- Pizarra ------------------------------------------------------------- */
.hero {
  padding: 22px 14px 20px;
  display: flex;
  justify-content: center;
}

.pizarra-marco {
  width: 100%;
  max-width: 1020px;
  background: linear-gradient(160deg, #7d5130, #4a2c17 60%, #6b4527);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.12);
}

.pizarra {
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, #262019 0%, #17130f 70%);
  border-radius: 6px;
  padding: 32px 18px 34px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.pizarra-borde-1,
.pizarra-borde-2 {
  position: absolute;
  border-radius: 4px;
  pointer-events: none;
}
.pizarra-borde-1 { inset: 9px;  border: 2px solid rgba(253, 246, 228, 0.22); }
.pizarra-borde-2 { inset: 14px; border: 1px solid rgba(253, 246, 228, 0.12); }

.hero-cont {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

/* El logo viene en JPEG, o sea con fondo (oscuro) y sin transparencia. Esta
   máscara circular difumina las esquinas para que se funda con la pizarra y no
   se vea el recuadro. Si algún día llega el logo en PNG con transparencia,
   se puede borrar el bloque de --mask sin que se rompa nada. */
.hero-logo,
.barra-marca img {
  --mask: radial-gradient(circle at 50% 49%, #000 0 53%, transparent 64%);
  -webkit-mask-image: var(--mask);
          mask-image: var(--mask);
}

.hero-logo {
  width: 190px;
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.6));
}

.hero-lema {
  font-family: var(--f-mano);
  font-size: 18px;
  color: var(--amarillo);
  transform: rotate(-2deg);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

.hero-titulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(32px, 9vw, 60px);
  line-height: 1.08;
  color: var(--crema);
  max-width: 720px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  text-wrap: balance;
}

.hero-sub {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(253, 246, 228, 0.82);
  max-width: 520px;
}

.btn-carta {
  margin-top: 8px;
  display: inline-block;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(22px, 6.5vw, 30px);
  letter-spacing: 0.5px;
  color: var(--crema);
  background: linear-gradient(180deg, var(--rojo-claro), var(--rojo));
  border: 4px solid var(--amarillo);
  padding: 15px 32px;
  border-radius: 60px;
  cursor: pointer;
  transform: rotate(-1.2deg);
  box-shadow: 0 12px 0 var(--rojo-sombra), 0 20px 34px rgba(0, 0, 0, 0.45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-carta:hover,
.btn-carta:focus-visible {
  color: var(--crema);
  transform: rotate(-1.2deg) translateY(-4px);
  box-shadow: 0 16px 0 var(--rojo-sombra), 0 26px 42px rgba(0, 0, 0, 0.5);
}
.btn-carta:active { transform: rotate(-1.2deg) translateY(6px); box-shadow: 0 6px 0 var(--rojo-sombra); }

.hero-acciones {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.btn-pill {
  flex: 1 1 auto;
  min-width: 150px;
  text-align: center;
  font-weight: 900;
  font-size: 14px;
  padding: 13px 20px;
  border-radius: 60px;
  border: 3px solid;
  cursor: pointer;
}
.btn-verde    { color: #0e2e17; background: var(--verde-claro); border-color: var(--verde-borde); box-shadow: 0 6px 0 var(--verde-borde); }
.btn-verde:hover    { color: #0e2e17; }
.btn-turquesa { color: #10312f; background: var(--turquesa);    border-color: var(--turquesa-b); box-shadow: 0 6px 0 var(--turquesa-b); }
.btn-turquesa:hover { color: #10312f; }

/* --- Cinta --------------------------------------------------------------- */
.cinta {
  overflow: hidden;
  background: linear-gradient(180deg, var(--amarillo-2), var(--naranja));
  border-top: 4px solid #7a4a1f;
  border-bottom: 4px solid #7a4a1f;
  padding: 9px 0;
}
.cinta-pista {
  display: flex;
  width: max-content;
  animation: cinta 26s linear infinite;
  white-space: nowrap;
}
.cinta-texto {
  flex: none;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 17px;
  color: var(--cafe-medio);
}
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .cinta-pista { animation: none; }
  html { scroll-behavior: auto; }
}

/* --- Polaroids ------------------------------------------------------------ */
.polaroids {
  padding: 34px 16px 8px;
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.polaroid {
  background: var(--crema);
  padding: 12px 12px 16px;
  border-radius: 4px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
  min-width: 0;
}

.polaroid-foto {
  position: relative;
  height: 190px;
  border-radius: 2px;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, #efe2c8 0 12px, #e8d8b8 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.polaroid-foto::after {
  content: 'Foto';
  font-family: var(--f-mano);
  font-size: 15px;
  color: #b39a72;
}
.polaroid-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.polaroid figcaption {
  font-family: var(--f-mano);
  font-size: 17px;
  color: #8a4b23;
  text-align: center;
  margin-top: 10px;
}

/* --- Ven a visitarnos ------------------------------------------------------ */
.visitanos {
  padding: 34px 16px 46px;
  max-width: var(--ancho);
  margin: 0 auto;
}

.titulo-seccion {
  text-align: center;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(28px, 7.5vw, 38px);
  color: #ffe7a8;
  margin-bottom: 22px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}

.tarjetas-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.tarjeta-info {
  background: var(--crema);
  border-radius: 8px;
  padding: 20px;
  color: var(--texto-marron);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}
.tarjeta-info.ti1 { transform: rotate(-1deg);   border-bottom: 6px solid var(--rosa); }
.tarjeta-info.ti2 { transform: rotate(0.9deg);  border-bottom: 6px solid var(--verde); }
.tarjeta-info.ti3 { transform: rotate(-0.6deg); border-bottom: 6px solid var(--turquesa-b); }

.tarjeta-info h3 {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 24px;
  color: var(--rojo);
  margin-bottom: 8px;
}
.tarjeta-info p { font-weight: 600; font-size: 15px; line-height: 1.5; }
.tarjeta-info a { color: var(--rojo); font-weight: 800; }
.tarjeta-info a:hover { color: var(--rojo-claro); }

.por-completar { font-style: italic; color: #a98d6d; }

.tarjeta-enlace { display: inline-block; margin-top: 10px; font-size: 14px; }

.lista-horario li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  font-size: 15px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--crema-borde);
}
.lista-horario li:last-child { border-bottom: 0; }
/* Segundo bloque del mismo día (la jornada de la tarde): va pegado al primero */
.lista-horario li.seguido { padding-top: 0; }
.lista-horario li:has(+ .seguido) { border-bottom: 0; padding-bottom: 1px; }
.lista-horario li span:last-child { font-weight: 800; white-space: nowrap; }

.redes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.redes a {
  font-size: 13px;
  font-weight: 800;
  color: var(--crema);
  background: var(--rojo);
  padding: 8px 16px;
  border-radius: 50px;
}
.redes a:hover { color: var(--crema); background: var(--rojo-claro); }

/* --- Pie ------------------------------------------------------------------ */
.pie {
  background: var(--negro);
  padding: 22px 16px;
  text-align: center;
}
.pie p:first-child {
  font-family: var(--f-mano);
  font-size: 16px;
  color: var(--amarillo);
}
.pie-mini {
  font-size: 12px;
  color: rgba(253, 246, 228, 0.45);
  margin-top: 8px;
}


/* =============================================================================
   VISTAS 2 y 3 · fondo común
   ============================================================================= */
#vista-carta,
#vista-carrito {
  display: block;
  min-height: 100vh;
  background: radial-gradient(140% 80% at 50% 0%, #262019 0%, #17130f 65%);
}

/* --- Barra superior ------------------------------------------------------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--madera);
  border-bottom: 5px solid var(--amarillo);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.barra-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  order: -1;         /* en el teléfono la marca va primero */
  flex: 1 1 100%;
  justify-content: center;
  margin-bottom: 6px;
}
.barra-marca img {
  width: 42px;
  height: 37px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}
.barra-marca span {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 22px;
  color: var(--crema);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra { flex-wrap: wrap; }

.btn-barra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 50px;
  border: 3px solid;
  cursor: pointer;
  white-space: nowrap;
}
.btn-rojo     { color: var(--crema); background: var(--rojo);       border-color: var(--amarillo); box-shadow: 0 4px 0 var(--rojo-sombra); }
.btn-rojo:hover { color: var(--crema); }
.btn-amarillo { color: var(--negro);  background: var(--amarillo-2); border-color: #b9821f;        box-shadow: 0 4px 0 #b9821f; }

.globo {
  background: var(--rojo);
  color: var(--crema);
  border-radius: 50px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 900;
}

/* --- Categorías ----------------------------------------------------------- */
.categorias {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  border-bottom: 2px dashed rgba(253, 246, 228, 0.22);
  padding: 12px 0;
}

/* En teléfono se desliza de lado; en pantalla grande se acomoda en cuadrícula */
.categorias-pista {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 14px 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 194, 51, 0.6) transparent;
}
.categorias-pista::-webkit-scrollbar { height: 6px; }
.categorias-pista::-webkit-scrollbar-thumb { background: rgba(255, 194, 51, 0.6); border-radius: 6px; }

.cat-tab {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.15;
  max-width: 190px;
  color: var(--negro);
  background: var(--c, var(--rojo));
  border: 3px solid rgba(0, 0, 0, 0.25);
  padding: 11px 14px;
  border-radius: 14px;
  cursor: pointer;
  opacity: 0.55;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45);
  transition: opacity .15s ease, transform .15s ease;
}
.cat-tab .cat-emoji { font-size: 22px; line-height: 1; }
.cat-tab.activa { opacity: 1; border-color: var(--negro); }
.cat-tab:hover  { opacity: 1; transform: translateY(-2px); }

/* --- Cuerpo de la carta ---------------------------------------------------- */
.carta-cuerpo {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 26px 16px 130px;
  scroll-margin-top: 150px;
}

.categoria-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
}
.categoria-icono {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.categoria-textos { min-width: 0; }
.categoria-textos h2 {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(27px, 7.5vw, 44px);
  color: var(--crema);
  line-height: 1.1;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}
.categoria-textos p {
  font-family: var(--f-mano);
  font-size: 15px;
  margin-top: 8px;
}

.grupo { margin-bottom: 30px; }

.grupo-label {
  display: inline-block;
  font-family: var(--f-mano);
  font-weight: 400;
  font-size: 20px;
  color: var(--negro);
  background: var(--amarillo-2);
  padding: 5px 20px;
  border-radius: 4px;
  transform: rotate(-1.4deg);
  margin-bottom: 20px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4);
}

.platos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* --- Tarjeta de plato ------------------------------------------------------ */
.plato {
  display: flex;
  flex-direction: column;
  background: var(--crema);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  border-bottom: 7px solid var(--cat-color);
  transition: transform .16s ease, box-shadow .16s ease;
}
@media (hover: hover) {
  .plato:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.5);
  }
}

.plato-foto {
  position: relative;
  height: 165px;
  background: linear-gradient(160deg, #efe2c8, #e3d1ac);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.plato-emoji { font-size: 46px; opacity: 0.35; }
.plato-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.plato-cuerpo { padding: 14px 16px 6px; flex: 1; }
.plato-nombre {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 22px;
  color: var(--texto-marron);
  line-height: 1.12;
}
.plato-desc {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--texto-suave);
  margin-top: 5px;
  line-height: 1.45;
}

.plato-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 16px;
  margin-top: 8px;
  border-top: 2px dashed var(--crema-borde);
}
.plato-precio {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 24px;
  color: var(--rojo);
}
.plato-precio--consultar { font-size: 18px; color: var(--texto-suave); }

.plato-btn {
  font-weight: 900;
  font-size: 13px;
  color: var(--crema);
  background: var(--verde);
  border: 3px solid #2f7a3c;
  padding: 10px 18px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 0 #2f7a3c;
  transition: transform .12s ease;
}
.plato-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #2f7a3c; }
.plato-btn--consultar { background: var(--naranja); border-color: #b9821f; box-shadow: 0 4px 0 #b9821f; color: var(--negro); }
.plato-btn--consultar:hover { color: var(--negro); }

/* --- Barra flotante del pedido --------------------------------------------- */
.barra-flotante {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  width: calc(100% - 28px);
  max-width: 460px;
}
.barra-flotante button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 900;
  font-size: 15px;
  color: var(--crema);
  background: linear-gradient(180deg, var(--rojo-claro), var(--rojo));
  border: 4px solid var(--amarillo);
  padding: 13px 18px;
  border-radius: 60px;
  cursor: pointer;
  box-shadow: 0 8px 0 var(--rojo-sombra), 0 16px 30px rgba(0, 0, 0, 0.5);
}
.bf-izq { display: flex; align-items: center; gap: 8px; }
.bf-total { font-family: var(--f-titulo); font-size: 21px; color: var(--amarillo-2); }


/* =============================================================================
   VISTA 3 · PEDIDO
   ============================================================================= */
.carrito-cuerpo {
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 16px 60px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.carrito-titulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(28px, 8vw, 34px);
  color: var(--crema);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}
.carrito-sub {
  font-family: var(--f-mano);
  font-size: 15px;
  color: var(--amarillo);
  margin-top: 4px;
  margin-bottom: 18px;
}

.carrito-lista { display: flex; flex-direction: column; gap: 14px; }

.linea {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--crema);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
  border-bottom: 6px solid var(--naranja);
}
.linea-foto {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, #efe2c8, #e3d1ac);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  opacity: 1;
}
.linea-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.linea-info { flex: 1; min-width: 0; }
.linea-info h4 {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 19px;
  color: var(--texto-marron);
  line-height: 1.12;
}
.linea-info p {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--texto-suave);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.linea-controles { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.redondo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #b9821f;
  background: var(--amarillo-2);
  color: var(--texto-marron);
  font-weight: 900;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 0 #b9821f;
}
.linea-cant { font-weight: 900; font-size: 16px; color: var(--texto-marron); min-width: 22px; text-align: center; }
.linea-quitar {
  margin-left: 2px;
  font-weight: 800;
  font-size: 12px;
  color: var(--rojo);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  padding: 6px 4px;
}
.linea-total {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 21px;
  color: var(--rojo);
  white-space: nowrap;
  align-self: flex-start;
}

/* --- Carrito vacío --------------------------------------------------------- */
.carrito-vacio {
  text-align: center;
  padding: 40px 20px;
  background: rgba(253, 246, 228, 0.06);
  border: 2px dashed rgba(253, 246, 228, 0.25);
  border-radius: 20px;
}
.cv-emoji { font-size: 50px; }
.cv-txt {
  font-family: var(--f-mano);
  font-size: 18px;
  color: rgba(253, 246, 228, 0.8);
  margin: 12px 0 20px;
}
.carrito-vacio .btn-pill { display: inline-block; flex: 0 0 auto; }

/* --- Formulario ------------------------------------------------------------ */
.ficha {
  margin-top: 28px;
  background: var(--crema);
  border-radius: 20px;
  padding: 22px 18px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
  border-bottom: 7px solid var(--verde-claro);
}
.ficha-titulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 27px;
  color: var(--texto-marron);
}
.ficha-sub {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--texto-suave);
  margin: 4px 0 20px;
}

.ficha-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo-etiqueta {
  font-weight: 900;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8a5a2c;
}
.campo input,
.campo textarea {
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: 16px;             /* 16px evita que el iPhone haga zoom al escribir */
  color: var(--texto-marron);
  background: var(--crema-2);
  border: 3px solid var(--crema-borde);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  width: 100%;
}
.campo textarea { resize: vertical; }
.campo input:focus,
.campo textarea:focus { border-color: var(--naranja); }
.campo input.con-error,
.campo textarea.con-error { border-color: var(--rojo); background: #fff2f0; }

.campo-error {
  font-weight: 800;
  font-size: 12px;
  color: var(--rojo);
  min-height: 0;
}
.campo-error:empty { display: none; }

.grupo-opciones { margin-bottom: 18px; }
.grupo-opciones .campo-etiqueta { display: block; margin-bottom: 9px; }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion {
  font-weight: 900;
  font-size: 13.5px;
  color: #8a5a2c;
  background: var(--crema-2);
  border: 3px solid var(--crema-borde);
  padding: 11px 18px;
  border-radius: 50px;
  cursor: pointer;
}
#opciones-entrega .opcion.activa { color: var(--crema); background: var(--verde);   border-color: #2f7a3c; box-shadow: 0 4px 0 #2f7a3c; }
#opciones-pago    .opcion.activa { color: var(--crema); background: var(--naranja); border-color: #b9821f; box-shadow: 0 4px 0 #b9821f; }

/* --- Resumen --------------------------------------------------------------- */
.resumen-marco {
  background: linear-gradient(160deg, #7d5130, #4a2c17 60%, #6b4527);
  padding: 12px;
  border-radius: 14px;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.5);
}
.resumen {
  background: radial-gradient(120% 90% at 50% 0%, #262019 0%, #17130f 70%);
  border-radius: 8px;
  padding: 22px 18px;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
}
.resumen-titulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 28px;
  color: var(--amarillo-2);
  text-align: center;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}
.resumen-lineas { display: flex; flex-direction: column; gap: 10px; }
.resumen-lineas > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 14.5px;
  color: rgba(253, 246, 228, 0.86);
}
.resumen-lineas dt, .resumen-lineas dd { margin: 0; }

.resumen-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--f-titulo);
  font-weight: 700;
}
.resumen-total span:first-child { font-size: 24px; color: var(--crema); }
.resumen-total span:last-child  { font-size: 32px; color: var(--amarillo-2); }

.btn-enviar {
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 900;
  font-size: 15px;
  color: #0e2e17;
  background: var(--verde-claro);
  border: 4px solid var(--verde-borde);
  padding: 15px 16px;
  border-radius: 60px;
  cursor: pointer;
  box-shadow: 0 8px 0 var(--verde-borde);
}
.btn-enviar:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 3px 0 var(--verde-borde); }
.btn-enviar:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: 0 8px 0 var(--verde-borde); }

.btn-agregar-mas {
  display: block;
  width: 100%;
  margin-top: 11px;
  text-align: center;
  font-weight: 900;
  font-size: 13.5px;
  color: var(--amarillo-2);
  background: transparent;
  border: 3px solid rgba(255, 210, 87, 0.5);
  padding: 12px 16px;
  border-radius: 60px;
  cursor: pointer;
}
.btn-agregar-mas:hover { color: var(--amarillo-2); border-color: var(--amarillo-2); }

.resumen-lema {
  font-family: var(--f-mano);
  font-size: 14px;
  color: var(--amarillo);
  text-align: center;
  margin-top: 18px;
}


/* =============================================================================
   AVISOS
   ============================================================================= */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translate(-50%, 20px);
  z-index: 60;
  max-width: calc(100% - 32px);
  background: var(--negro-suave);
  color: var(--crema);
  border: 3px solid var(--amarillo);
  border-radius: 50px;
  padding: 11px 20px;
  font-weight: 800;
  font-size: 13.5px;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* Recordatorio que solo aparece mientras falten datos en js/config.js */
.aviso-config {
  position: relative;
  z-index: 100;
  background: #ffdd57;
  color: #4a3200;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 40px 8px 14px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.aviso-config button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  font-size: 15px;
  cursor: pointer;
  color: inherit;
  padding: 4px 8px;
}


/* =============================================================================
   TABLET · a partir de 640 px
   ============================================================================= */
@media (min-width: 640px) {
  .hero { padding: 40px 20px 28px; }
  .pizarra-marco { padding: 18px; }
  .pizarra { padding: 46px 26px 48px; }
  .pizarra-borde-1 { inset: 14px; }
  .pizarra-borde-2 { inset: 20px; }
  .hero-logo { width: 250px; }
  .hero-lema { font-size: 23px; }
  .hero-sub { font-size: 17px; }
  .btn-carta { padding: 19px 48px; }
  .hero-acciones { gap: 14px; }
  .btn-pill { flex: 0 0 auto; font-size: 15px; padding: 13px 26px; }

  .cinta-texto { font-size: 22px; }

  /* auto-fit: se acomodan solas a la cantidad de fotos que haya, sin dejar
     huecos vacíos si algún día son 2 o 4 en vez de 3 */
  .polaroids { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; padding: 46px 20px 14px; }
  .polaroid-foto { height: 210px; }

  .visitanos { padding: 44px 20px 58px; }
  .tarjetas-info { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .tarjeta-info { padding: 24px; }

  .barra { padding: 12px 20px; }
  .barra-marca { order: 0; flex: 0 1 auto; margin-bottom: 0; }
  .barra-marca img { width: 54px; height: 47px; }
  .barra-marca span { font-size: 26px; }
  .btn-barra { font-size: 14px; padding: 10px 20px; }

  .categorias-pista { padding: 2px 20px 6px; }
  .cat-tab { font-size: 14px; padding: 13px 17px; }
  .cat-tab .cat-emoji { font-size: 25px; }

  .carta-cuerpo { padding: 38px 20px 140px; }
  .categoria-cabecera { gap: 16px; }
  .categoria-icono { width: 62px; height: 62px; font-size: 30px; }
  .categoria-textos p { font-size: 17px; }
  .grupo-label { font-size: 23px; padding: 5px 22px; }

  .platos { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
  .plato-foto { height: 176px; }
  .plato-nombre { font-size: 25px; }

  .carrito-cuerpo { padding: 40px 20px 80px; }
  .linea { padding: 14px; gap: 16px; }
  .linea-foto { width: 84px; height: 84px; }
  .linea-info h4 { font-size: 23px; }
  .linea-total { font-size: 25px; align-self: center; }

  .ficha { padding: 26px; }
  .ficha-fila { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
  .resumen { padding: 26px 22px; }
}


/* =============================================================================
   ESCRITORIO · a partir de 960 px
   ============================================================================= */
@media (min-width: 960px) {
  .tarjetas-info { grid-template-columns: repeat(3, 1fr); }

  /* Las categorías dejan de deslizarse y se acomodan en cuadrícula */
  .categorias-pista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    overflow: visible;
    max-width: var(--ancho);
    margin: 0 auto;
  }
  .cat-tab { max-width: none; }

  /* El pedido pasa a dos columnas con el resumen fijo */
  .carrito-cuerpo { flex-direction: row; align-items: flex-start; gap: 28px; }
  .carrito-col-izq { flex: 1.35; min-width: 0; }
  .carrito-col-der { flex: 1; max-width: 380px; position: sticky; top: 110px; }

  /* En escritorio la barra flotante estorba menos si se acomoda a la derecha */
  .barra-flotante { left: auto; right: 24px; transform: none; }
}