/* Componentes del sitio. Todos los colores salen de tokens.css. */

/* ---------- iconos ---------- */
.icono { width: 22px; height: 22px; display: block; }

/* ---------- botones ---------- */
.boton {
  display: inline-block;
  padding: var(--e2) var(--e4);
  border: 0;
  border-radius: var(--radio);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-peque);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
.boton--primario { background: var(--coral-boton); color: var(--blanco); }
.boton--primario:hover { background: var(--coral-boton-hover); color: var(--blanco); }
.boton--verde { background: var(--verde); color: var(--blanco); }
.boton--verde:hover { background: var(--oliva); color: var(--blanco); }
.boton--contorno {
  background: transparent;
  color: var(--marron);
  border: var(--borde-fino);
}
.boton--contorno:hover { background: var(--marfil); color: var(--marron); }

/* ---------- cabecera ---------- */
.cabecera {
  background: var(--crema);
  border-bottom: var(--borde-fino);
  position: sticky;
  top: 0;
  z-index: 20;
}
.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding-block: var(--e3);
}
.logo { text-decoration: none; display: block; }
.logo__nombre {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marron);
}
.logo__descriptor {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gris);
}

.cabecera__hamburguesa {
  background: none;
  border: 0;
  color: var(--marron);
  cursor: pointer;
  padding: var(--e2);
  order: -1;
}
.cabecera__acciones { display: flex; align-items: center; gap: var(--e3); }
.cabecera__cta { display: none; }

.accion { position: relative; color: var(--marron); display: block; }
.accion:hover { color: var(--coral-texto); }
.accion__contador {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--coral-boton);
  color: var(--blanco);
  font-size: 10px;
  line-height: 17px;
  text-align: center;
}

/* menú: oculto en móvil hasta que se abre */
.menu {
  position: fixed;
  inset: 0;
  background: var(--crema);
  padding: var(--e6) var(--e3) var(--e3);
  transform: translateX(-100%);
  transition: transform .2s ease;
  z-index: 30;
  overflow-y: auto;
}
.menu[data-abierto="true"] { transform: translateX(0); }
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__item { border-bottom: var(--borde-fino); }
.menu__enlace {
  display: block;
  padding: var(--e3) 0;
  font-size: var(--t-peque);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marron);
  text-decoration: none;
}
.menu__enlace--activo { color: var(--coral-texto); }
.submenu { list-style: none; margin: 0 0 var(--e3); padding: 0 0 0 var(--e3); }
.submenu__enlace {
  display: block;
  padding: var(--e2) 0;
  font-size: var(--t-peque);
  color: var(--gris);
  text-decoration: none;
}
.submenu__enlace:hover { color: var(--coral-texto); }

/* ---------- migas ---------- */
.migas { padding-block: var(--e3); }
.migas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  font-size: var(--t-peque);
  color: var(--gris);
}
.migas__item + .migas__item::before { content: "\203A"; margin-right: var(--e2); color: var(--borde); }
.migas a { color: var(--gris); text-decoration: none; }
.migas a:hover { color: var(--coral-texto); }

/* ---------- rejilla y tarjetas ---------- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tarjeta {
  background: var(--blanco);
  border: var(--borde-fino);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tarjeta__enlace { text-decoration: none; color: inherit; display: block; }
.tarjeta__imagen {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--marfil);
  display: block;
}
.tarjeta__cuerpo { padding: var(--e3); text-align: center; }
.tarjeta__nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.02rem;
  color: var(--marron);
  margin: 0 0 var(--e1);
}
.tarjeta__precio { color: var(--gris); font-size: var(--t-peque); margin: 0 0 var(--e3); }
.tarjeta__favorito {
  position: absolute;
  top: var(--e2);
  right: var(--e2);
  background: var(--blanco);
  border: var(--borde-fino);
  border-radius: 50%;
  padding: 6px;
  color: var(--coral-texto);
  cursor: pointer;
  line-height: 0;
}
.tarjeta__favorito[aria-pressed="true"] { background: var(--rosa-suave); }

/* ---------- franja de garantías ---------- */
.franja { background: var(--rosa-suave); padding-block: var(--e4); }
.franja__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e4);
}
.franja__item { display: flex; gap: var(--e3); align-items: flex-start; }
.franja__icono { color: var(--coral-texto); flex-shrink: 0; }
.franja__titulo {
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marron);
  margin: 0 0 2px;
}
.franja__texto { font-size: var(--t-peque); color: var(--gris); margin: 0; }

/* ---------- filtros ---------- */
.filtros { margin-bottom: var(--e4); }
.filtros__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.filtros__enlace {
  display: inline-block;
  padding: 6px var(--e3);
  border: var(--borde-fino);
  border-radius: 999px;
  font-size: var(--t-peque);
  color: var(--gris);
  text-decoration: none;
}
.filtros__enlace--activo { background: var(--verde); color: var(--crema); border-color: var(--verde); }

/* ---------- pie ---------- */
.pie { background: var(--verde); color: var(--crema); margin-top: var(--e6); }
.pie__interior { display: grid; gap: var(--e4); padding-block: var(--e5); }
.pie__marca {
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 var(--e1);
}
.pie__lema, .pie__texto { font-size: var(--t-peque); margin: 0; line-height: 1.8; }
.pie__titulo {
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 var(--e2);
  color: var(--crema);
}
.pie a { color: var(--crema); }
.pie a:hover { color: var(--rosa-suave); }
.pie__legal {
  border-top: 1px solid var(--oliva);
  padding-block: var(--e3);
  font-size: var(--t-micro);
}
.pie__legal p { margin: 0; }

/* El anillo de foco verde sería invisible sobre el pie verde. */
.pie :focus-visible { outline-color: var(--rosa-suave); }

/* ---------- hero ---------- */
.hero { padding-block: var(--e5) var(--e4); text-align: center; }
.hero .entradilla { margin-inline: auto; max-width: 46ch; }
.hero .boton { margin-top: var(--e4); }

@media (min-width: 768px) {
  .hero { padding-block: var(--e6) var(--e5); }
}

/* ---------- secciones ---------- */
.seccion { padding-block: var(--e5); }
.seccion__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-grande);
  color: var(--marron);
  text-align: center;
  margin: 0 0 var(--e4);
  font-weight: 400;
}
.seccion--alterna { background: var(--marfil); }

@media (min-width: 768px) {
  .rejilla { grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
  .franja__lista { grid-template-columns: repeat(3, 1fr); }
  .pie__interior { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .cabecera__hamburguesa { display: none; }
  .cabecera__cta { display: inline-block; }
  .rejilla { grid-template-columns: repeat(4, 1fr); }
  .franja__lista { grid-template-columns: repeat(4, 1fr); }
  .pie__interior { grid-template-columns: repeat(4, 1fr); }

  .menu {
    position: static;
    transform: none;
    background: none;
    padding: 0;
    overflow: visible;
  }
  .menu__lista { display: flex; gap: var(--e4); }
  .menu__item { border: 0; position: relative; }
  .menu__enlace { padding: var(--e2) 0; }

  .submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    background: var(--crema);
    border: var(--borde-fino);
    border-radius: var(--radio);
    padding: var(--e2) var(--e3);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
    box-shadow: 0 8px 24px -14px rgba(74, 59, 53, .4);
  }
  .menu__item--con-submenu:hover .submenu,
  .menu__item--con-submenu:focus-within .submenu {
    opacity: 1;
    visibility: visible;
  }
}

/* ---------- ficha de producto ---------- */
.ficha { display: grid; gap: var(--e4); }
.ficha__imagen {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--borde-fino);
  border-radius: var(--radio);
  background: var(--marfil);
}
.ficha__nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--t-grande);
  font-weight: 400;
  color: var(--marron);
  margin: 0 0 var(--e2);
}
.ficha__precio { font-size: var(--t-medio); color: var(--coral-texto); margin: 0 0 var(--e3); }
.ficha__descripcion { color: var(--gris); margin-bottom: var(--e4); }
.ficha__variantes { border: 0; padding: 0; margin: 0 0 var(--e4); }
.ficha__etiqueta {
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marron);
  padding: 0;
  margin-bottom: var(--e2);
}
.variante {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border: var(--borde-fino);
  border-radius: var(--radio);
  margin-bottom: var(--e2);
  cursor: pointer;
}
.variante:has(input:checked) { border-color: var(--coral-boton); background: var(--marfil); }
.variante__nombre { flex: 1; color: var(--marron); }
.variante__precio { color: var(--gris); }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.ficha__ocasiones { font-size: var(--t-peque); color: var(--gris); }

@media (min-width: 768px) {
  .ficha { grid-template-columns: 1fr 1fr; gap: var(--e5); align-items: start; }
}

/* ---------- utilidades ---------- */
/* Visible para lectores de pantalla, no para la vista. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.aviso {
  background: var(--marfil);
  border: var(--borde-fino);
  border-radius: var(--radio);
  padding: var(--e3);
  color: var(--gris);
  font-size: var(--t-peque);
}

/* ---------- botón flotante de WhatsApp ---------- */
.flotante {
  position: fixed;
  right: var(--e3);
  bottom: var(--e3);
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--crema);
  box-shadow: 0 6px 18px -6px rgba(74, 59, 53, .5);
}
.flotante:hover { background: var(--oliva); color: var(--crema); }
.flotante .icono { width: 28px; height: 28px; }

/* ---------- hueco de imagen mientras no hay fotografías ---------- */
.tarjeta__imagen--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e3);
  text-align: center;
  font-family: var(--fuente-titulo);
  font-size: var(--t-peque);
  color: var(--gris);
  background: var(--marfil);
}
.tarjeta__anadir { margin: 0 var(--e3) var(--e3); text-align: center; }

/* ---------- lista de pedido ---------- */
.lista-pedido { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.lista-pedido__linea {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  align-items: center;
  justify-content: space-between;
  padding: var(--e3) 0;
  border-bottom: var(--borde-fino);
}
.lista-pedido__datos { display: flex; flex-direction: column; gap: 2px; min-width: 55%; }
.lista-pedido__nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.02rem;
  color: var(--marron);
  text-decoration: none;
}
.lista-pedido__nombre:hover { color: var(--coral-texto); }
.lista-pedido__variante,
.lista-pedido__unitario { font-size: var(--t-micro); color: var(--gris); }
.lista-pedido__controles { display: flex; align-items: center; gap: var(--e3); margin-left: auto; }
.lista-pedido__cantidad {
  width: 4rem;
  padding: 6px var(--e2);
  border: var(--borde-fino);
  border-radius: var(--radio);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-peque);
  color: var(--marron);
  background: var(--blanco);
}
.lista-pedido__subtotal { color: var(--marron); font-size: var(--t-peque); min-width: 5rem; text-align: right; }
.lista-pedido__quitar {
  background: none;
  border: 0;
  color: var(--gris);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}
.lista-pedido__quitar:hover { color: var(--coral-texto); }
.lista-pedido__total { font-size: var(--t-peque); color: var(--marron); margin-bottom: var(--e4); }
.lista-pedido__total strong { font-size: var(--t-medio); color: var(--coral-texto); }
.lista-pedido__nota { color: var(--gris); font-size: var(--t-micro); }
.lista-pedido__acciones { display: flex; gap: var(--e2); margin-bottom: var(--e5); }

/* ---------- formulario ---------- */
.formulario { max-width: 34rem; }
.formulario__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-medio);
  font-weight: 400;
  color: var(--marron);
  margin: 0 0 var(--e3);
}
.campo { margin: 0 0 var(--e3); display: flex; flex-direction: column; gap: 6px; }
.campo__etiqueta {
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marron);
}
.campo__control {
  padding: var(--e2) var(--e3);
  border: var(--borde-fino);
  border-radius: var(--radio);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-peque);
  color: var(--marron);
  background: var(--blanco);
  width: 100%;
}
.campo__control:focus-visible { border-color: var(--coral-boton); }
.campo__ayuda { font-size: var(--t-micro); color: var(--gris); }
.formulario__error {
  background: var(--rosa-suave);
  border-radius: var(--radio);
  padding: var(--e2) var(--e3);
  color: var(--coral-boton-hover);
  font-size: var(--t-peque);
  margin: 0 0 var(--e3);
}
.formulario__enviar { display: inline-flex; align-items: center; gap: var(--e2); }
.formulario__nota { font-size: var(--t-micro); color: var(--gris); margin-top: var(--e2); }

@media (min-width: 768px) {
  .pedido { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--e5); align-items: start; }
  .pedido > .lista-pedido,
  .pedido > .lista-pedido__total,
  .pedido > .lista-pedido__acciones { grid-column: 1; }
  .pedido > .formulario { grid-column: 2; grid-row: 1 / span 3; }
  .flotante { right: var(--e4); bottom: var(--e4); width: 58px; height: 58px; }
}

/* ---------- páginas de contenido ---------- */
.prosa { max-width: 62ch; margin-bottom: var(--e5); }
.prosa p { color: var(--gris); margin: 0 0 var(--e3); }
.prosa .entradilla { color: var(--marron); }
.cierre { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }

.pasos {
  list-style: none;
  margin: 0 0 var(--e5);
  padding: 0;
  display: grid;
  gap: var(--e4);
  counter-reset: paso;
}
.pasos__paso { position: relative; padding-left: calc(var(--e5) + var(--e1)); }
.pasos__numero {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rosa-suave);
  color: var(--coral-texto);
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
}
.pasos__titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--marron);
  margin: 0 0 var(--e1);
}
.pasos__texto { font-size: var(--t-peque); color: var(--gris); margin: 0; }

.servicio {
  background: var(--blanco);
  border: var(--borde-fino);
  border-radius: var(--radio);
  padding: var(--e4);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.servicio__icono { color: var(--coral-texto); width: 26px; height: 26px; }
.servicio__titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--marron);
  margin: 0;
}
.servicio__texto { font-size: var(--t-peque); color: var(--gris); margin: 0; flex: 1; }
.servicio__enlace {
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral-texto);
  text-decoration: none;
}
.servicio__enlace:hover { color: var(--coral-boton-hover); }

.plan {
  background: var(--blanco);
  border: var(--borde-fino);
  border-radius: var(--radio);
  padding: var(--e4);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.plan--destacado { border-color: var(--coral-boton); }
.plan__cinta {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--coral-boton);
  color: var(--blanco);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px var(--e3);
  border-radius: 999px;
  margin: 0;
}
.plan__nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--marron);
  margin: 0;
}
.plan__ritmo { color: var(--gris); font-size: var(--t-peque); margin: 0; }
.plan__nota { color: var(--gris); font-size: var(--t-micro); margin: 0 0 var(--e2); flex: 1; }

.contacto { display: grid; gap: var(--e4); margin-bottom: var(--e4); }
.contacto__titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marron);
  margin: 0 0 var(--e2);
}
.contacto__icono { color: var(--coral-texto); width: 20px; height: 20px; }
.contacto__texto { font-size: var(--t-peque); color: var(--gris); line-height: 1.9; margin: 0; font-style: normal; }
.contacto__texto a { color: var(--coral-texto); }

@media (min-width: 768px) {
  .pasos { grid-template-columns: repeat(2, 1fr); gap: var(--e4) var(--e5); }
  .contacto { grid-template-columns: repeat(2, 1fr); }
  .rejilla--servicios { grid-template-columns: repeat(2, 1fr); }
  .rejilla--planes { grid-template-columns: repeat(2, 1fr); gap: var(--e5) var(--e4); }
}

@media (min-width: 1024px) {
  .pasos { grid-template-columns: repeat(4, 1fr); }
  .contacto { grid-template-columns: repeat(4, 1fr); }
  .rejilla--servicios { grid-template-columns: repeat(3, 1fr); }
  .rejilla--planes { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- galería de la ficha ---------- */
.galeria {
  list-style: none;
  margin: var(--e2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e2);
}
.galeria__imagen {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio);
  border: var(--borde-fino);
  background: var(--marfil);
  display: block;
}